Этот урок посвящен созданию адаптивного сайта с использованием Bootstrap. Сайт будет простым, но демонстрирует множество полезных технологий.
Адаптивность и шапка
Сайт адаптивен: при уменьшении размера экрана появляется кнопка, открывающая адаптивную шапку. Шапка остается видимой и не выходит за границы экрана на мобильных устройствах и планшетах. Она прикреплена к верху страницы, всегда оставаясь на виду.
Подключение библиотек
Перед началом работы необходимо подключить Bootstrap, jQuery и Bootstrap.min.js. Важно: jQuery должен быть подключен до Bootstrap.min.js.
Создание шапки (Navbar)
Для создания шапки создадим блок <div> с классами navbar и navbar-inverse. Класс navbar-inverse задает темный цвет шапки. Для фиксации шапки добавим класс navbar-fixed-top.
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- Содержимое шапки -->
</div>
Кнопка навигации (Navbar Toggle)
Добавим блок-контейнер (<div class=»container»>) и внутри него — блок навигации (<div class=»navbar-header»>). Внутри блока навигации создадим кнопку с классами navbar-toggle:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Атрибуты data-toggle="collapse" и data-target=".navbar-collapse" используют плагин Collapse для отображения/скрытия блока с навигационными элементами.
Название сайта
Добавим ссылку на название сайта:
<a class="navbar-brand" href="#">Project name</a>
Форма в шапке (Navbar Collapse)
Создадим блок с формой, который будет отображаться при нажатии кнопки:
<div class="collapse navbar-collapse">
<div class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Пароль">
</div>
<button type="submit" class="btn btn-success">Вход</button>
</div>
</div>
Блок обернут в <div> с классами navbar-collapse и collapse, форма выровнена справа (navbar-right), а поля ввода оформлены с помощью классов form-group и form-control.
Основной контент
Создадим основной блок сайта с использованием класса jumbotron:
<div class="jumbotron">
<div class="container">
<h1>Привет мир</h1>
<p>Lorem ipsum...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Узнать больше <span class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>
</div>
Класс jumbotron создает большой блок, container центрирует содержимое.
Блоки с сеткой
Используем систему сеток Bootstrap для создания трех блоков:
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Заголовок 1</h2>
<p>Lorem ipsum...</p>
<button type="button" class="btn btn-default">Button</button>
</div>
<div class="col-md-4">
<h2>Заголовок 2</h2>
<p>Lorem ipsum...</p>
<button type="button" class="btn btn-default">Button</button>
</div>
<div class="col-md-4">
<h2>Заголовок 3</h2>
<p>Lorem ipsum...</p>
<button type="button" class="btn btn-default">Button</button>
</div>
</div>
</div>
Классы row и col-md-4 обеспечивают адаптивное расположение блоков.
Футер
Создадим простой футер:
<hr>
<footer>
<p>© 2017 Все права защищены</p>
</footer>
В результате мы получили функциональный адаптивный сайт с использованием Bootstrap, демонстрирующий работу основных компонентов фреймворка: адаптивную шапку, систему сеток, использование плагина Collapse и стилизацию элементов формы. Сайт можно дополнительно расширить, добавив выпадающие списки, модальные окна и другие элементы.