Доброго времени суток, дорогие подписчики и гости моего обучающего сайта. После прочтения сегодняшней публикация вы познаете дзен использования таких классов Grid System, как Bootstrap offset, pull и push.
Я во всех подробностях расскажу вам о принципах использования названных параметров, объясню, для чего каждый из них необходим и приведу примеры программного кода. Не буду затягивать со вступлением, поэтому давайте приступим к делу!
Как сместить колонки на указанное значение?
В некоторых случаях верстки сайтов необходимо создавать отступы между колонками. Однако объявлять пустые ячейки знакомым вам классом .col-X-Y неудобно, ведь для этого придется определять новый блок и указывать в нем размер колонки.
Для решения этой небольшой проблемки в Bootstrap 3 был придуман специальный механизм, который задает отступы между ячейками строки и при этом не требует создания нового слоя. Его название
col-X-offset-Y
Вместо X необходимо прописать одно из четырех существующих значений для определения внешнего вида веб-страницы в зависимости от разрешения экрана (xs, sm, md или lg).
А вместо Y указать сколько ячеек из максимального числа (12) будет выделено под создаваемую колонку.
Все смещения задаются относительно левого края объектов. Т.е. либо от окна браузера, либо от левого блока.
Для более детального разбора теоретического материала разберите ниже прикрепленный пример.
ea325f186d534c32188dcb2c4c7728c6000Как изменить порядок столбцов?
А теперь перейдем к двум другим классам: pull и push. Они функционируют вместе и позволяют изменять порядок отображения столбцов, сдвигая выбранный блок на указанное разработчиком количество позиций.
Для объявления описываемых классов используется все та же конструкция:
.col-X-push-Y и .col-X-pull-Y
В чем же их главное различие? Отвечаю: в том, что они двигают выбранные объекты в разные стороны. Так, push перемещает колонку вправо на определенное количество позиций начиная с текущей, а pull – влево.
В качестве примера изначально я сверстал 3 столбца в системе плавающих сеток и для дальнейшего их различия задал им различные наименования и цветовую палитру.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Позиционирование колонок</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
h1 { color: red;}
.cell{ background: #FFFACD;}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Пример позиционирования объектов при помощи системы плавающих сеток</h1>
<div class="row">
<div class="col-sm-4 col-md-offset-4 cell">
<h2>Top-center</h2>
<p>Эта ячейка расположена сверху страницы.</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 cell">
<h2>Left</h2>
<p>Эта ячейка расположена с левой стороны.</p>
</div>
<div class="col-sm-4 col-sm-offset-4 cell">
<h2>Right</h2>
<p>Эта ячейка расположена справа.</p>
</div>
</div>
</div>
</body>
</html> |
А теперь попытаемся поменять местами первую и третью ячейку. Так как каждая из них по ширине равна четырем колонкам, то “Left block” необходимо сместить вправо на 8 позиций, а “Right block” – влево на 8 позиций.
Таким образом, получаем вот такой код в контейнере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
h1 { color: red;}
.cell1{ background: #FFFACD;}
.cell2{ background: #00FFFF;}
.cell3{ background: #483D8B;}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Пример позиционирования объектов при помощи системы плавающих сеток</h1>
<div class="row">
<div class="col-sm-4 cell1">
<h2>Left block</h2>
<p>Левый текстовый контент.</p>
</div>
<div class="col-sm-4 cell2">
<h2>Center block</h2>
<p>Центральный текстовый контент.</p>
</div>
<div class="col-sm-4 cell3">
<h2>Right block</h2>
<p>Правый текстовый контент.</p>
</div>
</div>
</div>
</body>
</html> |
Таким способом можно производить любые перемещения объектов.
Ну что ж, пришло время прощаться. Если вы задались целью полностью изучить фреймворк Bootstrap, то подписывайтесь на мой блог и читайте интересующие вас статьи в соответствующих рубриках, а также рассказывайте о наиболее понравившихся друзьям.
Пока-пока!
С уважением, Роман Чуешов
