Цей урок продовжить серію заміток з розробки на 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
:
Як бачите, нічого складного. Успіхів у навчанні!
С места в статье “Заголовки элементов” у меня уже ни один дропдаун не раскрылся. Но вопрос в другом – как использовать корректно hover для открытия таких выпадающих навигаций?
А у меня почему-то классы caret и divider не работают (( caret, если его присвоить кнопке, ломает её. divider скрывает элемент, которому он присвоен. В чём может быть проблема?
Тоже не понял. Разобрался, класс не к кнопке добавлять, а как текст самой кнопки. Пример:
отличный урок! спасибо! только вопрос есть надо в выпадающем списке сделать чекбоксы (мультиселект), и чтоб выбранное выводилось где-нибудь. Нашла похожие на Гитхуб но прикруттить не выходит. Буду благодарна за такой урок!!
Урок отличный. Есть только один вопрос. Допустим у меня есть кнопка с выпадащим списком. Список содержит шесть пунктов. Нажимаем на кнопку. Список выпадает но верхние три пункта прячутся под выше стоящим элементом. Как сделать так что бы список выподал по верх всего? (Пример на сайте ufoha.in.ua форма входа. )
Проглотил одним махом. Еще никогда раньше мне не встречался материал, который так легко усваивался и был интересным одновременно. Мой первый комментарий на сайте за все время учебы и работы с веб) Жаль только, что на этом закончилось увлекательное путешествие в мир современных средств разработки
@Роман, во-первых, спасибо. Во-вторых, сам решил зайти и проверить, что такого необычного я написал :).
А в-третьих, не дождетесь, это еще только середина курса :)
Большое спасибо за уроки! Вы действительно очень хорошо рассказываете про возможности BS.
Спасибо, ждите новых уроков.
Добрый день!
А подскажите, плиз. Как определить какой из двух этих файлов мне нужно подключать? bootstrap.min.js или bootstrap.js
Пробовала пример с выпадающим списком. Подключала оба, Не выпадал. Оказалось работает только когда подключен один из них.
Как понять какой нужен?
спасибо
Это один и тот же файл, только в первом случае несжатый, а во втором — минифицированный. Подключайте второй, он меньше весит.
@Назар Токарь, спасибо
Огромное спасибо за уроки!
Жду продолжения.
Спасибо, скоро будет урок про скрытие блоков.
Доброго дня. На этом Ваши уроки окончены? скажите где можно взять справочник полный по всем возможностям бутстрапа. И хотелось бы очень ваших уроков дальше.
Нет, не окончены. Полная справка есть на офсайте фреймворка.
Скажите, Назар, а как сделать так, чтоб кнопка была также активной сслок, ведущей на страницу, а уже выпадение списка было по клику на каретку?
Идея в том, чтоб верхние уровни меню вели на страницы также, а уже выпадающие ссылки на их дочерние страницы.