Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3

: Категория: Bootstrap 3; Опубликовано: 01 января 2018; Просмотров: 10349

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

Содержание:

Адаптивные изображения
Меню в Bootstrap
Базовое меню
Адаптивное меню
Фиксированное меню
Статичное меню
Инверсное меню
Выпадающее меню при наведении курсора мыши
Изображение бренда
Формы в меню

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

Для работы с изображениями в 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>

Демо

С уважением, авторы сайта Компьютерапия

Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3

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

Меню в Bootstrap

Базовое меню

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

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

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

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

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

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

Формы в меню

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

Связанные статьи

Новые статьи

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

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи