Как задать смещение между колонками в Bootstrap 3

Оцените материал
(0 голосов)

Здравствуйте. В этой статье мв с Вами продолжим обсуждение  возможностей замечательного фреймворка Бутстрап.  В прошлой статье мы с вами  уже приступили к освоению этого фреймворка,  и начали с изучения сеточной системы Bootstrap, и  также рассмотрели несколько практических примеров ее использования.

Сегодня же  мы продолжим знакомство с сетками этого фреймворка и рассмотрим небольшие  нюансы, которые могут пригодиться вам  в работе над макетом сайта на основе Бутсрап. А именно, мы посмотрим как задается  отступ между колонками используя смещения (класс Offset), как можно  поменять колонки местами (классы Push и Pull), а также как вложить строку с колонками внутрь другой колонки. Ну и  конечно же процентральный блок (Jumbotron) тоже поговорим. Итак поехали.

 

 

Фреймворк Bootstrap содержит очень много функций. Одной из основных функций Bootstrap, которая используется почти в каждом веб-проекте, является система сеток. Сеточная система предназначена для создания макетов сайтов.

 

Что такое упорядочивание колонок?

Классы для упорядочивания колонок позволяют нам изменять порядок колонок системы сеток при изменении размеров рабочей области окна браузера. Это означает, что на различных по ширине экранах, у Вас могут быть различные сетки.

Например, у нас есть макет, состоящий из 3 блоков. Необходимо чтобы на больших экранах блоки располагались по горизонтали, причём блок 2, который содержит основную информацию, располагался посередине между блоками 1 и 3.

В то же время, на устройствах с маленьким экраном, блоки будут располагаться вертикально один под другим. Причём блок 2, будет располагаться под блоком 1. Но, т.к. блок 2 является наиболее важным, нам необходимо поместить его в самый верх страницы, т.е. над блоком 1.

Bootstrap позволяет выполнить это с помощью классов push и pull.

Классы push и pull используются вместе с классами сетки Bootstrap .col-xs-*, .col-sm-*, .col-md-*, и .col-lg-*. Класс push выполняет перемещение колонок вправо, в то время как класс pull перемещает колонок влево.

В следующей таблице продемонстрировано применение классов push и pull для различных размеров экрана.

Ширина рабочей области окна браузераКлассы pushКлассы pull
<768px (xs) .col-xs-push-* .col-xs-pull-*
>=768px и <992px (sm) .col-sm-push-* .col-sm-pull-*
>=992px и <1200px (md) .col-md-push-* .col-md-pull-*
>=1200px (lg) .col-lg-push-* .col-lg-pull-*

Рассмотрим выше описанный пример. На рисунке изображен макет для устройств с маленьким и большим размерами экранов.

Разработку макета начнём для устройств с маленьким размером экрана:

<div class="row">
  <div class="col-xs-12">
    2 блок
  </div>
  <div class="col-xs-12">
    1 блок
  </div>
  <div class="col-xs-12">
    3 блок
  </div>
</div>

Добавим классы для устройств со средним и большим экранами:

<div class="row">
  <div class="col-xs-12 col-md-6">
    2 блок
  </div>
  <div class="col-xs-12 col-md-3">
    1 блок
  </div>
  <div class="col-xs-12 col-md-3">
    3 блок
  </div>
</div>

Теперь мы должны добавить классы push и pull, чтобы изменить порядок следования блоков для устройств с большим и средним размерами экранов:

<div class="row">
  <div class="col-xs-12 col-md-6 col-md-push-3">
    2 блок
  </div>
  <div class="col-xs-12 col-md-3 col-md-pull-6">
    1 блок
  </div>
  <div class="col-xs-12 col-md-3">
    3 блок
  </div>
</div>

Для демонстрации данного макета, измените размер окна браузера:

При разработке макета на основе системы сеток Twitter Bootstrap лучше начинать с устройств, которые имеют очень маленький размер экрана (смартфоны). Т.к. переупорядочить колонки для устройств с большим размером экрана намного проще, чем для устройств, имеющих маленький размер экрана. Следовательно, вы должны сначала сфокусироваться на упорядочивании колонок для мобильных устройств, а затем переходить к устройствам с большими размерами экранов.

Приведём ещё несколько примеров связанных с переупорядочиванием колонок. Вы можете увидеть, как будут изменяться блоки при изменении размеров окна браузера.

Центральній блок Jumbotron.

Для того чтобы задать центральный  красивый блок, например для анонса используется класс Jumbotron. При этом получается блок  с текстом, который используется как правило для анонса.

 <div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> </div>

При этом в браузере отобразится вот что:

Красота не так ли! Вот такой он полезный класс Jumbotron. Видите как все просто да и вообще в Бутсрапе все просто как мне кажется.

 

Прочитано 1414 раз Последнее изменение Вторник, 25 июля 2017 06:29
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+