Kunjuzi

Geuza viwekeleo vya muktadha kwa ajili ya kuonyesha orodha za viungo na zaidi ukitumia programu-jalizi ya kunjuzi ya Bootstrap.

Katika ukurasa huu

Muhtasari

Kunjuzi zinaweza kugeuzwa, ziwekelezwe za kimuktadha kwa ajili ya kuonyesha orodha za viungo na zaidi. Yamefanywa kuingiliana na programu-jalizi ya JavaScript iliyojumuishwa iliyojumuishwa ya Bootstrap. Zinabadilishwa kwa kubofya, sio kwa kuelea; huu ni uamuzi wa kimakusudi wa kubuni .

Kunjuzi hujengwa kwenye maktaba ya wahusika wengine, Popper , ambayo hutoa nafasi inayobadilika na ugunduzi wa sehemu ya kutazama. Hakikisha kuwa umejumuisha popper.min.js kabla ya JavaScript ya Bootstrap au tumia bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper. Popper haitumiwi kuweka menyu kunjuzi katika pau za urambazaji ingawa kwa vile nafasi inayobadilika haihitajiki.

Ufikivu

Kiwango cha WAI ARIA kinafafanua role="menu"wijeti halisi , lakini hii ni mahususi kwa menyu zinazofanana na programu ambazo huanzisha vitendo au utendaji. Menyu za ARIA zinaweza tu kuwa na vipengee vya menyu, vipengee vya menyu ya kisanduku cha kuteua, vipengee vya menyu ya vitufe vya redio, vikundi vya vitufe vya redio, na menyu ndogo.

Kunjuzi za Bootstrap, kwa upande mwingine, zimeundwa kuwa za jumla na zinazotumika kwa hali mbalimbali na miundo ya kuashiria. Kwa mfano, inawezekana kuunda menyu kunjuzi ambazo zina pembejeo za ziada na vidhibiti vya fomu, kama vile sehemu za utafutaji au fomu za kuingia. Kwa sababu hii, Bootstrap haitarajii (wala kuongeza kiotomatiki) yoyote rolena aria-sifa zinazohitajika kwa menyu za kweli za ARIA . Waandishi watalazimika kujumuisha sifa hizi mahususi wenyewe.

Walakini, Bootstrap haiongezei usaidizi uliojumuishwa ndani kwa mwingiliano mwingi wa menyu ya kibodi, kama vile uwezo wa kusogea kupitia .dropdown-itemvipengee mahususi kwa kutumia vitufe vya kishale na kufunga menyu kwa ESCufunguo.

Mifano

Funga kigeuzi cha menyu kunjuzi (kitufe au kiungo chako) na menyu kunjuzi ndani ya .dropdown, au kipengele kingine kinachotangaza position: relative;. Kunjuzi kunaweza kuanzishwa kutoka <a>au <button>vipengee ili kutosheleza mahitaji yako yanayoweza kutokea. Mifano iliyoonyeshwa hapa hutumia <ul>vipengele vya kisemantiki inapofaa, lakini uwekaji alama maalum unaauniwa.

Kitufe kimoja

Single yoyote .btninaweza kugeuzwa kuwa menyu kunjuzi na mabadiliko kadhaa ya alama. Hivi ndivyo unavyoweza kuziweka kufanya kazi na <button>vipengele vyovyote:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

Na <a>vipengele:

html

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

  <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>
  </ul>
</div>

Sehemu bora ni kwamba unaweza kufanya hivyo na lahaja yoyote ya kitufe, pia:

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

Kitufe cha kugawanya

Vile vile, unda menyu kunjuzi ya vitufe vya mgawanyiko kwa karibu alama sawa na menyu kunjuzi ya kitufe kimoja, lakini kwa kuongezwa .dropdown-toggle-splitkwa nafasi ifaayo kuzunguka sehemu ya kunjuzi.

Tunatumia darasa hili la ziada ili kupunguza mlalo paddingkwa kila upande wa caret kwa 25% na kuondoa margin-leftile iliyoongezwa kwa kunjuzi za vitufe vya kawaida. Mabadiliko hayo ya ziada huweka caret katikati ya kitufe cha mgawanyiko na kutoa eneo la kugonga la ukubwa unaofaa zaidi karibu na kitufe kikuu.

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

Ukubwa

Vitufe kunjuzi hufanya kazi na vitufe vya ukubwa wote, ikiwa ni pamoja na vitufe vya chaguo-msingi na vilivyogawanyika.

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

Kushuka kwa giza

Chagua katika menyu kunjuzi nyeusi zaidi ili kulinganisha upau wa urambazaji wa giza au mtindo maalum kwa kuongeza .dropdown-menu-darkkwenye iliyopo .dropdown-menu. Hakuna mabadiliko yanayohitajika kwa vipengee kunjuzi.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

