Последние учебники веб-разработки
 

Bootstrap Grid Examples


Ниже мы собрали некоторые примеры основных Bootstrap макетов сетки.


Три одинаковых столбца

.col-sm-4
.col-sm-4
.col-sm-4

В следующем примере показано, как получить три равных по ширине столбцов, начиная с таблеток и масштабирования для больших рабочих столов. На мобильных телефонах, столбцы автоматически стек:

пример

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
Попробуй сам "

Три Неравные Колонны

.col-sm-3
.col-sm-6
.col-sm-3

В следующем примере показано, как получить три различных ширины столбцов А, начиная с таблеток и масштабирования для больших рабочих столов:

пример

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
Попробуй сам "

Два Неравные Колонны

.col-sm-4
.col-sm-8

В следующем примере показано, как получить два различных ширины столбцов, начиная с таблеток и масштабирования для больших рабочих столов:

пример

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Попробуй сам "

Две колонны с двумя вложенными Колонны

В следующем примере показано, как получить два столбца, начиная с таблеток и масштабирования для больших рабочих столов, с еще двумя колонками (одинаковую ширину) в пределах большей колонки (на мобильных телефонах, эти колонны и их вложенные столбцы будут складываться):

пример

<div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
Попробуй сам "

Смешанный: настольных и мобильных

Bootstrap подвесная система имеет четыре класса: xs (телефонов), sm (таблетки), md (настольные компьютеры) и lg (большие настольные компьютеры). Классы могут быть объединены для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, так что если вы хотите установить те же ширины для xs и sm , вам нужно всего лишь указать xs .

пример

<div class="row">
  <div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
  <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
  <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>

<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
<  div class="col-xs-6">.col-xs-6</div>
</div>
Попробуй сам "

Совет: Помните , что столбцы сетки должны добавить до двенадцати для ряда. Более того, столбцы будут складываться независимо от viewport .


Смешанный: Мобильный, планшетом и рабочий стол

пример

<div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
  <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Попробуй сам "

Четкие поплавков

Четкие поплавки (с .clearfix класса) в определенных контрольных точек , чтобы предотвратить странное обертку с неравномерным содержанием:

пример

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Попробуй сам "

Взаимозачет Колонны

Переместить столбцы вправо , используя .col-md-offset-* классы. Эти классы увеличивают левое поле столбца по * столбцов:

пример

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Попробуй сам "

Тяговое и толкающее - Изменить столбец Заказ

Изменение порядка столбцов сетки с .col-md-push-* и .col-md-pull-* классов:

пример

<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
Попробуй сам "