Bootstrap является одним из самых популярныч фреймворков на данный момент. С его помощью вы можете создавать веб-страницы используя уже готовые “элементы” (такие как меню, слайдер, кнопки и т.д.). Но, в данной статье мы поговорим о Bootstrap Grid – адаптивной сетке.
Как использовать адаптивную сетку Bootstrap
На данный момент актуальна 3-яя версия и готовится к выходу 4-ая, и, т.к. мы говорим про сетку, то – добавится поддержка устройств с еще большей шириной (напомню, в 3-ей версии, у нас была максимальная ширина контейнера 1170px и выставлялась она от 1200px минимальной ширины окна).
Вообще, сам по себе фреймворк бутстрап, довольно тяжелый – не только файл стилей, но и различные javascript`ы, которые не всегда нужны. Я предпочитаю использовать только сетку 🙂 .
Скачать адаптивную сетку вы можете на официальном сайте убрав все галочки и выбрав Grid system, или же прямо с нашего сайта – в этом файле будет normalize.css, который сделает вашу верстку более кроссбраузерной и сами стили для сетки.
Как работают медиа запросы?
Наши браузеры стали умнее, и научились распознавать так называемые медиа запросы, которые определяют параметры устройства – его ширину, высоту, тип (экраны мониторов, телевизоры, принтеры и т.д.). Кроме того, мы можем указать логические операторы для наших условий, самый часто используемый and (менее популярные – not, only).
Возьмем несколько строк из бутстрапа:
@media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } }
Итак, когда наша ширина меньше 767 пикселей (max-width: 767px – доходит до максимальной ширины, и правило не применяется), то мы скрываем все элементы с классом .hidden-xs;
Когда ширина находится в диапазоне от 768 И до 991 пикселя – элементы с классом .hidden-sm не будут видны на странице (применяется логическое И);
От 992 до 1199 пикселей – аналогично предыдущему примеру – для .hidden-md;
И от 1200 пикселей и выше – скрываем .hidden-lg
На этом примере становится понятно как же работают медиа запросы – они применяют стили, в зависимости от наших условий (в нашем случае, ширина окна браузера). И в этом вся магия – вы можете писать различные стили, будь то цвет текста, позиция, ширина, да всё что угодно и они сработают только для заданной ширины! 🙂
У этих классов есть только одно отличие – приставки xs, sm, md, lg (прям как на футболках 🙂 ). Метод дедукции подсказывает что это extra small, small, middle, large, а в 4 версии добавиться еще и xl (extra large).
Ну ладно, с медиа запросами надеюсь все понятно, а как же быть с HTML?
Базовая HTML разметка в Bootstrap Grid
HTML5 стал мейнстримом, поэтому, на примере элемента section:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name=viewport content="width=device-width, initial-scale=1"> </head> <body> <section class="header-slider"> <div class="container"> <div class="row"> <div class="col-lg-6">text 1</div> <div class="col-lg-6">text 2</div> </div> </div> </section><!-- /header-slider --> <link rel="stylesheet" href="bootstrap_grid.css"> </body> </html>
Особенно этот принцип хорошо подойдет для лендингов (landing page), где каждый экран это отдельная секция.
В секцию (если хотите создавайте див, разницы почти нет, разве что, старые браузеры не поддерживают разметку HTML5 и элемент не будет блочным – привет ИЕ 🙂 ) мы помещаем container, который задает максимальную ширину блока, в зависимости от ширины экрана, об этом нам говорит этот код в исходниках bootstrap:
@media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }
Далее, идет row , который, если посмотреть по стилям, “компенсирует” внутренние отступы контейнера, своими отрицательными внешними отступами 0_0.
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; }
Важный момент: когда у нас 1 строка, писать row > col-xs-12 не обязательно, можно обойтись просто такой записью, обернуть наш контент в еще один див (хотя, на самом деле, этот второй div можно тоже не писать):
<div class="container"> <div class="my-class">TEXT HERE...</div> </div>
Посмотрите через фаербаг и вы все поймете сами. row у нас создает как бы строку (вспомните таблицы и элемент tr).
Теперь, нам нужно создать колонки, в нашем примере у нас 2 колонки col-lg-6. Помните приставка lg это large? Так вот, наши колонки будут такими только на больших мониторах, если вы сейчас “ресайзните” окно браузера до ширины меньше, наши колонки вытянуться в ширину 100% каждая. Как разделить колонки в таком случае? Если мы поменяем класс на col-xs-6:
<section class="header-slider"> <div class="container"> <div class="row"> <div class="col-xs-6">text 1</div> <div class="col-xs-6">text 2</div> </div> </div> </section><!-- /header-slider -->
то окажется, что на всех расширениях колонки будут равны друг другу и нам не придется писать для всех случаев:
col-xs-6 col-sm-6 col-md-6 col-lg-6 – так писать не надо.
А что если у меня на мобильном нужно по 100% а на всех остальных по 50% спросите вы? Тогда пишем:
<section class="header-slider"> <div class="container"> <div class="row"> <div class="col-sm-6">text 1</div> <div class="col-sm-6">text 2</div> </div> </div> </section><!-- /header-slider -->
Отлично, с тем что это работает по нарастанию, а по умолчанию 100% – мы разобрались.
Если у вас более сложная структура, и вам нужно учесть каждое расширение тогда пишите:
<section class="header-slider"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">text 1</div> <div class="hidden-xs col-sm-6 col-md-5 col-lg-4">text 2</div> </div> </div> </section><!-- /header-slider -->
Важный момент – сумма всех колонок должна быть равна 12, но проверять вы должны по “расширениям” (по xs, sm, md и lg в каждом отдельном row). То есть – у нас 2 колонки, если первая 10, то вторая 2, если первая 7 то вторая 5 и т.д. Если у вас в строке 4 элемента, то соответственно сумма цифр в “классах для конкретных расширений” (xs, sm, md, lg) всегда равна 12.
Как сделать 5 равных колонок в bootstrap
Небольшой лайфхак на последок. 12 как вы поняли не делится на 5 🙂 .
CSS:
.col-xs-20, .col-sm-20, .col-md-20, .col-lg-20 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 20%; float: left; }
HTML:
<div class="row"> <div class="col-md-20">1</div> <div class="col-md-20">2</div> <div class="col-md-20">3</div> <div class="col-md-20">4</div> <div class="col-md-20">5</div> </div>
Т.к. все нормальные цифры заняты, займем 20.
Ну и напоследок хотелось бы отметить, что вложенность может быть в несколько уровней, но сумма каждого уровня по прежнему должна быть равна 12:
<div class="row"> <div class="col-md-9"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> </div> <div class="col-md-3"></div> </div>
Видите, родитель занимает 9 из 12 по ширине, но внутренние ячейки должны снова составить в сумме 12. Ну вот и все, не забывайте, что для корректной работы медиа запросов на всех устройствах необходимо прописать в тег head:
<meta name=viewport content="width=device-width, initial-scale=1">
Про отступы и другие нюансы вы можете посмотреть в официальной документации или просто посмотреть содержимое файла bootstrap_grid.css.
Пишите в комментариях была ли полезна данная статья, а также свои замечания и вопросы 🙂 .
Здравствуйте! Очень классный пост! спасибо!
А по поводу col-md-20 – это ведь не адаптивно. Т.е. и в размере -xs- ширина 20%. Указываю так: class=”col-xs-12 col-md-20″ – и воюбом слуцчае ширина 20%.
Как решается? Или никак?
Здравствуйте, попробуйте либо записать эти стили в самом начале сетки, чтобы понизить их приоритет, либо записать их по отдельности каждый – имею ввиду без запятых
.col-xs-20 {*стили для колонок*}
.col-sm-20 {*стили для колонок*}
и тд
Скорей всего это случилось из-за того что если писать несколько селекторов через запятую возрастает их “вес”, а чем больше вес селекторов, тем он приоритетнее.
Вот приблизительно как рассчитывается вес, если у вас идет перечисление через запятую просто суммируйте
style=”” 1,0,0,0
#id 0,1,0,0
.class 0,0,1,0
[attr=value] 0,0,1,0
li (тэг) 0,0,0,1
в нашем случае у нас 4 класса – то есть 0 0 4 0 – надеюсь понятно объяснил 🙂
в место
.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 20%;
float: left;
}
мне кажется проще и правельнее
.co-20 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 20%;
float: left;
}
5 колонок
.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
float: left;
}
@media (min-width: 768px) {
.col-sm-20,
{
width: 20%;
}
}
@media (min-width: 992px) {
.col-md-20,
{
width: 20%;
}
}
@media (min-width: 1200px) {
,
.col-lg-20 {
width: 20%;
}
}
Если где то ошибся подправьте
если у вас ширина блоков всегда 20%, то каждый раз ее нет смысла указывать, как мне кажется
Уважаемый, а есть ли смысл выставлять position float’ированному элементу??? Что-то я недопонял, но статейка хороша для новичка. Очень подробно все.
Доброго времени суток :). В исходниках самого бутстрапа есть такие свойств:
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
Если вы как и я предпочитаете из сетки создавать только “скелет” страницы, и не пихать классы в виде class=”col-xs-6 col-md-9 my-class-name”, где my-class-name явно лишний, то position не дает ничего. Но, иногда это может пригодиться если вы размещаете внутри какие-то блоки с position absolute.
ПС статейка малось устарела, и сейчас уже сетка строится на “флексбоксах”, но даже там для классов прописывают позишн релейтив.