Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap — навигационной панели. Включает поддержку брендинга, навигации и т.д., Включая поддержку нашего плагина свертывания.
На этой странице
Как это работает
Вот что вам нужно знать, прежде чем начать работу с навигационной панелью:
Навигационная панель требует оболочки для .navbar с .navbar-expand <-sm|-md|-lg|-xl|-xxl>для гибкого сворачивания и классов цветовая схема.
Навигационная панель и их содержимое по умолчанию плавно. Измените контейнер чтобы ограничить их горизонтальную ширину различными способами.
Используйте наши служебные классы отступов и flex для управления интервалом и выравниванием внутри навигационных панелей.
Навигационная панель по умолчанию адаптивна, но вы можете легко изменить их, чтобы это изменить. Адаптивное поведение зависит от нашего плагина JavaScript сворачиваемого содержимого.
Обеспечьте доступность с помощью элемента или, если вы используете более общий элемент, такой как , добавьте role=»navigation» на каждую панель навигации, чтобы явно идентифицировать ее как ориентир для пользователей. вспомогательных технологий.
Укажите текущий элемент, используя aria-current=»page» для текущей страницы или aria-current=»true» для текущего элемента в наборе.
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.
Поддерживаемый контент
.navbar-brand для Вашей компании, продукта или названия проекта.
.navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
.navbar-toggler для использования с нашим плагином сворачивания и другими поведениями переключение навигации.
Утилиты Flex и Spacing для любых элементов управления и действий формы.
.navbar-text для добавления вертикально центрированных строк текста.
.collapse.navbar-collapse для группировки и скрытия содержимого навигационной панели по родительской контрольной точке.
Добавьте необязательный .navbar-scroll , чтобы установить max-height и прокручивать расширенное содержимое панели навигации.
Вот пример всех подкомпонентов, включенных в адаптивную светлую навигационную панель, которая автоматически сворачивается в контрольной точке lg (большая).
В этом примере используются классы утилит фона ( bg-light ) и интервала ( my-2 , my-lg-0 , me-sm-0 , my-sm-0 ).
Бренд
.navbar-brand может применяться к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.
Текст
Добавьте свой текст в элемент с помощью класса .navbar-brand .
Вы также можете использовать некоторые дополнительные утилиты для одновременного добавления изображения и текста. Обратите внимание на добавление .d-inline-block и .align-text-top в .
Навигационные ссылки на панели навигации основаны на наших параметрах .nav с их собственным классом-модификатором и требуют использования класс переключатель для правильного адаптивного стиля. Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства, чтобы содержимое Вашей навигационной панели было надежно выровнено.
Добавьте класс .active в .nav-link , чтобы указать текущую страницу.
Обратите внимание, что Вам также следует добавить атрибут aria-current в активный .nav-link .
Вы также можете использовать раскрывающиеся списки на панели навигации. Для размещения раскрывающихся меню требуется элемент оболочки, поэтому обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link , как показано ниже.
navclass="navbar navbar-expand-lg navbar-light bg-light">divclass="container-fluid">aclass="navbar-brand"href="#">Панель навигацииa>buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Переключатель навигации">spanclass="navbar-toggler-icon">span>button>divclass="collapse navbar-collapse"id="navbarNavDropdown">ulclass="navbar-nav">liclass="nav-item">aclass="nav-link active"aria-current="page"href="#">Главнаяa>li>liclass="nav-item">aclass="nav-link"href="#">Рекомендуемыеa>li>liclass="nav-item">aclass="nav-link"href="#">Ценаa>li>liclass="nav-item dropdown">aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownMenuLink"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список ссылкой a>ulclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink">li>aclass="dropdown-item"href="#">Действиеa>li>li>aclass="dropdown-item"href="#">Другое действиеa>li>li>aclass="dropdown-item"href="#">Что-то еще здесьa>li>ul>li>ul>div>div>nav>
Формы
Разместите различные элементы управления и компоненты формы на панели навигации:
Непосредственные дочерние элементы в .navbar используют гибкий макет и по умолчанию будут использовать justify-content: space-between . При необходимости используйте дополнительные флекс утилиты для настройки этого поведения.
Группы ввода тоже работают. Если Ваша панель навигации представляет собой всю форму или в основном форму, Вы можете использовать элемент в качестве контейнера и сохранить некоторый HTML.
В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
Панели навигации могут содержать фрагменты текста с помощью .navbar-text . Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.
navclass="navbar navbar-light bg-light">divclass="container-fluid">spanclass="navbar-text"> Текст на панели навигации со встроенным элементом span>div>nav>
При необходимости смешивайте и сочетайте с другими компонентами и утилитами.
navclass="navbar navbar-expand-lg navbar-light bg-light">divclass="container-fluid">aclass="navbar-brand"href="#">Панель навигации с текстомa>buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Переключатель навигации">spanclass="navbar-toggler-icon">span>button>divclass="collapse navbar-collapse"id="navbarText">ulclass="navbar-nav me-auto mb-2 mb-lg-0">liclass="nav-item">aclass="nav-link active"aria-current="page"href="#">Главнаяa>li>liclass="nav-item">aclass="nav-link"href="#">Рекомендуемыеa>li>liclass="nav-item">aclass="nav-link"href="#">Ценаa>li>ul>spanclass="navbar-text"> Текст на панели навигации со встроенным элементом span>div>div>nav>
Цветовые схемы
Создание тем для панели навигации никогда не было таким простым благодаря комбинации классов тем и утилит background-color . Выберите .navbar-light для использования со светлыми цветами фона или .navbar-dark для темных цветов фона. Затем выполните настройку с помощью утилит .bg-* .
Хотя это не обязательно, Вы можете обернуть панель навигации в .container , чтобы центрировать ее на странице, хотя обратите внимание, что внутренний контейнер все еще требуется. Или Вы можете добавить контейнер внутри .navbar , чтобы центрировать только содержимое фиксированной или статической верхней панели навигации.
Используйте наши утилиты позиционирования, чтобы разместить панели навигации в нестатических положениях. Выберите фиксированный вверху, закрепленный внизу или закрепленный наверху (прокручивается вместе со страницей, пока не достигнет вершины, а затем остается там). Фиксированные панели навигации используют position: fixed , что означает, что они извлекаются из обычного потока DOM и могут потребовать настраиваемого CSS (например, padding-top на ) для предотвращения перекрытия с другими элементами.
Также обратите внимание, что .sticky-top использует position: sticky , который полностью поддерживается не всеми браузерами.
navclass="navbar sticky-top navbar-light bg-light">divclass="container-fluid">aclass="navbar-brand"href="#">Приклеен к верхуa>div>nav>
Прокрутка
Добавьте .navbar-nav-scroll в .navbar-nav (или другой субкомпонент навигационной панели), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой навигационной панели. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но Вы можете переопределить это с помощью локального настраиваемого свойства CSS —bs-navbar-height или настраиваемых стилей. В больших окнах просмотра, когда панель навигации развернута, содержимое будет отображаться так же, как и на панели навигации по умолчанию.
Обратите внимание, что такое поведение имеет потенциальный недостаток overflow —при установке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto , который обрезает некоторые горизонтальное содержание.
Вот пример навигационной панели, использующей .navbar-nav-scroll с style=»—bs-scroll-height: 100px;» , с некоторыми дополнительными утилитами полей для оптимального интервала.
Добавьте .navbar-nav-scroll к .navbar-nav (или другой саб-компонент навигационной панели), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой навигационной панели. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но Вы можете переопределить это с помощью локального настраиваемого свойства CSS —bs-navbar-height или настраиваемых стилей. В больших окнах просмотра, когда панель навигации развернута, содержимое будет отображаться так же, как и на панели навигации по умолчанию.
Обратите внимание, что такое поведение имеет потенциальный недостаток overflow — при установке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto , который обрезает некоторые горизонтальное содержание.
Вот пример навигационной панели, использующей .navbar-nav-scroll с style=»—bs-scroll-height: 100px;» , с некоторыми дополнительными утилитами полей для оптимального интервала.
Навигационные панели могут использовать классы .navbar-toggler , .navbar-collapse и .navbar-expand <-sm|-md|-lg|-xl|-xxl>, чтобы определить, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами Вы можете легко выбрать, когда показывать или скрывать определенные элементы.
Для панелей навигации, которые никогда не сворачиваются, добавьте на панель навигации класс .navbar-expand . Для панелей навигации, которые всегда сворачиваются, не добавляйте класс .navbar-expand .
Переключатель
По умолчанию переключатели навигационной панели выровнены по левому краю, но если они следуют за родственным элементом, таким как .navbar-brand , они будут автоматически выровнены по крайнему правому краю. Изменение разметки на противоположное приведет к изменению положения переключателя. Ниже приведены примеры различных стилей переключения.
Без .navbar-brand в самой низкой контрольной точке:
Иногда Вы хотите использовать плагин свертывания для запуска элемента контейнера для содержимого, структурно расположенного за пределами .navbar . Поскольку наш плагин работает с сопоставлением id и data-bs-target , это легко сделать!
При этом мы рекомендуем включить дополнительный JavaScript для программного перемещения фокуса на контейнер при его открытии. В противном случае пользователям клавиатуры и вспомогательным технологиям, скорее всего, будет сложно найти вновь обнаруженный контент, особенно если контейнер, который был открыт, находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть атрибут aria-controls , указывающий на id контейнера содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, который он контролирует, но в настоящее время эта поддержка весьма неоднородна.
Sass
Переменные
$navbar-padding-y:$spacer*.5;$navbar-padding-x:null;$navbar-nav-link-padding-x:.5rem;$navbar-brand-font-size:$font-size-lg;// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link$nav-link-height:$font-size-base*$line-height-base+$nav-link-padding-y*2;$navbar-brand-height:$navbar-brand-font-size*$line-height-base;$navbar-brand-padding-y:($nav-link-height-$navbar-brand-height)*.5;$navbar-brand-margin-end:1rem;$navbar-toggler-padding-y:.25rem;$navbar-toggler-padding-x:.75rem;$navbar-toggler-font-size:$font-size-lg;$navbar-toggler-border-radius:$btn-border-radius;$navbar-toggler-focus-width:$btn-focus-width;$navbar-toggler-transition:box-shadow.15sease-in-out;
Классы адаптивного навбара развертывания/свертывания (например, .navbar-expand-lg ) объединяются с картой $breakpoints и генерируются с помощью цикла в scss/_navbar.scss .
// Generate series of `.navbar-expand-*` responsive classes for configuring// where your navbar collapses..navbar-expand@each$breakpointinmap-keys($grid-breakpoints)$next:breakpoint-next($breakpoint,$grid-breakpoints);$infix:breakpoint-infix($next,$grid-breakpoints);// stylelint-disable-next-line scss/selector-no-union-class-name&#$infix>@includemedia-breakpoint-up($next)flex-wrap:nowrap;justify-content:flex-start;.navbar-navflex-direction:row;.dropdown-menuposition:absolute;>.nav-linkpadding-right:$navbar-nav-link-padding-x;padding-left:$navbar-nav-link-padding-x;>>.navbar-nav-scrolloverflow:visible;>.navbar-collapsedisplay:flex!important;// stylelint-disable-line declaration-no-importantflex-basis:auto;>.navbar-togglerdisplay:none;>>>>>
Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
Код под лицензией MIT, документация CC BY 3.0.
Текущая версия v5.0.2.
Навигационная панель
Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.
Как это работает
Вот что вам надо знать перед использованием навбара:
Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar . Смотри класс отображения.
Придайте им доступность использованием элемента , или, если используется менее специфический элемент – например : добавьте role=»navigation» в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.
Дальше вы увидите примеры и список поддерживаемых под-компонентов.
Поддерживаемые типы содержимого
В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:
.navbar-brand для названия вашей компании, продукта или имени проекта.
.navbar-nav для навигации полной высоты (включая выпадающие элементы).
.navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
.form-inline для любых органов контроля форм и действий с ними.
.navbar-text для добавления вертикально центрированных строк текста.
.collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.
Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).
Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .
Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link , как в примере ниже.
Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.
class="navbar navbar-light bg-light">class="navbar-text"> Navbar text with an inline element
Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.
class="navbar navbar-expand-lg navbar-light bg-light">class="navbar-brand"href="#">Navbar w/ textclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation">class="navbar-toggler-icon">class="collapse navbar-collapse"id="navbarText">class="navbar-nav mr-auto">class="nav-item active">class="nav-link"href="#">Home class="sr-only">(current) class="nav-item">class="nav-link"href="#">Featuresclass="nav-item">class="nav-link"href="#">Pricingclass="navbar-text"> Navbar text with an inline element
Цветовые схемы
Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.
Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).
Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.
class="navbar sticky-top navbar-light bg-light">class="navbar-brand"href="#">Sticky top
Отзывчивое поведение
Навбары могут использовать классы .navbar-toggler , .navbar-collapse и .navbar-expand <-sm|-md|-lg|-xl>для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.
Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand . Для навбаров, которые всегда скрываются, не добавляйте его.
Тогглер (кнопка разворачивания меню)
Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.
Без показанного элемента класса .navbar-brand , на самых маленьких брейкпойнтах:
Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!
Collapsed content
Toggleable via the navbar brand.
class="pos-f-t">class="collapse"id="navbarToggleExternalContent">class="bg-dark p-4">class="text-white">Collapsed contentclass="text-muted">Toggleable via the navbar brand.class="navbar navbar-dark bg-dark">class="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarToggleExternalContent"aria-controls="navbarToggleExternalContent"aria-expanded="false"aria-label="Toggle navigation">class="navbar-toggler-icon">
Навигационная панель
Документация и примеры адаптивной панели навигации. Включает поддержку брендинга, навигации с поддержкой нашего плагина для свертывания.
На этой странице
Как это работает
Вот что вам надо знать перед использованием навбара:
Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl|-xxl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
Навбары и их содержимое по умолчанию гибкие. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
Придайте им доступность использованием элемента , или, если используется менее специфический элемент – например : добавьте role=»navigation» в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.
Укажите текущий элемент, используя aria-current=»page» для текущей страницы или aria-current=»true» для текущего элемента в наборе.
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . Смотрите раздел с ограниченным движением в нашей документации о доступности.
Поддерживаемые типы содержимого
В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:
.navbar-brand для названия вашей компании, продукта или имени проекта.
.navbar-nav для навигации полной высоты (включая выпадающие элементы).
.navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
.form-inline для любых органов контроля форм и действий с ними.
.navbar-text для добавления вертикально центрированных строк текста.
.collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.
Добавьте необязательный класс .navbar-scroll , чтобы установить максимальную высоту max-height и прокрутить расширенное содержимое панели навигации.
Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).
В этом примере использованы классы цвета ( bg-light ) и отступов ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).
Бренд
.navbar-brand может применяться к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.
Текст
Добавьте свой текст в элемент с помощью класса .navbar-brand .
Вы также можете использовать некоторые дополнительные утилиты для одновременного добавления изображения и текста. Обратите внимание на добавление .d-inline-block и .align-text-top в .
Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .
Обратите внимание, что вам также следует добавить атрибут aria-current в сам .nav-link .
Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link , как в примере ниже.
Непосредственные дочерние элементы в .navbar используют гибкую компоновку и по умолчанию имеют значение justify-content: between . Используйте дополнительные гибкие утилиты, необходимые для настройки их поведения.
Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.
navclass="navbar navbar-light bg-light">divclass="container-fluid">spanclass="navbar-text"> Navbar text with an inline element span>div>nav>
Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.
navclass="navbar navbar-expand-lg navbar-light bg-light">divclass="container-fluid">aclass="navbar-brand"href="#">Navbar w/ texta>buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation">spanclass="navbar-toggler-icon">span>button>divclass="collapse navbar-collapse"id="navbarText">ulclass="navbar-nav me-auto mb-2 mb-lg-0">liclass="nav-item">aclass="nav-link active"aria-current="page"href="#">Homea>li>liclass="nav-item">aclass="nav-link"href="#">Featuresa>li>liclass="nav-item">aclass="nav-link"href="#">Pricinga>li>ul>spanclass="navbar-text"> Navbar text with an inline element span>div>div>nav>
Цветовые схемы
Создание тем для панели навигации никогда не было таким простым благодаря сочетанию классов тем и утилит настройки цвета фона background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”. Обратите внимание, что внутренний контейнер по-прежнему требуется.
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).
Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.
Добавьте .navbar-nav-scroll в .navbar-nav (или другой субкомпонент навигационной панели), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой навигационной панели. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но Вы можете переопределить это с помощью локального настраиваемого свойства CSS —bs-navbar-height или настраиваемых стилей. В больших окнах просмотра, когда панель навигации развернута, содержимое будет отображаться так же, как и на панели навигации по умолчанию.
Обратите внимание, что такое поведение имеет потенциальный недостаток overflow —при установке overflow-y: auto (требуется для прокрутки содержимого здесь), overflow-x является эквивалентом auto , который обрезает некоторые горизонтальное содержание.
Вот пример навигационной панели, использующей .navbar-nav-scroll с style=»—bs-scroll-height: 100px;» , с некоторыми дополнительными утилитами полей для оптимального интервала.
Навбары могут использовать классы .navbar-toggler , .navbar-collapse и .navbar-expand <-sm|-md|-lg|-xl|-xxl>для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.
Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand . Для навбаров, которые всегда скрываются, не добавляйте его.
Тогглер (кнопка разворачивания меню)
Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.
Без показанного элемента класса .navbar-brand , на самых маленьких брейкпойнтах:
Иногдатребуется использовать плагин сворачивания для запуска элемента контейнера для контента, который структурно находится за пределами .navbar . Поскольку наш плагин работает с сопоставлением id и data-bs-target , то это легко сделать!
Collapsed content
Toggleable via the navbar brand.
divclass="collapse"id="navbarToggleExternalContent">divclass="bg-dark p-4">h5class="text-white h4">Collapsed contenth5>spanclass="text-muted">Toggleable via the navbar brand.span>div>div>navclass="navbar navbar-dark bg-dark">divclass="container-fluid">buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarToggleExternalContent"aria-controls="navbarToggleExternalContent"aria-expanded="false"aria-label="Toggle navigation">spanclass="navbar-toggler-icon">span>button>div>nav>
При этом мы рекомендуем включить дополнительный JavaScript для программного перемещения фокуса на контейнер при его открытии. В противном случае при использовании клавиатуры и вспомогательными технологиями, вероятно, будет сложно найти вновь обнаруженный контент, особенно если открытый контейнер находится перед переключателем в структуре документа. Мы также рекомендуем убедиться, что у переключателя есть атрибут aria-controls , указывающий на идентификатор контейнера содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, который он контролирует, но в настоящее время эта технология поддерживается не полностью.
Sass
Переменные
$navbar-padding-y:$spacer*.5;$navbar-padding-x:null;$navbar-nav-link-padding-x:.5rem;$navbar-brand-font-size:$font-size-lg;// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link$nav-link-height:$font-size-base*$line-height-base+$nav-link-padding-y*2;$navbar-brand-height:$navbar-brand-font-size*$line-height-base;$navbar-brand-padding-y:($nav-link-height-$navbar-brand-height)*.5;$navbar-brand-margin-end:1rem;$navbar-toggler-padding-y:.25rem;$navbar-toggler-padding-x:.75rem;$navbar-toggler-font-size:$font-size-lg;$navbar-toggler-border-radius:$btn-border-radius;$navbar-toggler-focus-width:$btn-focus-width;$navbar-toggler-transition:box-shadow.15sease-in-out;
Классы адаптивного навбара развертывания/свертывания (например .navbar-expand-lg ) объединяются с картой $breakpoints и генерируются с помощью цикла в scss/_navbar.scss .
// Generate series of `.navbar-expand-*` responsive classes for configuring// where your navbar collapses..navbar-expand@each$breakpointinmap-keys($grid-breakpoints)$next:breakpoint-next($breakpoint,$grid-breakpoints);$infix:breakpoint-infix($next,$grid-breakpoints);// stylelint-disable-next-line scss/selector-no-union-class-name&#$infix>@includemedia-breakpoint-up($next)flex-wrap:nowrap;justify-content:flex-start;.navbar-navflex-direction:row;.dropdown-menuposition:absolute;>.nav-linkpadding-right:$navbar-nav-link-padding-x;padding-left:$navbar-nav-link-padding-x;>>.navbar-nav-scrolloverflow:visible;>.navbar-collapsedisplay:flex!important;// stylelint-disable-line declaration-no-importantflex-basis:auto;>.navbar-togglerdisplay:none;>>>>>
