Продолжаем изучать Bootstrap 3, и сегодня разберем адаптивные изображения, различные типы меню, выпадающее меню при наведении курсора мыши, формы в меню. Кто не читал вторую часть, рекомендую ознакомиться со статьей Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2.

Адаптивные изображения

Для работы с изображениями в Bootstrap 3, позволющей сделать сайт по настоящему адаптивным, существует класс img-responsive. Он подгоняет размер изображения под ширину экрана, на компьютера или мобильном устройстве не появится горизонтальной прокрутки.

<div class="container-fluid">
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-responsive" />
</div>

Так же существуют классы, закругляющие края изображения img-rounded, делающие рисунок полностью круглым img-circle и img-thumbnail - рисунок оформлен рамкой

<div class="container-fluid">
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-rounded" />
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-circle" />
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-thumbnail" />
</div>

Демо

Следует отметить, что без класса img-responsive ваши изображения теряют адаптивность, поэтому целесообразно использовать их вместе.

<div class="container-fluid">
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-responsive img-rounded" />
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-responsive img-circle" />
<img src="https://maxfad.ru/screenshot.png" alt="..." class="img-responsive img-thumbnail" />
</div>
 

Демо

Меню в Bootstrap

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

Базовое меню

В HTML разметке для обозначения навигационных этементов существует тег nav, меню Bootstrap вместе с контейнером оборачивается этим тегом. Само меню представлено блоком с названием сайта(Brand), ссылкой, перезагружающей или ведущей на главную страницу и ul-li списка, с различным типом пунктов меню - прямая ссылка на страницу или с классом dropdown - выпадающее по клику или нажатию меню. Отдельно хочется отметить класс divider(разделитель) для элемента li, в меню он представляет из себя горизонтальную черту, отделяющую один пункт от другого.

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>

  </div>

</nav>

Демо

Адаптивное меню

В отличее от базового меню, в адаптивном меню присутствует кнопка с классом navbar-toggle collapsed, который при уменьшении ширины страницы до классов сетки sm или xs, скрывает все меню, оставляя видимым только название сайта и кнопку, позволяющую с мобильного устройства нажатием разворачивать или сворачивать пункты меню.
Для кнопки button использован data-target="#bs-example-navbar-collapse-1", который взаимодействует с идентификатором div основного меню через id="bs-example-navbar-collapse-1", открывая меню при нажатии.

<nav class="navbar navbar-default">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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>


    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>

    </div>
<!-- /.navbar-collapse -->
  </div>
<!-- /.container-fluid -->
</nav>

Демо

Фиксированное меню

Чтобы меню не двигалось при прокрутке контента, для фиксации вверху страницы в теге nav используется класс navbar-fixed-top. Добавив в предыдущем примере в элемент nav класс navbar-fixed-top, можно зафиксировать меню.

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    ...
  </div>

</nav>

Однако, при таком использовании меню, часть текста уплывет под меню и не будет видна. Для этого в css файл или секцию style нужно добавить отступ сверху на 70px, это оптимальное значение. Текст отступит от верхнего края и будет нормально выглядить.

body { padding-top: 70px; }

Изменение на navbar-fixed-bottom прилепит меню к нижнему краю, этот вариант можно использовать как дополнительное меню. Отступ от нижнего края в css следует указать body {padding-bottom: 70px;}

Демо

Статичное меню

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

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    ...
  </div>

</nav>

Демо

Инверсное меню

Замена у тега nav класса navbar-default на navbar-inverse приведет к тому, что цвет меню и шрифта изменится на противоположный, черный фон и светлый шрифт.

<nav class="navbar navbar-inverse">
<div class="container">
    ...
  </div>


</nav>

Демо

Выпадающее меню при наведении курсора мыши

Ну и наконец, когда мы разобрались, как работают различные типы меню в Bootstrap 3, осталось сделать так, чтобы меню выпадало при наведении курсора мыши. Спешу огорчить, поскольку бутстрап "заточен" под адаптивность для мобильных устройств, с их сенсорными экранами, простого пути нет. Но есть и хорошая новость, решеньем этой проблемы займется скрипт. Важно понимать, что в меню должен быть класс dropdown-menu, иначе ничего не получится. 

<$cript>
jQuery('ul.nav > li').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
})
</$cript>

Демо

В примере использовался код статичного меню, которое мы рассматривали выше, скрипт нужно вставлять в страницу перед закрывающим тегом body, и после jquery. Кто будет использовать код скрипта - замените символ $ на s, сделано это специально, чтобы $крипт не мешал другим компонентам на странице.

Изображение бренда

В блок меню, выводящий название сайта или бренда можно добавить изображение, используя стандартный тег img, обернув его в ссылку a. Естественно, цвет рисунка должен быть подобран максимально по дизайну вашего меню, и сочетаться с общим видом сайта, иметь небольшой размер.

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <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="#">
	   <img alt="Brand" src="https://maxfad.ru/home.png" />
	  </a>
    </div>

   
     <!--—тут основное меню---->
    
  </div>
<!-- /.container -->
</nav>

Демо

Формы в меню

Дополнительным элементом в меню могут быть различные формы, построенные на основе поля для ввода input и кнопки button. Так можно создать поиск по сайту или при клике на кнопку переходить в другую форму, например вход/регистрация. За положение формы в меню отвечает класс navbar-left и navbar-right, поместив форму между контейнерами можно расположить ее слева или справа в меню. Выносить за второй контейнер не советую, так как меню расширится и потеряет вид, если вам так захотелось добавить форму после основного меню, включайте ее прямо в сам контейнер.

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
        <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="#">
	   <img alt="Brand" src="https://maxfad.ru/home.png" />
	  </a>
    </div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text" />
</div>

  <button type="submit" class="btn btn-default">Submit</button>
</form>
    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>

    </div>
<!-- /.navbar-collapse -->
  </div>
<!-- /.container-fluid -->
</nav>

Демо

Имейте ввиду, что при просмотре страницы с такой версткой форма поиска окажется под главным меню, и может мешать навигации.
Поэтому или добавьте в нее класс hidden-xs для скрытия на мобильных устройствах и откажитесь от использования или добавьте еще одну такую же форму в меню как пункт. Для второй формы , видимой в меню только на мобильных устройствах добавьте класс visible-xs, таким образом одна форма будет видна на больших экранах вне меню, а другая только на мобильных экранах в раскрытом меню.

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
        <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="#">
	   <img alt="Brand" src="https://maxfad.ru/home.png" />
	  </a>
    </div>
<form class="navbar-form navbar-right hidden-xs" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text" />
</div>

  <button type="submit" class="btn btn-default">Submit</button>
</form>	  

    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><form class="navbar-form navbar-right visible-xs" role="search">
<div class="form-group">
			<input class="form-control" placeholder="Search" type="text" />
			</div>

			<button type="submit" class="btn btn-default">Submit</button>
			</form>
			</li>
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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>

 
    </div>
<!-- /.navbar-collapse -->
  </div>
<!-- /.container-fluid -->
</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