Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Ba dropdowns ya kokita

Bobongola ba superpositions contextuelles mpo na kolakisa ba liste ya ba liens mpe mingi na plugin ya kokita ya Bootstrap.

Na lokasa oyo

Botali ya mozindo

Ba dropdowns ezali toggleable, ba overlays contextuels mpo na kolakisa ba liste ya ba liens mpe mingi mosusu. Bazali kosala interactive na plugin ya JavaScript oyo ezali kokita ya Bootstrap oyo ezali na kati. Bazali ko toggled na ko cliquer, na ko hover te; oyo ezali ekateli ya kosala na mokano .

Ba dropdowns etongami na bibliothèque ya troisième partie, Popper , oyo epesaka positionnement dynamique mpe détection ya port de vue. Sala makasi otia popper.min.js liboso ya JavaScript ya Bootstrap to salela bootstrap.bundle.min.js/ bootstrap.bundle.jsoyo ezali na Popper. Popper esalelamaka te mpo na ko positionner ba dropdowns na ba navbars atako lokola positionnement dynamique esengeli te.

Kozala na makoki ya kozwa yango

Norme WAI ARIA elimboli role="menu"widget ya solo , kasi oyo ezali ya sikisiki na ba menu lokola ya bosaleli oyo ebandisaka misala to misala. Ba menu ya ARIA ekoki kozala kaka na biloko ya menu, biloko ya menu ya case ya kotiya elembo, biloko ya menu ya bouton ya radio, bituluku ya bouton ya radio, mpe ba sous-menu.

Ba dropdowns ya Bootstrap, na ngambo mosusu, esalemi mpo na kozala générique mpe ekoki kosalelama na ba situations ndenge na ndenge mpe na ba structures ya marquage. Na ndakisa, ezali na nzela ya kosala ba dropdowns oyo ezali na ba entrées ya kobakisa mpe ba contrôles ya formulaire, lokola ba champs ya recherche to ba formulaires ya login. Mpo na ntina oyo, Bootstrap ezali kozela te (to kobakisa na ndenge ya automatique) moko ya rolempe aria-bizaleli oyo esengeli mpo na ba menu ya solosolo ya ARIA . Bakomi bakosengela kokɔtisa bango moko bizaleli wana ya sikisiki mingi.

Kasi, Bootstrap ebakisi lisungi oyo etongami na kati mpo na mingi ya boyokani ya menu ya klaviatware ya momesano, lokola makoki ya kotambola na kati ya .dropdown-itembiloko mokomoko na kosaleláká bafungola ya kursɛrɛ mpe kokanga menu na ESCfungola.

Bandakisa

Envelopper toggle ya dropdown (bouton to lien na yo) mpe menu ya dropdown na kati ya .dropdown, to élément mosusu oyo esakoli position: relative;. Ba dropdowns ekoki kozala déclenché à partir ya <a>to <button>ba éléments mpo na ko correspondre malamu na ba besoins na yo potentiels. Bandakisa oyo elakisami awa esaleli <ul>ba éléments sémantiques esika esengeli, kasi marquage personnalisé esungami.

Bouton moko

Single nyonso .btnekoki kobongwana na toggle ya kokita na mwa mbongwana ya bilembo. Tala ndenge okoki kotia bango na mosala na ba <button>éléments moko to mosusu:

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>

Mpe na <a>biloko oyo:

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>

Eteni ya malamu ezali ete okoki kosala yango na variante nyonso ya bouton, mpe:

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

Bouton ya kokabola

Ndenge moko mpe, sala ba dropdowns ya bouton split na marque presque moko na ba dropdowns ya bouton moko, kasi na kobakisa ya .dropdown-toggle-splitmpo na espacement malamu zingazinga ya caret ya dropdown.

Tosalelaka kelasi oyo ya likolo mpo na kokitisa horizontal paddingna ngambo nyonso mibale ya caret na 25% mpe kolongola margin-leftoyo ebakisami mpo na ba déroulants ya bouton ya mbala na mbala. Mbongwana wana ya kobakisa ebatelaka caret na katikati na bouton ya kokabola mpe epesaka esika ya kobɛta oyo ezali na bonene oyo ebongi mpenza pembeni ya bouton monene.

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

