مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

ڊراپ ڊائونز

بوٽ اسٽريپ ڊراپ ڊائون پلگ ان سان لنڪن جي لسٽن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز کي ٽوگل ڪريو.

اوسر

ڊراپ ڊائونز ٽوگليبل، ڳنڍين جي فهرستن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز آهن. اهي شامل ڪيل بوٽ اسٽريپ ڊراپ ڊائون جاوا اسڪرپٽ پلگ ان سان متعامل ڪيا ويا آهن. اهي ڪلڪ ڪرڻ سان ٽوگل ڪيا ويا آهن، نه هوور ڪرڻ سان؛ هي هڪ ارادي ڊيزائن جو فيصلو آهي.

ڊراپ ڊائونز هڪ ٽئين پارٽي لائبريري تي ٺهيل آهن، پوپر ، جيڪا متحرڪ پوزيشن ۽ ڏيک پورٽ جي سڃاڻپ مهيا ڪري ٿي. Bootstrap جي JavaScript کان اڳ popper.min.js شامل ڪرڻ جي پڪ ڪريو يا استعمال ڪريو bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper شامل آهي. پوپر نيوبارز ۾ ڊراپ ڊائونز کي پوزيشن ڪرڻ لاءِ استعمال نه ڪيو ويو آهي جيتوڻيڪ متحرڪ پوزيشن جي ضرورت ناهي.

پهچ

WAI ARIA معيار هڪ حقيقي role="menu"ويجيٽ جي وضاحت ڪري ٿو ، پر اهو مخصوص آهي ايپليڪيشن-جهڙي مينيو لاءِ جيڪو عملن يا ڪمن کي متحرڪ ڪري ٿو. ARIA مينيو صرف مينيو شيون، چيڪ باڪس مينيو شيون، ريڊيو بٽڻ مينيو شيون، ريڊيو بٽڻ گروپ، ۽ ذيلي مينيو شامل ڪري سگھن ٿا.

ٻئي طرف بوٽ اسٽريپ جا ڊراپ ڊائونز، عام ۽ مختلف حالتن ۽ مارڪ اپ ڍانچي تي لاڳو ٿيڻ لاءِ ٺهيل آهن. مثال طور، اهو ممڪن آهي ڊراپ ڊائونز ٺاهڻ جنهن ۾ اضافي ان پٽ ۽ فارم ڪنٽرول شامل هجن، جهڙوڪ سرچ فيلڊز يا لاگ ان فارم. انهي سبب لاء، بوٽ اسٽريپ جي توقع نه آهي (نه ئي خودڪار طور تي شامل ڪيو) ڪنهن به role۽ خاصيتون حقيقي ARIA مينيو aria-لاء گهربل . ليکڪن کي پاڻ ۾ اهي وڌيڪ مخصوص خاصيتون شامل ڪرڻ گهرجن.

بهرحال، بوٽ اسٽريپ اڪثر معياري ڪيبورڊ مينيو رابطي لاءِ بلٽ ان سپورٽ شامل ڪندو آهي، جيئن ته ڪيبورڊ ڪيبورڊ .dropdown-itemاستعمال ڪندي انفرادي عناصر ذريعي منتقل ڪرڻ جي صلاحيت ۽ مينيو کي ESCڪيئي سان بند ڪرڻ.

مثال

ڊراپ ڊائون جي ٽوگل (توهان جو بٽڻ يا لنڪ) ۽ ڊراپ ڊائون مينيو کي لفاف ڪريو اندر .dropdown، يا ٻيو عنصر جيڪو اعلان ڪري ٿو position: relative;. توهان جي امڪاني ضرورتن کي بهتر ڪرڻ لاءِ ڊراپ ڊائونز شروع ڪري سگهجن ٿا <a>يا عناصر. <button>هتي ڏيکاريل مثالن کي استعمال ڪن ٿا سيمينٽڪ <ul>عناصر جتي مناسب هجي، پر ڪسٽم مارڪ اپ سپورٽ ٿيل آهي.

اڪيلو بٽڻ

