Каждый имеет для другого лишь то значение, какое тот имеет для него (А. Шопенгауэр).

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

10 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — навигационная панель

(Пока оценок нет)

Загрузка...

07.06.2017

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

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

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

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

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

<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>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.