Kosala bonene ya biloko

Ba boutons oyo ezali kokita esalaka na ba boutons ya bonene nyonso, bakisa mpe ba boutons oyo ezali kokita mpe oyo ekabwani.

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

Ba dropdowns ya molili

Pona na ba dropdowns ya molili mpo na kokokana na navbar ya molili to style personnalisé na kobakisa .dropdown-menu-darkna oyo ezali .dropdown-menu. Mbongwana moko te esengeli na biloko oyo ezali kokita.

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>

Mpe kotya yango mpo na kosalela yango na navbar:

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>

Ndenge ya kosala

RTL

Directions ezali mirrored tango ozali kosalela Bootstrap na RTL, elingi koloba .dropstartekobima na côté droit.

Ezali na katikati

Sala menu déroulant na centre na se ya toggle na .dropdown-centerna élément parent.

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>

Kobwaka na nse

Déclenchez ba menu déroulant likolo ya ba éléments na kobakisa .dropupna élément parent.

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

Dropup ezali na katikati

Sala menu ya kokita na centre likolo ya toggle na .dropup-centerna élément parent.

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>

Dropend ya kokita

Déclenchez ba menu déroulant na droite ya ba éléments na kobakisa .dropendna élément parent.

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

Dropstart ya kokita

Déclenchez ba menu déroulant na gauche ya ba éléments na kobakisa .dropstartna élément parent.

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

Okoki kosalela <a>to <button>ba éléments lokola biloko ya kokita.

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>

Okoki mpe kosala biloko ya kokita oyo ezali na boyokani te na .dropdown-item-text. Bozala na bonsomi ya kosala style lisusu na ba utilitaires ya CSS to ya texte personnalisé.

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>

Esalaka

Bakisa .activena biloko oyo ezali na dropdown mpo na kosala style na yango lokola active . Mpo na kopesa ezalela ya mosala na ba tekiniki ya lisalisi, salela aria-currentattribut — kosalela pagemotuya mpo na lokasa ya lelo, to truempo na eloko ya lelo na ensemble.

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>

Bakanga

Bakisa .disabledna biloko na dropdown mpo na kosala style na yango lokola désactivé .

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>

Na ndenge ya libela, menu oyo ezali kokita ezali kotyama automatiquement 100% kobanda na likoló mpe na ngámbo ya lobɔkɔ ya mwasi ya moboti na yango. Okoki ko changer yango na ba .drop*classes directionnelles, mais okoki pe ko contrôler yango na ba classes modificateurs ya kobakisa.

Bakisa .dropdown-menu-endna a .dropdown-menuna droite aligner menu oyo ezali kokita. Directions ezali mirrored tango ozali kosalela Bootstrap na RTL, elingi koloba .dropdown-menu-endekobima na côté gauche.

Mitó likoló! Ba dropdowns ezali positionné grâce na Popper sauf soki ezali contenus na navbar.
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>

Alignment oyo ezo répondre

Soki olingi kosalela alignment responsive, désactiver positionnement dynamique na kobakisa data-bs-display="static"attribut mpe salela ba classes ya variation responsive.

Mpo na kosala boyokani na lobɔkɔ ya mobali na menu oyo ezali kokita na esika oyo bapesi to oyo eleki monene, bakisá .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>

Mpo na kosala ete menu oyo ezali kokita na lobɔkɔ ya mwasi na esika oyo bapesi to oyo eleki monene, bakisa .dropdown-menu-endmpe .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>

Yeba ete osengeli te kobakisa data-bs-display="static"attribut na ba boutons ya kokita na ba navbars, lokola Popper esalelamaka te na ba navbars.

Ba options ya alignment

Kozwa mingi ya ba options oyo elakisami likolo, awa ezali mwa démonstration ya lavabo ya cuisine ya ba options ndenge na ndenge ya alignment ya kokita na esika moko.

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>

