StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
01.06.2016
11:32
11967
10
Сетка. Основы bootstrap 3 для начинающих. Урок №4
Всем привет!
Продолжаем изучать основы «bootstrap 3». Пришло время познакомиться в «bootstrap 3» с таким понятием как сетка.
С помощью сетки вы сможете создать свой первый адаптивный каркас сайта (веб-страницы).
Итак, сетка Bootstrap состоит из строк и колонок.
Прежде чем создать колонки, нужно прописать строку. Для этого достаточно прописать тег div с классом «row».
<div class="row"> ... здесь будут колонки... </div>
Итак, вначале пишется строка, а в строке уже строятся колонки.
1. Создаем строку:
<div class="row"> ... здесь будут колонки... </div> <div class="row"> ... здесь будут колонки... </div>
2. Создаем колонки (сетку):
Сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
При необходимости колонки можно объединить и разместить в нужной позиции.
Чтобы создать колонки, нужно прописать внутри «row» класс
«col-(*1)-(*2)».
Там, где (*1) указываем, для каких групп устройств нужно выполнить (см. таблицу 1).
Там, где (*2) указываем число (количество колонок)
(см. таблицу 2).
(табл. 1) Таблица разметки Bootstrap для различных групп устройств
| Очень маленькие устройство Телефоны (<768px) |
Малые устройства Планшеты (≥768px) |
Средние устройства Настольные (≥992px) |
Большие устройства Настольные (≥1200px) |
|
| Ширина контейнера | Нет (автом.) | 750px | 970px | 1170px |
| Класс префикса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| колонок | 12 | |||
| Ширина колонки | Авто | 60px | 78px | 95px |
Давайте рассмотрим до этого момента на примере.
Смотря на таблицу, мы можем создать колонки (построить сетку) для различных групп устройств (мобильных телефонов, планшетов, ПК и т.д.).
Например:
<div class="col-lg-(*2) col-md-(*2) col-sm-(*2) col-xs-(*2)">блог StepkinBLOG.RU</div>
Таким вот образом мы указываем, для каких устройств мы хотим создать колонки.
Теперь разберемся, что такое (*2). Так как я уже говорил об этом выше, это число, обозначающее количество колонок
(см. таблицу 2).
(табл. 2) Схема сетка Bootstrap3
На таблице можно увидеть, что сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
Чтобы указать 12 одинаковых колонок для всех устройств, нужно вместо (*2) указать цифру, которая подходит. Но помните, что общая сумма должна получиться 12.
Смотрим пример:
<div class="row"> <div class="col-lg-12 col-md-8 col-sm-6 col-xs-12">блог StepkinBLOG.RU</div> <div class="col-lg-12 col-md-4 col-sm-6 col-xs-12">Таблица разметки Bootstrap </div> </div>
Чтобы вы поняли мной сказанные слова о том, что общая сумма должна быть равна 12, сделаем арифметический подсчет.
Смотрим на строки №2 и №3.
○ col-lg-12 и col-lg-12. (размер экрана ≥1200px).
Колонки на экране будут в два ряда на всю ширину, так как указана цифра 12, а сетка состоит только из 12 колонок.
Результат:
○ col-md-8 и col-md-4. (размер экрана ≥992px).
На экране будет две колонки, так как 8 + 4 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 8 колонок, а правая 4.
Результат:
○ col-sm-6 и col-sm-6 (размер экрана ≥768px).
На экране будет две колонки, так как 6 + 6 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 6 колонок и правая 6.
Результат:
○ col-xs-12 и col-xs-12 (размер экрана <768px).
Колонки на экране будут в два ряда на всю ширину, так как указана цифра 12, а сетка состоит только из 12 колонок.
Результат:
Разобрались?
Перейдем к практике.
Попробуем на Bootstrap3 создать вот такой адаптивный макет для сайта:
Чтобы создать такой макет, вам достаточно было пройти все 4 урока по основам Bootstrap3.
Итак, вот решение (рекомендую просмотреть код, чтобы закрепить новые знания):
<!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 3 на StepkinBLOG.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]-->
<!-- CSS стиль для отображения границы -->
<style>
.col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, .col-xs-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"> Шапка блога StepkinBLOG.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 на StepkinBLOG.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>
Можете посмотреть результат, а заодно проверить с телефона, планшета или ПК, как будет открываться созданный макет.
Закончу статью своей коронной фразой:
«Но это не все чудеса, которые есть в «bootstrap 3», это только начало. Вы увидите всю мощь и магию «bootstrap 3» на моих уроках, если, конечно, будете следить за новостями и обновлениями (настойчиво рекомендую подписаться на обновления блога stepkinBLOG.RU 
).»
Если сформулировать основное правило сетки, может оно будет выглядеть так: "Код колонок одного разрешения располагается в редакторе в одну колонку и в сумме должен быть равен 12. В браузере - одно разрешение располагается в строку и тоже должно быть равно 12, а сумма разрешений col-xs, также всегда равно 12 и всегда располагается в колонку?"
Ответить
23 января, 2017 at 10:58
Если я вас правильно понял, то ответ будет таким:
все зависит от размера вашего экрана.
Колонок 12, но вы можете для каждого устройства менять число колонок. Это и будет адаптивность.
Так что не всегда col-xs, это 12 колонок, вы можете сделать 1 колонку, 2,3 и так до 12.
12 - это максимальное число, которая может делится.
Если не понятно объяснил, напишите, постараюсь более подробно ответить
Ответить
Добился. Только неясно как строку менюшки раздвинуть по вертикали. Через локалку идёт.
Ответить
12 июня, 2017 at 21:46
Сергей, не совсем понял вопрос.
Ответить
Не понял зачем писать row несколько раз? У меня получилось выполнить задание так:
между тегами body
Шапка
1 Блок
2 Блок
3 Блок
4 Блок
Меню
Контент
Подвал
css
.row div {
border:1px solid #cc0000;
}
.heads {
height: 150px;
}
.blocks {
height: 120px;
}
.menu, .content {
height: 300px;
}
.foter {
height: 100px;
}
p {
text-align: center;
}
Ответить
20 июня, 2017 at 08:13
Продублируйте коммент, у вас пропали теги. Пропишите код между [ code]тут код [/code ] *только без пробелов
Ответить
У меня получилась 1 строка row в которой находятся все колонки. Это ошибка?
Это между body (бутстрап 3) <div class="container"> <div class="row"> <div class="col-lg-12 heads"><p>Шапка</p></div> <div class="col-xs-3 blocks"><p>1 Блок</p></div> <div class="col-xs-3 blocks"><p>2 Блок</p></div> <div class="col-sm-3 blocks"><p>3 Блок</p></div> <div class="col-sm-3 blocks"><p>4 Блок</p></div> <div class="col-sm-3 menu"><p>Меню</p></div> <div class="col-sm-9 content"><p>Контент</p></div> <div class="col-sm-12 foter"><p>Подвал</p></div> </div> </div>css .row div { border:1px solid #cc0000; } .heads { height: 150px; } .blocks { height: 120px; } .menu, .content { height: 300px; } .foter { height: 100px; } p { text-align: center; }Ответить
3 июля, 2017 at 10:19
Если верстка отображается на всех устройствах нормально, то не стоить переделывать. Я так тоже иногда делаю, когда верстаю для CMS WordPress.
Но, по всем правилам, желательно делать вот так (так учили меня):
<div class="container"> <div class="row"> <div class="col-lg-12 heads"><p>Шапка</p></div> </div> <div class="row"> <div class="col-xs-3 blocks"><p>1 Блок</p></div> <div class="col-xs-3 blocks"><p>2 Блок</p></div> <div class="col-sm-3 blocks"><p>3 Блок</p></div> <div class="col-sm-3 blocks"><p>4 Блок</p></div> </div> <div class="row"> <div class="col-sm-3 menu"><p>Меню</p></div> <div class="col-sm-9 content"><p>Контент</p></div> </div> <div class="row"> <div class="col-sm-12 foter"><p>Подвал</p></div> </div> </div>и указывайте сетку для всех устройств, например:
Ответить
ВСе колонки вряд с row. В чем причина?
Ответить
9 июля, 2018 at 13:22
Светлана, мне нужен Ваш код.
Ответить