Навигационная панель. Компоненты · Bootstrap. Версия v4.0.0
Документация и примеры для мощного и отзывчивого навигационного заголовка 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 (большой).
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div aria-labelledby="navbarDropdown">
<a href="#">Action</a>
<a href="#">Another action</a>
<div></div>
<a href="#">Something else here</a>
</div>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button 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 --> <nav> <a href="#">Navbar</a> </nav> <!-- As a heading --> <nav> <span>Navbar</span> </nav>
Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.
<!-- Just an image -->
<nav>
<a href="#">
<img src="/assets/brand/bootstrap-solid.svg" alt="">
</a>
</nav>
<!-- Image and text -->
<nav>
<a href="#">
<img src="/assets/brand/bootstrap-solid.svg" alt="">
Bootstrap
</a>
</nav>Навбар
Ссылки в навигации навбара сделаны на параметрах класса ., с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
nav
Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-item.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
</div>
</nav>И т.
к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<div>
<a href="#">Home <span>(current)</span></a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Disabled</a>
</div>
</div>
</nav>Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>Формы
Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс ..
<nav>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</nav>
Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.
<nav>
<a>Navbar</a>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</nav>
Работают и формы ввода, также:
<nav>
<form>
<div>
<div>
<span>@</span>
</div>
<input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Разные кнопки поддерживаются как часть этих форм в навбарах.
Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
<nav>
<form>
<button type="button">Main button</button>
<button type="button">Smaller button</button>
</form>
</nav>
Текст
Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.
<nav>
<span>
Navbar text with an inline element
</span>
</nav>
Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.
<nav>
<a href="#">Navbar w/ text</a>
<button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
<span>
Navbar text with an inline element
</span>
</div>
</nav>
Цветовые схемы
Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color.
Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.
<nav> <!-- Navbar content --> </nav> <nav> <!-- Navbar content --> </nav> <nav> <!-- Navbar content --> </nav>
Контейнеры
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.
<div>
<nav>
<a href="#">Navbar</a>
</nav>
</div>
Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.
navbar-expand{-sm|-md|-lg|-xl}
<nav>
<div>
<a href="#">Navbar</a>
</div>
</nav>
Размещение
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).
Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.
<nav> <a href="#">Default</a> </nav>
<nav> <a href="#">Fixed top</a> </nav>
<nav> <a href="#">Fixed bottom</a> </nav>
<nav> <a href="#">Sticky top</a> </nav>
Отзывчивое поведение
Навбары могут использовать классы ., 
navbar-toggler.navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.
Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.
Тогглер (кнопка разворачивания меню)
Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.
Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<a href="#">Hidden brand</a>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
С «брендом», показанный слева, и тогглером — справа:
<nav>
<a href="#">Navbar</a>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
С тогглером слева и «брендом» справа:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<a href="#">Navbar</a>
<div>
<ul>
<li>
<a href="#">Home <span>(current)</span></a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Disabled</a>
</li>
</ul>
<form>
<input type="search" placeholder="Search" aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</nav>
Внешнее содержимое
Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице.
Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!
Collapsed content
Toggleable via the navbar brand.<div>
<div>
<div>
<h5>Collapsed content</h5>
<span>Toggleable via the navbar brand.</span>
</div>
</div>
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
</nav>
</div>
Браузеры и устройства · Bootstrap
Узнайте о браузерах и устройствах, от современных до старых, которые поддерживаются Bootstrap, включая известные особенности и ошибки для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает последние стабильные версии всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 10-11 / Microsoft Edge .
Альтернативные браузеры, использующие последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) корректно отображаться и работать и в этих браузерах. Более подробная информация о поддержке представлена ниже.
Список поддерживаемых нами браузеров и их версий можно найти в нашем файле .browserslistrc :
# https://github.com/browserslist/browserslist#readme >= 1% последняя 1 основная версия не мертв Хром >= 45 Фаерфокс >= 38 Край >= 12 Проводник >= 10 iOS >= 9 Сафари >= 9 Андроид >= 4.4 Опера >= 30
Мы используем Autoprefixer для обработки предполагаемой поддержки браузера с помощью префиксов CSS, который использует Browserslist для управления этими версиями браузера.
Обратитесь к их документации, чтобы узнать, как интегрировать эти инструменты в ваши проекты.
Мобильные устройства
Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для всех основных платформ. Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.
| Хром | Фаерфокс | Сафари | Android-браузер и WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Андроид | Поддерживается | Поддерживается | Н/Д | Android v5.0+ поддерживается | Поддерживается |
| iOS | Поддерживается | Поддерживается | Поддерживается | Н/Д | Поддерживается |
| Windows 10 Mobile | Н/Д | Н/Д | Н/Д | Н/Д | Поддерживается |
Настольные браузеры
Точно так же поддерживаются последние версии большинства настольных браузеров.
| Хром | Фаерфокс | Internet Explorer | Microsoft Edge | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Mac | Поддерживается | Поддерживается | Н/Д | Н/Д | Поддерживается | Поддерживается |
| Окна | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, в дополнение к последней обычной стабильной версии, мы также поддерживаем последнюю версию Firefox с расширенной поддержкой (ESR).
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, см. на нашей Стене ошибок браузера.
Internet Explorer
поддерживается Internet Explorer 10+; IE9 и ниже нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют префиксных свойств для полной функциональности. Посетите страницу Могу ли я использовать… для получения подробной информации о поддержке браузерами функций CSS3 и HTML5. Если вам требуется поддержка IE8-9, используйте Bootstrap 3.
Модальные окна и раскрывающиеся списки на мобильных устройствах
Переполнение и прокрутка
Поддержка переполнения : скрыто; в элементе довольно ограничено в iOS и Android. С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального окна в браузерах любого из этих устройств, содержимое начнет прокручиваться. См. ошибку Chrome № 175502 (исправлена в Chrome v40) и ошибку WebKit № 153852.
Текстовые поля iOS и прокрутка
Начиная с iOS 9.2, когда открыто модальное окно, если начальное касание жеста прокрутки находится в пределах текстового или