Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать выпадающее меню из списков.
Если смотрели, а точнее, читали предыдущий урок, тогда можете двигаться дальше, если не читали, пожалуйста, ознакомьтесь и возвращайтесь назад к изучению этого урока.
А мы идем дальше.
Выпадающий список будет появляться при клике на указанный объект. Для примера я взял кнопку. Вставьте вот этот код в ваш файл:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b>
</button>
<ul class="dropdown-menu">
<li><a href="http://bloggood.ru/">BlogGood.ru</a></li>
<li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li>
</ul>
</div>

Результат:

Что же я сделал, чтобы кнопку превратить в выпадающий список?
Указал класс «.dropdown» к блоку <div>, в котором находится список.
Чтобы список при клике по кнопке показался, добавляем класс «.dropdown-toggle» к кнопке и атрибут «data-toggle="dropdown"».

Класс .dropdown нужно присвоить блоку, который содержит список. Для показа списка используется кнопка или ссылка с классом «.dropdown-toggle» атрибутом data-toggle="dropdown".

Класс «.caret» - это чисто для создания стрелки вниз «▼»; для того, чтобы намекнуть пользователю, что в меню есть выпадающий список.
Добавил класс «.dropdown-menu» к списку <ul>, чтобы список стал выпадающим.
Вроде все, ничего не пропустил.

Теперь вы знаете, как на кнопку подцепить выпадающий список, а вот как то же самое на ссылку, смотрим ниже:

<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
МЕНЮ
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>

Результат:

Как видите, все идентично первому коду.

Разделитель в выпадающем списке
Используйте класс «.divider»  внутри списка, чтобы отделить какой-то из разделов:

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

Пример:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b>
</button>
<ul class="dropdown-menu">
<li><a href="http://bloggood.ru/">BlogGood.ru</a></li>
<li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li>
<li class="divider"></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>

Результат:

Заблокированные элементы в выпадающем списке.
Чтобы заблокировать (сделать неактивным) пункт из выпадающего списка, добавьте класс «.disabled».

<li class="disabled"><a href="#">Архив</a></li>

Пример:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <b class="caret"></b>
</button>
<ul class="dropdown-menu">
<li><a href="http://bloggood.ru/">BlogGood.ru</a></li>
<li><a href="http://stepkinblog.ru/">StepkinBlog.ru</a></li>
<li class="divider"></li>
<li class="disabled"><a href="#">Архив</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>

Результат:

Выпадающий список от стрелки «▼»

<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка</button>
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li class="divider"></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>

Результат:

Верхний выпадающий список.

А еще, может, кому-то пригодится для сайта это ход: при нажатии на меню, список будет появляться не снизу, а сверху.  Добавить дополнительный класс «.dropup»:

<div class="dropdown dropup">

Пример:

<div class="dropdown dropup">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
МЕНЮ
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>

Результат:

Неплохой урок получился, не правда ли?!
Жду вас на следующих занятиях.
Постараюсь вас не разочаровать. Думаю, через месяц вы получите диплом опытного знатока Bootstrap 3.