Бутстрап и его роль в современном мире

В современном мире посещение интернет-сайтов возможно практически с любого гаджета, поэтому важно, чтобы эти сайты были приятны и комфортны для посещения, независимо от устройства: будь то ноутбук, телефон или «умные часы».

Сейчас адаптивный сайт–это не роскошь, а скорее стандарт, которого нужно придерживаться каждой компании, у которой есть сайт. Существует много готовых решений для того, чтобы сайт был адаптивным и самое популярное решение-это фреймворк «Бутстрап».

Идея работы «Бутстрапа» проста и не требует специальной подготовки для понимания принципа работы фреймворка.

Теория

Каждую страницу мы можем разбить на 12 одинаковых колонок (Рис.1). И это формирует сетку.

Рис.1 (12 одинаковых колонок)

Сетка нужна нам для того, чтобы элементы сайта занимали определенное количество места на сайте. Например, блок с фотографией новости должен занимать ровно 2/12 части сайта, а заголовок 4/12 части. Оставшиеся свободные части сайта (6/12), мы можем заполнить еще одной новостью (Рис. 2)

Рис.2 (Средний экран)

Если мы будем просматривать страницу с планшета, то можно сделать так, чтобы фотография занимала 4/12 части, а заголовок 8/12 части. Тогда мы увидим следующую картину (Рис.3).

Рис.3 (Экран планшета)

Если просматривать страницу с телефона, то можно сделать так, чтобы фотография и заголовок занимали 12/12 частей сайта (Рис.4)

Рис.3 (Экран планшета)

«Бутстрап» разделяет размеры экраны на 4 категории:

• Большой (lg) – от 1200px (Большие мониторы)
• Средний (md) – от 992px до 1199px (Средние мониторы)
• Маленький (sm) – от 768px до 991px (Планшеты)
• Очень маленький (xs) – до 767px (Телефоны)

Для того, чтобы задать элементу параметр, согласно которому определяется, на каком размере экрана, какое количество колонок элемент будет занимать на сайте, нужно дать элементу определенный класс или несколько классов (class).

Класс, формируется по следующему принципу: «.col-» + «код_экрана» + «количество_колонок».

Практика

Средний экран:

1. Элемент «фотография» на среднем экране должен занимать 2/12 колонок. Средний экран имеет символьный код «md». Отсюда мы получаем следующий класс «.col-md-2».
2. Элемент «заголовок» на среднем экране должен занимать 4/12 колонки. Средний экран имеет символьный код «md». Отсюда мы получаем следующий класс «.col-md-4»

Планшет:

1. Элемент «фотография» на экране планшета должен занимать 4/12 колонки. Экран планшета имеет символьный код «sm». Отсюда мы получаем следующий класс «.col-sm-4»
2. Элемент «заголовок» на среднем экране должен занимать 4/12 колонки. Экран планшета символьный код «sm». Отсюда мы получаем следующий класс «.col-sm-8»

Телефон:

1. Элемент «фотография» на экране телефона должен занимать 12/12 колонок. Экран телефона имеет символьный код «xs». Отсюда мы получаем следующий класс «.col-xs-12».
2. Элемент «заголовок» на экране телефона должен занимать 12/12 колонок. Экран телефона имеет символьный код «xs». Отсюда мы получаем следующий класс «.col-xs-12»

Когда мы будем верстать сайт, код будет примерно следующий:

<div class="col-md-2 col-sm-4 col-xs-12">
       <img src="" alt="Изображение">
</div>
<div class="col-md-4 col-sm-8 col-xs-12">
       Текст заголовка
</div>

Как это работает?

В стилях «Бутстрапа» есть условия (медиазапросы), которые применяют определенные стили на элемент страницы в зависимости от ширины экрана.

Например, если ширина экрана больше 992px, то ширина элемента с классом «.col-md-5» будет 41.666%.

Если ширина экрана не меньше 768px и не больше 991px, то ширина элемента с классом «.col-sm-12» будет 100%.

И это лишь малая часть того, что умеет «Бутстрап». Ниже представлены несколько ситуаций, и их решения.

Пример первый: у нас есть большая по высоте картинка. В мобильной версии сайта эта картинка будет занимать очень много места и правильней всего её было бы скрыть. Для этого в «Бутстрапе» есть класс, который скрывает элемент сайта в зависимости от ширины экрана. «hidden-» + «код_экрана». Класс «.hidden-xs» будет скрывать большую картинку, если мы не хотим, что бы она отображалась в мобильной версии.

Пример второй: у нас есть изображение, ширина которого меньше, чем блок, в котором это изображение находится на среднем экране и больше, чем блок на маленьком экране. Нужно сделать картинку адаптивной. Для этого есть класс, применимый только к изображениям «.img-responsive»

Пример третий: если мы хотим, чтобы текст в определенном блоке выравнивался по середине, то нужно просто добавить в этот блок класс «.text-center»

Заключение:

Теперь вы знаете по какому принципу делаются адаптивные сайты с использованием фрэймворка «Бутстрап».