Bootstrap предоставляет несколько различных вариантов стилизации навигационных элементов. Все они имеют одинаковую разметку и базовый класс .nav
. Bootstrap также предоставляет вспомогательный класс, чтобы разделить разметку и состояния. Модификаторы Swap переключаются между каждым стилем.
Содержание:
Табличная навигация или вкладки
Чтобы создать меню навигации с вкладками -
- Начните с базового неупорядоченного списка с базовым классом
.nav
- Добавить класс
.nav-tabs
.
Следующий пример демонстрирует это -
Навигация по вкладкам
Чтобы повернуть вкладки в pills, выполните те же действия, что и выше, используйте класс .nav-pills
вместо .nav-tabs
.
Следующий пример демонстрирует это -
Вертикальные pills
Вы можете складывать вкладки вертикально, используя класс .nav-stacked
вместе с классами .nav
, .nav-pills
.
Следующий пример демонстрирует это -
Выравненный nav
Вы можете делать табуляции или pills равной ширины, как и у их родителя, на экранах шириной более 768 пикселей, используя класс .nav-justified
вместе с .nav
, .nav-tabs
или .nav-pills
соответственно. На меньших экранах навигационные ссылки сложены.
Следующий пример демонстрирует это -
Отключенные ссылки
Для каждого из классов .nav
, если вы добавите класс .disabled
, он создаст серое звено, которое также отключит состояние : hover
, как показано в следующем примере -
Этот класс изменит внешний вид тег a, а не его функциональность.
Dropdowns
Меню навигации имеет аналогичный синтаксис с раскрывающимися меню. По умолчанию у вас есть элемент списка, в котором есть якорь, работающий в сочетании с некоторыми атрибутами данных, чтобы вызвать неупорядоченный список с классом .dropdown-menu
.
Вкладки с раскрывающимися списками
Чтобы добавить выпадающие меню в tab -
- Начните с базового неупорядоченного списка с базовым классом
.nav
- Добавить класс
.nav-tabs
. - Теперь добавьте неупорядоченный список с классом
.dropdown-menu
.
Вкладки с выпадающими окнами
Чтобы сделать то же самое с таблетками, просто замените класс .nav-tabs
на .nav-pills
, как показано в следующем примере.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Bootstrap - Плагин Tab - 22/09/2018 17:30
- Bootstrap - Плагин Scrollspy - 22/09/2018 17:30
- Bootstrap - Плагин для раскрывающегося списка - 22/09/2018 17:29
- Bootstrap - Модальный плагин - 22/09/2018 17:29
- Bootstrap - Переходный плагин - 22/09/2018 17:28
- Bootstrap -Обзор плагинов - 22/09/2018 17:28
- Бутстрап – Wells - 22/09/2018 17:27
- Бутстрап - Панели - 22/09/2018 17:26
- Bootstrap - Список групп - 22/09/2018 17:26
- Bootstrap - Объект мультимедиа - 22/09/2018 17:25
- Бутстрап - Индикатор прогресса - 22/09/2018 17:25
- Бутстрап - Оповещения - 22/09/2018 17:24
- Bootstrap - Миниатюры - 22/09/2018 17:24
- Bootstrap - Заголовок страницы - 22/09/2018 17:23
- Бутстрап - Jumbotron - карточка статьи - 22/09/2018 17:23
- Бутстрап - Значки - 22/09/2018 17:23
- Бутстрап - Ярлыки - 22/09/2018 17:22
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
Предыдущие статьи
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
- Bootstrap - Группы загрузки - кнопки - 22/09/2018 17:16
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11
- Бутстрап - Типография - 22/09/2018 17:10
- Bootstrap - Обзор CSS - 22/09/2018 17:10
- Бутстрап - Сетка - 22/09/2018 17:09
- Bootstrap - Настройка среды - 22/09/2018 17:09
- Bootstrap - Обзор - 22/09/2018 17:08
- Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 - 31/12/2017 16:54
- Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 - 23/12/2017 20:44
- Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1 - 15/12/2017 15:47