Nolaižamās izvēlnes

Pārslēdziet kontekstuālos pārklājumus, lai parādītu saišu sarakstus un citus, izmantojot Bootstrap nolaižamo spraudni.

Šajā lapā

Pārskats

Nolaižamās izvēlnes ir pārslēdzamas, kontekstuāli pārklājumi, lai parādītu saišu sarakstus un daudz ko citu. Tie ir padarīti interaktīvi, izmantojot iekļauto Bootstrap nolaižamo JavaScript spraudni. Tie tiek pārslēgti, noklikšķinot, nevis virzot kursoru; tas ir apzināts dizaina lēmums .

Nolaižamās izvēlnes ir izveidotas, pamatojoties uz trešās puses bibliotēku Popper , kas nodrošina dinamisku pozicionēšanu un skata loga noteikšanu. Noteikti iekļaujiet popper.min.js pirms Bootstrap JavaScript vai izmantojiet bootstrap.bundle.min.js/ bootstrap.bundle.jskas satur Popper. Popper netiek izmantots, lai pozicionētu nolaižamās izvēlnes navigācijas joslās, jo dinamiskā pozicionēšana nav nepieciešama.

Pieejamība

WAI ARIA standarts definē faktisko role="menu"logrīku , taču tas attiecas tikai uz lietojumprogrammām līdzīgām izvēlnēm, kas aktivizē darbības vai funkcijas . ARIA izvēlnēs var būt tikai izvēlnes vienumi, izvēles rūtiņu izvēlnes vienumi, radio pogu izvēlnes vienumi, radio pogu grupas un apakšizvēlnes.

No otras puses, Bootstrap nolaižamās izvēlnes ir izstrādātas tā, lai tās būtu vispārīgas un piemērotas dažādām situācijām un iezīmēšanas struktūrām. Piemēram, ir iespējams izveidot nolaižamās izvēlnes, kas satur papildu ievades un veidlapas vadīklas, piemēram, meklēšanas laukus vai pieteikšanās veidlapas. Šī iemesla dēļ Bootstrap neparedz (nedz arī automātiski nepievieno) nevienu no roleun aria-atribūtiem, kas nepieciešami patiesajām ARIA izvēlnēm. Autoriem pašiem būs jāiekļauj šie specifiskākie atribūti.

Tomēr Bootstrap pievieno iebūvētu atbalstu lielākajai daļai standarta tastatūras izvēlņu mijiedarbības, piemēram, iespēju pārvietoties pa atsevišķiem .dropdown-itemelementiem, izmantojot kursora taustiņus, un aizvērt izvēlni ar ESCtaustiņu.

Piemēri

Aptiniet nolaižamās izvēlnes slēdzi (jūsu pogu vai saiti) un nolaižamo izvēlni .dropdownvai citu elementu, kas deklarē position: relative;. Nolaižamās izvēlnes var tikt aktivizētas no <a>vai <button>elementiem, lai labāk atbilstu jūsu potenciālajām vajadzībām. Šeit parādītajos piemēros tiek izmantoti semantiski <ul>elementi, ja tas ir nepieciešams, taču tiek atbalstīta pielāgotā iezīmēšana.

Viena poga

Jebkuru singlu .btnvar pārvērst par nolaižamo slēdzi, veicot dažas iezīmēšanas izmaiņas. Tālāk ir norādīts, kā varat tos izmantot ar kādu no <button>elementiem.

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>

Un ar <a>elementiem:

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>

Labākā daļa ir tāda, ka to varat izdarīt arī ar jebkuru pogas variantu:

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

Sadalīšanas poga

Līdzīgi izveidojiet sadalīto pogu nolaižamās izvēlnes ar gandrīz tādu pašu marķējumu kā vienas pogas nolaižamajiem izvēlnēm, taču pievienojot .dropdown-toggle-splitpareizu atstarpi ap nolaižamo sarakstu.

Mēs izmantojam šo papildu klasi, lai par 25% samazinātu horizontālo paddinglīmeni abās pakāpju pusēs un noņemtu margin-leftparasto pogu nolaižamo izvēlni. Šīs papildu izmaiņas saglabā centrējumu sadalīšanas pogā un nodrošina atbilstošāka izmēra trāpījuma apgabalu blakus galvenajai pogai.

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

Izmēru noteikšana

Pogu nolaižamās izvēlnes darbojas ar visu izmēru pogām, tostarp noklusējuma un sadalītajām nolaižamajām pogām.

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

Tumši nolaižamie saraksti

