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

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

Отправить ответ

15 Комментарий на "Уроки по Bootstrap. Урок №11: выпадающие меню и списки"

Уведомлять
avatar
5000
Данила
Гость

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

Татьяна
Гость

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

Сергей
Гость

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

Роман
Гость

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

Игорь
Гость

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

Юлия
Гость

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

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

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

Юлия
Гость

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

Валерий
Гость

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

Сергей
Гость

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

Дмитрий
Гость

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

wpDiscuz