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

Опубликовано: 01.09.2018

Что вы научитесь в этом уроке? В этом уроке вы сможете самостоятельно создать свой первый каркас (шаблон) сайта при помощи 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» ):

- при средних устройствах (≥992px) будут на экране две колонки  (действует класс «col-md-8» и класс «col-md-4» ):

- при малых устройствах (≥768px) будут на экране две колонки  с одинаковой шириной (действует класс «col-sm-6» ):

- при очень маленьких устройствах (<768px) будут на экране две колонки на всю ширину (действует класс «col-xs-12» ):

Я думаю, здесь вы разобрались!

Переходим к практическому занятию.

Припустим, у меня есть вот такой эскиз сайта:

Чтобы создать этот макет, вам достаточно использовать знания сегодняшнего урока. Вот так я решил эту задачу:

<!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-8, .col-md-4, .col-md-6, .col-md-3, .col-md-12 { border:1px solid #ccc; height:60px; } </style> </head> <body> <div class="container"> <!-- 1 строка --> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> Шапка блога BlogGood.ru </div> </div> <!-- 2 строка --> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 1 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 2 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 3 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 4 </div> </div> <!-- 3 строка --> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> Меню </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> Контент </div> </div> <!-- 4 строка --> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> уроки Bootstrap на BlogGood.ru </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>

Результат вы можете посмотреть здесь . Если хотите, можете поменять размер экрана или открыть страницу результата через разные группы устройств.

У меня все! Не пропустите следующих уроков по Bootstrap3 на BlogGood.ru. Подписывайтесь на обновления блога.

До встречи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: Bootstrap , основы

IRC (Internet Relay Chat)
rss