Rozwijana lista Bootstrap Dropdowns

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 3, Kurs Bootstrap, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Bootstrap Dropdowns czyli rozwijana lista jest rodzajem menu. Nazwa wzięła się, od sposobu obsługi listy, jest to więc lista rozwijająca się po naciśnięciu przycisku.

Najprostszym przykładem takiej listy jest:

Biblioteki Bootstrap:

DEMO ROZWIJANYCH LIST

Pokazana powyżej lista wygląda podobnie jak zwykłe menu na tablecie, telefonie lub innym mobilnym urządzeniu.

Teraz pójdziemy o krok dalej i wprowadzimy podział na liście poprzez dodanie pustej pozycji.

Jedyną zmianą jaka została wprowadzona jest dodanie:
<li class=”divider”></li>
<li><a href=”#”>link 4s</a></li>

Podzieliło to nam listę jedynie w formie graficznej ponieważ w kodzie w dalszym ciągu to ten sam obiekt.

Dodawanie nagłówków do sekcji

Umiemy już podzielić rozwijaną listę na części teraz za pomocą klasy „dropdown-header” dodamy tym sekcją odpowiednie nazwy tak by wyglądały jak dwa połączone ze sobą menu.

Blokowanie i zaznaczanie elementów rozwijanej listy

W celu zablokowania elementu listy dodajemy do niego klasę „disabled”. Podobnie postępujemy z aktywnymi elementami tylko tym razem będzie to „active”.

Rozwinięcie na prawo

Rozwijana lista nie musi zawsze rozwijać się zaraz pod przyciskiem, możemy rozwinąć listę na prawo. (sprawdź demo)

Powyższy efekt uzyskaliśmy dzięki drobnej zmianie

zmieniamy na

Rozwinięcie do góry zamiast na dół

Kolejną ciekawą możliwością jest rozwijanie listy do góry.

Zmianę kierunku wyświetlania uzyskujemy poprzez zamianę klas

na

DEMO:
Przykładowe realizacje