گروه لیست

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

لیست در بوت استرپ
مثال پایه
  • اخبار
  • پیام ها
  • مناسبت ها
  • گروه ها
  • صفحات
<ul class="list-group">
  <li class="list-group-item">News Feed</li>
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
آیتم فعال
<div class="list-group"><a class="list-group-item list-group-item-action active" href="#">News Feed</a>
  <a class="list-group-item list-group-item-action" href="#">Messages</a>
  <a class="list-group-item list-group-item-action" href="#">Events</a>
  <a class="list-group-item list-group-item-action" href="#">Groups</a>
  <a class="list-group-item list-group-item-action disabled" href="#">Pages</a>
</div>
فلاش گروه را فهرست کنید
  • پیام ها
  • مناسبت ها
  • گروه ها
  • صفحات
<ul class="list-group list-group-flush">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
لیست گروه با نشان
  • پیام ها14
  • مناسبت ها2
  • گروه ها1
  • صفحات9
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-soft-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-soft-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-soft-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-soft-primary rounded-pill">9</span></li>
</ul>
لیست پس زمینه گروه
  • مثال با پس زمینه
  • یک آیتم ساده در لیست اولیه
  • یک آیتم گروهی ساده ثانویه
  • یک آیتم ساده لیست موفقیت در گروه
  • یک آیتم گروهی لیست خطر ساده
  • یک آیتم گروهی لیست هشدار ساده
  • یک آیتم گروهی لیست اطلاعات ساده
  • یک آیتم گروهی لیست نور ساده
  • یک آیتم ساده گروه لیست تاریک
<ul class="list-group">
  <li class="list-group-item py-3">Example with background</li>
  <li class="list-group-item list-group-item-primary py-3">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary py-3">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success py-3">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger py-3">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning py-3">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info py-3">A simple info list group item</li>
  <li class="list-group-item list-group-item-light py-3">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark py-3">A simple dark list group item</li>
</ul>
لیست گروه با پیوند
<div class="list-group"><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4 light active" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1 text-white">List group · Bootstrap</h5><small>3 days ago</small>
    </div>
    <p class="mb-1">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. </p><small> The most basic list group</small>
  </a><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is list group?</h5><small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Creating List Groups with Bootstrap. The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.</p><small class="text-muted">Donec id elit non mi porta.</small>
  </a><a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is ordered list?</h5><small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.</p><small class="text-muted">An ordered list</small>
  </a></div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی