آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مثال ساده 

اساسی ترین لیست گروه یک فهرست غیر ارادی با آیتم های لیست و کلاس های مناسب است. بر اساس آن با گزینه هایی که دنبال می کنید، یا با CSS خودتان در صورت نیاز، آن را بسازید.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

 

 <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>

 

آیتم های فعال 

اضافه کردن فعال به یک لیست گروه مورد برای نشان دادن انتخاب فعال فعلی.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

 

 <ul class="list-group"> <li class="list-group-item active">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>

 

آیتم های غیر فعال 

افزودن disabled. به لیست لیست گروهی برای نمایش آن غیرفعال شده است. توجه داشته باشید که برخی از عناصر با disabled. نیز نیاز به جاوا اسکریپت دارند تا رویدادهای کلیک خود را کاملا غیر فعال کنند.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

 

 <ul class="list-group"> <li class="list-group-item disabled">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>

 

لینک ها و دکمه ها 

استفاده از <a> یا <دکمه> برای ایجاد اقلام گروه لیست قابل اجرا با شناور، غیرفعال، و حالت های فعال با اضافه کردنlist-group-item-action.. ما این کلاسهای pseudo را جداگانه برای اطمینان از اینکه گروههای لیست ساخته شده از عناصر غیر تعاملی یک دکمه یا شیر را ارائه نمی دهند.

مطمئن شوید که کلاسهای استاندارد btn. را در اینجا استفاده نکنید.

 <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> </div>

با استفاده از button> s>، می توانید از ویژگی غیرفعال شده به جای کلاس غیرفعال استفاده کنید. متأسفانه، <a> از ویژگی غیرفعال پشتیبانی نمی کند.

 <div class="list-group"> <button type="button" class="list-group-item list-group-item-action active"> Cras justo odio </button> <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button> <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button> <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button> </div>

 

فلاش 

اضافه کردنlist-group-flush. برای حذف برخی از مرزها و گوشه های گرد برای رندر موارد لیست گروه از لبه به سمت لبه در یک کانال پدر و مادر است.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

 

 <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>

 

کلاس های متنی 

از کلاسهای متنی استفاده کنید تا آیتم های لیست سبک را با پس زمینه و رنگ مشخص کنید.

  • Dapibus ac facilisis in
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
  • This is a light list group item
  • This is a dark list group item

 

 <ul class="list-group"> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-primary">This is a primary list group item</li> <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li> <li class="list-group-item list-group-item-success">This is a success list group item</li> <li class="list-group-item list-group-item-danger">This is a danger list group item</li> <li class="list-group-item list-group-item-warning">This is a warning list group item</li> <li class="list-group-item list-group-item-info">This is a info list group item</li> <li class="list-group-item list-group-item-light">This is a light list group item</li> <li class="list-group-item list-group-item-dark">This is a dark list group item</li> </ul>

کلاسهای متنی همچنین با list-group-item-action. کار میکنند.. توجه داشته باشید علاوه بر این از سبک های شناور اینجا در مثال قبلی وجود ندارد. همچنین پشتیبانی active. است؛ درخواست آن را برای نشان دادن انتخاب فعال در یک مورد لیست گروه متنی.

 <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a> </div>

 

با مدالها 

اضافه کردن مدالها به هر مورد گروه لیست برای نشان دادن شمارش، فعالیت و غیره خوانده نشده با کمک برخی از خدمات.

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1

 

 <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> </ul>

 

محتوای دلخواه 

تقریبا هر HTML در داخل، حتی برای گروه لیست لینک مانند یکی در زیر، با کمک ابزار flexbox اضافه کنید.

 <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> </div>

 

رفتار جاوا اسکریپت

از تب افزونه جاوا اسکریپت استفاده کنید - شامل آن به صورت جداگانه یا از طریق فایل compiled file bootstrap.js - برای گسترش لیست گروه ما برای ایجاد صفحات tabbable از محتویات محلی استفاده کنید.

 <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div>

 

استفاده از ویژگی های داده 

شما می توانید ناوبری گروه لیست بدون نوشتن هر گونه جاوا اسکریپت را با به سادگی با مشخص کردن data-toggle = "list" یا بر روی یک عنصر فعال کنید. از این ویژگیهای داده در لیست گروهها استفاده کنید.

 <!-- List group --> <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> </div> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div>

 

با استفاده از جاوا اسکریپت

فعال کردن item listbable از طریق جاوا اسکریپت

 $('#myList a').on('click', function (e) { e.preventDefault() $(this).tab('show') })

شما می توانید آیتم لیست فرد را به چندین روش فعال کنید:

 $('#myList a[href="#profile"]').tab('show') // Select tab by name $('#myList a:first-child').tab('show') // Select first tab $('#myList a:last-child').tab('show') // Select last tab $('#myList a:nth-child(3)').tab('show') // Select third tab

 

اثر محو شدن 

برای ایجاد پنل زبانه ها محو شدن، اضافه کردن به هر tab. اولین صفحه برگه نیز باید نمایش داده شود تا مطالب اولیه قابل مشاهده باشد.

 <div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> <div class="tab-pane fade" id="profile" role="tabpanel">...</div> <div class="tab-pane fade" id="messages" role="tabpanel">...</div> <div class="tab-pane fade" id="settings" role="tabpanel">...</div> </div>

 

متد ها

$().tab

یک عنصر فهرست لیست و محتوا محتوا را فعال می کند. برگه باید یک هدف داده یا یک href داشته باشد و یک گره کانتینر را در DOM هدف قرار دهد.

 <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> </div> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div> <script> $(function () { $('#myList a:last-child').tab('show') }) </script>

 

.tab(‘show’)

آیتم لیست داده شده را انتخاب می کند و کادر مرتبط آن را نشان می دهد. هر آیتم دیگری که قبلا انتخاب شد انتخاب نشده و صفحه مرتبط با آن پنهان است. قبل از اینکه پنجره نشانگر در واقع نشان داده شده فراخوانده شود.

 $('#someListItem').tab('show')

 

مناسبت ها 

هنگام نمایش یک برگه جدید، حوادث در دستورالعمل زیر قرار میگیرند:

1-hide.bs.tab

2-show.bs.tab

3-hidden.bs.tab

4-shown.bs.tab

اگر هیچ زبانه در حال حاضر فعال نبود، رویدادهای hide.bs.tab و hidden.bs.tab خارج نخواهند شد.

Event type Description
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
 $('a[data-toggle="list"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab })