Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Изучаем свойства bootstrap 3 – offset, для задания отступов между колонками

Доброго времени суток, дорогие подписчики и гости моего обучающего сайта. После прочтения сегодняшней публикация вы познаете дзен использования таких классов Grid System, как Bootstrap offset, pull и push.

Я во всех подробностях расскажу вам о принципах использования названных параметров, объясню, для чего каждый из них необходим и приведу примеры программного кода. Не буду затягивать со вступлением, поэтому давайте приступим к делу!

Как сместить колонки на указанное значение?

В некоторых случаях верстки сайтов необходимо создавать отступы между колонками. Однако объявлять пустые ячейки знакомым вам классом .col-X-Y неудобно, ведь для этого придется определять новый блок и указывать в нем размер колонки.

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

col-X-offset-Y

Вместо X необходимо прописать одно из четырех существующих значений для определения внешнего вида веб-страницы в зависимости от разрешения экрана (xs, sm, md или lg).

А вместо Y указать сколько ячеек из максимального числа (12) будет выделено под создаваемую колонку.

Все смещения задаются относительно левого края объектов. Т.е. либо от окна браузера, либо от левого блока.

Для более детального разбора теоретического материала разберите ниже прикрепленный пример.

992f3fe7ffde2369d1a295d8e46ee3b0000

Как изменить порядок столбцов?

А теперь перейдем к двум другим классам: 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, то подписывайтесь на мой блог и читайте интересующие вас статьи в соответствующих рубриках, а также рассказывайте о наиболее понравившихся друзьям.

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 81 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: