Как использовать Bootstrap Grid

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.
Пишите в комментариях была ли полезна данная статья, а также свои замечания и вопросы 🙂 .

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

7 коментаря

  1. Здравствуйте! Очень классный пост! спасибо!
    А по поводу col-md-20 – это ведь не адаптивно. Т.е. и в размере -xs- ширина 20%. Указываю так: class=”col-xs-12 col-md-20″ – и воюбом слуцчае ширина 20%.

    Как решается? Или никак?

    1. Здравствуйте, попробуйте либо записать эти стили в самом начале сетки, чтобы понизить их приоритет, либо записать их по отдельности каждый – имею ввиду без запятых
      .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 – надеюсь понятно объяснил 🙂

  2. в место
    .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;
    }

    1. 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%;
      }
      }

      Если где то ошибся подправьте

  3. Уважаемый, а есть ли смысл выставлять position float’ированному элементу??? Что-то я недопонял, но статейка хороша для новичка. Очень подробно все.

    1. Доброго времени суток :). В исходниках самого бутстрапа есть такие свойств:
      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.

      ПС статейка малось устарела, и сейчас уже сетка строится на “флексбоксах”, но даже там для классов прописывают позишн релейтив.

Залишити коментар до Dmitriy Скасувати коментар