Бутстрапные промежутки

Недавно я начал использовать Twitter Bootstrap, и я не могу понять, что делает, и почему существуют разные пронумерованные промежутки, например span4, span12? И что такое смещения и когда они используются? (Иногда используется с пробелами) Я попытался выполнить поиск в Интернете, но нашел только конкретные вопросы о загрузках.

Ответ 1

Классы класса "Bootstrap" используются в сетке бутстрапов.

В документации показаны столбцы с номерами, каждое число представляет класс span, используемый для этого контейнера. Смещение показано прямо в следующем разделе, они определяют, сколько пустых столбцов должно быть слева от диапазона.

Вы можете прочитать span4 offset2 как "расширить этот блок на 4 столбца, оставить два столбца пустыми слева".
По умолчанию 12 столбцов. Если у вас есть span12, он будет таким же широким, как контейнер (который может быть текучим).

Ответ 2

Прежде всего, они не теги <span>. (Я упоминаю об этом, потому что я начал набирать <span> несколько раз!) Это ширина столбцов в строке.

Из http://twitter.github.com/bootstrap/scaffolding.html#gridSystem:

<div class="row">
 <div class="span4">...</div>
 <div class="span8">...</div>
</div>

В документах также рассматриваются смещения.

Ответ 3

22 Насколько я знаю, если вы хотите создать отзывчивый макет страницы, вы также можете использовать col-lg-2 или некоторые подобные классы при написании разметки div, например

<div class="col-lg-2 col-sm-3 col-xs-6"> some content </div>

который определит, сколько столбцов занимает какое-то содержимое на экране, для больших, маленьких и дополнительных маленьких экранов. point, у вас есть 12 столбцов max за строку, поэтому все ваше содержание в одной строке должно уважать это. Вы не можете

<row>
<div class="col-lg-5">content1 </div>
<div class="col-lg-6">content2 </div>
<div class="col-lg-3">content3 </div>
</row>

потому что здесь имеется 14 больших столбцов. Только классы xs добавляют к 24, хотя

Итак, делает ли span один и тот же трюк?