Navbar (Уроки Bootstrap 3)

В этом уроке я постараюсь разобрать компонент navbar в Boostrap 3. Этот компонент полезен и может очень пригодится при верстке шаблона. Компонент navbar так же как и все блоки Bootstrap имеет полезное свойство сворачивания.

Navbar на компьютерах

Так выглядит navbar на компьютерах все элементы присутствуют

navbar1

Navbar на мобильных устройствах

Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку

navbar2

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

В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку

navbar5

Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id

navbar4

В примере для разбора 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">

Готовый пример — Скачать

27 комментариев на «“Navbar (Уроки Bootstrap 3)”»

  1. Илья Цыпин:

    Точно не нужен, проверьте подключен ли js, а лучше скачайте архив в приложении к статье….

  2. Robbert:

    А как сделать что бы пункты меню были не слева, а по центру?

  3. Сергей Бендер:

    Можно ли сделать, чтоб на на больших экранах меню было фиксированным, а на мобильных нет?

    Спрашиваю так как есть проблема с отображением меню на мобильном. Сайт http://ufx.com.ua, везде все отлично, а на мобильном меню занимает треть экрана, не знаю как поправить.
    Буду очень благодарен за помощь.

    • TSergey:

      Можно попробовать использовать HTTP_USER_AGENT для определения устройства, а после уже применять определенные стили.

  4. Голос на заре:

    Как сделать чтобы менюха в мобильном варианте — сворачивалась ?? Перерыл все уже..немогу найти ! Заранее спасибо ! Код меню :

    • TSergey:

      Возможно нужно добавить код в Head

      • Голос на заре:

        не то !
        Может неправильно я сформулировал вопрос (((
        Суть такова : меню мобильное работает — только принажатии пункта меню,не сворачивается тем самым загораживает всю активную область с контентом..хух

  5. UraN:

    А как сделать, что бы кнопка появлялась не только на мобильном, но уже на планшете, например.

  6. LPerke Perke:

    Статья очень во многом помогла разобраться!
    Подскажите, как избавиться от полос прокрутки, когда открываешь меню на маленьком экране? спасет ли min-width?

  7. Roman Mincovskiy:

    А как сделать чтоб меню сворачивалось при скроле?

  8. Атаманив Владимир:

    Спасибо за статью, очень пригодилась!

  9. Андрей Копылов:

    Не разворачивается свернутое меню. Хотя вроде все верно сделано.
    Это может быть из за браузера?

  10. Viki:

    у меня вроде код правильный, а мобильное меню не высвечивает, появляется при загрузке и тут же пропадает, подскажите, пожалуйста, в чём может быть проблема. Голову уже сломала.http://busines-s.ru/

  11. Roman Pastushkov:

    НИКОГДА!!! НИКОГДА НЕ ИНКЛЮДЬ СКРИПТЫ В БОДИ! ДЛЯЧ ЭТОГО ЕСТЬ ХЕД!!!!!

    • Алина:

      Сколько сейчас в универе идет курс по разработке сайтов, столько нам твердят, что подключать скрипты нужно снизу внутри тега body. А в head подключают стили. Так что Вы не правы.

    • escsun:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *