padajuće liste

Uključite/isključite kontekstualne preklapanja za prikaz popisa poveznica i više s Bootstrap padajućim dodatkom.

Na ovoj stranici

Pregled

Padajući izbori su kontekstualni slojevi koji se mogu mijenjati za prikaz popisa veza i više. Interaktivni su s uključenim Bootstrap padajućim JavaScript dodatkom. Prebacuju se klikom, a ne lebdenjem; ovo je namjerna dizajnerska odluka .

Padajući izbori izgrađeni su na biblioteci treće strane, Popper , koja pruža dinamičko pozicioniranje i otkrivanje prozora. Obavezno uključite popper.min.js prije Bootstrapovog JavaScripta ili koristite bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper. Popper se ne koristi za pozicioniranje padajućih izbornika u navigacijskim trakama iako dinamičko pozicioniranje nije potrebno.

Pristupačnost

Standard WAI ARIA definira stvarni role="menu"widget , ali to je specifično za izbornike slične aplikacijama koji pokreću akcije ili funkcije. ARIA izbornici mogu sadržavati samo stavke izbornika, stavke izbornika potvrdnih okvira, stavke izbornika radio gumba, grupe radio gumba i podizbornike.

Bootstrapovi padajući izbornici, s druge strane, dizajnirani su da budu generički i primjenjivi na različite situacije i strukture označavanja. Na primjer, moguće je stvoriti padajuće izbornike koji sadrže dodatne unose i kontrole obrazaca, kao što su polja za pretraživanje ili obrasci za prijavu. Iz tog razloga, Bootstrap ne očekuje (niti automatski dodaje) bilo koji od atributa rolei potrebnih za prave ARIA izbornike. Autori će morati sami uključiti ove specifičnije atribute.aria-

Međutim, Bootstrap dodaje ugrađenu podršku za većinu standardnih interakcija izbornika tipkovnice, kao što je mogućnost kretanja kroz pojedinačne .dropdown-itemelemente pomoću tipki kursora i zatvaranja izbornika pomoću ESCtipke.

Primjeri

Zamotajte prekidač padajućeg izbornika (vaš gumb ili poveznica) i padajući izbornik unutar .dropdownili neki drugi element koji izjavljuje position: relative;. Padajući izbornici mogu se pokrenuti iz <a>ili <button>elemenata kako bi bolje odgovarali vašim potencijalnim potrebama. Ovdje prikazani primjeri koriste semantičke <ul>elemente gdje je to prikladno, ali prilagođeno označavanje je podržano.

Jedno dugme

Bilo koja pojedinačna .btnoznaka može se pretvoriti u padajući izbornik uz neke promjene oznaka. Evo kako ih možete staviti u rad s bilo kojim <button>elementom:

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>

I sa <a>elementima:

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>

Najbolji dio je što to možete učiniti i s bilo kojom varijantom gumba:

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

Gumb Split

Slično, stvorite podijeljene padajuće izbornike gumba s gotovo istim označavanjem kao padajući izbornici s jednim gumbom, ali uz dodatak .dropdown-toggle-splitza pravilan razmak oko padajućeg izbornika za umetanje.

Koristimo ovu dodatnu klasu za smanjenje horizontale paddings obje strane kareta za 25% i uklanjanje margin-leftdodanog za uobičajene padajuće gumbe. Te dodatne promjene drže karet u središtu gumba za dijeljenje i pružaju pogodno područje prikladnije veličine pokraj glavnog gumba.

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

Dimenzioniranje

Padajući izbornici gumba rade s gumbima svih veličina, uključujući zadane i podijeljene padajuće gumbe.

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

Tamni padajući izbornik

Odaberite tamnije padajuće izbornike kako biste odgovarali tamnoj navigacijskoj traci ili prilagođenom stilu dodavanjem .dropdown-menu-darkna postojeći .dropdown-menu. Nisu potrebne nikakve promjene na padajućim stavkama.

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>

I njegovo korištenje u navigacijskoj traci:

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>

Upute

RTL

Upute se preslikavaju kada koristite Bootstrap u RTL-u, što znači .dropstartda će se pojaviti na desnoj strani.

