Продолжаем изучать 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>С уважением, авторы сайта Компьютерапия
