Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

2014-11-21 / Вр:21:19 / просмотров: 41348

Что вы научитесь в этом уроке? В этом уроке вы сможете самостоятельно создать свой первый каркас (шаблон) сайта при помощи Bootstrap сетки.
Сетка Bootstrap состоит из колонок и строк. Чтобы облегчить понимание создания сетки, условно разобьем работу на два этапа.

Этап 1 – создание строк.

Создание сетки нужно начинать с создания строк. Чтобы создать строку, нужно в контейнере прописать тег div с классом «row». «row» с англ. означает строка. Строк может быть неограниченное количество, но при создании каждой новой строки к тегу div нужно присваивать класс «row».

<div class="container">

        <h1>Hello, world!</h1>
        <div class="row">
        ...
        </div>

        <div class="row">
        ...
        </div>
</div>

Этап 2 – работа с колонками.

Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно сливать по несколько штук и размещать их в нужной позиции.

Чтоб слить (совместить) колонки, нужно внутри «row» указать класс «col-md-*», где * – число, соответствующее количеству колонок, которые соединяем.

<div class="row">
<div class="col-md-6">содержимое в блоке</div>
<div class="col-md-6">содержимое в блоке</div>
</div>

Важно! При соединении колонок их общее число всегда должно быть равно 12-ти.

Схема сетка Bootstrap

1-ый ряд: все 12 колонок, из которых состоит сетка;
2-ой ряд: допустим, нам нужна колонка, ширина которой равна двум стандартным колонкам. Мы слили две колонки, но общее число колонок по-прежнему равно 12-ти.
7-ой ряд: в этом случае нам необходимо было поделить сетку на три равных колонки, для этого мы трижды слили по 4 колонки, что в сумме равно 12.

Итак, как бы вы не разбивали колонки, общая сума прибавленных колонок должна быть 12.

А теперь я переведу схему сетки Bootstrap в код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template на BlogGood.ru</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style>
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
	{
	border:1px solid #ccc;
	margin-bottom:30px;
	height:60px;
	}
	</style>
  </head>
  <body>
<div class="container">

        <h1>Hello, world!</h1>
<!-- 1 строка  -->
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<!-- 2 строка  -->
<div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-10">.col-md-10</div>
</div>
<!-- 3 строка  -->
<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-9">.col-md-9</div>
</div>
<!-- 4 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>
<!-- 5 строка  -->
<div class="row">
  <div class="col-md-5">.col-md-5</div>
  <div class="col-md-7">.col-md-7</div>
</div>
<!-- 6 строка  -->
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
<!-- 7 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<!-- 8 строка  -->
<div class="row">
  <div class="col-md-12">.col-md-12</div>
</div>

</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Если вы еще ничего не поняли, тогда попробую объяснить так.
Вам нужно 2-х колоночный сайт. Слева сайтбар, справа контент.
Вы уже знаете, что сетка в Bootstrap состроить из 12 колонок.
Пробуем слить 4 колонки в одну.
1колонка + 1колонка + 1колонка + 1колонка = 4колонок
Значить, для сайтбара, класс «col-md-» будет выглядеть так: «col-md-4».
12 (колонок) – 4 (колонки, которые мы объединили) = 8 (колонок осталось).

Значит, для контента, класс «col-md-» будет выглядеть так: «col-md-8»
Вот так выглядит общий код:

<div class="row">
  <div class="col-md-4">содержимое в блоке </div>
  <div class="col-md-8">содержимое в блоке </div>
</div>

Вот и все волшебство.

Идем дальше.

В Bootstrap есть возможность прописать разные CSS-стили или разбить ячейки по-разному для групп устройств.

Например, я хочу, чтобы моя шапка сайта на больших мониторах была разбита на одну ячейку, но для телефонов я решил сделать две ячейки и прописать к ним же другой CSS-стиль. Уловили мысль?
Посмотрите, какие классы вы можете использовать для различных групп устройств и какие особенности имеет каждый класс.

Таблица разметки Bootstrap для различных групп устройств

	Очень маленькие устройство Телефоны (<768px)	Малые устройства Планшеты (≥768px)	Средние устройства Настольные (≥992px)	Большие устройства Настольные (≥1200px)
Ширина контейнера	Нет (автом.)	750px	970px	1170px
Класс префикса	.col-xs-	.col-sm-	.col-md-	.col-lg-
колонок	12
Ширина колонки	Авто	60px	78px	95px

Давайте посмотрим, как это будет оформляться в коде:

<div class="row">
  <div class="col-lg-12 col-md-8 col-sm-6 col-xs-12"> блог BlogGood.ru </div>
  <div class="col-lg-12 col-md-4 col-sm-6 col-xs-12"> Таблица рзметки Bootstrap </div>
</div>

В итоге:
- при больших устройствах (≥1200px) будут на экране два ряда на всю ширину (действует класс «col-lg-12»):