HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по Bootstrap 4

BS4 ГЛАВНАЯ BS4 Начать Контейнеры BS4 Базовая сетка BS4 Типография BS4 Цвета BS4 Таблицы BS4 Изображения BS4 BS4 Джамботрон Оповещения BS4 Кнопки БС4 Группы кнопок BS4 Значки BS4 Индикаторы выполнения BS4 Спиннеры BS4 BS4 Пагинация Группы списков BS4 Карты BS4 Выпадающие списки BS4 Свернуть BS4 BS4 Навс BS4 навигационная панель БС4 Формы Входы БС4 Входные группы BS4 Пользовательские формы BS4 BS4 Карусель BS4 модальный Подсказка BS4 BS4 всплывающее окно BS4 Тост BS4 прокрутки Утилиты BS4 BS4 Flex Иконки BS4 Медиа-объекты BS4 Фильтры BS4

Bootstrap 4 Сетка

Сетевая система BS4 BS4 Сложенный/горизонтальный BS4 Сетка XSмаленький BS4 Малая сетка Сетка BS4 средняя BS4 Сетка большая BS4 Сетка XLarge Примеры сетки BS4

Начальная загрузка 4 Другое

Базовый шаблон BS4 Упражнения BS4 Викторина БС4

Начальная загрузка 4 Ссылка

Все классы JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS тосты JS-подсказка


Bootstrap 4 Примеры сетки

❮ Предыдущий Следующий ❯

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

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

Используйте .colкласс для указанного количества элементов, и Bootstrap распознает количество элементов (и создаст столбцы одинаковой ширины). В приведенном ниже примере мы используем три элемента col, ширина каждого из которых составляет 33,33%.

колонка
колонка
колонка

Пример

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Три равных столбца с использованием чисел

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

столбец-4
столбец-4
столбец-4

Пример

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

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

Чтобы создать неравные столбцы, вы должны использовать числа. В следующем примере будет создано разделение 25%/50%/25%:

столбец-3
столбец-6
столбец-3

Пример

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

Установка ширины одного столбца

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

колонка
столбец-6
колонка

Пример

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Более равные столбцы

1 из 2
2 из 2
1 из 4
2 из 4
3 из 4
4 из 4
1 из 6
2 из 6
3 из 6
4 из 6
5 из 6
6 из 6

Пример

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Колонки строк

Вы также можете контролировать, сколько столбцов должно отображаться рядом друг с другом (независимо от количества столбцов), с помощью .row-cols-*классов:

1 из 2
2 из 2
1 из 4
2 из 4
3 из 4
4 из 4
1 из 6
2 из 6
3 из 6
4 из 6
5 из 6
6 из 6

Пример

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Больше неравных столбцов

1 из 2
2 из 2
1 из 4
2 из 4
3 из 4
4 из 4
1 из 4
2 из 4
3 из 4
4 из 4

Пример

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Равная высота

Если один из столбцов выше другого (из-за текста или высоты CSS), остальные последуют за ним:

Много боли очень важно, нет разницы в еде и чувствах. И боль, которую я могу получить в эти выходные. Неплохой iriure подхватывает его, и zril flats или что-то в этом роде субсидируется одним из нас, кто видел футбол. Нет, наша боль не должна быть прочитана мной, она должна заставить его рассердиться на Платона.
колонка
колонка

Пример

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Вложенные столбцы

столбец-8
столбец-6
столбец-6
столбец-4

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

Пример

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

Отзывчивые классы

Сеточная система Bootstrap 4 имеет пять классов:

  • .col-(очень маленькие устройства - ширина экрана менее 576 пикселей)
  • .col-sm-(маленькие устройства - ширина экрана равна или больше 576 пикселей)
  • .col-md-(средние устройства - ширина экрана равна или больше 768 пикселей)
  • .col-lg-(большие устройства - ширина экрана равна или больше 992 пикселей)
  • .col-xl-(устройства xlarge — ширина экрана больше или равна 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

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

С накоплением по горизонтали

col-sm-9
кол-см-3
col-sm
col-sm
col-sm

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

Пример

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Смешивать и сочетать

col-6 col-sm-9
col-6 col-sm-3
цвет-7 цвет-lg-8
цвет-5 цвет-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Пример

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Без желобов

Добавьте .no-guttersкласс в .rowконтейнер, чтобы удалить желоба (дополнительное пространство):

Боль важна сама по себе, но боль усиливается в процессе отложения жировых отложений, но я даю время, чтобы уменьшить ее, чтобы проделать большую работу и боль.
Для того, чтобы по большей части любой из нас приходил к выполнению любого рода занятий, кроме как для извлечения выгоды из него.
Но для того, чтобы вы могли понять, откуда всякое рожденное заблуждение есть удовольствие обвинять и восхвалять боль, я раскрою все дело и объясню то самое, что было сказано этим изобретателем истины и как бы зодчим истины. благословенная жизнь.

Пример

<div class="row no-gutters">

❮ Предыдущий Следующий ❯