Na kuiweka kutumia kwenye upau wa urambazaji:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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>

Maelekezo

RTL

Maelekezo yanaangaziwa wakati wa kutumia Bootstrap katika RTL, maana .dropstartitaonekana upande wa kulia.

Iliyowekwa katikati

Fanya menyu kunjuzi iwe katikati chini ya .dropdown-centerkipengee kikuu cha kugeuza.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Kuacha

Anzisha menyu kunjuzi zilizo juu ya vipengee kwa kuongeza .dropupkwenye kipengee kikuu.

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

Kushuka kumewekwa katikati

Fanya menyu kunjuzi iwe katikati juu ya kipengee kikuu cha kugeuza .dropup-center.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Kushuka

Anzisha menyu kunjuzi zilizo upande wa kulia wa vipengee kwa kuongeza .dropendkwenye kipengele kikuu.

<!-- Default dropend button -->
<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">
    <!-- 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 Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Kuangusha

Anzisha menyu kunjuzi zilizo upande wa kushoto wa vipengee kwa kuongeza .dropstartkwenye kipengele kikuu.

<!-- 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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Unaweza kutumia <a>au <button>vipengele kama vitu kunjuzi.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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>

Unaweza pia kuunda vipengee kunjuzi visivyoingiliana ukitumia .dropdown-item-text. Jisikie huru kuweka mtindo zaidi ukitumia CSS maalum au huduma za maandishi.

html

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

Inayotumika

Ongeza .activekwa vipengee katika menyu kunjuzi ili kuvifanya kuwa vinavyotumika . Ili kuwasilisha hali amilifu kwa teknolojia saidizi, tumia aria-currentsifa - kwa kutumia pagethamani ya ukurasa wa sasa, au truekwa kipengee cha sasa katika seti.

html

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

Imezimwa

Ongeza .disabledkwa vipengee katika menyu kunjuzi ili kuvifanya kuwa vimezimwa .

html

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

Kwa chaguomsingi, menyu kunjuzi huwekwa kiotomatiki 100% kutoka juu na upande wa kushoto wa mzazi wake. Unaweza kubadilisha hii na .drop*madarasa ya mwelekeo, lakini unaweza pia kuwadhibiti na madarasa ya ziada ya kurekebisha.

Ongeza .dropdown-menu-endkwenye a .dropdown-menupanga menyu kunjuzi. Maelekezo yanaangaziwa wakati wa kutumia Bootstrap katika RTL, maana .dropdown-menu-enditaonekana kwenye upande wa kushoto.

Vichwa juu! Kunjuzi zimewekwa shukrani kwa Popper isipokuwa zikiwa kwenye upau wa urambazaji.

html

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

Mpangilio wa kuitikia

Iwapo ungependa kutumia upatanishi unaoitikia, zima uwekaji unaobadilika kwa kuongeza data-bs-display="static"sifa na utumie aina za utofauti zinazoitikia.

Ili kuoanisha menyu kunjuzi na kikomo ulichopewa au kubwa zaidi, ongeza .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

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

Ili kupangilia kushoto menyu kunjuzi na kikomo ulichopewa au kubwa zaidi, ongeza .dropdown-menu-endna .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

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

Kumbuka kuwa hauitaji kuongeza data-bs-display="static"sifa kwenye vitufe vya kunjuzi kwenye pau za urambazaji, kwa kuwa Popper haitumiki kwenye upau wa urambazaji.

Chaguzi za upatanishi

Kwa kuchukua chaguo nyingi zilizoonyeshwa hapo juu, hapa kuna onyesho dogo la sinki la jikoni la chaguo mbalimbali za kupanga kunjuzi katika sehemu moja.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

Vichwa vya habari

Ongeza kichwa ili kuweka lebo sehemu za vitendo katika menyu kunjuzi yoyote.

html

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

Wagawanyaji

Tenganisha vikundi vya vipengee vya menyu vinavyohusiana na kigawanyaji.

html

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

Maandishi

Weka maandishi yoyote ya muundo huria ndani ya menyu kunjuzi yenye maandishi na utumie huduma za kuweka nafasi . Kumbuka kuwa utahitaji mitindo ya ziada ya kuweka ukubwa ili kubana upana wa menyu.

html

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

Fomu

Weka fomu ndani ya menyu kunjuzi, au uifanye kuwa menyu kunjuzi, na utumie huduma za ukingo au padding ili kuipa nafasi hasi unayohitaji.

html

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

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

Tumia data-bs-offsetau data-bs-referencekubadilisha eneo la menyu kunjuzi.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

Tabia ya kufunga kiotomatiki

Kwa chaguo-msingi, menyu kunjuzi hufungwa unapobofya ndani au nje ya menyu kunjuzi. Unaweza kutumia autoClosechaguo kubadilisha tabia hii ya menyu kunjuzi.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, menyu kunjuzi sasa hutumia viwezo vya ndani vya CSS .dropdown-menuili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Ubinafsishaji kupitia vigeu vya CSS unaweza kuonekana kwenye .dropdown-menu-darkdarasa ambapo tunabatilisha thamani mahususi bila kuongeza viteuzi rudufu vya CSS.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Vigezo vya Sass

Vigeu kwa menyu kunjuzi zote:

$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:             var(--#{$prefix}border-color-translucent);
$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($dropdown-link-color, 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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Vigezo vya kushuka kwa giza :

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

Vigezo vya matunzo kulingana na CSS ambavyo vinaonyesha mwingiliano wa menyu kunjuzi:

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

Mchanganyiko

Mchanganyiko hutumika kutengeneza matunzo yenye msingi wa CSS na yanaweza kupatikana katika 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;
    }
  }
}

Matumizi

Kupitia sifa za data au JavaScript, programu-jalizi kunjuzi hugeuza yaliyofichwa (menu kunjuzi) kwa kugeuza .showdarasa kwenye mzazi .dropdown-menu. Sifa data-bs-toggle="dropdown"hiyo inategemewa kwa kufunga menyu kunjuzi katika kiwango cha programu, kwa hivyo ni wazo nzuri kuitumia kila wakati.

Kwenye vifaa vinavyoweza kuguswa, kufungua menyu kunjuzi huongeza mouseovervidhibiti tupu kwa watoto wa karibu wa <body>kipengele. Udukuzi huu mbaya unaokubalika ni muhimu ili kutatua tatizo katika ujumbe wa tukio la iOS , ambalo lingezuia kugusa popote nje ya menyu kunjuzi kuanzisha msimbo unaofunga menyu kunjuzi. Mara tu menyu kunjuzi itakapofungwa, vidhibiti tupu hivi vya ziada mouseoverhuondolewa.

Kupitia sifa za data

Ongeza data-bs-toggle="dropdown"kwenye kiungo au kitufe ili kugeuza menyu kunjuzi.

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

Kupitia JavaScript

Piga kushuka kupitia JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`bado inahitajika

Bila kujali ikiwa unapiga simu kunjuzi yako kupitia JavaScript au badala yake utumie data-api, data-bs-toggle="dropdown"inahitajika kila wakati kuwepo kwenye kichochezi cha menyu kunjuzi.

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Jina	Aina	Chaguomsingi	Maelezo
`autoClose`	boolean, kamba	`true`	Sanidi tabia ya kufunga kiotomatiki ya menyu kunjuzi: `true`- menyu kunjuzi itafungwa kwa kubofya nje au ndani ya menyu kunjuzi. `false`- menyu kunjuzi itafungwa kwa kubofya kitufe cha kugeuza na kupiga simu mwenyewe `hide`au `toggle`mbinu. (Pia haitafungwa kwa kubonyeza `esc`kitufe) `'inside'`- menyu kunjuzi itafungwa (pekee) kwa kubofya kwenye menyu kunjuzi. `'outside'`- menyu kunjuzi itafungwa (pekee) kwa kubofya nje ya menyu kunjuzi. Kumbuka: menyu kunjuzi inaweza kufungwa kila wakati kwa `ESC`ufunguo.
`boundary`	kamba, kipengele	`'clippingParents'`	Kizuizi cha vipengee vya ziada vya menyu kunjuzi (inatumika tu kwa kirekebishaji cha Popper cha preventOverflow). Kwa chaguo-msingi ni `clippingParents`na inaweza kukubali rejeleo la HTMLElement (kupitia JavaScript pekee). Kwa maelezo zaidi rejelea hati za detectOverflow za Popper .
`display`	kamba	`'dynamic'`	Kwa chaguo-msingi, tunatumia Popper kwa nafasi inayobadilika. Zima hii na `static`.
`offset`	safu, kamba, kazi	`[0, 2]`	Kukabiliana na menyu kunjuzi kulingana na lengo lake. Unaweza kupitisha mfuatano katika sifa za data na maadili yaliyotenganishwa kwa koma kama: `data-bs-offset="10,20"`. Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na uwekaji wa popper, rejeleo, na miondoko ya popper kama hoja yake ya kwanza. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Chaguo la kukokotoa lazima lirudishe safu iliyo na nambari mbili: kuteleza , umbali . Kwa maelezo zaidi rejelea hati za kukabiliana na Popper .
`popperConfig`	null, kitu, kazi	`null`	Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper . Chaguo za kukokotoa zinapotumiwa kuunda usanidi wa Popper, huitwa na kitu ambacho kina usanidi chaguo-msingi wa Bootstrap wa Popper. Inakusaidia kutumia na kuunganisha chaguo-msingi na usanidi wako mwenyewe. Chaguo la kukokotoa lazima lirudishe kipengee cha usanidi kwa Popper.
`reference`	kamba, kipengele, kitu	`'toggle'`	Kipengele cha marejeleo cha menyu kunjuzi. Hukubali thamani za `'toggle'`, `'parent'`, rejeleo la Kipengele cha HTML au kitu kinachotoa `getBoundingClientRect`. Kwa maelezo zaidi rejelea hati za kijenzi za Popper na hati za kipengele pepe .

Kutumia kipengele na`popperConfig`

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

Mbinu

Njia	Maelezo
`dispose`	Huharibu menyu kunjuzi ya kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM)
`getInstance`	Njia tuli ambayo hukuruhusu kupata mfano wa kushuka unaohusishwa na kipengee cha DOM, unaweza kuitumia kama hii: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Mbinu tuli ambayo inarejesha mfano kunjuzi unaohusishwa na kipengele cha DOM au kuunda kipya endapo hakijaanzishwa. Unaweza kuitumia kama hii `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Huficha menyu kunjuzi ya upau wa urambazaji au urambazaji wa kichupo.
`show`	Inaonyesha menyu kunjuzi ya upau wa urambazaji au urambazaji wa kichupo.
`toggle`	Hugeuza menyu kunjuzi ya upau wa urambazaji au urambazaji wa kichupo.
`update`	Husasisha nafasi ya menyu kunjuzi ya kipengee.

Matukio

Matukio yote ya menyu kunjuzi huwashwa kwenye kipengee cha kugeuza na kisha kuwekewa viputo. Kwa hivyo unaweza pia kuongeza wasikilizaji wa tukio kwenye .dropdown-menukipengele cha mzazi. hide.bs.dropdownna hidden.bs.dropdownmatukio yana sifa clickEvent(tu wakati aina ya Tukio asili ni click) ambayo ina Kitu cha Tukio cha tukio la kubofya.

Aina ya tukio	Maelezo
`hide.bs.dropdown`	Moto mara moja wakati `hide`njia ya mfano imeitwa.
`hidden.bs.dropdown`	Huwashwa wakati menyu kunjuzi imekamilika kufichwa kutoka kwa mtumiaji na ubadilishaji wa CSS umekamilika.
`show.bs.dropdown`	Moto mara moja wakati `show`njia ya mfano inaitwa.
`shown.bs.dropdown`	Huwashwa wakati menyu kunjuzi imefanywa kuonekana kwa mtumiaji na mabadiliko ya CSS yamekamilika.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Kunjuzi

Muhtasari

Ufikivu

Mifano

Kitufe kimoja

Kitufe cha kugawanya

Ukubwa

Kushuka kwa giza

Maelekezo

RTL

Iliyowekwa katikati

Kuacha

Kushuka kumewekwa katikati

Kushuka

Kuangusha

Vipengee vya menyu

Inayotumika

Imezimwa

Mpangilio wa menyu

Mpangilio wa kuitikia

Chaguzi za upatanishi

Maudhui ya menyu

Vichwa vya habari

Wagawanyaji

Maandishi

Fomu

Tabia ya kufunga kiotomatiki

CSS

Vigezo

Vigezo vya Sass

Mchanganyiko

Matumizi

Kupitia sifa za data

Kupitia JavaScript

`data-bs-toggle="dropdown"`bado inahitajika

Chaguo

Kutumia kipengele na`popperConfig`

Mbinu

Matukio

Kunjuzi

Muhtasari

Ufikivu

Mifano

Kitufe kimoja

Kitufe cha kugawanya

Ukubwa

Kushuka kwa giza

Maelekezo

RTL

Iliyowekwa katikati

Kuacha

Kushuka kumewekwa katikati

Kushuka

Kuangusha

Vipengee vya menyu

Inayotumika

Imezimwa

Mpangilio wa menyu

Mpangilio wa kuitikia

Chaguzi za upatanishi

Maudhui ya menyu

Vichwa vya habari

Kijajuu kunjuzi

Wagawanyaji

Maandishi

Fomu

Chaguo kunjuzi

Tabia ya kufunga kiotomatiki

CSS

Vigezo

Vigezo vya Sass

Mchanganyiko

Matumizi

Kupitia sifa za data

Kupitia JavaScript

data-bs-toggle="dropdown"bado inahitajika

Chaguo

Kutumia kipengele napopperConfig

Mbinu

Matukio

`data-bs-toggle="dropdown"`bado inahitajika

Kutumia kipengele na`popperConfig`