В этом уроке я постараюсь разобрать компонент navbar в Boostrap 3. Этот компонент полезен и может очень пригодится при верстке шаблона. Компонент navbar так же как и все блоки Bootstrap имеет полезное свойство сворачивания.
Navbar на компьютерах
Так выглядит navbar на компьютерах все элементы присутствуют
Navbar на мобильных устройствах
Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку
Navbar может быть:
- Зафиксирован сверху — при прокрутке navbar всегда будет сверху
- Зафиксирован снизу — при прокрутке navbar всегда будет снизу
С теорией ознакомились теперь нам предстоит разобрать не простой код. Navbar в Bootstrap заключается в тег nav. Следующий код я буду разбивать на части и постараюсь объяснить для чего нужен тот или иной фрагмент кода.
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Название компании и кнопка, которая отображается для мобильных устройств группируются для лучшего отображения при свертывании --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a> </div> <!-- Группируем ссылки, формы, выпадающее меню и прочие элементы --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</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"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
Резиновостью navbar можно управлять меняя значение класса.
<div class="container-fluid">
Можно вместо container-fluid поставить просто container, тогда navbar не будет растягиваться на всю ширину экрана,а примет ширину container по-умолчанию. Максимальная ширина container составляет 1170px
Следующая часть кода отвечает за название организации(фирмы) и кнопку, которая появляется на мобильных устройствах
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a><!--Название организации(фирмы)--> </div>
Следующий код хранит в себе элементы navbar.
<!-- Группируем ссылки, формы, выпадающее меню и прочие элементы --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</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"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse -->
В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку
Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id
В примере для разбора navbar есть простые элементы такие как ссылка, но есть и сложные элементы это форма, выпадающий список. Для создания меню на основе navbar нужно использовать список ul
<ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</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>
Классы nav navbar-nav нужны для того чтобы элементы списка ul располагались горизонтально. Для создания простой ссылки в меню можно использовать следующий код
<li><a href="#">Link</a></li>
Для выделения активного пункта меню нужно использовать класс active
Для того чтобы вывести выпадающее меню нужно родительскому li добавить класс dropdown и внутри элемента разместить каретку по нажатию на которую будет выпадать меню. Во вложенный список ul нужно добавить класс dropdown-menu
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><!--Каретка--> <ul class="dropdown-menu"><!--Вложенный список который будет выпадать--> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</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>
Фиксация navbar сверху
Для того чтобы зафиксировать navbar сверху нужно добавить класс navbar-fixed-top
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Фиксация navbar снизу
Для того чтобы зафиксировать navbar снизу нужно добавить класс navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
Готовый пример — Скачать
ValueError thrown
Unknown format specifier "a"