Bootstrap сетка, примеры реализаций сетки на bootstrap 3

Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.

Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.

Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.

Кто еще не знаком с Bootstrap?

Bootstrap – это библиотека CSS кода, предоставлена компанией Твиттер и распространяется бесплатно. Значительно упрощает жизнь веб дизайнеру. В архиве прилагается небольшое дополнение в виде js файла. Подробнее об установке и использовании можно узнать на официальном сайте.

Официальный сайт: http://getbootstrap.com/ - на английском

Документация: http://getbootstrap.com/css/ - на английском

Примеры решений: http://getbootstrap.com/components/ - табы, стилизация таблиц, всплывающие окна, навигация, менюшки, вертикальные списки, кнопки, иконки и другие прелести. Тоже на англ. языке.

Что нужно знать прежде о сетках bootstrap?

Ранее, во второй версии бутстрапа, были лишь некоторые дополнения для мобильных решений. В третей версии — весь фреймверк изначально адаптирован под различные устройства: мобильные, планшеты, десктопы. Сейчас проясниться :)

Почти весь функционал бутстрапа осуществляется через использование элементарных классов.

Весь код body контента содержится в специальном div блоке. Он может быть фиксированной ширины .container, или полноэкранным .container-fluid.

<div class="container">
  здесь будет код будущей сетки
</div>

<div class="container-fluid">
  здесь будет код будущей сетки
</div>

Сеточная система

Состоит из 12 ячеек, каждая из которых является div блоком, в строке .row.

Теперь посмотрите таблицу ниже, чтобы было легче понимать следующие куски кода.

В зависимости от префикса, мы будет создавать сетку для необходимого устройства.

Внимание! Можно создавать сетку изначально ориентируясь на несколько устройств одновременно. Достигается это путем комбинирования префиксов.

Пример 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>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<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>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Пример 2. А теперь скомбинируем сетку для десктопа и мобильного одновременно:

<!-- На мобильном устройстве, первая ячейка будет полноэкранной, вторая будет смещена вниз и займет пол экрана -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Ячейки будут занимать по 50% дисплея на мобильных устройствах, и 33.3% на десктопах -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Ячейки будут везде по 50% -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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

Кстати! Очень полезно будет упомянуть о средствах разработчика в вашем браузере. Если Chrome, тогда нажмите F12 и маленькую иконку телефончика в появившемся расширении.

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

Как Bootstrap сетка выглядит на практике?

Мы не будем долго и мучительно рассматривать код. Просто один раз посмотрим на сайт, у которого вся верстка сделана на bootstrap 3.0. Естественно без сеточных решений там не обойтись.

По желанию, можете свободно исследовать код предоставляемого проекта.

Ресурс: otnoshenij.net

В заключение

Надеюсь все было просто и понятно. Это базовая основа создания сеток с помощью twitter bootstrap. Если остались вопросы или непонятки, задавайте в комментариях.

Дальше: Скорость разработки сайтов, не теряйте деньги за простой

Дискуссия по теме 1 Комментарий

Добавить комментарий

masterweba 29.12.2015 в 20:35

Интересная статья!

Просмотров: 11270