twitter-bootstrap
Сетевая система

Вступление

замечания

Запросы мультимедиа

Медиа-запросы в Bootstrap позволяют перемещать, отображать и скрывать контент на основе размера видового экрана. Следующие медиа-запросы используются в файлах LESS для создания ключевых контрольных точек в сетке Bootstrap:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Иногда они расширяются до максимальной ширины для ограничения CSS для более узкого набора устройств:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Уровни сетки бутстрапа (точки останова)

В дополнение к концепции блоков столбцов , Bootstrap имеет разные точки останова или размеры сетки, известные как уровни. В сетке Bootstrap 3 есть четыре (4) уровня для размещения различных экранов (или видовых экранов). Уровнями Bootstrap 3 являются xs , sm , md и lg . Столбцы сетки Bootstrap идентифицируются с помощью различных классов CSS-столбцов col-{breakpoint}-{units} .

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

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

• col-xs-* - для самых маленьких экранов, таких как смартфоны <768 px
• col-sm-* - для небольших экранов, таких как смартфоны и планшеты> = 768 px
• col-md-* - для средних экранов, таких как планшеты и ноутбуки> = 992 px
• col-lg-* - для больших экранов, таких как рабочие столы> = 1200 пикселей

Ссылка: Grid System

Та же ширина столбца для каждого устройства

Чтобы создать столбец, который всегда равен 50% ширины окна просмотра (на всех устройствах), вы можете установить col-*-6 для каждого уровня.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

Однако это необязательная дополнительная разметка, так как col-xs-6 означает 6 единиц на xs и выше. Самый маленький уровень, который вы установили (xs, sm или md), также определяет размер для большей ширины экрана. Для столбца того же размера на всех уровнях просто установите ширину для самого маленького окна просмотра.

Более короткий код:

<div class="col-xs-6">..</div>

Разная ширина столбца для каждого устройства (отзывчивый дизайн)

Классы col-*-* можно комбинировать для управления шириной столбцов по разным размерам сетки.

Например, создайте столбец шириной 50% на уровне sm и столбце ширины 25% на уровне md ...

<div class="col-md-3 col-sm-6">..</div>

sm , md и lg будут «стекаться» вертикально при ширине видового экрана менее 768 пикселей. Здесь помещается сетка xs . Столбцы, которые используют классы col-xs- *, не будут складываться вертикально и будут уменьшаться на самых маленьких экранах.

Строки и столбцы Bootstrap

Система сетки Bootstrap имеет 12 единиц, известных как столбцы, которые можно использовать для размещения содержимого по горизонтали через область просмотра.

Причиной для 12-элементной сетки (вместо 10, 16 и т. Д.) Является то, что 12 равномерно делит на 6 (половинки), 4 (четверти) и 3 (трети). Это облегчает адаптацию к различным макетам. Столбцы сетки Bootstrap идентифицируются с помощью различных классов CSS-столбцов col-{breakpoint}-{units} . Узнайте больше о ширине и точках обзора (AKA Tiers)

Так, например, col-md-3 представляет столбец, который занимает 3 из 12 единиц (или 25%) в окне просмотра ширины среды ( md ). Чтобы использовать ширину столбца в макете, просто используйте соответствующий класс col-{breakpoint}-{units} в своей разметке HTML.

<div class="col-{breakpoint}-{units}">

Ширина столбца - текучая (не фиксированная ширина), поэтому столбцы потребляют процент от их контейнера.

Единицы столбцов в Bootstrap 3

• col-*-1 : 1 из 12 (8,33333333% ширины)
• col-*-2 : 2 из 12 (16.66666667% ширина)
• col-*-3 : 3 из 12 (ширина 25%)
• col-*-4 : 4 из 12 (ширина 33.3333333%)
• col-*-5 : 5 из 12 (41.66666667% ширина)
• col-*-6 : 6 из 12 (ширина 50%)
• col-*-7 : 7 из 12 (58.33333333% ширина)
• col-*-8 : 8 из 12 (66.66666667% ширина)
• col-*-9 : 9 из 12 (ширина 75%)
• col-*-10 : 10 из 12 (83.33333333% ширина)
• col-*-11 : 11 of 12 (91.66666667% ширина)
• col-*-12 : 12 из 12 (100% ширина)

Демо- версия - 12 колонных блоков Bootstrap

Строка Bootstrap

Класс Bootstrap .row используется для размещения столбцов. Столбцы всегда должны помещаться в строки, а строки всегда должны помещаться внутри контейнера ( container или container-fluid ). Строка использует отрицательные поля (-15px) для обеспечения правильного расстояния между содержимым столбца и краем браузера. Строки используются для группировки столбцов по горизонтали.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Колонны заполнят .row по горизонтали влево-вправо, и завернуть на новую строку каждые 12 единиц столбцов. Поэтому вы можете использовать .row s для создания горизонтальных разрывов или добавить более 12 столбцов в один элемент .row чтобы иметь столбцы, которые обертывают (или складывают) вертикально вниз по области просмотра.

При использовании переноса столбцов (более 12 единиц в .row ) вам необходимо использовать отзывчивые сбрасывания (или clearfixes), чтобы обеспечить равномерную упаковку неравномерного содержимого столбцов. Это важно, когда содержимое столбцов изменяется по высоте.

Подробнее о столбцах и строках сетки Bootstrap

Проблемы с компоновкой бутстрапа 3?

Bootstrap 3 - вложенная строка может иметь столбцы, содержащие более 12?

Объяснение строки и столбца Bootstrap

Как работает сетка Bootstrap (средняя)

Контейнеры

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

Используйте класс .container для .container контейнера с фиксированной шириной.

<div class="container">
  ...
</div>

Используйте класс .container-fluid для контейнера полной ширины, охватывающий всю ширину вашего окна просмотра.

<div class="container-fluid">
  ...
</div>

Примечание. Контейнеры не являются гнездовыми (вы не можете поместить контейнер в другой контейнер) из-за padding и т. Д.

Смещение столбцов

Эти классы увеличивают левое поле столбца на * столбцы. Например, .col-md-offset-4 перемещается .col-md-4 на четыре столбца.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Управление порядком столбцов с помощью push и pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Это изменит порядок встроенных столбцов сетки.

Синтаксис: .col-md-push- * и .col-md-pull- *.

Больше:
Управление порядком столбцов с использованием col-lg-push и col-lg-pull в Twitter. Загрузочный файл 3
Bootstrap 3: Push / pull колонки только на меньших размерах экрана
Колонка заказа и штабелирования в Bootstrap 3