Centrirano

Postavite padajući izbornik u središte ispod prekidača s .dropdown-centernadređenim elementom.

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

Pokreni padajuće izbornike iznad elemenata dodavanjem .dropupnadređenom elementu.

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

Ispadanje centrirano

Postavite padajući izbornik u središte iznad prekidača s .dropup-centernadređenim elementom.

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

Pokrenite padajuće izbornike s desne strane elemenata dodavanjem .dropendnadređenom elementu.

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

Pokrenite padajuće izbornike s lijeve strane elemenata dodavanjem .dropstartnadređenom elementu.

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

<a>Elemente ili možete koristiti <button>kao padajuće stavke.

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>

Također možete stvoriti neinteraktivne padajuće stavke pomoću .dropdown-item-text. Slobodno dodatno stilizirajte prilagođenim CSS-om ili tekstualnim uslužnim programima.

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>

Aktivan

Dodajte .activestavkama na padajućem izborniku da biste ih stilizirali kao aktivne . Da biste prenijeli aktivno stanje pomoćnim tehnologijama, koristite aria-currentatribut — koristeći pagevrijednost za trenutnu stranicu ili trueza trenutnu stavku u skupu.

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>

Onemogućeno

Dodajte .disabledstavkama na padajućem izborniku da biste ih stilizirali kao onemogućene .

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>

Prema zadanim postavkama, padajući izbornik automatski se postavlja 100% od vrha i duž lijeve strane nadređenog izbornika. To možete promijeniti s usmjeravanjem.drop* klasama, ali ih također možete kontrolirati s dodatnim modifikatorskim klasama.

Dodaj .dropdown-menu-endna a .dropdown-menuza desno poravnanje padajućeg izbornika. Upute su preslikane kada koristite Bootstrap u RTL-u, što znači .dropdown-menu-endda će se pojaviti na lijevoj strani.

Glavu gore! Padajući izbornici pozicionirani su zahvaljujući Popperu osim kada su sadržani u navigacijskoj traci.

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>

Odgovarajuće poravnanje

Ako želite koristiti responzivno poravnanje, onemogućite dinamičko pozicioniranje dodavanjem data-bs-display="static"atributa i upotrijebite responzivne varijacijske klase.

Za poravnanje padajućeg izbornika s danom prijelomnom točkom ili većom, dodajte .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>

Za poravnanje lijevog padajućeg izbornika s danom prijelomnom točkom ili većom, dodajte .dropdown-menu-endi .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>

Imajte na umu da ne morate dodati data-bs-display="static"atribut padajućim gumbima u navigacijskim trakama, budući da se Popper ne koristi u navigacijskim trakama.

Mogućnosti poravnanja

Uzimajući većinu gore prikazanih opcija, evo male demonstracije kuhinjskog sudopera s različitim opcijama poravnanja padajućih izbornika na jednom mjestu.

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>

Zaglavlja

Dodajte zaglavlje za označavanje odjeljaka radnji u bilo kojem padajućem izborniku.

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>

Razdjelnici

Grupe povezanih stavki izbornika odvojite razdjelnikom.

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>

Tekst

Postavite bilo koji tekst slobodnog oblika unutar padajućeg izbornika s tekstom i koristite pomoćne programe za razmake . Imajte na umu da će vam vjerojatno trebati dodatni stilovi veličine kako biste ograničili širinu izbornika.

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>

Obrasci

Stavite obrazac unutar padajućeg izbornika ili ga napravite u padajućem izborniku i upotrijebite pomoćne programe za margine ili ispune da biste mu dali negativni prostor koji vam je potreban.

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>

Koristite data-bs-offsetili data-bs-referenceza promjenu lokacije padajućeg izbornika.

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>

Ponašanje automatskog zatvaranja

Prema zadanim postavkama, padajući izbornik se zatvara kada se klikne unutar ili izvan padajućeg izbornika. Možete koristiti autoCloseopciju za promjenu ovakvog ponašanja padajućeg izbornika.

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

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, padajući izbornici sada koriste lokalne CSS varijable .dropdown-menuza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

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