ڪنهن به هڪ .btnکي ڪجهه مارڪ اپ تبديلين سان ڊراپ ڊائون ٽوگل ۾ تبديل ڪري سگهجي ٿو. هتي اهو آهي ته توهان انهن کي ڪنهن به <button>عناصر سان ڪم ڪرڻ لاء ڪيئن رکي سگهو ٿا:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

۽ <a>عناصر سان:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

بهترين حصو اهو آهي ته توهان اهو ڪري سگهو ٿا ڪنهن به بٽڻ واري قسم سان، پڻ:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

تقسيم بٽڻ

ساڳيءَ طرح، اسپلٽ بٽڻ ڊراپ ڊائونز ٺاھيو لڳ ڀڳ ساڳي مارڪ اپ سان سنگل بٽڻ ڊراپ ڊائونز، پر ان جي اضافي سان گڏ .dropdown-toggle-splitڊراپ ڊائون ڪارٽ جي چوڌاري مناسب فاصلي لاءِ.

اسان هي اضافي ڪلاس استعمال ڪريون ٿا paddingڪارٽ جي ٻنهي پاسن تي افقي کي 25٪ گھٽائڻ ۽ ان کي هٽائڻ لاءِ margin-leftجيڪو شامل ڪيو ويو آهي باقاعده بٽڻ ڊراپ ڊائونز لاءِ. اهي اضافي تبديليون ڪيريٽ کي ورهائڻ واري بٽڻ ۾ مرڪز ۾ رکنديون آهن ۽ مکيه بٽڻ جي اڳيان وڌيڪ مناسب انداز واري هٽ واري علائقي کي مهيا ڪن ٿيون.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ماپڻ

بٽڻ ڊراپ ڊائونز سڀني سائزن جي بٽڻن سان ڪم ڪن ٿا، بشمول ڊفالٽ ۽ اسپلٽ ڊراپ ڊائون بٽڻ.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

اونداهي ڦوٽو

اوٽ ۾ اونداهي ڊراپ ڊائونز کي ملائڻ لاءِ اونداهي نيوبار يا ڪسٽم اسلوب شامل .dropdown-menu-darkڪري موجوده تي .dropdown-menu. ڊراپ ڊائون شيون ۾ ڪا به تبديلي جي ضرورت ناهي.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

۽ ان کي نيوبار ۾ استعمال ڪرڻ لاءِ:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ھدايتون

RTL

RTL ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .dropstartساڄي پاسي ظاهر ٿيندو.

ڊراپ اپ

ٽريگر ڊراپ ڊائون مينيو مٿين عنصرن کي شامل .dropupڪرڻ سان.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ڊراپ رائٽ

ٽريگر ڊراپ ڊائون مينيو عناصر جي ساڄي پاسي .dropendپيرن عنصر ۾ شامل ڪندي.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ڦاٽل

ٽريگر ڊراپ ڊائون مينيو عنصرن جي کاٻي پاسي کي شامل ڪندي .dropstartوالدين عنصر کي شامل ڪندي.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

توھان استعمال ڪري سگھو ٿا <a>يا <button>عناصر ڊراپ ڊائون شيون طور.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

توهان پڻ ٺاهي سگهو ٿا غير انٽرايڪٽو ڊراپ ڊائون شيون .dropdown-item-text. ڪسٽم CSS يا ٽيڪسٽ يوٽيلٽيز سان وڌيڪ انداز ۾ آزاد ٿيو.

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

چالو

.activeڊراپ ڊائون ۾ شيون شامل ڪريو انھن کي فعال طور انداز ڪرڻ لاءِ . فعال رياست کي مددگار ٽيڪنالاجيز تائين پهچائڻ لاءِ، aria-currentوصف استعمال ڪريو - pageموجوده صفحي لاءِ قدر استعمال ڪندي، يا trueسيٽ ۾ موجوده شيءِ لاءِ.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

معذور

.disabledڊراپ ڊائون ۾ شيون شامل ڪريو انھن کي غير فعال طور انداز ڪرڻ لاء .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

ڊفالٽ طور، هڪ ڊراپ ڊائون مينيو خود بخود 100٪ مٿي کان مٿي ۽ ان جي والدين جي کاٻي پاسي سان رکيل آهي. توھان ھن کي تبديل ڪري سگھو ٿا هدايتي .drop*طبقن سان، پر توھان انھن کي ڪنٽرول ڪري سگھوٿا اضافي ترميمي ڪلاسن سان.