Izvēlieties tumšākas nolaižamās izvēlnes, lai tās atbilstu tumšajai navigācijas joslai vai pielāgotam stilam, pievienojot .dropdown-menu-darkto esošajam .dropdown-menu. Nolaižamajos vienumos izmaiņas nav nepieciešamas.

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>

Un tā izmantošana navigācijas joslā:

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>

Norādes

RTL

Norādes tiek atspoguļotas, izmantojot Bootstrap RTL, un tas .dropstarttiks parādīts labajā pusē.

Centrēts

Iestatiet nolaižamo izvēlni centrā zem slēdža ar .dropdown-centeruz vecākelementa.

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>

Dropup

Aktivizējiet nolaižamās izvēlnes virs elementiem, pievienojot .dropupto vecākajam elementam.

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

Nolaižams centrēts

Iestatiet nolaižamo izvēlni centrā virs slēdža ar .dropup-centeruz vecākelementa.

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>

Noslīdēja

Aktivizējiet nolaižamās izvēlnes elementu labajā pusē, pievienojot .dropendto vecākajam elementam.

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

Aktivizējiet nolaižamās izvēlnes elementu kreisajā pusē, pievienojot .dropstartto vecākajam elementam.

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

Varat izmantot <a>vai <button>elementus kā nolaižamās izvēlnes vienumus.

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>

Varat arī izveidot neinteraktīvus nolaižamās izvēlnes vienumus, izmantojot .dropdown-item-text. Jūtieties brīvi turpināt stilu, izmantojot pielāgotas CSS vai teksta utilītas.

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>

Aktīvs

Pievienojiet .activevienumiem nolaižamajā izvēlnē, lai veidotu tos kā aktīvus . Lai nodotu aktīvo stāvokli palīgtehnoloģijām, izmantojiet aria-currentatribūtu — izmantojot pagepašreizējās lapas vai truekopas pašreizējā vienuma vērtību.

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>

Atspējots

Pievienojiet .disabledvienumiem nolaižamajā izvēlnē, lai veidotu tos kā atspējotus .

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>

Pēc noklusējuma nolaižamā izvēlne tiek automātiski novietota 100% no augšdaļas un tās vecākvārda kreisajā pusē. Varat to mainīt ar virziena .drop*klasēm, bet varat arī kontrolēt tās ar papildu modifikatoru klasēm.

Pievienojiet nolaižamo izvēlni .dropdown-menu-endlīdzi pa labi. .dropdown-menuNorādes tiek atspoguļotas, izmantojot Bootstrap RTL, un tas .dropdown-menu-endtiks parādīts kreisajā pusē.

Uzmanību! Nolaižamās izvēlnes tiek novietotas, pateicoties Popper, izņemot gadījumus, kad tās atrodas navigācijas joslā.

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>

Atsaucīga izlīdzināšana

Ja vēlaties izmantot adaptīvo līdzināšanu, atspējojiet dinamisko pozicionēšanu, pievienojot data-bs-display="static"atribūtu, un izmantojiet adaptīvās variācijas klases.

Lai līdzinātu nolaižamo izvēlni pa labi ar norādīto pārtraukuma punktu vai lielāku, pievienojiet .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>

Lai līdzinātu kreiso nolaižamo izvēlni ar norādīto vai lielāku pārtraukuma punktu, pievienojiet .dropdown-menu-endun .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>

Ņemiet vērā, ka navigācijas joslu nolaižamajām pogām nav jāpievieno data-bs-display="static"atribūts, jo Popper navigācijas joslās netiek izmantots.

Izlīdzināšanas iespējas

Ņemot vērā lielāko daļu iepriekš parādīto opciju, šeit ir neliela virtuves izlietnes demonstrācija ar dažādām nolaižamajām līdzināšanas iespējām vienuviet.

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>

Virsraksti

Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.

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>

Dalītāji

Atdaliet saistīto izvēlnes vienumu grupas ar dalītāju.

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>

Teksts

Ievietojiet jebkuru brīvas formas tekstu nolaižamajā izvēlnē ar tekstu un izmantojiet atstarpju utilītas . Ņemiet vērā, ka, iespējams, būs nepieciešami papildu izmēru stili, lai ierobežotu izvēlnes platumu.

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>

Veidlapas

Ievietojiet veidlapu nolaižamajā izvēlnē vai izveidojiet to par nolaižamo izvēlni un izmantojiet piemales vai polsterējuma utilītas , lai piešķirtu tai nepieciešamo negatīvo vietu.

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>

Izmantojiet data-bs-offsetvai data-bs-reference, lai mainītu nolaižamās izvēlnes atrašanās vietu.

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>

Automātiska aizvēršanās darbība

