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

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

Содержание

• Содержание
• Как это работает
• Пример быстрого запуска
• Функционал разметки
• Sass примеси
  • Переменные
  • Смешивания
  • Примеры использования
• Предопределенные классы
  • Пример: Сложенные по горизонтали
  • Пример: Мобильные и настольные
  • Пример: Мобильные, планшеты, настольные
  • Пример: Колонка wrapping
  • Пример: Адаптивный столбец сброса
  • Пример: взаимозачет столбцы
  • Пример: столбцы вложенности
  • Пример: Выравнивание столбцов
• Настройка грид
  • Столбцы и промежутки
  • Грид уровней

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

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

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

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

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

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

<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 блочная система работают на нескольких устройствах с таблица.

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.

<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-* в столбцах. Смотрите пример ниже для более полного представления о том, как все это работает.

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

<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 колонок размещены в одной строке, каждая группа дополнительных столбцов будет, как единое целое, переносится на новую строку.

<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 и наш адаптивные служебные классы.

<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. Смотрите это в действии на примере разметкок.

<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 пропуская один такой же столбец

<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 доступных столбцов).

<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-* модифицированными классами.

<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 переменные или карты, Вам необходимо сохранить изменения и перекомпилировать. Это будет совершенно новый набор предопределенных грид классы для ширины столбцов, смещение, толкает и тянет. Адаптивный ЖКХ видимости также будут обновлены, чтобы использовать пользовательские точки останова.