Уроки 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 , основы
Що ви навчитеся у цьому уроці? У цьому уроці ви зможете самостійно створити свій перший каркас (шаблон) сайту за допомогою сітки Bootstrap.
Сітка Bootstrap складається з колонок та рядків . Щоб полегшити розуміння створення сітки, умовно розіб'ємо роботу на два етапи.Етап 1 – створення рядків.
Створення сітки потрібно починати зі створення рядків. Щоб створити рядок, потрібно в контейнері прописати div тег з класом «row» . "row" з англ. означає рядок. Рядок може бути необмежену кількість, але при створенні кожного нового рядка до тегу div потрібно надавати клас «row».
Hello, world!
Етап 2 – робота з колонками.
Сітка Bootstrap складається з 12 колонок, всі колонки мають однакову ширину.
Колонки можна зливати по кілька штук та розміщувати їх у потрібній позиції.
Щоб злити (сумістити) колонки, потрібно всередині «row» вказати клас «col-md- *» , де * – число, яке відповідає кількості колонок, які з'єднуємо.
Важливо! При з'єднанні колонок їх загальна кількість завжди повинна бути 12-ти.
Схема сітка Bootstrap
1-ий ряд: всі 12 колонок, з яких складається сітка;
Другий ряд: припустимо, нам потрібна колонка, ширина якої дорівнює двом стандартним колонкам. Ми злили дві колонки, але загальна кількість колонок, як і раніше, дорівнює 12-ти. 7-й ряд: у цьому випадку нам необхідно було поділити сітку на три рівні колонки, для цього ми тричі злили по 4 колонки, що в сумі дорівнює 12.Отже, як би ви не розбивали колонки, загальна сума доданих колонок має бути 12.
А тепер я переведу схему сітки Bootstrap у код:
Hello, world!
Якщо ви ще нічого не зрозуміли, тоді спробую так пояснити.
Вам потрібно 2-х колонковий сайт. Зліва сайтбар, праворуч контент. Ви вже знаєте, що сітка в Bootstrap збудувати з 12 колонок. Пробуємо злити 4 колонки в одну. 1колонка + 1колонка + 1колонка + 1колонка = 4колонок Значить, для сайтбара, клас «col-md-» виглядатиме так: «col-md-4». 12 (колонок) – 4 (колонки, які ми об'єднали) = 8 (колонок залишилося).Отже, для контенту клас «col-md-» виглядатиме так: «col-md-8»
Так виглядає загальний код:Ось і все диво.
Йдемо далі.
У Bootstrap є можливість прописати різні CSS-стилі або розбити комірки по-різному для груп пристроїв.
Наприклад, я хочу, щоб моя шапка сайту на великих моніторах була розбита на один осередок, але для телефонів я вирішив зробити два осередки і прописати до них інший CSS-стиль. Вловили думку? Подивіться, які класи можна використовувати для різних груп пристроїв і які особливості має кожен клас.
Таблиця розмітки Bootstrap для різних груп пристроїв
Дуже маленькі пристрої Телефони (<768px) Малі пристрої Планшети (≥768px) Середні пристрої Настільні (≥992px) Великі пристрої Настільні (≥1200px) Ширина контейнера Ні (автом.) 750px 970px 1170px Клас префіксу .col-xs- .col-sm- .col-md- .col-lg- колонок 12 Ширина колонки Авто 60px 78px 95pxДавайте подивимося, як це буде оформлятися в коді:
У результаті:
- при великих пристроях (≥1200px) будуть на екрані два ряди на всю ширину (діє клас «col-lg-12»):- при середніх пристроях (≥992px) будуть на екрані дві колонки (діє клас «col-md-8» та клас «col-md-4»):
- при малих пристроях (≥768px) будуть на екрані дві колонки з однаковою шириною (діє клас «col-sm-6» ):
- при дуже маленьких пристроях (<768px) будуть на екрані дві колонки на всю ширину (діє клас «col-xs-12»):
Я думаю, тут ви розібралися!
Переходимо до практичного заняття. Припустимо, у мене є такий ескіз сайту:Щоб створити цей макет, достатньо використовувати знання сьогоднішнього уроку. Ось так я вирішив це завдання:
Результат ви можете подивитися тут. Якщо хочете, можете змінити розмір екрана або відкрити сторінку результату через різні групи пристроїв.
У мене все! Не пропустіть наступних уроків з Bootstrap3 на BlogGood.ru. Підписуйтесь на оновлення блогу.
До зустрічі! Сподобався піст? Допоможи іншим дізнатися про цю статтю, клікни на кнопку соціальних мереж ↓↓↓ Останні новини категорії: Схожі статті Популярні статті: Додати коментарМітки: Bootstrap , основи