شامل ڪريو .dropdown-menu-enda .dropdown-menu۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو. RTL ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .dropdown-menu-endته کاٻي پاسي ظاهر ٿيندو.

اٿو! ڊراپ ڊائونز پوزيشن ۾ آهن پوپر جي مهرباني کان سواءِ جڏهن اهي نيوبار ۾ شامل آهن.
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

جوابي ترتيب

جيڪڏهن توهان جوابي ترتيب کي استعمال ڪرڻ چاهيو ٿا، خصوصيت شامل ڪندي متحرڪ پوزيشن کي غير فعال data-bs-display="static"ڪريو ۽ جوابي تبديلي ڪلاس استعمال ڪريو.

ڊراپ ڊائون مينيو کي ساڄي طرف ترتيب ڏيڻ لاءِ ڏنل بريڪ پوائنٽ يا وڏي سان، شامل ڪريو .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

ڊاپ ڊائون مينيو کي کاٻي پاسي کي ترتيب ڏيڻ لاءِ ڏنل بريڪ پوائنٽ يا وڏي سان، شامل ڪريو .dropdown-menu-end۽ .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

data-bs-display="static"نوٽ ڪريو ته توھان کي نيوبارز ۾ ڊراپ ڊائون بٽڻن لاءِ خصوصيت شامل ڪرڻ جي ضرورت ناھي، ڇو ته پوپر نيوبارز ۾ استعمال نه ڪيو ويو آھي.

ترتيب ڏيڻ جا اختيار

مٿي ڏيکاريل اختيارن مان گھڻا کڻڻ، ھتي ھڪڙو ننڍڙو باورچی خانه سنڪ ڊيمو آھي مختلف ڊراپ ڊائون الائنمينٽ اختيارن جو ھڪڙو جڳھ ۾.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

مٿو

ڪنهن به ڊراپ ڊائون مينيو ۾ عملن جي سيڪشن کي ليبل ڪرڻ لاءِ هيڊر شامل ڪريو.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

ورهائيندڙ

ورهائيندڙ سان لاڳاپيل مينيو شيون جا الڳ گروپ.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

متن

ڪنهن به فريفارم ٽيڪسٽ کي ڊراپ ڊائون مينيو ۾ متن سان رکو ۽ اسپيسنگ يوٽيلٽيز استعمال ڪريو . نوٽ ڪريو ته توھان کي امڪاني طور تي مينيو جي چوٽي کي محدود ڪرڻ لاءِ اضافي سيزنگ اسلوب جي ضرورت پوندي.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

فارم

هڪ فارم کي ڊراپ ڊائون مينيو ۾ رکو، يا ان کي ڊراپ ڊائون مينيو ۾ ٺاهيو، ۽ مارجن يا پيڊنگ يوٽيلٽيز استعمال ڪريو ان کي ناڪاري جاءِ ڏيڻ لاءِ جيڪا توهان کي گهربل هجي.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

استعمال ڪريو data-bs-offsetيا data-bs-referenceڊراپ ڊائون جي جڳھ کي تبديل ڪرڻ لاء.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

خودڪار بند ڪرڻ وارو عمل

ڊفالٽ طور، ڊراپ ڊائون مينيو بند ڪيو ويندو آهي جڏهن ڪلڪ ڪريو اندر يا ٻاهران ڊراپ ڊائون مينيو. توھان autoCloseھي اختيار استعمال ڪري سگھو ٿا ڊراپ ڊائون جي ھن رويي کي تبديل ڪرڻ لاءِ.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

ساس

متغير

سڀني ڊراپ ڊائونز لاءِ متغير:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

اونداهي ڊراپ ڊائون لاءِ متغير :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

CSS-based carets لاءِ متغيرات جيڪي ظاهر ڪن ٿا ڊراپ ڊائون جي انٽرايڪٽيٽي:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

ملائيندڙ

Mixins CSS-based carets پيدا ڪرڻ لاءِ استعمال ڪيا ويندا آهن ۽ ڳولهي سگهجن ٿا scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

