Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

10.06.2016


13:26


5593


2


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

Выпадающее меню (списки). Основы 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.



Случайные записи:

  1. Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
  2. Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
  3. Бесплатный курс по основам Bootstrap3
  4. Как подключить CSS - способы подключения. Основы CSS для начинающих. Урок №3
  5. Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

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

  1. Katiushka says:

    :rose: красава

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Спасибо :rose:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?