Pēc noklusējuma nolaižamā izvēlne tiek aizvērta, noklikšķinot nolaižamajā izvēlnē vai ārpus tās. Varat izmantot autoCloseopciju, lai mainītu šo nolaižamās izvēlnes darbību.

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

Mainīgie

Pievienots v5.2.0

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas nolaižamajos izvēlnēs tagad tiek izmantoti vietējie CSS mainīgie, .dropdown-menulai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

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

Pielāgošanu, izmantojot CSS mainīgos, var redzēt .dropdown-menu-darkklasē, kurā mēs ignorējam noteiktas vērtības, nepievienojot dublētus CSS atlasītājus.

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

Sass mainīgie

Visu nolaižamo izvēlņu mainīgie:

$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

Tumšās nolaižamās izvēlnes mainīgie :

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

Mainīgie uz CSS balstītajām zīmēm, kas norāda uz nolaižamā saraksta interaktivitāti:

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

Maisījumi

Mixins tiek izmantoti, lai ģenerētu uz CSS balstītus carets, un tos var atrast 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;
    }
  }
}

Lietošana

Izmantojot datu atribūtus vai JavaScript, nolaižamais spraudnis pārslēdz slēpto saturu (nolaižamās izvēlnes), pārslēdzot .showklasi uz vecāku .dropdown-menu. Atribūts data-bs-toggle="dropdown"tiek izmantots, lai aizvērtu nolaižamās izvēlnes lietojumprogrammas līmenī, tāpēc ieteicams to izmantot vienmēr.

Ierīcēs ar iespējotu pieskārienu, atverot nolaižamo izvēlni mouseover, elementa tiešajiem pakārtotajiem elementiem tiek pievienoti tukši apdarinātāji <body>. Šī, protams, neglītā uzlaušana ir nepieciešama, lai novērstu iOS notikumu deleģēšanas dīvainību , kas citādi neļautu, pieskaroties nekur ārpus nolaižamās izvēlnes, aktivizētu kodu, kas aizver nolaižamo izvēlni. Kad nolaižamā izvēlne ir aizvērta, šie papildu tukšie mouseoverapstrādātāji tiek noņemti.

Izmantojot datu atribūtus

Pievienojiet data-bs-toggle="dropdown"saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.

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

Izmantojot JavaScript

Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:

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

`data-bs-toggle="dropdown"`joprojām ir nepieciešams

