ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Люби друга, но помни, что он может стать тебе врагом (Сципион).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Navbar
Навигационная панель является одной из характерных особенностей сайтов на Bootstrap. Навигационная панель отзывчива «meta» компонента, которые служат в качестве навигационных заголовков для вашего приложения или сайта. Навигационная панель разрушается в мобильных взглядах и становиться горизонтальной, доступной по ширине окна и увеличивается для просмотра. По своей сути, навигационная панель включает в себя стиль для имен сайтов и базовой навигации.

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

Для создания навигационную панель по умолчанию:

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

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

 

Отзывчивая навигационная панель

Для добавления реагирующих функций в навигационной панели, содержание, которое вы хотите быть свернуть, необходимо поместить в <div> с классами .collapse, .navbar-collapse. Коллапс отключается с помощью кнопки, которая имеет класс .navbar-toggle, а затем включает в себя два данных- элемента. Во – первых, data-toggle, используется, чтобы сообщить JavaScript, что делать с помощью кнопки, а второй, data-target, указывает на то, какой элемент переключается. затем с классом .icon-bar создает то, что мы называем кнопку гамбургера. Будет переключать элементы, которые находятся в .nav-collapse <div>. Для работы этой функции необходимо включить плагин Bootstrap Collapse.

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

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

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

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

 

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

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

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

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

 

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

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

 

Не навигационные ссылки

Если вы хотите использовать стандартные ссылки, которые не в рамках обычных компонентов навигации, и использовать класс navbar-link, чтобы добавить соответствующие цвета для стандартных и обратных параметров навигационной панели, как показано в следующем примере:

 

Компонент выравнивания

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

 

Крепится к началу

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

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

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

 

Фиксация к низу

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

 

Статично вверху

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

 

Перевернутая панель навигации

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

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

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close