Навигационная панель - это отличная функция, которая является одной из основных особенностей веб-сайта Bootstrap. Навигационная панель acts as a responsive header component for navigation in your application or website. В мобильных версиях она сворачивается, а при увеличении доступной ширины экрана expands горизонтально. В основе навигационной панели Bootstrap находятся имя сайта и базовые стили навигации.
Стандартная навигационная панель
Шаги для создания стандартной навигационной панели:</div>
добавить класс к тегу <nav> .navbar, .navbar-default。
добавить к элементам role="navigation"что помогает увеличить доступность.
добавить класс заголовка к элементу <div> .navbar-headerвнутри, который содержит класс navbar-brand элемент <a> с более крупным шрифтом.
Чтобы добавить ссылку в навигационную панель, нужно просто добавить элемент с классом .nav, .navbar-nav неупорядоченный список.</div>
Чтобы добавить динамические свойства навигационной панели, содержимое, которое вы хотите сложить, должно быть обернуто в элемент с классом .collapse, .navbar-collapse в <div> с классом .navbar-toggle и два элемента data-. Это data-toggleinformируют JavaScript, что нужно сделать с кнопкой, вторая из которых это data-targetклассы, которые указывают, к какому элементу нужно перейти. Три элемента с классом .icon-bar span создается так называемая кнопка-гамбургер. Эти элементы будут переключаться на .nav-collapse элементы в <div>. Для реализации этих функций вам необходимо включить Модуль сглаживания (Collapse) Bootstrap。
Вы можете использовать класс .navbar-btn Добавьте кнопку к элементу <button>, который не находится в <form>, и кнопку будет вертикально центрирована в меню навигации..navbar-btn может быть использовано на элементах <a> и <input>.
Не используйте в .navbar-nav используется на элементах <a> в .navbar-btnпоскольку это не стандартное button class。
Если вам нужно включить текстовую строку в навигацию, пожалуйста, используйте класс .navbar-textЭто обычно используется вместе с тегом <p>, чтобы обеспечить надлежащий отступ и цвет. Ниже приведен пример этого:
Если вы хотите использовать иконки в обычных компонентах навигации панели навигации, пожалуйста, используйте класс glyphicon glyphicon-* для установки иконок, подробности см. Bootstrap иконки например, в следующем примере:
Вы можете использовать классы утилит .navbar-left или .navbar-right направо или налево для выравнивания панели навигации ссылки навигации, форма, кнопка или текст Эти компоненты. Оба класса добавляют CSS плавание в указанном направлении. Ниже приведен пример этого:
Bootstrap навигационная панель может быть динамически позиционирована. По умолчанию, это блочный элемент, и его позиционирование основано на месте его放置 в HTML. С помощью некоторых помощников классов вы можете разместить его в верхней или нижней части страницы, или сделать его статической навигационной панелью, которая будет скролиться вместе с страницей. Если вы хотите, чтобы навигационная панель была зафиксирована в нижней части страницы, добавьте в .navbar class Если вы хотите, чтобы навигационная панель была зафиксирована в верхней части страницы, добавьте в.navbar-fixed-bottom
Чтобы предотвратить перекрытие навигационной панели другими элементами в верхней части страницы, добавьте не менее 50 пикселей внутреннего отступа (padding) к тегу <body>, значение отступа можно установить в соответствии с вашими потребностями.
фиксированная нижняя часть Если вы хотите, чтобы навигационная панель была зафиксирована в нижней части страницы, добавьте в .navbar class добавить class.navbar-fixed-bottom
Если вы хотите создать навигационную панель, которая будет скролиться вместе с страницей, добавьте .navbar-static-top class. Этот класс не требует добавления отступа (padding) в <body>.
Чтобы создать навигационную панель с черным фоном и белым текстом, достаточно просто добавить в .navbar class добавить .navbar-inverse class можно использовать, как показано в следующем примере:
Чтобы предотвратить перекрытие навигационной панели другими элементами в верхней части страницы, добавьте не менее 50 пикселей внутреннего отступа (padding) к тегу <body>, значение отступа можно установить в соответствии с вашими потребностями.