Навигационная панель
Документация и примеры адаптивной панели навигации. Включает поддержку брендинга, навигации с поддержкой нашего плагина для свертывания.
Как это работает
Вот что вам надо знать перед использованием навбара:
- Навбары требуют «обертки» из классов
.navbarи.navbar-expand{-sm|-md|-lg|-xl|-xxl}для отзывчивости при «складывании»и классы , а также классы цветовых схем. - Навбары и их содержимое по умолчанию гибкие. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
- Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
- Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
- Придайте им доступность использованием элемента
<nav>, или, если используется менее специфический элемент – например<div>: добавьте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 (большой).
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdown"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Dropdown </a><ulclass="dropdown-menu"aria-labelledby="navbarDropdown"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Something else here</a></li></ul></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></div></nav>В этом примере использованы классы цвета (bg-light) и отступов (my-2, my-lg-0, mr-sm-0, my-sm-0).
Бренд
.navbar-brand может применяться к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.
Текст
Добавьте свой текст в элемент с помощью класса .navbar-brand.
<!-- Как ссылка --><navclass="navbar navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Панель навигации</a></div></nav><!-- Как заголовок --><navclass="navbar navbar-light bg-light"><divclass="container-fluid"><spanclass="navbar-brand mb-0 h1">Панель навигации</span></div></nav>Изображение
Вы можете заменить текст внутри .navbar-brand на <img>.
<navclass="navbar navbar-light bg-light"><divclass="container"><aclass="navbar-brand"href="#"><imgsrc="/docs/5.1/assets/brand/bootstrap-logo.svg"alt=""width="30"height="24"></a></div></nav>Изображение и текст
Вы также можете использовать некоторые дополнительные утилиты для одновременного добавления изображения и текста. Обратите внимание на добавление .d-inline-block и .align-text-top в <img>.
<navclass="navbar navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#"><imgsrc="/docs/5.1/assets/brand/bootstrap-logo.svg"alt=""width="30"height="24"class="d-inline-block align-text-top"> Bootstrap </a></div></nav>Навбар
Ссылки в навигации навбара сделаны на параметрах класса .nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.
Обратите внимание, что вам также следует добавить атрибут aria-current в сам .nav-link.
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul></div></div></nav>И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке при необходимости.
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavAltMarkup"aria-controls="navbarNavAltMarkup"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavAltMarkup"><divclass="navbar-nav"><aclass="nav-link active"aria-current="page"href="#">Home</a><aclass="nav-link"href="#">Features</a><aclass="nav-link"href="#">Pricing</a><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></div></div></div></nav>Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"><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="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownMenuLink"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Dropdown link </a><ulclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li></ul></li></ul></div></div></nav>Формы
Размещайте различные элементы управления и компоненты формы на панели навигации:
<navclass="navbar navbar-light bg-light"><divclass="container-fluid"><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></nav>Непосредственные дочерние элементы в .navbar используют гибкую компоновку и по умолчанию имеют значение justify-content: between. Используйте дополнительные гибкие утилиты, необходимые для настройки их поведения.
<navclass="navbar navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand">Navbar</a><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></nav>Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
<navclass="navbar navbar-light bg-light"><formclass="container-fluid"><divclass="input-group"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div></form></nav>В составе этих форм навигационной панели также поддерживаются различные кнопки. Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера.
<navclass="navbar navbar-light bg-light"><formclass="container-fluid justify-content-start"><buttonclass="btn btn-outline-success me-2"type="button">Main button</button><buttonclass="btn btn-sm btn-outline-secondary"type="button">Smaller button</button></form></nav>Текст
Благодаря классу .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/ text</a><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="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li></ul><spanclass="navbar-text"> Navbar text with an inline element </span></div></div></nav>Цветовые схемы
Создание тем для панели навигации никогда не было таким простым благодаря сочетанию классов тем и утилит настройки цвета фона background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.
<navclass="navbar navbar-dark bg-dark"><!-- Navbar content --></nav><navclass="navbar navbar-dark bg-primary"><!-- Navbar content --></nav><navclass="navbar navbar-light"style="background-color: #e3f2fd;"><!-- Navbar content --></nav>Контейнеры
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”. Обратите внимание, что внутренний контейнер по-прежнему требуется.
<divclass="container"><navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a></div></nav></div>Используйте любой из адаптивных контейнеров, чтобы изменить ширину содержимого на панели навигации.
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-md"><aclass="navbar-brand"href="#">Navbar</a></div></nav>Размещение
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).
Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.
<navclass="navbar navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Default</a></div></nav><navclass="navbar fixed-top navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Fixed top</a></div></nav><navclass="navbar fixed-bottom navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Fixed bottom</a></div></nav><navclass="navbar sticky-top navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Sticky top</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;", с некоторыми дополнительными утилитами полей для оптимального интервала.
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar scroll</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarScroll"aria-controls="navbarScroll"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarScroll"><ulclass="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll"style="--bs-scroll-height: 100px;"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarScrollingDropdown"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Link </a><ulclass="dropdown-menu"aria-labelledby="navbarScrollingDropdown"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Something else here</a></li></ul></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Link</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></div></nav>Отзывчивое поведение
Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl|-xxl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.
Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.
Тогглер (кнопка разворачивания меню)
Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.
Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo01"aria-controls="navbarTogglerDemo01"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo01"><aclass="navbar-brand"href="#">Hidden brand</a><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></div></nav>С названием бренда слева и переключателем справа:
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo02"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></div></nav>С переключателем слева и названием бренда справа:
<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container-fluid"><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarTogglerDemo03"aria-controls="navbarTogglerDemo03"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><aclass="navbar-brand"href="#">Navbar</a><divclass="collapse navbar-collapse"id="navbarTogglerDemo03"><ulclass="navbar-nav me-auto mb-2 mb-lg-0"><liclass="nav-item"><aclass="nav-link active"aria-current="page"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></div></div></nav>Внешнее содержимое
Иногдатребуется использовать плагин сворачивания для запуска элемента контейнера для контента, который структурно находится за пределами .navbar. Поскольку наш плагин работает с сопоставлением id и data-bs-target, то это легко сделать!
<divclass="collapse"id="navbarToggleExternalContent"><divclass="bg-dark p-4"><h5class="text-white h4">Collapsed content</h5><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, указывающий на идентификатор контейнера содержимого. Теоретически это позволяет пользователям вспомогательных технологий напрямую переходить от переключателя к контейнеру, который он контролирует, но в настоящее время эта технология поддерживается не полностью.
Все холста
Превратите расширяющуюся и сворачивающуюся панель навигации в ящик вне холста с помощью плагина offcanvas. Мы расширяем оба стиля offcanvas по умолчанию и используем наши классы .navbar-expand-* для создания динамической и гибкой боковой панели навигации.
В приведенном ниже примере, чтобы создать панель навигации вне холста, которая всегда сворачивается во всех точках останова, полностью опустите класс .navbar-expand-*.
<navclass="navbar navbar-light bg-light fixed-top"><divclass="container-fluid"><aclass="navbar-brand"href="#">Навигационная панель Offcanvas</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="offcanvas"data-bs-target="#offcanvasNavbar"aria-controls="offcanvasNavbar"><spanclass="navbar-toggler-icon"></span></button><divclass="offcanvas offcanvas-end"tabindex="-1"id="offcanvasNavbar"aria-labelledby="offcanvasNavbarLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasNavbarLabel">Offcanvas</h5><buttontype="button"class="btn-close text-reset"data-bs-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><ulclass="navbar-nav justify-content-end flex-grow-1 pe-3"><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 dropdown"><aclass="nav-link dropdown-toggle"href="#"id="offcanvasNavbarDropdown"role="button"data-bs-toggle="dropdown"aria-expanded="false"> Выпадающий список </a><ulclass="dropdown-menu"aria-labelledby="offcanvasNavbarDropdown"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li></ul></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Поиск"aria-label="Поиск"><buttonclass="btn btn-outline-success"type="submit">Поиск</button></form></div></div></div></nav>Чтобы создать панель навигации вне холста, которая расширяется в обычную панель навигации в определенной точке останова, такой как lg, используйте .navbar-expand-lg.
<navclass="navbar navbar-light navbar-expand-lg bg-light fixed-top"><aclass="navbar-brand"href="#">Навигационная панель Offcanvas</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="offcanvas"data-bs-target="#navbarOffcanvasLg"aria-controls="navbarOffcanvasLg"><spanclass="navbar-toggler-icon"></span></button><divclass="offcanvas offcanvas-end"tabindex="-1"id="navbarOffcanvasLg"aria-labelledby="navbarOffcanvasLgLabel"> ... </div></nav>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-dark-color:rgba($white,.55);$navbar-dark-hover-color:rgba($white,.75);$navbar-dark-active-color:$white;$navbar-dark-disabled-color:rgba($white,.25);$navbar-dark-toggler-icon-bg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");$navbar-dark-toggler-border-color:rgba($white,.1);$navbar-light-color:rgba($black,.55);$navbar-light-hover-color:rgba($black,.7);$navbar-light-active-color:rgba($black,.9);$navbar-light-disabled-color:rgba($black,.3);$navbar-light-toggler-icon-bg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");$navbar-light-toggler-border-color:rgba($black,.1);$navbar-light-brand-color:$navbar-light-active-color;$navbar-light-brand-hover-color:$navbar-light-active-color;$navbar-dark-brand-color:$navbar-dark-active-color;$navbar-dark-brand-hover-color:$navbar-dark-active-color;Цикл
Классы адаптивного навбара развертывания/свертывания (например, .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}{@include media-breakpoint-up($next){flex-wrap:nowrap;justify-content:flex-start;.navbar-nav{flex-direction:row;.dropdown-menu{position:absolute;}.nav-link{padding-right:$navbar-nav-link-padding-x;padding-left:$navbar-nav-link-padding-x;}}.navbar-nav-scroll{overflow:visible;}.navbar-collapse{display:flex!important;// stylelint-disable-line declaration-no-important
flex-basis:auto;}.navbar-toggler{display:none;}.offcanvas-header{display:none;}.offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;// stylelint-disable-line declaration-no-important
background-color:transparent;border-right:0;border-left:0;@include transition(none);transform:none;}.offcanvas-top,.offcanvas-bottom{height:auto;border-top:0;border-bottom:0;}.offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;}}}}}