استعمال

ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ جي ذريعي، ڊراپ ڊائون پلگ ان پوشيده مواد (ڊراپ ڊائون مينيو) کي ٽوگل ڪندي .showڪلاس کي والدين تي ٽوگل ڪري ٿو .dropdown-menu. وصف هڪ ايپليڪيشن سطح تي ڊراپ ڊائون مينيو کي بند ڪرڻ لاءِ انحصار ڪيو data-bs-toggle="dropdown"ويو آهي، تنهنڪري اهو هميشه استعمال ڪرڻ سٺو خيال آهي.

ٽچ-فعال ڊوائيسز تي، هڪ ڊراپ ڊائون کولڻ سان خالي هٿين کي شامل ڪري ٿو عنصر mouseoverجي فوري ٻارن لاءِ . هي تسليم ٿيل بدصورت هيڪ iOS جي ايونٽ جي وفد ۾<body> هڪ نراس جي چوڌاري ڪم ڪرڻ لاءِ ضروري آهي ، جيڪو ٻي صورت ۾ ڊراپ ڊائون کان ٻاهر ڪٿي به ٽيپ کي روڪيندو ڪوڊ کي ٽرگر ڪرڻ کان جيڪو ڊراپ ڊائون کي بند ڪري ٿو. هڪ دفعو ڊراپ ڊائون بند ڪيو ويو آهي، اهي اضافي خالي هينڊلر ختم ڪيا ويا آهن. mouseover

ڊيٽا خاصيتن جي ذريعي

data-bs-toggle="dropdown"ڊراپ ڊائون کي ٽوگل ڪرڻ لاءِ لنڪ يا بٽڻ شامل ڪريو .

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

جاوا اسڪرپٽ ذريعي

جاوا اسڪرپٽ ذريعي ڊراپ ڊائونز کي ڪال ڪريو:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"اڃا به گهربل

ان کان سواءِ ته توهان پنهنجي ڊراپ ڊائون کي JavaScript ذريعي ڪال ڪريو يا ان جي بدران data-api استعمال ڪريو، data-bs-toggle="dropdown"هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-offset="". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت ڪيبل ڪيس کان ڪيبل ڪيس ۾ اختيار جي نالي جي ڪيس جي قسم کي تبديل ڪرڻ جي پڪ ڪريو. مثال طور، استعمال ڪرڻ بدران data-bs-autoClose="false"، استعمال ڪريو data-bs-auto-close="false".

نالو قسم ڊفالٽ وصف
boundary تار | عنصر 'clippingParents' ڊراپ ڊائون مينيو جي اوور فلو رڪاوٽ جي حد (صرف پوپر جي روڪ اوور فلو موڊيفائر تي لاڳو ٿئي ٿو). ڊفالٽ طور اهو آهي 'clippingParents'۽ هڪ HTMLElement ريفرنس قبول ڪري سگهي ٿو (صرف JavaScript ذريعي). وڌيڪ معلومات لاءِ ڏسو Popper's detectOverflow docs .
reference تار | عنصر | اعتراض 'toggle' ڊراپ ڊائون مينيو جو حوالو عنصر. 'toggle', 'parent', HTMLElement ريفرنس يا هڪ شئي مهيا ڪرڻ جا قدر قبول ڪري ٿو getBoundingClientRect. وڌيڪ معلومات لاءِ ڏسو Popper's Constructor Docs ۽ ورچوئل ايليمينٽ ڊيڪس .
display تار 'dynamic' ڊفالٽ طور، اسان پوپر کي متحرڪ پوزيشن لاء استعمال ڪندا آهيون. هن سان غير فعال ڪريو static.
offset صف | تار | فنڪشن [0, 2]

ان جي ھدف جي نسبت سان ڊراپ ڊائون جو آفسيٽ. توهان ڪاما جدا ڪيل قدرن سان ڊيٽا جي خاصيتن ۾ هڪ اسٽرنگ پاس ڪري سگهو ٿا جهڙوڪ:data-bs-offset="10,20"

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي آفسيٽ کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي هڪ اعتراض سان جنهن ۾ پاپپر جي جڳهه، حوالو، ۽ پاپپر ان جي پهرين دليل جي طور تي رد ڪري ٿو. ٽاريندڙ عنصر DOM نوڊ ٻئي دليل طور منظور ڪيو ويو آهي. فنڪشن کي ٻن نمبرن سان هڪ صف واپس ڪرڻ گهرجي: .[skidding, distance]

