Bootstrap tutorial logo

Listy rozwijane / Dropdowns

autor: Robert

20 sierpnia 2013

Przy tworzeniu menu strony pokazałem już jak zrobić rozwijane listy. Oczywiście można je stosować także do buttonów oraz pól formularzy. W tym wpisie pokażę podstawowy kod który można później implementować w dowolnych elementach.

Lista rozwijana

Lista musi być zamknięta w jakimś divie który określa czy ma być dołączona do buttonów, menu czy pól formularzy <div class="dropdown">. Następnie tworzymy normalną HTMLową listę za pomocą znacznika ul z klasą. Całość wygląda tak: <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">.
Wewnątrz znacznika <ul> każda pozycja menu wygląda następująco:
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Pierwsza pozycja menu</a></li>.
Całość wygląda następująco:

Nagłówki w liście

Nie każda pozycja na liście musi być linkiem do jakiejś opcji. Możemy podzielić ją na kilka segmentów i każdy z nich nazwać by użytkownik wiedział co wybierać. Nagłówki tworzymy za pomocą klasy .dropdown-header w kolejnej opcji menu.
Wygląda to następująco:

Wyłączenie opcji

Poprzez dodanie klasy .disabled do znacznika <li> możemy wyłączać poszczególne opcje menu.
Kod takiego rozwiązania:

No i jak zwykle przykłady:
Przykład jest dostępny tu:
Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (2 głosów, średnia: 5,00 na 5)
Loading...

Mister Klikacz 4 grudnia 2014 o 20:07

Nie wiem jak u innych, ale u mnie nie działa pierwszy kod z tego wpisu. Gdyby ktoś również miał ten problem to odsyłam do strony z działającym przykładem: http://getbootstrap.com/components/#dropdowns-example

Odpowiedz