ИТ Блог. Создание сайтов с применением Bootstrap
(Пока оценок нет)
Загрузка...
Навигационная панель является одной из характерных особенностей сайтов на Bootstrap. Навигационная панель отзывчива «meta» компонента, которые служат в качестве навигационных заголовков для вашего приложения или сайта. Навигационная панель разрушается в мобильных взглядах и становиться горизонтальной, доступной по ширине окна и увеличивается для просмотра. По своей сути, навигационная панель включает в себя стиль для имен сайтов и базовой навигации.
Для создания навигационную панель по умолчанию:
Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Для добавления реагирующих функций в навигационной панели, содержание, которое вы хотите быть свернуть, необходимо поместить в <div> с классами .collapse, .navbar-collapse. Коллапс отключается с помощью кнопки, которая имеет класс .navbar-toggle, а затем включает в себя два данных- элемента. Во – первых, data-toggle, используется, чтобы сообщить JavaScript, что делать с помощью кнопки, а второй, data-target, указывает на то, какой элемент переключается. затем с классом .icon-bar создает то, что мы называем кнопку гамбургера. Будет переключать элементы, которые находятся в .nav-collapse <div>. Для работы этой функции необходимо включить плагин Bootstrap Collapse.
Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Вместо использования форм на основе классов по умолчанию из главы Bootstrap-формы, формы, которые находятся в навигационной панели, используйте класс .navbar-form. Это гарантирует правильное вертикальное выравнивание формы и разрушение поведения в узких видах. Используйте параметры выравнивания (поясняется в разделе Компонент выравнивания), чтобы решить, где она находится в пределах содержания навигационная панели.
Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Отправить</button>
</form>
</div>
</nav>
Вы можете добавить кнопки, используя класс .navbar-btn к элементам <button>, не находящиеся в <form> вертикально центрировать их в навигационной панели. .navbar-btn может быть использован на <a> и элементов <input>.
Не используйте .navbar-btn , как стандартные классы кнопок на <a> элементов в .navbar-nav.
Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Кнопка "Отправить"</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Кнопка навигационной панели</button>
</div>
</nav>
Для того, чтобы обернуть строки текста в элементе использовать класс .navbar-text. Это, как правило, используется с тегом <p> для правильного поведения и цвета. Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<p class = "navbar-text">Зашел как AndreyEx</p>
</div>
</nav>
Если вы хотите использовать стандартные ссылки, которые не в рамках обычных компонентов навигации, и использовать класс navbar-link, чтобы добавить соответствующие цвета для стандартных и обратных параметров навигационной панели, как показано в следующем примере:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">AndreyEx</a>
</p>
</div>
</nav>
Вы можете выровнять компоненты, такие как навигационные ссылки, форма, кнопки, или текст влево или вправо в навигационной панели, используя служебные классы .navbar-left или .navbar-right. Оба класса добавят CSS размещать в заданном направлении. Следующий пример демонстрирует это:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<!--Левое выравнивание-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделение</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Кнопка выравненная по левому краю</button>
</form>
<p class = "navbar-text navbar-left">Текст выравнен по левому краю</p>
<!--Правое выравнивание-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Кнопка "Отправить" выравненная по правому краю.
</button>
</form>
<p class = "navbar-text navbar-right">Текст выравнен по правому краю</p>
</div>
</nav>
Навигационная панель Bootstrap может быть динамическим в его позиционировании. По умолчанию, это элемент уровня блока, который берет свое позиционирование на основе его размещения в HTML. С помощью нескольких вспомогательных классов, вы можете поместить его либо в верхней или нижней части страницы, или вы можете сделать его прокрутку страницы статически.
Если вы хотите навигационную панель прикрепленной к вершине, добавить класс .navbar-fixed-top к классу .navbar. Следующий пример демонстрирует это:
Чтобы предотвратить навигационной панели сидеть на вершине другого содержания в теле страницы, добавить по крайней мере 50 пикселов заполнения для тега <body> или попробовать свои собственные значения.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Если вы хотите Navbar прикрепить к нижней части страницы, добавить класс .navbar-fixed-bottom к классу .navbar. Следующий пример демонстрирует это:
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Чтобы создать навигационную панель, которая прокручивается со страницей, добавьте класс .navbar-static-top. Этот класс не требует добавления отступов в <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Для того, чтобы создать перевернутую навигационная панель с черным фоном и белым текстом, просто добавьте класс .navbar-inverse к классу .navbar, как показано в следующем примере:
Чтобы предотвратить Navbar находиться на вершине другого содержания в теле страницы, добавить по крайней мере 50 пикселов заполнения для тега <body> или попробовать свои собственные значения.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">AndreyEx</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Разделенная ссылка</a></li>
<li class = "divider"></li>
<li><a href = "#">Еще одна разделенная ссылка</a></li>
</ul>
</li>
</ul>
</div>
</nav>