Makambo oyo ezali na menu

Mitó ya makambo

Bakisa motó mpo na kotya bilembo na biteni ya misala na menu nyonso oyo ezali kokita.

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>

Bato oyo bakabolaka

Kabola bituluku ya biloko ya menu oyo ezali na boyokani na yango na nzela ya kokabola.

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>

Nkoma

Tia makomi nyonso ya forme libre na kati ya menu ya kokita na makomi mpe salelá ba utilitaires ya esika ya kofanda . Yebá ete okozala mbala mosusu na mposa ya mitindo mosusu ya kopesa bonene mpo na kopekisa bonene ya menu.

Mokanda moko ya ndakisa oyo ezali koleka na bonsomi na kati ya menu oyo ezali kokita.

Mpe oyo ezali makomi ya ndakisa mingi koleka.

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>

Baformilɛrɛ

Tia formulaire moko na kati ya menu oyo ezali kokita, to sala yango na menu oyo ezali kokita, mpe salelá ba utilitaires ya marge to ya padding mpo na kopesa yango esika ya mabe oyo osengeli na yango.

Ya sika zingazinga awa? Bokomisa nkombo Obosani mot de passe?
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>

Salelá data-bs-offsetto data-bs-referencempo na kobongola esika oyo ezali kokita.

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>

Comportement ya kokanga auto

Na ndenge ya libela, menu oyo ezali kokita ekangamaka ntango ozali kofina na kati to na libándá ya menu oyo ezali kokita. Okoki kosalela autoCloseoption mpo na kobongola comportement oyo ya dropdown.

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

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba dropdowns esalela sikoyo ba variables CSS locales na .dropdown-menupona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$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};

Personnalisation na nzela ya ba variables CSS ekoki komonana na .dropdown-menu-darkclasse esika tozali ko superposer ba valeurs spécifiques sans kobakisa ba sélecteurs CSS doublons.

  --#{$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};

Ba variables ya Sass

Ba variables pona ba dropdowns nionso:

$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

Variables mpo na dropdown ya molili :

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

Ba variables pona ba carets oyo esalemi na CSS oyo elakisaka interactivité ya dropdown:

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

Ba mixins

Ba mixins esalelamaka mpo na kobimisa ba carets oyo esalemi na CSS mpe ekoki kozwama na 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;
    }
  }
}

Kosalela yango

Na nzela ya ba attributs ya ba données to JavaScript, plugin oyo ezali kokita ebalusaka makambo oyo ebombami (ba menu oyo ezali kokita) na kobongola .showkelasi na moboti .dropdown-menu. Attribut data-bs-toggle="dropdown"etie motema mpo na kokanga ba menu ya kokita na niveau ya application, yango wana ezali likanisi malamu kosalela yango ntango nyonso.

Na ba appareils oyo ekoki ko toucher, kofungola dropdown ebakisi ba mouseoverhandlers ya pamba na bana ya mbala moko ya <body>élément. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , oyo soki te elingaki kopekisa robinet esika nyonso libanda ya dropdown e déclencher code oyo ekanga dropdown. Soki kaka dropdown ekangami, ba mouseoverhandlers oyo ya pamba ya kobakisa elongolamaka.

Na nzela ya ba attributs ya ba données

Bakisa data-bs-toggle="dropdown"na lien to na bouton mpo na kobongola esika oyo ezali kokita.

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

Na nzela ya JavaScript

Benga ba dropdowns na nzela ya JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"esɛngami naino

Indépendamment soki obengi dropdown na yo na nzela ya JavaScript to na esika na yango kosalela data-api, data-bs-toggle="dropdown"esengeli ntango nyonso kozala présent na élément déclencheur ya dropdown.

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Nkombo Lolenge Mbeba Ndimbola
autoClose boolean, molongo true Configurer comportement ya auto close ya dropdown:
  • true- esika ya kokita ekokangama na kofina libanda to na kati ya menu ya kokita.
  • false- déroulant ekokangama na kofina bouton toggle mpe kobenga manuellement hideto toggleméthode. (Lisusu ekokangama te na kofina esctouche)
  • 'inside'- esika ya kokita ekokangama (kaka) na kofina na kati ya menu ya kokita.
  • 'outside'- esika ya kokita ekokangama (kaka) na kofina libanda ya menu ya kokita.
