Bootstrap Панель навигации

Панель навигации по умолчанию

Шаги по созданию панели навигации по умолчанию следующие:

• Добавьте класс к тегу <nav>.navbar、.navbar-default。
• Добавьте к указанному выше элементуrole="navigation", что помогает повысить доступность.
• Добавьте класс заголовка к элементу <div>.navbar-header, который содержит элемент <a> с классомnavbar-brand. Это сделает текст на один размер больше.
• Чтобы добавить ссылки в панель навигации, просто добавьте маркированный список с классом.nav、.navbar-nav.

Следующий пример демонстрирует это:

Результат следующий:

---

Адаптивная панель навигации

Чтобы добавить адаптивные возможности в панель навигации, содержимое, которое вы хотите сворачивать, должно быть обёрнуто в <div> с классом.collapse、.navbar-collapse. Свёрнутая панель навигации на самом деле представляет собой кнопку с классом.navbar-toggleи двумя data- элементами. Первый —data-toggle, который используется, чтобы сообщить JavaScript, что делать с кнопкой, а второй —data-target, указывающий, на какой элемент переключаться. Три элемента <span> с классом.icon-barсоздают так называемую кнопку-гамбургер. Они будут переключать на.nav-collapseэлемент <div>. Чтобы реализовать эти возможности, необходимо подключитьплагин Bootstrap Collapse。

Следующий пример демонстрирует это:

Результат следующий:

Формы в панели навигации

Формы в панели навигации не используют классы по умолчаниюФормы Bootstrap, упомянутые в главе; вместо этого они используют класс.navbar-form. Это обеспечивает правильное вертикальное выравнивание формы и поведение сворачивания в более узких областях просмотра. Используйте параметры выравнивания (которые будут подробно рассмотрены в разделе «Выравнивание компонентов»), чтобы определить, где размещается содержимое в панели навигации.

Следующий пример демонстрирует это:

Результат следующий:

Кнопки в панели навигации

Вы можете использовать класс.navbar-btn, чтобы добавлять кнопки к элементу <button>, который не находится внутри <form>, и кнопка будет вертикально выровнена по центру в панели навигации..navbar-btnЕго можно использовать на элементах <a> и <input>.

Не используйте.navbar-navна элементах <a> внутри.navbar-btn, потому что это не стандартныйкласс кнопки。

Следующий пример демонстрирует это:

Результат следующий:

Текст в панели навигации

Если вам нужно включить текстовые строки в навигацию, используйте класс.navbar-text. Обычно это используется вместе с тегом <p> для обеспечения правильного межстрочного интервала и цвета. Следующий пример демонстрирует это:

Результат следующий:

Ссылки в панели навигации с иконками

Если вы хотите использовать иконки в обычных компонентах навигации navbar, используйте классglyphicon glyphicon-*чтобы задать иконки. Подробнее см. вBootstrap Icons, как показано в следующем примере:

Результат следующий:

Выравнивание компонентов

Вы можете использовать служебные классы.navbar-leftили.navbar-right, чтобы выровнятьнавигационные ссылки, формы, кнопки или текст панели навигациивлево или вправо. Оба этих класса добавляют CSS float в указанном направлении. Следующий пример демонстрирует это:

Результат следующий:

Закреплено сверху

Навбар Bootstrap можно позиционировать динамически. По умолчанию это блочный элемент, позиционируемый в зависимости от того, где он размещён в документе. С помощью некоторых вспомогательных классов вы можете разместить его в верхней или нижней части страницы, либо сделать статическим навбаром, который прокручивается вместе со страницей.

Если вы хотите закрепить навбар в верхней части страницы,к классу .navbarдобавьте класс.navbar-fixed-top. Следующий пример демонстрирует это:

Чтобы навбар не перекрывал верхнюю часть другого содержимого в теле страницы, добавьте к тегу <body> внутренний отступ не менее 50 пикселей. Значение отступа можно задать в соответствии с вашими потребностями.

Результат следующий:

Закреплён внизу

Если вы хотите закрепить навбар в нижней части страницы,к классу .navbarдобавьте класс.navbar-fixed-bottom. Следующий пример демонстрирует это:

Результат следующий:

Статичная верхняя панель

Чтобы создать навигационную панель, которая прокручивается вместе со страницей, добавьте.navbar-static-topкласс. Этот класс не требует добавления padding к <body>.

Результат следующий:

Инвертированная навигационная панель

Чтобы создать инвертированную навигационную панель с чёрным фоном и белым текстом, просто.navbarдобавьте класс к.navbar-inverseклассу, как показано в следующем примере:

Чтобы навбар не перекрывал верхнюю часть другого содержимого в теле страницы, добавьте к тегу <body> внутренний отступ не менее 50 пикселей. Значение отступа можно задать в соответствии с вашими потребностями.

Результат следующий:

Другие расширения