autor: Robert
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 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:
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:
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
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
OdpowiedzEwentualnie parę wpisów dalej – do strony pod adresem http://kursbootstrap.pl/rozwijane-przyciski-dropdown/ :)
Odpowiedz