Назар Токар
Опубліковано: 7 Червня 2015
Оновлено: 5 Травня 2017

Этот урок продолжит серию заметок по разработке на 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:

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

15 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

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

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

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

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

Автор
Назар Токар

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

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

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

Автор
Назар Токар

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

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

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

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

Автор
Назар Токар

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

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

Огромное спасибо за уроки!

Жду продолжения.

Автор
Назар Токар

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

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

Автор
Назар Токар

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

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

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