لیست پایین Bootstrap 5

لیست پایین پایه

منوی پایین یک منوی قابل تغییر است که به کاربر اجازه می‌دهد از لیست پیش‌تعیین‌شده انتخاب کند:

مثال

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    دکمه پایین
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">لینک 1</a></li>
    <li><a class="dropdown-item" href="#">لینک 2</a></li>
    <li><a class="dropdown-item" href="#">لینک 3</a></li>
  </ul>
</div>

خود کو چھپائیں

مثال توضیحی

.dropdown نشانگر منوی پایین است، استفاده کنید.

اگر آپ میخواهید منوی پایین را باز کنید، لطفاً از نوعی که .dropdown-toggle کلاس اور کلاس و ویلیئی کا یا لنکس کا data-toggle="dropdown"

کی اپنی ویلیئی کا یا لنکس کا .dropdown-menu کلاس کو <div> عناصر، واقعی طور پر ڈرپ دونوں سمت سے لیست بنانے کے لئے. .dropdown-item کلاس کو ڈرپ دونوں سمت سے لیست میں ہر عناصر پر اضافہ کریں (لنکس یا بٹن).

لیست کی ناگا

.dropdown-divider کلاس کو ڈرپ دونوں سمت سے لیست میں لنکس کو افقی ناگا اور نیم دایره شکل سے الگ الگ کرنا ہے:

مثال

<li><hr class="dropdown-divider"></hr></li>

خود کو چھپائیں

لیست کی عنوانات

.dropdown-header کلاس کو ڈرپ دونوں سمت سے لیست میں عنوانات میں شامل کیا جائے گا:

مثال

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

خود کو چھپائیں

ممنوع اور فعال ویلیئی

آپ کو .active کلاس کو مخصوص ڈرپ دونوں سمت سے ویلیئی کو باصلاحیت بنائیں (کھلاڑی پس منظر رنگ شامل کیا جائے گا).

اگر آپ چاہتے ہیں کہ ڈرپ دونوں سمت سے کسی ویلیئی کو منع کریں تو، .disabled کلاس کو (تقریباً شفاف سورج سورج کا رنگ اور "no-parking-sign" آئیکن) حاصل کیا جائے گا.

مثال

<li><a class="dropdown-item" href="#">عادی</a></li>
<li><a class="dropdown-item active" href="#">فعال</a></li>
<li><a class="dropdown-item disabled" href="#">ممنوع</a></li>

خود کو چھپائیں

لیست کی پوزیشن

آپ وہیں سے بھی، .dropend یا .dropstart کلاس کو ڈرپ دونوں سمت سے عناصر پر اضافہ کریں، تاکہ "dropend" یا "dropstart" لیست بنائی جائے۔ لطفاً یاد رکھیں کہ نیچے کا نقش یا چینا کا نقش خودکار طریقے سے شامل کیا جائے گا:

Dropright

<div class="dropdown dropend">

خود کو چھپائیں

Dropleft

<div class="dropdown dropstart">

خود کو چھپائیں

دائیں سمت سے ڈرپ دونوں سمت سے لیست

اگر آپ چاہتے ہیں کہ ڈرپ دونوں سمت سے بجائے دائیں سمت سے کھول جائے تو، .dropdown-menu-end کلاس کو بغیر کسی عناصر پر .dropdown-menu عناصر:

مثال

<div class="dropdown-menu dropdown-menu-end">

خود کو چھپائیں

اپ سمت سے لیست

اگر آپ چاہتے ہیں کہ ڈرپ دونوں سمت سے بجائے اوپ سمت سے کھول جائے تو، کلاس="dropdown" کا <div> عناصر کو تبدیل کریں "dropup"

مثال

<div class="dropup">

خود کو چھپائیں

ڈرپ داؤن متن

.dropdown-item-text کلاس، پائیدار فورم کے لئے صرف متن کے لئے استعمال کی جاتی ہیں، یا لینک کے لئے دفعاتی لینک کا انداز دیتی ہیں。

مثال

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">لینک 1</a></li>
  <li><a class="dropdown-item" href="#">لینک 2</a></li>
  <li><a class="dropdown-item" href="#">لینک 3</a></li>
  <li><a class="dropdown-item-text" href="#">لینک متن</a></li>
  <li><span class="dropdown-item-text">صرف متن</span></li>
</ul>

خود کو چھپائیں

گروپ بٹن اور ڈرپ داؤن لسٹ

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">داجونگ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">شاومی</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">موبائل فون</a></li>
      <li><a class="dropdown-item" href="#">تابلت کامپیوٹر</a></li>
    </ul>
  </div>
</div>

خود کو چھپائیں

وراٹی گروپ بٹن اور ڈرپ داؤن لسٹ

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">داجونگ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">شاومی</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">موبائل فون</a></li>
      <li><a class="dropdown-item" href="#">تابلت کامپیوٹر</a></li>
    </ul>
  </div>
</div>

خود کو چھپائیں