Dropdown de bază
Un meniu vertical este un meniu toggleable, care permite utilizatorului să aleagă o valoare dintr-o listă predefinită:
Exemplu
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Încearcă - l singur » exemplu explicat
.dropdown clasa indică un meniu drop - down.
Pentru a deschide meniul derulant, utilizați un buton sau o legătură cu o clasă de .dropdown-toggle și data-toggle="dropdown" de data-toggle="dropdown" - data-toggle="dropdown" atribut.
.caret clasa creează o pictogramă caret săgeată ( ) ( ) ( ) , Ceea ce indică faptul că butonul este un drop - down.
Adăugați .dropdown-menu clasa la un <ul> Element pentru a construi de fapt , din meniul drop - down.
dropdown Divider
.divider Clasa este utilizat pentru link - uri separate , în interiorul meniul vertical cu o margine subțire orizontală:
dropdown antet
.dropdown-header clasa este utilizat pentru a adăuga antete în interiorul meniul drop - down:
Dezactivați un element
Pentru a dezactiva un element din meniul drop - down, utilizați .disabled clasa:
Poziția dropdown
Pentru dreapta-alinia meniul drop - down, adăugați .dropdown-menu-right clasa elementului cu .dropdown-meniu:
Dropup
Dacă doriți ca meniul drop - down pentru a extinde în sus , în loc de jos, schimbați <div> elementul cu class="dropdown" la "dropup" :
Accesibilitate dropdown
Pentru a ajuta la îmbunătățirea accesibilității pentru persoanele care folosesc cititoare de ecran, ar trebui să includă următoarele role și aria-* atributele, atunci când se creează un meniu drop - down:
Exemplu
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Finalizarea Bootstrap Dropdown de referință
Pentru o referință completă a tuturor opțiunilor derulante, metode și evenimente, du - te la nostru Bootstrap JS Dropdown de referință .