NAV навигация-Навигационные компоненты
Панели навигации
Панель навигации — это заголовок навигации, расположенный в верхней части страницы:
Вкладки и Pills
| Класс | Описание | |
|---|---|---|
| .nav nav-tabs | Создание вкладок навигации | |
| .nav nav-pills | Создает навигационные таблетки | |
| .nav nav-pills nav-stacked | Создает вертикальные таблетки навигации | |
| .nav-justified | Делает навигационные вкладки/таблетки равной ширины их родителя, на экранах шире, чем 768px. На небольших экранах навигационные вкладки/таблетки укладываются | |
| .disabled | Указывает на отключенную (ненажатую) вкладку/таблетку | |
| Вкладки навигации с раскрывающимся меню | ||
| Навигационные таблетки с выпадающим меню | ||
| .tab-content | Вместе с. Tab-панель и Data-переключение = "Tab" (данные-Toggle = "таблетка" для таблеток), это делает вкладку/таблетки переключаемый | |
| .tab-pane | Вместе с. Tab-содержание и данные-переключатель = "Tab" (данные-переключатель = "таблетка" для таблеток), это делает вкладку/таблетки переключаемый | |
NavBars
| Класс | Описание | |
|---|---|---|
| .navbar | Creates a navigation bar | |
| .navbar-brand | Добавляется к ссылке или элементу заголовка внутри навигационной страницы для представления логотипа или заголовка | |
| .navbar-btn | Вертикальное выравнивание кнопки внутри панели навигации | |
| .navbar-collapse | Сворачивает навигационной панели (скрытые и заменены меню/гамбургер значок на мобильных телефонах и малых таблеток) | |
| .navbar-default | Создает панель навигации по умолчанию (светло-серый цвет фона) | |
| .navbar-fixed-bottom | Делает панели навигации оставаться в нижней части экрана (липкий/фиксированный) | |
| .navbar-fixed-top | Делает навигационное меню в верхней части экрана (липкое/фиксированное) | |
| .navbar-form | Добавлены элементы формы внутри навигационной области для вертикального центрирования их (правильное заполнение) | |
| .navbar-header | Добавляется к элементу контейнера, содержащему ссылку/элемент, представляющий эмблему или заголовок | |
| .navbar-inverse | Создает черную панель навигации (вместо светло-серого) | |
| .navbar-left | Выравнивает навигационные ссылки, формы, кнопки или текст в навигационной панели влево | |
| .navbar-link | Стили элемент, чтобы выглядеть как ссылка внутри навигационной (якоря получить правильное заполнение и подчеркивание при наведении, в то время как другие элементы, такие как p или span получает эффект наведения по умолчанию-белый цвет в обратной навигации и черный цвет в навигационной навигации по умолчанию) | |
| .navbar-nav | Используется в контейнере < ul >, содержащем элементы списка со ссылками внутри панели навигации | |
| .navbar-right | Выравнивает навигационные ссылки, формы, кнопки или текст в панели навигации вправо. | |
| .navbar-static-top | Удаляет левую, верхнюю и правую границы (закругленные углы) из навигационной области (по умолчанию навигационная рамка имеет серую границу и 4px Border-RADIUS) | |
| .navbar-text | Вертикальное выравнивание любых элементов внутри навигационной области, которые не являются связями (обеспечивает правильное заполнение) | |
| .navbar-toggle | Стили кнопки, которые должны открыть панели навигации на небольших экранах. Часто используется вместе с тремя .icon-bar классами для обозначения переключаемого значка меню (гамбургер/бары) |
хлебные крошки и разбиение на страницы
<nav aria-label="breadcrumb">
`<ol class="breadcrumb">
</nav>
| Класс | Описание | |
|---|---|---|
| .breadcrumb | Делает навигационную цепочку | |
| .pager | Предоставляет простые ссылки на страницы (предыдущий/следующий) | |
| .previous | Выравнивает предыдущую кнопку на пейджер влево | |
| .next | Выравнивание кнопки. пейджера далее вправо | |
| .disabled | Указывает на нещелкнув ссылку | |
| .pagination | Предоставляет ссылки на страницы | |
| .pagination-lg | Используется совместно с классом. разбиение на страницы для предоставления более крупных ссылок на страницы | |
| .pagination-sm | Используется совместно с классом. разбиение на страницы для предоставления небольших ссылок на страницы | |
| .disabled | Указывает на нещелкнув ссылку | |
| .active | Указывает текущую страницу |
Этикетки и значки
| Класс | Описание | |
|---|---|---|
| .label label-default | Указывает серую метку по умолчанию | |
| .label label-primary | Указывает синюю метку типа "Primary" | |
| .label label-success | Указывает зеленую метку типа "Success" | |
| .label label-info | Указывает на светло-синюю метку типа "info" | |
| .label label-warning | Указывает желтую метку типа "предупреждение" | |
| .label label-danger | Указывает красную метку типа "опасность" | |
| .badge | Указывает новые или непрочитанные элементы | |
| .jumbotron | Указывает на большую коробку для вызова дополнительного внимания к признакам содержания или информации | |
| .jumbotron (extra) | Чтобы поле. Jumbotron проходило всю ширину и без скругленных углов, поместите его за пределы класса. Container |
24.07.2026