Prilagodba putem CSS varijabli može se vidjeti na .dropdown-menu-darkklasi gdje nadjačavamo određene vrijednosti bez dodavanja dvostrukih CSS selektora.

  --#{$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 varijable

Varijable za sve padajuće izbornike:

$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

Varijable za tamni padajući izbornik :

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

Varijable za karate temeljene na CSS-u koje označavaju interaktivnost padajućeg izbornika:

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

Mixins

Mixini se koriste za generiranje karata temeljenih na CSS-u i mogu se pronaći u 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;
    }
  }
}

Korištenje

Putem atributa podataka ili JavaScripta, padajući dodatak uključuje i isključuje skriveni sadržaj (padajući izbornici) prebacivanjem .showklase na roditelju .dropdown-menu. Atribut data-bs-toggle="dropdown"se koristi za zatvaranje padajućih izbornika na razini aplikacije, stoga je dobra ideja uvijek ga koristiti.

Na uređajima s omogućenim dodirom otvaranje padajućeg izbornika dodaje prazne mouseoverrukovatelje neposrednim potomcima <body>elementa. Ovaj doduše ružan hack neophodan je da se zaobiđe hir u delegiranju događaja u iOS-u , koji bi inače spriječio da dodir bilo gdje izvan padajućeg izbornika pokrene kod koji zatvara padajući izbornik. Nakon što se padajući izbornik zatvori, ovi dodatni prazni mouseoverrukovatelji se uklanjaju.

Preko atributa podataka

Dodajte data-bs-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.

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

Preko JavaScripta

Pozovite padajuće izbornike putem JavaScripta:

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

`data-bs-toggle="dropdown"`još uvijek potrebno

Bez obzira na to pozivate li svoj padajući izbornik putem JavaScripta ili umjesto njega koristite data-api, data-bs-toggle="dropdown"uvijek je potrebno biti prisutan na elementu okidača padajućeg izbornika.

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjestodata-bs-customClass="beautifier" .

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime	Tip	Zadano	Opis
`autoClose`	booleov, niz	`true`	Konfigurirajte ponašanje automatskog zatvaranja padajućeg izbornika: `true`- padajući izbornik će se zatvoriti klikom izvan ili unutar padajućeg izbornika. `false`- padajući izbornik zatvorit će se klikom na gumb za prebacivanje i ručnim pozivanjem metode `hide`ili . `toggle`(Također se neće zatvoriti pritiskom `esc`tipke) `'inside'`- padajući izbornik će se zatvoriti (samo) klikom unutar padajućeg izbornika. `'outside'`- padajući izbornik će se zatvoriti (samo) klikom izvan padajućeg izbornika. Napomena: padajući izbornik se uvijek može zatvoriti `ESC`tipkom.
`boundary`	niz, element	`'clippingParents'`	Granica ograničenja prelijevanja padajućeg izbornika (odnosi se samo na Popperov modifikator za sprječavanje preljeva). Prema zadanim postavkama `clippingParents`može prihvatiti HTMLElement referencu (samo putem JavaScripta). Za više informacija pogledajte Popper's detectOverflow dokumente .
`display`	niz	`'dynamic'`	Prema zadanim postavkama koristimo Popper za dinamičko pozicioniranje. Onemogućite ovo pomoću `static`.
`offset`	niz, niz, funkcija	`[0, 2]`	Pomak padajućeg izbornika u odnosu na cilj. Možete proslijediti niz u atributima podataka s vrijednostima odvojenim zarezima kao što su: `data-bs-offset="10,20"`. Kada se funkcija koristi za određivanje pomaka, ona se poziva s objektom koji sadrži popper položaj, referencu i popper rects kao prvi argument. DOM čvor pokretačkog elementa prosljeđuje se kao drugi argument. Funkcija mora vratiti niz s dva broja: proklizavanje , udaljenost . Za više informacija pogledajte Popperovu offset dokumentaciju .
`popperConfig`	null, objekt, funkcija	`null`	Za promjenu Bootstrapove zadane Popper konfiguracije, pogledajte Popperovu konfiguraciju . Kada se funkcija koristi za stvaranje Popper konfiguracije, poziva se s objektom koji sadrži Bootstrapovu zadanu Popper konfiguraciju. Pomaže vam koristiti i spojiti zadane postavke s vlastitom konfiguracijom. Funkcija mora vratiti konfiguracijski objekt za Popper.
`reference`	niz, element, objekt	`'toggle'`	Referentni element padajućeg izbornika. Prihvaća vrijednosti `'toggle'`, `'parent'`, HTMLElement reference ili objekta koji pruža `getBoundingClientRect`. Za više informacija pogledajte Popperove dokumente konstruktora i dokumente virtualnih elemenata .

