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>

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



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok