padajuće liste

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

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.

Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .

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.

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:

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

I sa <a>elementima:

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

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Upute

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-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Droplijevo

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

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Povijesno gledano, sadržaji padajućeg izbornika morali su biti poveznice, ali to više nije slučaj s v4. Sada po želji možete koristiti <button>elemente u svojim padajućim izbornicima umjesto samo <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</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.

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

Aktivan

Dodajte .activestavkama na padajućem izborniku da biste ih stilizirali kao aktivne .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Onemogućeno

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

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

Prema zadanim postavkama, padajući izbornik automatski se postavlja 100% od vrha i duž lijeve strane nadređenog izbornika. Dodaj .dropdown-menu-rightna a .dropdown-menuza desno poravnanje padajućeg izbornika.

Glavu gore! Padajući izbornici pozicionirani su zahvaljujući Popperu (osim kada se nalaze u navigacijskoj traci).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Odgovarajuće poravnanje

Ako želite koristiti responzivno poravnanje, onemogućite dinamičko pozicioniranje dodavanjem data-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}-right.

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

Za poravnanje lijevog padajućeg izbornika s danom prijelomnom točkom ili većom, dodajte .dropdown-menu-righti .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

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

Zaglavlja

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

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

Razdjelnici

Grupe povezanih stavki izbornika odvojite razdjelnikom.

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

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.

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

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

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

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-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 ( $.noop) 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-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.

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

Preko JavaScripta

Pozovite padajuće izbornike putem JavaScripta:

$('.dropdown-toggle').dropdown()

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

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".

Ime	Tip	Zadano	Opis
pomaknuti	broj \| niz \| funkcija	0	Pomak padajućeg izbornika u odnosu na cilj. Kada se funkcija koristi za određivanje pomaka, poziva se s objektom koji sadrži podatke o pomaku kao prvi argument. Funkcija mora vratiti objekt s istom strukturom. DOM čvor pokretačkog elementa prosljeđuje se kao drugi argument. Za više informacija pogledajte Popperovu offset dokumentaciju .
okrenuti	Booleov	pravi	Dopustite padajućem izborniku da se okrene u slučaju preklapanja na referentnom elementu. Za više informacija pogledajte Popper's flip docs .
granica	niz \| element	'scrollParent'	Granica ograničenja prelijevanja padajućeg izbornika. Prihvaća vrijednosti `'viewport'`, `'window'`, `'scrollParent'`ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper's preventOverflow dokumente .
referenca	niz \| element	'prebaciti'	Referentni element padajućeg izbornika. Prihvaća vrijednosti `'toggle'`, `'parent'`, ili HTMLElement reference. Za više informacija pogledajte Popper's referenceObject docs .
prikaz	niz	'dinamičan'	Prema zadanim postavkama koristimo Popper za dinamičko pozicioniranje. Onemogućite ovo pomoću `static`.
popperConfig	nula \| objekt	ništavan	Za promjenu Bootstrapove zadane Popper konfiguracije, pogledajte Popperovu konfiguraciju

Napomena: kada boundaryje postavljeno na bilo koju vrijednost osim 'scrollParent', stil position: staticse primjenjuje na .dropdownspremnik.

Metode

metoda	Opis
`$().dropdown('toggle')`	Prebacuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
`$().dropdown('show')`	Prikazuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
`$().dropdown('hide')`	Skriva padajući izbornik određene navigacijske trake ili navigacije s karticama.
`$().dropdown('update')`	Ažurira položaj padajućeg izbornika elementa.
`$().dropdown('dispose')`	Uništava padajući izbornik elementa.

Događaji

Svi padajući događaji pokreću se na .dropdown-menunadređenom elementu i imaju relatedTargetsvojstvo čija je vrijednost preklopni element sidra. 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.

Događaj	Opis
`show.bs.dropdown`	Ovaj događaj aktivira se odmah kada se pozove metoda show instance.
`shown.bs.dropdown`	Ovaj se događaj pokreće kada je padajući izbornik učinjen vidljivim korisniku (pričekat će CSS prijelaze da dovrše).
`hide.bs.dropdown`	Ovaj se događaj aktivira odmah nakon pozivanja metode hide instance.
`hidden.bs.dropdown`	Ovaj se događaj pokreće kada se padajući izbornik više ne skriva od korisnika (pričekat će se da CSS prijelazi dovrše).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

padajuće liste

Pregled

Pristupačnost

Primjeri

Jedno dugme

Gumb Split

Dimenzioniranje

Upute

Dropup

Dropright

Droplijevo

Stavke izbornika

Aktivan

Onemogućeno

Usklađivanje izbornika

Odgovarajuće poravnanje

Sadržaj jelovnika

Zaglavlja

Razdjelnici

Tekst

Obrasci

Korištenje

Preko atributa podataka

Preko JavaScripta

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

Mogućnosti

Metode

Događaji

padajuće liste

Pregled

Pristupačnost

Primjeri

Jedno dugme

Gumb Split

Dimenzioniranje

Upute

Dropup

Dropright

Droplijevo

Stavke izbornika

Aktivan

Onemogućeno

Usklađivanje izbornika

Odgovarajuće poravnanje

Sadržaj jelovnika

Zaglavlja

Padajuće zaglavlje

Razdjelnici

Tekst

Obrasci

Padajuće opcije

Korištenje

Preko atributa podataka

Preko JavaScripta

data-toggle="dropdown"još uvijek potrebno

Mogućnosti

Metode

Događaji

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