Bootstrap верстка: Создаем адаптивный сайт

Этот урок посвящен созданию адаптивного сайта с использованием 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>&copy; 2017 Все права защищены</p>
</footer>

В результате мы получили функциональный адаптивный сайт с использованием Bootstrap, демонстрирующий работу основных компонентов фреймворка: адаптивную шапку, систему сеток, использование плагина Collapse и стилизацию элементов формы. Сайт можно дополнительно расширить, добавив выпадающие списки, модальные окна и другие элементы.

Что будем искать? Например,программа