Liyebisi: dropdown ekoki ntango nyonso kokangama na ESCfungola.
boundary molongo, eloko 'clippingParents' Frontière ya contrainte ya débordement ya menu ya kokita (etali kaka modificateur ya preventOverflow ya Popper). Na ndenge ya libela ezali clippingParentsmpe ekoki kondima référence ya HTMLElement (na nzela ya JavaScript kaka). Mpo na koyeba makambo mingi tala Docs ya detectOverflow ya Popper .
display shene 'dynamic' Par défaut, tosalelaka Popper pona positionnement dynamique. Désactiver oyo na static.
offset array, molongo, mosala [0, 2] Offset ya dropdown par rapport na cible na yango. Okoki koleka molongo na ba attributs ya ba données na ba valeurs oyo ekabwani na virgule lokola: data-bs-offset="10,20". Tango fonction esalelami pona koyeba offset, ebengamaka na objet oyo ezali na placement ya popper, référence, na ba rects ya popper lokola argument na yango ya liboso. Node DOM ya élément déclencheur eleki lokola argument ya mibale. Fonction esengeli kozongisa array oyo ezali na ba nombres mibale: skidding , distance . Mpo na koyeba makambo mingi tala Docs ya offset ya Popper .
popperConfig null, eloko, mosala null Mpo na kobongola configuration ya Popper ya liboso ya Bootstrap, tala configuration ya Popper . Tango fonction moko esalelami pona kosala configuration ya Popper, ebengami na objet oyo ezali na configuration ya Popper par défaut ya Bootstrap. Esalisaka yo osalela mpe osangisa oyo ya liboso na configuration na yo moko. Fonction esengeli kozongisa objet ya configuration pona Popper.
reference molongo, eloko, eloko 'toggle' Elemento ya référence ya menu oyo ezali kokita. Endimi motuya ya 'toggle', 'parent', référence HTMLElement to eloko oyo epesaka getBoundingClientRect. Mpo na koyeba makambo mingi tala ba docs ya constructeur ya Popper mpe ba docs ya élément virtuel .

Kosalela fonction napopperConfig 

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

Ba méthodes ya kosala

Metode Ndimbola
dispose Ebebisaka dropdown ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)
getInstance Méthode statique oyo e permettre yo ozua instance déroulante associée na élément DOM, okoki kosalela yango boye: bootstrap.Dropdown.getInstance(element).
getOrCreateInstance Méthode statique oyo ezongisaka instance ya kokita oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye: bootstrap.Dropdown.getOrCreateInstance(element).
hide Ebombaka menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
show Ezali kolakisa menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
toggle Ezali kobongola menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
update Ezali kosala mikolo oyo position ya dropdown ya élément moko.

Makambo oyo esalemaki

Ba événements nionso ya dropdown ezo betama na élément toggling et puis ezo bubbler likolo. Donc okoki pe kobakisa ba auditeurs ya événement na .dropdown-menuélément parent ya '. hide.bs.dropdownmpe hidden.bs.dropdownmakambo ezali na clickEventpropriété (kaka tango lolenge ya Evenement ya ebandeli ezali click) oyo ezali na Objet ya Evenement mpo na événement ya cliquage.

Lolenge ya likambo Ndimbola
hide.bs.dropdown Epelisaka mbala moko tango hideméthode ya instance ebengami.
hidden.bs.dropdown Ebetami tango dropdown esili kobombama na mosaleli mpe ba transitions ya CSS esili.
show.bs.dropdown Ezo benga mbala moko tango showméthode ya instance ebengami.
shown.bs.dropdown Elongolami tango dropdown esalemi komonana na mosaleli mpe ba transitions ya CSS esili. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})