وڌيڪ معلومات لاءِ ڏسو Popper's offset docs .

autoClose بوليان | تار true

ڊراپ ڊائون جي خودڪار بند رويي کي ترتيب ڏيو:

  • true- ڊراپ ڊائون مينيو جي ٻاهران يا اندر ڪلڪ ڪري ڊراپ ڊائون بند ڪيو ويندو.
  • false- ڊراپ ڊائون بند ڪيو ويندو ٽوگل بٽڻ تي ڪلڪ ڪندي ۽ دستي طور تي ڪال ڪرڻ hideيا toggleطريقو. (پڻ کي دٻائڻ سان بند نه ڪيو ويندو esc)
  • 'inside'- ڊراپ ڊائون مينيو اندر ڪلڪ ڪندي (صرف) بند ڪيو ويندو.
  • 'outside'- ڊراپ ڊائون مينيو کان ٻاهر ڪلڪ ڪندي (صرف) بند ڪيو ويندو.
popperConfig null | اعتراض | فنڪشن null

Bootstrap جي ڊفالٽ Popper config کي تبديل ڪرڻ لاء، Popper جي ترتيب کي ڏسو .

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي Popper ترتيب ٺاهڻ لاء، اهو هڪ اعتراض سان سڏيو ويندو آهي جنهن ۾ Bootstrap جي ڊفالٽ Popper ترتيب شامل آهي. اهو توهان کي استعمال ڪرڻ ۽ ڊفالٽ کي توهان جي پنهنجي ترتيب سان ملائڻ ۾ مدد ڪري ٿو. فنڪشن کي پوپر لاءِ هڪ ترتيب واري شئي واپس ڪرڻ گهرجي.

فنڪشن سان استعمال ڪنديpopperConfig

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

طريقا

طريقو وصف
toggle ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي ٽوگل ڪري ٿو.
show ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جو ڊراپ ڊائون مينيو ڏيکاري ٿو.
hide ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي لڪايو.
update هڪ عنصر جي ڊراپ ڊائون جي پوزيشن کي اپڊيٽ ڪري ٿو.
dispose هڪ عنصر جي ڊراپ ڊائون کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
getInstance جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ڊراپ ڊائون مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، توهان ان کي هن طرح استعمال ڪري سگهو ٿا:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance جامد طريقو جيڪو DOM عنصر سان لاڳاپيل هڪ ڊراپ ڊائون مثال واپس ڪري ٿو يا ان صورت ۾ هڪ نئون ٺاهيو جڏهن اهو شروع نه ڪيو ويو هو. توھان ان کي ھن طرح استعمال ڪري سگھو ٿا:bootstrap.Dropdown.getOrCreateInstance(element)

واقعا

سڀئي ڊراپ ڊائون واقعا ٽوگلنگ عنصر تي فائر ڪيا ويا آهن ۽ پوءِ بلبل ٿي ويا آهن. تنهن ڪري توهان پڻ شامل ڪري سگهو ٿا واقعا ٻڌندڙن کي .dropdown-menuجي والدين عنصر تي. hide.bs.dropdown۽ hidden.bs.dropdownواقعن وٽ clickEventملڪيت آھي (صرف جڏھن اصل واقعي جو قسم آھي click) جنھن ۾ ڪلڪ واري واقعي لاءِ ايونٽ اعتراض شامل آھي.

طريقو وصف
show.bs.dropdown فوري طور تي فائر ٿئي ٿو جڏهن شو مثال جو طريقو سڏيو ويندو آهي.
shown.bs.dropdown فائر ڪيو ويو جڏهن ڊراپ ڊائون صارف کي ڏيکاريو ويو آهي ۽ CSS ٽرانزيڪشن مڪمل ٿي چڪا آهن.
hide.bs.dropdown فائر فوري طور تي جڏهن لڪائڻ جو طريقو سڏيو ويو آهي.
hidden.bs.dropdown فائر ڪيو ويو جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪائي رهيو آهي ۽ سي ايس ايس ٽرانسشن مڪمل ٿي چڪو آهي.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})