Компьютерапия

Bootstrap - Navbar

Категория: Bootstrap 3
Просмотров: 3952

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

Содержание:

Default Navbar

Чтобы создать навигационную панель по умолчанию -

  • Добавьте классы .Navbar , .navbar-default в тег nav.
  • Добавить роль = «навигация» к вышеуказанному элементу, чтобы помочь с доступностью.
  • Добавить класс заголовка .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 = "#"> TutorialsPoint </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">
               Ява
               <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 = "#"> Separated link </a> </li>
              
               <li class = "divider"> </ li>
               <li> <a href = "#"> One more separated link </a> </li>
            </ul >
           
         </Li>
                                    
      </ul >
   </DIV>
  
</nav>

Отзывчивый навигатор

Чтобы добавить отзывчивые функции в навигационную панель, содержимое, которое требуется свернуть, должно быть завершено в div с классами .collapse. navbar-collapse. Переключение сворачивания отключается с помощью кнопки, которая имеет класс .navbar-toggle, а затем включает в себя два элемента. Первый, переключение данных , используется для указания JavaScript, что делать с кнопкой, а второй - для цели данных, он указывает, какой элемент переключиться. Затем с классом .icon-bar создайте кнопку гамбургер. Это приведет к переключению элементов, находящихся в классе .nav-collapse. Чтобы эта функция работала, вам необходимо включить плагин 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 = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
                                    
      </ul>
   </div>
  
</nav>

Формы в Navbar

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

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

<nav class = "navbar navbar-default" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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">Submit</button>
        
      </form>   
   </div>
  
</nav>

Кнопки в Navbar

Вы можете добавлять кнопки с помощью класса .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 = "#">TutorialsPoint</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">Submit Button</button>
        
      </form> 
                       
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
  
</nav>

Текст в Navbar

Для обертывания строк текста в элементе используется класс .navbar-text. Обычно это используется с тегом p для правильного ввода текста и цвета.

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

<nav class = "navbar navbar-default" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
  
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
  
</nav>

Стандартные ссылки в меню

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

<nav class = "navbar navbar-default" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">Example</a>
   </div>
  
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
  
</nav>

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

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

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

<nav class = "navbar navbar-default" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
  
   <div>
     
      <!--Left Align-->
      <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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
     
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form>
     
      <p class = "navbar-text navbar-left">Left align-Text</p>
     
      <!--Right Align-->
      <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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
     
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form>
                       
      <p class = "navbar-text navbar-right">Right align-Text</p>
     
   </div>
  
</nav>

Fixed Top - зафиксировано сверху

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

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

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
   </div>
  
</nav>

Fixed Bottom - зафиксировано снизу

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

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
   </div>
  
</nav>

Static Top - статичное меню

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

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
   </div>
  
</nav>

Черный или инвертированный navbar

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

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

<nav class = "navbar navbar-inverse" role = "navigation">
  
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
   </div>
  
</nav>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok