Навигационная панель

Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам надо знать перед использованием навбара:

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.
  • Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

  • .navbar-brand для названия вашей компании, продукта или имени проекта.
  • .navbar-nav для навигации полной высоты (включая выпадающие элементы).
  • .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></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-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </a><divclass="dropdown-menu"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Something else here</a></div></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

В этом примере использованы классы цветаbg-light и спейсингаmy-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

<!-- As a link --><navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a></nav><!-- As a heading --><navclass="navbar navbar-light bg-light"><spanclass="navbar-brand mb-0 h1">Navbar</span></nav>

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

<!-- Just an image --><navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#"><imgsrc="/assets/brand/bootstrap-solid.svg"width="30"height="30"alt=""></a></nav>
<!-- Image and text --><navclass="navbar navbar-light bg-light"><aclass="navbar-brand"href="#"><imgsrc="/assets/brand/bootstrap-solid.svg"width="30"height="30"class="d-inline-block align-top"alt=""> Bootstrap </a></nav>

Ссылки в навигации навбара сделаны на параметрах класса .nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></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="#">Disabled</a></li></ul></div></nav>

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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-item nav-link active"href="#">Home <spanclass="sr-only">(current)</span></a><aclass="nav-item nav-link"href="#">Features</a><aclass="nav-item nav-link"href="#">Pricing</a><aclass="nav-item nav-link disabled"href="#">Disabled</a></div></div></nav>

Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></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"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown link </a><divclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></li></ul></div></nav>

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline.

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></nav>

Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

<navclass="navbar navbar-light bg-light justify-content-between"><aclass="navbar-brand">Navbar</a><formclass="form-inline"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></nav>

Работают и формы ввода, также:

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div></form></nav>

Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.

<navclass="navbar navbar-light bg-light"><formclass="form-inline"><buttonclass="btn btn-outline-success"type="button">Main button</button><buttonclass="btn btn-sm align-middle btn-outline-secondary"type="button">Smaller button</button></form></nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

<navclass="navbar navbar-light bg-light"><spanclass="navbar-text"> Navbar text with an inline element </span></nav>

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar w/ text</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></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></nav>

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит 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"><aclass="navbar-brand"href="#">Navbar</a></nav></div>

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

<navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="container"><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"><aclass="navbar-brand"href="#">Default</a></nav>
<navclass="navbar fixed-top navbar-light bg-light"><aclass="navbar-brand"href="#">Fixed top</a></nav>
<navclass="navbar fixed-bottom navbar-light bg-light"><aclass="navbar-brand"href="#">Fixed bottom</a></nav>
<navclass="navbar sticky-top navbar-light bg-light"><aclass="navbar-brand"href="#">Sticky top</a></nav>

Отзывчивое поведение

Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<navclass="navbar navbar-expand-lg navbar-light bg-light"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

С «брендом», показанный слева, и тогглером - справа:

<navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

С тогглером слева и «брендом» справа:

<navclass="navbar navbar-expand-lg navbar-light bg-light"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

<divclass="pos-f-t"><divclass="collapse"id="navbarToggleExternalContent"><divclass="bg-dark p-4"><h4class="text-white">Collapsed content</h4><spanclass="text-muted">Toggleable via the navbar brand.</span></div></div><navclass="navbar navbar-dark bg-dark"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarToggleExternalContent"aria-controls="navbarToggleExternalContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button></nav></div>