RUS | ANG | |

StepkinBlog.ru

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

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

10.06.2016


13:26


11658


10


Выпадающее меню (списки). Основы 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. Бесплатный курс по основам CSS
  2. Контейнер. Основы bootstrap 3 для начинающих. Урок №3
  3. Тег DOCTYPE в HTML
  4. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  5. Пагинация (pagination) – Bootstrap3

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

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

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

  1. Katiushka says:

    :rose: красава

    Ответить

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

    Спасибо :rose:

    Ответить

  2. Михаил says:

    Хорошая статья! Подскажите а как разделить выпадающий список на две колонки?

    Ответить

    Степка ответил(а) на комментарий:
  3. Александр says:

    Оч крутые уроки и примеры в самый раз,лучше большинства платных курсов

    Ответить

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

    Спасибо, Александр, а то я уже думал прикрывать этот блог.

    Ответить

  4. Олег says:

    Доброго времени суток. А подскажите можно ли стилизовать фон выпадающего меню?

    Ответить

    Олег ответил(а) на комментарий:

    Извиняюсь нашел))

    Ответить

  5. Dima says:

    Список не выпадает
    браузер Microsoft edge пишу на visual code

    Ответить

  6. Анна says:

    Круто, спасибо

    Ответить

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

;-) :| :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:

@

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

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

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

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

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

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

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

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

Статистика:

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