Skip to main content

Разметка

Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другое.

Блочная система

Bootstrap включает в себя мощную mobile-first блочная система макетов здания любых форм и размеров. Он основан на столбец 12 разметка и имеет несколько уровней, по одному для каждой медиа диапазона запроса. Вы можете использовать его с Sass примесей или наших предопределенных классов.

Содержание

Как это работает

На высоком уровне, блочная система работает так:

  • Существует три основных компонента—контейнера, строки и столбцы.
  • Контейнеры—.container для фиксированной ширины или .container-fluid на полную ширину—центр содержание вашего сайта и помочь выровнять грид Содержание.
  • «Rows» — горизонтальные группы столбцов, которые обеспечивают столбцы выстроились правильно.
  • Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
  • Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .col-sm-4.
  • Столбец width устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
  • Столбцы имеют горизонтальную padding для создания промежутка между отдельными столбцами.
  • Есть пять грид уровней, по одному для каждой aдаптивные точки останова: сверхмалые, малые, средние, большие, и очень большие.
  • Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, .col-sm-4 применим для малых, средних, больших, и очень больших устройств).
  • Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем к видя все это в пример.

Пример быстрого запуска

Если вы используете Bootstrap скомпилированный CSS, в этом примере вы хотите, чтобы начать с.

One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

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

Функционал разметки

При Bootstrap использует ems или rems для определения большинства размеров, pxs применяются для грид точки останова и ширины контейнера. Это происходит потому, что Ширина области просмотра в пикселях и не меняется с размером шрифта.

Смотри как аспекты Bootstrap блочная система работают на нескольких устройствах с таблица.

Сверхмалые
<544px
Небольшой
≥544px
Средний
≥768px по
Большие
≥992px
Очень большой
≥1200px
Поведение разметки Horizontal at all times Collapsed to start, horizontal above breakpoints
Ширина контейнера None (auto) 576px 720px 940px 1140px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# колонок 12
Промежуточная ширина 1.875rem / 30px (15px on each side of a column)
Вкладка Yes
Отступ Yes
Выравнивание столбцов Yes

Sass примеси

При использовании Bootstrap источник Sass файлов, у вас есть возможность использования Sass переменных и миксинов для создания пользовательских семантических, aдаптивный страница разметки. Наш предопределенный грид классов использовать те же переменные и миксины представить целый набор готовых классов для быстрого aдаптивный разметки.

Переменные

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
);

Смешивания

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

// Создает оболочку для ряда столбцов
@mixin make-row($gutter: $grid-gutter-width) {
  @if $enable-flex {
    display: flex;
    flex-wrap: wrap;
  } @else {
    @include clearfix();
  }
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
}

// Делаем элемент грид-готов (применив все, но Ширина)
@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px; // Предотвращения коллапса
  padding-right: ($gutter / 2);
  padding-left:  ($gutter / 2);

  // Предотвращения столбцов становится слишком узким, когда за меньший грид уровни
  // всегда установка Ширина: 100%;`. Это работает, потому что мы используем Флекс значения
  // позже, чтобы переопределить это начальная Ширина.
  @if $enable-flex {
    width: 100%;
  }
}

@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
  @if $enable-flex {
    flex: 0 0 percentage($size / $columns);
    // Добавить `Макс-ширина по обеспечению содержания в каждом столбце не задуть
    // Ширина столбца. Применяется для ie10+ и Firefox. Chrome и Safari
    // не нуждаются в этом.
    max-width: percentage($size / $columns);
  } @else {
    float: left;
    width: percentage($size / $columns);
  }
}

// Получить фантазии с помощью взаимозачета или изменить порядок сортировки
@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

Примеры использования

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

Увидеть его в действии в это привело к примеру.

.container {
  max-width: 60em;
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col-ready();

  @media (max-width: 32em) {
    @include make-col(6);
  }
  @media (min-width: 32.1em) {
    @include make-col(8);
  }
}
.content-secondary {
  @include make-col-ready();

  @media (max-width: 32em) {
    @include make-col(6);
  }
  @media (min-width: 32.1em) {
    @include make-col(4);
  }
}
<div class="container">
  <div class="row">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>
</div>

Предопределенные классы

Помимо семантической примеси, Bootstrap включает в себя широкий набор встроенных классов для быстрого создания грид колонн. Она включает в себя опции для аппаратной калибровки поля, переупорядочивание столбцов, и многое другое.

Пример: Сложенные по горизонтали

Используя единый набор .col-md-* грид классов, вы можете создать базовую блочная система что начинается сложены на мобильных устройствах и планшет устройств (экстра малый в небольшом диапазоне), прежде чем стать горизонтально на столе (средних) устройства. Место грид столбцов в любой .row.

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-8
col-md-4
col-md-4
col-md-4
col-md-4
col-md-6
col-md-6
<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>

Пример: Мобильные и настольные

Не хотите, чтобы ваши колонки просто сложить в небольших устройствах? Использовать дополнительные малые и средние устройства грид классов путем добавления .col-xs-* и .col-md-* в столбцах. Смотрите пример ниже для более полного представления о том, как все это работает.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Стека колонны на мобильный телефон, сделав одну полную ширину и половину ширины -->
<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>

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

Постройте предыдущий пример, создав еще более динамичные и мощные макеты для планшета .col-sm-* класса.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Дополнительно: очистить XS седла если их содержание не совпадает в высоту -->
  <div class="clearfix hidden-sm-up"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Пример: Колонка wrapping

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

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Пример: Адаптивный столбец сброса

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

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

  <!-- Добавить дополнительную clearfix только обязательные просмотра -->
  <div class="clearfix hidden-sm-up"></div>

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

В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс offsets, pushes, или pulls. Смотрите это в действии на примере разметкок.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Пример: взаимозачет столбцы

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

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Пример: столбцы вложенности

Чтобы вложить свой контент с дефолтом грид добавить новое .row набор .col-sm-* столбцы в рамках существующего .col-sm-* столбец. Вложенные строки должны содержать набор колонок добавить, что до 12 или меньше (это не обязательно использовать все 12 доступных столбцов).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Пример: Выравнивание столбцов

Легко изменить порядок наших встроенных столбцов разметки с .push-md-* и .pull-md-* модифицированными классами.

.col-md-9 .push-md-3
.col-md-3 .pull-md-9
<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Настройка грид

Используя наш встроенного грид Sass переменные и карты, можно полностью настроить предопределенные грид классов. Изменение количества уровней, в медиа Размеры запроса и ширину контейнера—то перекомпилировать.

Столбцы и промежутки

Число грид столбцами и горизонтальными внутренний отступ (ака, промежутки) может быть изменен через Sass переменные. $grid-columns используется для создания ширины (в процентах) каждого отдельного столбца в то время как $grid-gutter-width делятся поровну между padding-left и padding-right для водостоков колонки.

$grid-columns: 12;
$grid-gutter-width: 30px;

Грид уровней

Перемещение за пределы самих колонок, Вы также можете настроить количество грид уровнях. Если вы хотели всего лишь три грид уровней, вы бы обновление $grid-breakpoints и $container-max-widths Что-то вроде этого:

$grid-breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 940px
);

При внесении любых изменений в файл Sass переменные или карты, Вам необходимо сохранить изменения и перекомпилировать. Это будет совершенно новый набор предопределенных грид классы для ширины столбцов, смещение, толкает и тянет. Адаптивный ЖКХ видимости также будут обновлены, чтобы использовать пользовательские точки останова.