7 Червень 2015
55 506
Рубрика: уроки

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

Bootstrap позволяет быстро создавать выпадающие меню при помощи ненумерованного списка, 10 минут времени и нескольких классов. Заходите и расскажу, как это делается.

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