Для створення динамічних елементів Bootstrap містить бібліотеку bootstrap.js. Вона працює у зв'язці з jQuery і дозволяє легко створювати об'єкти, з якими може взаємодіяти відвідувач вашого сайту. Це можуть бути модальні вікна, що випаднісписки, вкладки, слайдери тощо. В цьому уроці мова піде про найпростіший з об'єктів - випадний список.

Як підключити Bootstrap.js

Для коректної роботи скриптів Bootstrap необхідно підключитти бібліотеку jQueryі:

<script src = "https://code.jquery.com/jquery.min.js"></script> 
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Випадні списки

Випадний список - це меню, вигляд якого можна змінювати. В даному випадку список з'являється при кліці на зазначений об'єкт меню. Для прикладу нехай це буде кнопка. Ось приклад такого списку, реалізований на Bootstrap:

<div class = "dropdown"> 
 <button class = "btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Фрукти </button> 
 <ul class = "dropdown-menu"> 
 <li><a href="#"> Банани </a></li>
 <li><a href="#"> Груші </a></li> 
 <li><a href="#"> Сливи </a></li>
 </ul>
</div>

Клас .dropdown  потрібно привласнити блоку, який містить список. Для показу списку використовується кнопка або посилання з класом .dropdown-toggle, який має атрибут data-toggle = "dropdown".

Клас .caret створює стрілку вниз для того, щоб показати, що з'явиться список. 

Додаючи клас .dropdown-menu до списку <ul>, він стає випадаючим.

Роздільник в випадаючому списку 

<li class = "divider"> </li>

Елемент з класом .divider можна використовувати для розділення елементів всередині списку:

Заголовки елементів

<li class = "dropdown-header"> Заголовок </li>

Ви можете позначити групи елементів всередині списку за допомогою класу .dropdown-header:

Заблоковані елементи

<li class = "disabled"><a href = "#"> Заблокований елемент </a></li>

Щоб зробити елемент списку неактивним, додайте до нього клас .disabled:

Список, який "випадає" вгору

Для того, щоб список з'являвся вище кнопки, замыныть клас .dropdown на .dropup:


Наступний урок (Урок №11: "Cпойлери" та згортання блоків)

Перелік усіх уроків


 Похожие публикации
2016-05-31 • Просмотров [ 51 ]