Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Навигационная панель
Навигационная панель является простой оболочкой для позиционирования брендинг, навигация и другие элементы в заголовке краткое навигации. Это легко расширяемый и, с помощью нашего плагина крах, его можно легко интегрировать контент закадровый.
Основы
Вот что вы должны знать перед началом работы с навигационной панелью:
- Navbar’у требуется задать класс .navbar и указать цветовую схему.
- По-умолчанию Navbars и его содержание могут изменяться. Используйте контейнеры для ограничения их ширины.
- Используйте .pull-*-left и .pull-*-right чтобы быстро выровнять компоненты.
- Обеспечить доступность с помощью элемент или, если использовать более общий элемент, например добавить role=»navigation» для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.
Поддерживает содержимоe
Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:
- .navbar-brand для Вашей компании, продукта или название проекта
- .navbar-nav для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков)
- .navbar-toggler для использования с нашими плагина крах и других навигация переключение поведения.
Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:
class="navbar navbar-light bg-faded"> class="navbar-brand" href="#">Navbar class="nav navbar-nav"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="nav-item"> class="nav-link" href="#">About class="form-inline pull-xs-right"> class="form-control" type="text" placeholder="Search"> class="btn btn-outline-success" type="submit">Search
Бренд
.navbar-brand могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.
class="navbar navbar-light bg-faded"> class="navbar-brand" href="#">Navbar class="navbar navbar-light bg-faded"> class="navbar-brand m-b-0">Navbar
Nav
Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav .
class="navbar navbar-light bg-faded"> class="nav navbar-nav"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="nav-item"> class="nav-link" href="#">About
И поскольку мы используем классы для наших навигаций, вы можете избежать на основе списка подходом целиком и полностью, если вам нравится.
class="navbar navbar-light bg-faded"> class="nav navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link" href="#">About
Цветовые схемы
Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.
Вот некоторые примеры, чтобы показать что мы имеем в виду.
class="navbar navbar-dark bg-inverse"> class="navbar navbar-dark bg-primary"> class="navbar navbar-light" style="background-color: #e3f2fd;">
Контейнеры
Хотя это не требуется, вы можете обернуть навигации в .container , чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.
class="container"> class="navbar navbar-light bg-faded"> class="navbar-brand" href="#">Navbar
class="navbar navbar-light bg-faded"> class="container"> class="navbar-brand" href="#">Navbar
Размещение
Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.
class="navbar navbar-full navbar-light bg-faded"> class="navbar-brand" href="#">Full width
class="navbar navbar-fixed-top navbar-light bg-faded"> class="navbar-brand" href="#">Fixed top
class="navbar navbar-fixed-bottom navbar-light bg-faded"> class="navbar-brand" href="#">Fixed bottom
Складной содержания
Наш плагин развал позволяет использовать или для переключения скрытый контент.
class="navbar navbar-light bg-faded"> class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> ☰ class="collapse" id="exCollapsingNavbar"> class="bg-inverse p-a-1"> Collapsed content class="text-muted">Toggleable via the navbar brand.
Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-* классы в сочетании с .navbar-toggler . Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.
class="navbar navbar-light bg-faded"> class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> ☰ class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> class="navbar-brand" href="#">Responsive navbar class="nav navbar-nav"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="nav-item"> class="nav-link" href="#">About
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
Что означают свойства navbar-collapse, navbar-header и navbar-toggle?
Что означают свойства navbar-collapse, navbar-header и navbar-toggle? В уроке я объяснения не нашёл, и на официальном сайте Bootstrap тоже про них ничего не говорится, только показывается.
3 years ago
Похожие вопросы
- Bootstrap урок 17 не появляется меню при нажатии на кнопку?
- Bootstrap 3, урок 2. какая таблица имеется ввиду?
- Как правильно написать тег header и стиль?
- Bootstrap, не показывает в браузере изменение, как исправить?
- Дз по курсу bootstrap 3 #27 (header). формулировка задачи не совпадает с решением (скрытым)?
- Как сделать картинку во весь экран шапки ?
- Что делать,если страница не видит панель bootstrap 3(37)?
- Не работает кнопка меню, где ошибки?
- Как исправить проблему сдвига блока в версии сайта под iphone 5/se?
- Почему не появляется меню с кнопки
2 ответов
Спасибо, теперь понял.
3 years ago
navbar-toggle — это такая пипка с полосками, на которую можно нажимать, когда разрешение экрана маленькое. К navbar-toggle добавляется класс collapsed, если меню не раскрыто, если нажать на меню, класс collapsed убирается с помощью javascript.
Чтобы меню сворачивалось и разворачивалось, нужна javascript библиотека collapse.js, это одна из зависимостей bootstrap, которая подключается вместе с bootstrap:
Достаточно открыть инструменты разработчика в браузере, тыкнуть стрелкой на элемент навигации и посмотреть, какие классы добавляются.
Все классы bootstrap для navbar есть в документации:
Навигационная панель
Документация и примеры для мощного и отзывчивого навигационного заголовка 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 (большой).
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarSupportedContent"> 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="#">Link class="nav-item dropdown"> class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown class="dropdown-menu" aria-labelledby="navbarDropdown"> class="dropdown-item" href="#">Action class="dropdown-item" href="#">Another action class="dropdown-divider">
В этом примере использованы классы цвета bg-light и спейсинга my-2 , my-lg-0 , mr-sm-0 , my-sm-0 .
Бренд
.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.
class="navbar navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar navbar-light bg-light"> class="navbar-brand mb-0 h1">Navbar
Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.
class="navbar navbar-light bg-light"> class="navbar-brand" href="#"> src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
class="navbar navbar-light bg-light"> class="navbar-brand" href="#"> src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
Навбар
Ссылки в навигации навбара сделаны на параметрах класса .nav , с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.
Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNav"> class="navbar-nav"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="nav-item"> class="nav-link disabled" href="#">Disabled
И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavAltMarkup"> class="navbar-nav"> class="nav-item nav-link active" href="#">Home class="sr-only">(current) class="nav-item nav-link" href="#">Features class="nav-item nav-link" href="#">Pricing class="nav-item nav-link disabled" href="#">Disabled
Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link , как в примере ниже.
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarNavDropdown"> class="navbar-nav"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="nav-item dropdown"> class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> class="dropdown-item" href="#">Action class="dropdown-item" href="#">Another action class="dropdown-item" href="#">Something else here
Формы
Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline .
class="navbar navbar-light bg-light"> class="form-inline"> class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> class="btn btn-outline-success my-2 my-sm-0" type="submit">Search
Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.
class="navbar navbar-light bg-light justify-content-between"> class="navbar-brand">Navbar class="form-inline"> class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> class="btn btn-outline-success my-2 my-sm-0" type="submit">Search
Работают и формы ввода, также:
class="navbar navbar-light bg-light"> class="form-inline"> class="input-group"> class="input-group-prepend"> class="input-group-text" id="basic-addon1">@ type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.
class="navbar navbar-light bg-light"> class="form-inline"> class="btn btn-outline-success" type="button">Main button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button
Текст
Благодаря классу .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/ text class="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="#">Features class="nav-item"> class="nav-link" href="#">Pricing class="navbar-text"> Navbar text with an inline element
Цветовые схемы
Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .
class="navbar navbar-dark bg-dark"> class="navbar navbar-dark bg-primary"> class="navbar navbar-light" style="background-color: #e3f2fd;">
Контейнеры
Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.
class="container"> class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar
Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.
class="navbar navbar-expand-lg navbar-light bg-light"> class="container"> class="navbar-brand" href="#">Navbar
Размещение
Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).
Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.
class="navbar navbar-light bg-light"> class="navbar-brand" href="#">Default
class="navbar fixed-top navbar-light bg-light"> class="navbar-brand" href="#">Fixed top
class="navbar fixed-bottom navbar-light bg-light"> class="navbar-brand" href="#">Fixed bottom
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 , на самых маленьких брейкпойнтах:
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarTogglerDemo01"> class="navbar-brand" href="#">Hidden brand class="navbar-nav mr-auto mt-2 mt-lg-0"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled class="form-inline my-2 my-lg-0"> class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> class="btn btn-outline-success my-2 my-sm-0" type="submit">Search
С «брендом», показанный слева, и тогглером — справа:
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-brand" href="#">Navbar class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="collapse navbar-collapse" id="navbarTogglerDemo02"> class="navbar-nav mr-auto mt-2 mt-lg-0"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled class="form-inline my-2 my-lg-0"> class="form-control mr-sm-2" type="search" placeholder="Search"> class="btn btn-outline-success my-2 my-sm-0" type="submit">Search
С тогглером слева и «брендом» справа:
class="navbar navbar-expand-lg navbar-light bg-light"> class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> class="navbar-toggler-icon"> class="navbar-brand" href="#">Navbar class="collapse navbar-collapse" id="navbarTogglerDemo03"> class="navbar-nav mr-auto mt-2 mt-lg-0"> class="nav-item active"> class="nav-link" href="#">Home class="sr-only">(current) class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled class="form-inline my-2 my-lg-0"> class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> class="btn btn-outline-success my-2 my-sm-0" type="submit">Search
Внешнее содержимое
Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через 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 content class="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">
Панель навигации
Панель навигации Bootstrap 4 — это простая оболочка для размещения брендинга, навигации и других элементов в навигационном заголовке.
Базовая панель
- поместите всё внутрь элемента с классами .navbar и .navbar-expand <-sm|-md|-lg|-xl>вместе с цветовой схемой;
- для переключаемого меню на небольших устройствах используйте элемент с классом .navbar-toggler ; чтобы отобразить «гамбургер», укажите класс .navbar-toggler-icon для элемента ;
- для списка ссылок используйте элемент с классом .navbar-nav ;
- для каждого отдельного пункта списка используйте с классом .nav-item ;
- для отдельных ссылок используйте с классом .nav-link .
Навигационная панель с выпадающим меню
Текущая страница
Панель навигации с полями форм
Выравнивание
Вы можете использовать вспомогательные классы (например, .mr-auto или .justify-content-end ) для выравнивания элементов в панели навигации.
Флексбокс-классы берут свои имена из действительных свойств и значений флексбоксов. Это позволяет легко угадывать название наиболее подходящего класса для данной ситуации. Вы также можете добавить адаптивное сокращение, чтобы выполнить выравнивание только для определённых размеров области просмотра. Например, .justify-content-lg-end применяет justify-content: end для больших устройствах и выше.
Документация Bootstrap, которую вы можете использовать в качестве справочника, содержит полный список флексбокс-классов.
Также смотрите мою статью, содержащую демонстрацию выравнивания через флексбоксы.
Bootstrap 4 против Bootstrap 3
Bootstrap 3 использовал .navbar-left и .navbar-right для выравнивания панели навигации, Bootstrap 4 использует разные вспомогательные классы.
Цвета
Bootstrap предоставляет различные варианты для добавления цвета к панели навигации. Это работает так: сперва задаёте, светлая панель или тёмная (через .navbar-light или .navbar-dark ), а затем указываете цвет. Цвет можно задать с помощью одного из классов цвета Bootstrap (например, .bg-primary , .bg-dark ), либо указав свой собственный цвет с помощью CSS (например, через background-color).
В предыдущих примерах уже указан цвет панели навигации. Вот ещё несколько примеров.
Главный цвет, светлая панель
Здесь мы используем .bg-primary вместе с .navbar-light .
Главный цвет, тёмная панель
Здесь мы используем .bg-primary вместе с .navbar-dark .
Свой цвет
Чтобы указать свой собственный цвет, опустите любой класс .bg-* (например, удалите .bg-primary ) и добавьте свой собственный цвет с помощью CSS.
Bootstrap 4 против Bootstrap 3
Bootstrap 4 представил класс .navbar-light и позволяет использовать классы .bg-* для панелей навигации. Bootstrap 3 позволяет инвертировать цвета, но не поддерживает другие классы для панелей навигации.
Фиксированная панель
Вы можете закрепить панель навигации вверху или внизу окна просмотра с помощью класса .fixed-top или .fixed-bottom .
Фиксация вверху
Фиксация внизу
padding обязателен
При использовании фиксированных панелей навигации вам обычно понадобится добавить padding, чтобы компенсировать высоту панели навигации (в противном случае панель навигации будет скрывать ваше содержимое). Например, для панели навигации с фиксацией вверху попробуйте это:
body
А для фиксации снизу:
body
Вы можете настроить эти значения как нужно.
Bootstrap 4 против Bootstrap 3
Bootstrap 3 использует .navbar-fixed-top и .navbar-fixed-bottom , чтобы зафиксировать панели навигации вверху или внизу. Bootstrap 4 упростил это до .fixed-top и .fixed-bottom .
Автор: Йен Диксон
Последнее изменение: 12.03.2020
- Что такое Bootstrap?
- Начало работы с Bootstrap 4
- Контейнеры Bootstrap 4
- Система сеток Bootstrap 4
- Типографика в Bootstrap 4
- Таблицы в Bootstrap 4
- Формы в Bootstrap 4
- Пользовательские формы
- Кнопки в Bootstrap 4
- Изображения в Bootstrap 4
- Выпадающее меню
- Группа кнопок
- Группа ввода
- Сворачивание содержимого
- Навигация
- Панель навигации
- Хлебные крошки
- Нумерация страниц
- Значки
- Джамботрон
- Уведомления
- Модальное диалоговое окно
- Шкала прогресса
- Медиа-объекты
- Группа списков
- Карточки
- Адаптивное встраивание
- Карусель
- Всплывающие подсказки
- Информеры
- Отслеживание прокрутки