Neatkarīgi no tā, vai izsaucat savu nolaižamo izvēlni, izmantojot JavaScript vai tā vietā izmantojat datu api, data-bs-toggle="dropdown"nolaižamās izvēlnes aktivizētāja elementā vienmēr ir jābūt klāt.

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Vārds	Tips	Noklusējums	Apraksts
`autoClose`	Būla, virkne	`true`	Konfigurējiet nolaižamās izvēlnes automātiskās aizvēršanas darbību: `true`- nolaižamā izvēlne tiks aizvērta, noklikšķinot ārpus nolaižamās izvēlnes vai tās iekšpusē. `false`- nolaižamā izvēlne tiks aizvērta, noklikšķinot uz pārslēgšanas pogas un manuāli izsaucot `hide`vai `toggle`metodi. (Arī netiks aizvērts, nospiežot `esc`taustiņu) `'inside'`- nolaižamā izvēlne tiks aizvērta (tikai), noklikšķinot nolaižamajā izvēlnē. `'outside'`- nolaižamā izvēlne tiks aizvērta (tikai), noklikšķinot ārpus nolaižamās izvēlnes. Piezīme: nolaižamo izvēlni vienmēr var aizvērt ar `ESC`atslēgu.
`boundary`	virkne, elements	`'clippingParents'`	Nolaižamās izvēlnes pārpildes ierobežojuma robeža (attiecas tikai uz Popper's preventOverflow modifikatoru). Pēc noklusējuma tas ir `clippingParents`un var pieņemt HTMLElement atsauci (tikai izmantojot JavaScript). Lai iegūtu papildinformāciju, skatiet Popper's detectOverflow dokumentus .
`display`	virkne	`'dynamic'`	Pēc noklusējuma mēs izmantojam Popper dinamiskai pozicionēšanai. Atspējojiet to ar `static`.
`offset`	masīvs, virkne, funkcija	`[0, 2]`	Nolaižamās izvēlnes nobīde attiecībā pret tās mērķi. Datu atribūtos varat nodot virkni ar komatu atdalītām vērtībām, piemēram: `data-bs-offset="10,20"`. Ja funkcija tiek izmantota, lai noteiktu nobīdi, tā tiek izsaukta ar objektu, kurā kā pirmais arguments ir popper izvietojums, atsauce un popper rects. Aktivizējošais elements DOM mezgls tiek nodots kā otrais arguments. Funkcijai ir jāatgriež masīvs ar diviem cipariem: sānslīde , distance . Papildinformāciju skatiet Poppera nobīdes dokumentos .
`popperConfig`	nulle, objekts, funkcija	`null`	Lai mainītu Bootstrap noklusējuma Popper konfigurāciju, skatiet Popper konfigurāciju . Ja funkcija tiek izmantota, lai izveidotu Popper konfigurāciju, tā tiek izsaukta ar objektu, kas satur Bootstrap noklusējuma Popper konfigurāciju. Tas palīdz izmantot un apvienot noklusējuma iestatījumus ar savu konfigurāciju. Funkcijai ir jāatgriež Popper konfigurācijas objekts.
`reference`	virkne, elements, objekts	`'toggle'`	Nolaižamās izvēlnes atsauces elements. Pieņem vērtības `'toggle'`, `'parent'`, HTMLElement atsauces vai objekta, kas nodrošina `getBoundingClientRect`. Lai iegūtu papildinformāciju, skatiet Popper konstruktora dokumentus un virtuālo elementu dokumentus .

Izmantojot funkciju ar`popperConfig`

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

Metodes

Metode	Apraksts
`dispose`	Iznīcina elementa nolaižamo izvēlni. (Noņem DOM elementā saglabātos datus)
`getInstance`	Statiskā metode, kas ļauj iegūt nolaižamo gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statiskā metode, kas atgriež nolaižamo gadījumu, kas saistīts ar DOM elementu, vai izveido jaunu gadījumu, ja tas nav inicializēts. Varat to izmantot šādi: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Slēp attiecīgās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni.
`show`	Parāda noteiktas navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni.
`toggle`	Pārslēdz noteiktās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni.
`update`	Atjaunina elementa nolaižamās izvēlnes pozīciju.

Pasākumi

Visi nolaižamā saraksta notikumi tiek aktivizēti pārslēgšanas elementā un pēc tam tiek parādīti burbuļos. Tātad jūs varat arī pievienot notikumu uztvērējus .dropdown-menuvecāka elementam. hide.bs.dropdownun hidden.bs.dropdownnotikumiem ir clickEventrekvizīts (tikai tad, ja sākotnējais notikuma veids ir click), kas satur klikšķa notikuma notikuma objektu.

Pasākuma veids	Apraksts
`hide.bs.dropdown`	Aktivizējas nekavējoties, kad `hide`ir izsaukta instances metode.
`hidden.bs.dropdown`	Tiek aktivizēts, kad nolaižamā izvēlne ir paslēpta no lietotāja un ir pabeigtas CSS pārejas.
`show.bs.dropdown`	Aktivizējas nekavējoties, kad `show`tiek izsaukta instances metode.
`shown.bs.dropdown`	Tiek aktivizēts, kad nolaižamā izvēlne ir padarīta redzama lietotājam un CSS pārejas ir pabeigtas.

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

Nolaižamās izvēlnes

Pārskats

Pieejamība

Piemēri

Viena poga

Sadalīšanas poga

Izmēru noteikšana

Tumši nolaižamie saraksti

Norādes

RTL

Centrēts

Dropup

Nolaižams centrēts

Noslīdēja

Dropstart

Izvēlnes vienumi

Aktīvs

Atspējots

Izvēlņu izlīdzināšana

Atsaucīga izlīdzināšana

Izlīdzināšanas iespējas

Izvēlnes saturs

Virsraksti

Dalītāji

Teksts

Veidlapas

Automātiska aizvēršanās darbība

CSS

Mainīgie

Sass mainīgie

Maisījumi

Lietošana

Izmantojot datu atribūtus

Izmantojot JavaScript

`data-bs-toggle="dropdown"`joprojām ir nepieciešams

Iespējas

Izmantojot funkciju ar`popperConfig`

Metodes

Pasākumi

Nolaižamās izvēlnes

Pārskats

Pieejamība

Piemēri

Viena poga

Sadalīšanas poga

Izmēru noteikšana

Tumši nolaižamie saraksti

Norādes

RTL

Centrēts

Dropup

Nolaižams centrēts

Noslīdēja

Dropstart

Izvēlnes vienumi

Aktīvs

Atspējots

Izvēlņu izlīdzināšana

Atsaucīga izlīdzināšana

Izlīdzināšanas iespējas

Izvēlnes saturs

Virsraksti

Nolaižamās izvēlnes galvene

Dalītāji

Teksts

Veidlapas