Korištenje funkcije sa`popperConfig`

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

Metode

metoda	Opis
`dispose`	Uništava padajući izbornik elementa. (Uklanja pohranjene podatke na DOM elementu)
`getInstance`	Statička metoda koja vam omogućuje dobivanje padajuće instance povezane s DOM elementom, možete je koristiti ovako: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statička metoda koja vraća padajuću instancu pridruženu DOM elementu ili stvara novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Skriva padajući izbornik određene navigacijske trake ili navigacije s karticama.
`show`	Prikazuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
`toggle`	Prebacuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
`update`	Ažurira položaj padajućeg izbornika elementa.

Događaji

Svi događaji s padajućim izbornikom pokreću se na preklopnom elementu, a zatim se pojavljuju u obliku mjehurića. Tako da također možete dodati slušatelje događaja na .dropdown-menuroditeljski element. hide.bs.dropdowni hidden.bs.dropdowndogađaji imaju clickEventsvojstvo (samo kada je izvorni tip događaja click) koje sadrži objekt događaja za događaj klika.

Vrsta događaja	Opis
`hide.bs.dropdown`	Odmah se aktivira kada `hide`se pozove metoda instance.
`hidden.bs.dropdown`	Pokreće se kada je padajući izbornik prestao biti skriven od korisnika i CSS prijelazi su dovršeni.
`show.bs.dropdown`	Odmah se aktivira kada `show`se pozove metoda instance.
`shown.bs.dropdown`	Pokreće se kada je padajući izbornik postao vidljiv korisniku i CSS prijelazi su dovršeni.

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

padajuće liste

Pregled

Pristupačnost

Primjeri

Jedno dugme

Gumb Split

Dimenzioniranje

Tamni padajući izbornik

Upute

RTL

Centrirano

Dropup

Ispadanje centrirano

Dropend

Dropstart

Stavke izbornika

Aktivan

Onemogućeno

Usklađivanje izbornika

Odgovarajuće poravnanje

Mogućnosti poravnanja

Sadržaj jelovnika

Zaglavlja

Razdjelnici

Tekst

Obrasci

Ponašanje automatskog zatvaranja

CSS

Varijable

Sass varijable

Mixins

Korištenje

Preko atributa podataka

Preko JavaScripta

`data-bs-toggle="dropdown"`još uvijek potrebno

Mogućnosti

Korištenje funkcije sa`popperConfig`

Metode

Događaji

padajuće liste

Pregled

Pristupačnost

Primjeri

Jedno dugme

Gumb Split

Dimenzioniranje

Tamni padajući izbornik

Upute

RTL

Centrirano

Dropup

Ispadanje centrirano

Dropend

Dropstart

Stavke izbornika

Aktivan

Onemogućeno

Usklađivanje izbornika

Odgovarajuće poravnanje

Mogućnosti poravnanja

Sadržaj jelovnika

Zaglavlja

Padajuće zaglavlje

Razdjelnici

Tekst

Obrasci

Padajuće opcije

Ponašanje automatskog zatvaranja

CSS

Varijable

Sass varijable

Mixins

Korištenje

Preko atributa podataka

Preko JavaScripta

data-bs-toggle="dropdown"još uvijek potrebno

Mogućnosti

Korištenje funkcije sapopperConfig

Metode

Događaji

`data-bs-toggle="dropdown"`još uvijek potrebno

Korištenje funkcije sa`popperConfig`