Цей урок продовжить серію заміток з розробки на Bootstrap, трохи підвищивши рівень. З попередніх уроків ви могли дізнатися, як працювати з текстом, таблицями, як верстати шаблони й створювати форми.

Для створення динамічних елементів 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>

Створювати списки, що випадають на бутстрапа — суцільне задоволення. Ви можете налаштувати стиль таких списків за допомогою пари класів, а для їх роботи буде потрібно підключити jQuery і bootstrap.js.

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

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

Код прикладу:

<div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Випадний список
</button>
<ul class="dropdown-menu">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
</ul>
</div>

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

Клас .caret створить стрілку вниз (), щоб показати, що з’явиться список. І останнє: додайте клас .dropdown-menuсписку <ul>, щоб він став випадним.

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

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

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

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

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

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

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

<li class="disabled"><a href="#">Архів уроков</a></li>

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

Приклад: список справа

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

Ви можете поміняти місце появи списку зі стандартного на появу зверху або праворуч. Щоб список з’являвся праворуч, призначте елементу <ul> клас .dropdown-menu-right:

Приклад: список, що «випадає» нагору

Щоб список з’являвся вище кнопки, поміняйте клас .dropdown на .dropup:

Як бачите, нічого складного. Успіхів у навчанні!

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Евгений

С места в статье “Заголовки элементов” у меня уже ни один дропдаун не раскрылся. Но вопрос в другом – как использовать корректно hover для открытия таких выпадающих навигаций?

Данила

А у меня почему-то классы caret и divider не работают (( caret, если его присвоить кнопке, ломает её. divider скрывает элемент, которому он присвоен. В чём может быть проблема?

Ignab

Тоже не понял. Разобрался, класс не к кнопке добавлять, а как текст самой кнопки. Пример:

Choose

Татьяна

отличный урок! спасибо! только вопрос есть надо в выпадающем списке сделать чекбоксы (мультиселект), и чтоб выбранное выводилось где-нибудь. Нашла похожие на Гитхуб но прикруттить не выходит. Буду благодарна за такой урок!!

Сергей

Урок отличный. Есть только один вопрос. Допустим у меня есть кнопка с выпадащим списком. Список содержит шесть пунктов. Нажимаем на кнопку. Список выпадает но верхние три пункта прячутся под выше стоящим элементом. Как сделать так что бы список выподал по верх всего? (Пример на сайте ufoha.in.ua форма входа. )

Роман

Проглотил одним махом. Еще никогда раньше мне не встречался материал, который так легко усваивался и был интересным одновременно. Мой первый комментарий на сайте за все время учебы и работы с веб) Жаль только, что на этом закончилось увлекательное путешествие в мир современных средств разработки

Назар Токарь

@Роман, во-первых, спасибо. Во-вторых, сам решил зайти и проверить, что такого необычного я написал :).

А в-третьих, не дождетесь, это еще только середина курса :)

Игорь

Большое спасибо за уроки! Вы действительно очень хорошо рассказываете про возможности BS.

Назар Токарь

Спасибо, ждите новых уроков.

Юлия

Добрый день!
А подскажите, плиз. Как определить какой из двух этих файлов мне нужно подключать? bootstrap.min.js или bootstrap.js

Пробовала пример с выпадающим списком. Подключала оба, Не выпадал. Оказалось работает только когда подключен один из них.

Как понять какой нужен?
спасибо

Назар Токарь

Это один и тот же файл, только в первом случае несжатый, а во втором — минифицированный. Подключайте второй, он меньше весит.

Юлия

@Назар Токарь, спасибо

Валерий

Огромное спасибо за уроки!
Жду продолжения.

Назар Токарь

Спасибо, скоро будет урок про скрытие блоков.

Сергей

Доброго дня. На этом Ваши уроки окончены? скажите где можно взять справочник полный по всем возможностям бутстрапа. И хотелось бы очень ваших уроков дальше.

Назар Токарь

Нет, не окончены. Полная справка есть на офсайте фреймворка.

Дмитрий

Скажите, Назар, а как сделать так, чтоб кнопка была также активной сслок, ведущей на страницу, а уже выпадение списка было по клику на каретку?
Идея в том, чтоб верхние уровни меню вели на страницы также, а уже выпадающие ссылки на их дочерние страницы.