bootstrap tutorials kurs
|

Rozwijana lista Bootstrap 3+ Dropdowns

przezAurelia Sypniewska
Czas czytania: 2 minut

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:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Przykład rozwijanej listy
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
  </ul>
</div>

Biblioteki Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Przykład rozwijanej listy
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li class="divider"></li>
    <li><a href="#">link 4s</a></li>
  </ul>
</div>

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.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Przykład rozwijanej listy
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Przykład rozwijanej listy 1</li>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Przykład rozwijanej listy 2</li>
      <li><a href="#">link 4</a></li>
    </ul>
  </div>

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

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

Rozwinięcie na prawo

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

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">   Przykład rozwijanej listy    <span class="caret"></span></button> 
    <ul class="dropdown-menu dropdown-menu-right">        
    <li><a href="#">link 1</a></li>      
    <li><a href="#">link 2</a></li>      
    <li><a href="#">link 3</a></li>           
    <li><a href="#">link 4</a></li>    
    </ul>  
    </div>

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

<ul class="dropdown-menu">

zmieniamy na

<ul class="dropdown-menu dropdown-menu-right">

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

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

<div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">    Przykład rozwijanej listy    <span class="caret"></span></button> 
    <ul class="dropdown-menu">        
    <li><a href="#">link 1</a></li>      
    <li><a href="#">link 2</a></li>      
    <li><a href="#">link 3</a></li>           
    <li><a href="#">link 4</a></li>    
    </ul>  
    </div>

Zmianę kierunku wyświetlania uzyskujemy poprzez zamianę klas

<div class="dropdown">

na

<div class="dropup">

DEMO:
Przykładowe realizacje

polecane: