Listo dropdown Bootstrap 5

Kabara dropdown ƙarƙashin

Dropdown menu wani ɗan ɗauka ɗauka, wanda ke ɗaukawa ɗan ɗauka don yadda ɗan ɗauka zaɗaɗa:

shafin

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Kudu dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">matan 1</a></li>
    <li><a class="dropdown-item" href="#">matan 2</a></li>
    <li><a class="dropdown-item" href="#">matan 3</a></li>
  </ul>
</div>

sake samun samun

Yanarɗin tattabali

.dropdown ka ɗauka ɗan ɗauka dropdown.

Ga zaɗaɗa shi, kamar yadda, kuma yadda a ɗauka .dropdown-toggle الصفتي class و data-toggle="dropdown" الصفة إلى الزر أو الرابط.

أضف .dropdown-menu الصفتي class إلى <div> العنصر، يمكن بناء القائمة المنسدلة به. ثم أضف .dropdown-item أضف صفتي class إلى كل عنصر في القائمة المنسدلة (رابط أو زر).

خط الفصل في القائمة المنسدلة

.dropdown-divider الصفتي class لتمييز الروابط في القائمة المنسدلة بجملة فرقعة أفقية:

shafin

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

sake samun samun

عناوين القائمة المنسدلة

.dropdown-header الصفتي class لإنشاء عناوين في القائمة المنسدلة:

shafin

<li><h5 class="dropdown-header">عنوان القائمة المنسدلة 1</h5></li>

sake samun samun

العناصر المُعطلة والمفعلة

استخدم .active الصفتي class لتمييز العنصر المحدد في القائمة المنسدلة (تُضيف لون الخلفية الأزرق).

لإعطال عنصر معين في القائمة المنسدلة، استخدم .disabled الصفتي class (تُظهر لون النص الفاتح عند التمرير فوقه ورمز "no-parking-sign").

shafin

<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>

sake samun samun

تحريك القائمة المنسدلة

يمكنك أيضًا من خلال .dropend أو .dropstart أضف صفتي class إلى عنصر القائمة المنسدلة لإنشاء قائمة "dropend" أو "dropstart". يُضيف رمز الإشارة/السهم تلقائيًا:

القائمة المنسدلة إلى اليمين

<div class="dropdown dropend">

sake samun samun

القائمة المنسدلة إلى اليسار

<div class="dropdown dropstart">

sake samun samun

تحريك القائمة المنسدلة إلى اليمين

إذا كنت ترغب في تحريك القائمة المنسدلة إلى اليمين، قم بتغيير .dropdown-menu-end أضف صفتي class إلى العنصر الذي يحتوي على .dropdown-menu عنصر:

shafin

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

sake samun samun

القائمة المنسدلة للأعلى

كيفية تفعيل القائمة المنسدلة لتنبسط لأعلى بدلاً من تنبسط للأسفل، قم بتغيير عنصر <div> الذي يحتوي على class="dropdown" "dropup"：

shafin

<div class="dropup">

sake samun samun

matan kuduwa

.dropdown-item-text kuma kuma saman kuduwa da tsare-tsare don tsara tsari, ko kuma saman kuduwa da tsare-tsare don saman tsari.

shafin

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">matan 1</a></li>
  <li><a class="dropdown-item" href="#">matan 2</a></li>
  <li><a class="dropdown-item" href="#">matan 3</a></li>
  <li><a class="dropdown-item-text" href="#">matan da yanzu</a></li>
  <li><span class="dropdown-item-text">matan da yanzu</span></li>
</ul>

sake samun samun

kuma kuma saman kuduwa da tsare-tsare

shafin

<div class="btn-group">
  <button type="button" class="btn btn-primary">huawei</button>
  <button type="button" class="btn btn-primary">dajing</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">miya</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">kabara mayar da yadda</a></li>
      <li><a class="dropdown-item" href="#">kabara tabbata</a></li>
    </ul>
  </div>
</div>

sake samun samun

kuma kuma saman kuduwa da tsare-tsare

shafin

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">huawei</button>
  <button type="button" class="btn btn-primary">dajing</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">miya</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">kabara mayar da yadda</a></li>
      <li><a class="dropdown-item" href="#">kabara tabbata</a></li>
    </ul>
  </div>
</div>

sake samun samun