Bootstrap 4 grid: Grid system · Bootstrap

Содержание

Bootstrap Бутстрап 4 Medium grid

Пример средней сетки

	Extra small	Small	Medium	Large	Extra Large
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Ширина экрана	<576px	>=576px	>=768px	>=992px	>=1200px

В предыдущей главе мы представили пример Grid с классами для небольших устройств. Мы использовали два Div (столбцы), и мы дали им 25% 75% Сплит:

Но на средних устройствах дизайн может быть лучше, как 50% 50% Сплит.

Средние устройства определяются как имеющие ширину экрана от 768 пикселей до 991 пикселей.

Для средних устройств мы будем использовать .col-md-* классы:

Теперь Bootstrap собирается сказать «на малых размеров, посмотрите на классы с-SM-в них и использовать их. На средних размерах, посмотрите на классы с-MD-в них и использовать эти».

Следующий пример приведет к 25% 75% Сплит на малых устройствах и 50% 50% разделить на средних (и больших и XLarge) устройств. На дополнительных малых устройствах, он будет автоматически стек (100%):

.col-sm-3 .col-md-6

.col-sm-9 .col-md-6

Пример

<div>
<div>
    <div>
      <p>Lorem ipsum…</p>
    </div>
    <div>
      <p>Sed ut perspiciatis…</p>
    </div>
</div>
</div>

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

Использование только средних

В приведенном ниже примере мы указываем только .col-md-6 класс (без .col-sm-* ). Это означает, что средние, большие и очень большие устройства будут делить 50%-50%-потому что класс масштабируется вверх. Однако, для малых и экстренных малых приспособлений, оно будет штабелировать вертикально (100% ширины):

Пример

<div>
  <div>
    <p>Lorem ipsum…</p>
  </div>
<div>
    <p>Sed ut perspiciatis…</p>
  </div>
</div>

Автоматические столбцы макета

В Bootstrap 4 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-md-* и используйте только .col-md класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину.

Если размер экрана меньше 768px, столбцы будут складываться горизонтально:

1 of
2

2 of 2

<!— Four
columns: 25% width on medium and up —>
<div>
<div>1 of 4</div>

<div>2 of 4</div>
<div>3
of 4</div>
<div>4 of 4</div>
</div>

1 of 4

2 of 4

3 of 4

4 of 4

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

Bootstrap Бутстрап 4 Grid System

Система сетки Bootstrap 4

Система сетки Bootstrap позволяет до 12 столбцов по всей странице.

Если вы не хотите использовать все 12 столбцов по отдельности, можно сгруппировать столбцы вместе, чтобы создать более широкие столбцы:

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

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

Классы сетки

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

.col- (дополнительные малые устройства-ширина экрана менее 576пкс)
.col-sm- (малые устройства-ширина экрана равна или больше, чем 576пкс)
.col-md- (средние устройства-ширина экрана, равная или превышающая 768px)
.col-lg- (большие устройства-ширина экрана равна или больше, чем 992пкс)
.col-xl- (XLarge устройства-ширина экрана, равная или превышающая 1200px)

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

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

Системные правила сетки

Некоторые правила системы сетки Bootstrap 4:

Строки должны быть размещены в пределах .container (фиксированной ширины) или .container-fluid (полная ширина) для правильного выравнивания и заполнения
Использование строк для создания горизонтальных групп столбцов
Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными потомками строк
Предопределенные классы .row , как и .col-sm-4 доступны для быстрого создания макетов сетки
Столбцы создают водосточные желоба (промежутки между содержимым столбцов) с помощью заполнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательного поля на.rows
Столбцы сетки создаются путем указания числа 12 доступных столбцов, которые необходимо охватить. Например, три равных столбца будут использовать три .col-sm-4
Ширина столбцов в процентах, поэтому они всегда являются жидкими и имеют размер относительно родительского элемента
Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float. Одним из больших преимуществ с Flexbox является то, что столбцы сетки без заданной ширины будут автоматически раскладки как «столбцы с одинаковой шириной» (и равная высота). Пример: три элемента с .col-sm каждым автоматически будет 33,33% шириной от небольшой точки останова и выше. Совет: Если вы хотите узнать больше о Flexbox, вы можете прочитать наш CSS Flexbox учебник.

Обратите внимание, что Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Базовая структура сетки Bootstrap 4

Ниже приведена базовая структура сетки Bootstrap 4:

<!— Or let Bootstrap automatically handle the layout —>
<div>
<div></div>
<div></div>
<div></div>

<div></div>
</div>

Первый пример: Создайте строку ( <div class="row"> ). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-* классами). Первая звезда (*) представляет отзывчивость: SM, MD, LG или XL, в то время как вторая звезда представляет число, которое должно всегда добавлять до 12 для каждой строки.

Второй пример: вместо добавления числа к каждому col , пусть Bootstrap обрабатывает макет, чтобы создать одинаковые столбцы ширины: два "col" элемента = 50% ширины для каждого Col. три Cols = 33,33% ширины для каждого Col. четыре Cols = 25% ширины и т.д. Можно также использовать, .col-sm|md|lg|xl чтобы сделать столбцы реагировать.

Параметры сетки

В следующей таблице приведены сводные сведения о том, как система Grid Bootstrap 4 работает на различных размерах экрана.

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Поведение сетки	По горизонтали в любое время	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова
Container width	None (auto)	540px	720px	960px	1140px
Подходит для	Портретные телефоны	Пейзаж телефонов	Таблетки	Ноутбуки	Ноутбуки и настольные компьютеры
# of columns	12	12	12	12	12
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Да	Да	Да	Да	Да
Offsets	Да	Да	Да	Да	Да
Column ordering	Да	Да	Да	Да	Да

Примеры

В следующих главах показаны примеры систем сеток для различных устройств и ширины экрана:

Bootstrap 4 система сеток, примеры использования

Система сеток Bootstrap 4 состоит из 12 столбцов.

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

.col-xs-1

.col-xs-2

.col-xs-3

.col-xs-7

.col-xs-4

Цифра в конце каждого класса определяет количество столбцов, которое займет блок. Класс .col-xs-1 определяет 1 столбец, .col-xs-8 — 8 столбцов. xs — означает, что сетка будет действовать на экранах с очень маленьким разрешением (например, телефоны). Для других разрешений есть классы sm, md, lg.

Код сетки из примера выше:

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	</div>
	<div>
	  <div>.col-xs-2</div>
	  <div>.col-xs-3</div>
	  <div>.col-xs-7</div>
	</div>
	<div>
	  <div>.col-xs-4</div>
	  <div>.col-xs-4</div>
	  <div>.col-xs-4</div>
	</div>
	<div>
	  <div>.col-xs-5</div>
	  <div>.col-xs-7</div>
	</div>
	<div>
	  <div>.col-xs-6</div>
	  <div>.col-xs-6</div>
	</div>
	<div>
	  <div>.col-xs-12</div>
	</div>	
</div>

<!-- Стили, которые использовали чтобы увидеть сетку -->
<style scoped>
.="col"] {
	border: 1px solid white;
	background: #f5f5f5;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	}
</style>

Сетка, приведенная выше, будет выглядеть одинаково на всех устройствах.

В следующем примере мы используем такую же разметку, только используем сетку md. Это значит, что на экранах с разрешением меньше 992px все ячейки сетки вытянутся на всю ширину экрана и расположатся друг на другом.

.col-md-1

.col-md-2

.col-md-3

.col-md-7

.col-md-4

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	</div>
	<div>
	  <div>.col-md-2</div>
	  <div>.col-md-3</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	</div>
	<div>
	  <div>.col-md-5</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-6</div>
	  <div>.col-md-6</div>
	</div>
	<div>
	  <div>.col-md-12</div>
	</div>
</div>

Размеры сетки

	Очень маленькие устройства <34em	Малые устройства ≥34em	Средние устройства ≥48em	Большие устройства ≥62em	Очень большие устройства ≥75em
Поведение сетки	Горизонтальная всё время	Collapsed to start, horizontal above breakpoints
Ширина контейнера	Нет (auto)	34rem	45rem	60rem	72.25rem
Префикс класса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Количество колонок	12
Ширина отступов	30px (15px с каждой стороны колонки)
Вложенность	Есть
Отступы	Есть
Выравнивание колонок	Есть

Контейнеры

Сетка должна располагаться внутри контейнера .container (ширина 1170px) или .container-fluid (растягивается на всю ширину экрана).

Row

Колонки должны располагаться внутри строк .row. Только колонки могут быть непосредственными потомками строк.

Padding

У колонок есть отступы. Отступы крайних колонок компенсируются отрицательным margin строки .row.

Больше 12 колонок в ряд?

Если расположить больше 12 колонок в ряд, то колонки будут перемещаться на следующий ряд. Это значит, что если вы расположите, например, .col-md-10 и .col-md-3 в один ряд .row, то .col-md-3 переместится в следующий ряд.

Адаптивная верстка

Для создания адаптивной верстки используйте несколько классов, например, class="col-sm-10 col-md-6".

Почему CSS Grid лучше Bootstrap для создания макетов

Это перевод статьи «Why CSS Grid is better than Bootstrap for creating layouts» от Per Harald Borgen.

CSS Grid — это новый способ создания макетов в интернете. Впервые полноценная система вёрстки доступна прямо в браузере, что даёт массу преимуществ.

Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком Bootstrap. Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.

Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.

Разметка станет проще

Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.

Для наглядности я создал фиктивный макет веб-сайта, чтобы можно было сравнить код, необходимый для двух версий. Вот:

(Я добавил в пример немного дизайна. Однако это не имеет никакого отношения к сравнению CSS Grid и Bootstrap, поэтому я сохраню эту часть CSS снаружи своих примеров).

Bootstrap

Давайте для начала рассмотрим разметку, необходимую для создания этого сайта в Bootstrap.

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

Каждая строчка должна быть с отдельным тэгом <div> .
Для обозначения макета должны использоваться имена классов (col-xs-2).
Когда этот шаблон усложняется, HTML тоже.

Если это адаптивный сайт, тэги выглядят как правило ещё хуже:

CSS Grid

Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:

Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.

Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки — в прошлом. Это просто контейнер для сетки и позиции внутри неё.

И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.

В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:

Для некоторых это может быть аргументом в пользу Bootstrap: вам не нужно беспокоиться о CSS для создания простой сетки — вы просто строите макет в HTML.

Но, как вы поймёте из следующего пункта, связь между разметкой и макетом на самом деле — уязвимость, если речь идёт о гибкости.

Намного больше гибкости

Предположим, вы хотите менять макет в зависимости от размера экрана. Например, поднимать меню в верхний ряд, для просмотра с мобильных устройств.

Другими словами — изменить макет с такого:

на такой:

CSS Grid

Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:

Возможность создания макета подобным образом — не заботясь о том, как написан HTML — называется независимостью от порядка в коде (source order independence), и это гигантская победа для разработчиков и дизайнеров.

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

Bootstrap

Если бы мы захотели сделать то же самое в Bootstrap, нам бы потребовалось менять HTML. Нам нужно было бы поднять тег menu в верхний ряд, в добавок к header, потому что menu во втором ряду в заложниках.

Сделать такое с наличием медиа-запроса — не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.

Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.

Больше никаких ограничений 12 колонками

Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.

С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.

Это делается установкой значения repeat(7, 1fr) для grid-template-columns, вот так:

Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.

Поддержка браузера

Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.

Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит Мортен Ранд-Хендриксен об этом. Он утверждает, что CSS Grid — это возможность переосмыслить то, как мы представляем обратную совместимость:

CSS Grid — это модуль разметки, он позволяет нам менять разметку документа без вмешательства в порядок исходного кода. Другими словами CSS Grid — это абсолютно визуальный инструмент, и если его правильно использовать, он не будет влиять на внутренние связи содержимого в документе. Из этого следует простой, но удивительный факт: отсутствие поддержки CSS Grid в старом браузере не должно влиять на восприятие посетителя сайта, оно должно просто менять это восприятие.

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

Заключение

Я хочу поделиться цитатой Джен Симмонс, разработчика Mozilla. Она описывает то же чувство, которое испытал я к CSS Grid, после того как разобрался в нём:

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

Bootstrap 4: обычная сетка VS flexbox-сетка

Bootstrap 4 готовит для нас некоторые изменения в системе сеток, с которыми мы все так хорошо знакомы с 3-й версии. Теперь она включает в себя новый уровень XL, также изменились некоторые классы модификаторов, и была добавлена совершенно новая сетка на основе flexbox.

Обычные и flexbox сетки не совместимы, поэтому каждый должен будет выбрать, какую из них использовать в своих проектах. Чтобы помочь Вам в решении, в этой статье мы рассмотрим все различия между этими двумя системами. Для облегчения сравнения, мы также подготовили несколько примеров, реализованных в обоих режимах.

1. Установка

Наиболее распространенный способ подключения Bootstrap к проекту — с помощью CDN или локального файла. Есть отдельные скомпилированные версии для flex и не-flex сеток:

<!— Original Bootstrap —>
<link href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css» rel=»stylesheet» >

<!— Bootsrap With Flexbox Grid —>
<link href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css» rel=»stylesheet» >

Для тех из вас, кто привык компилировать свои кастомные стили Bootstrap, вам нужно включить $enable-flex в основном файле настройек Sass.

_variables.scss

$enable-flex = true;

Что касается размера файла, то версия flexbox немного больше из-за дополнительных правил и префиксов, которые необходимы. Но разница довольно небольшая (119 Кб против 105 КБ) и это в большинстве случаев не имеет значения.

2. Обычная сетка

Все кто работал с Bootstrap знают как работает там сетка. У нас есть строки, разделенные на 12 равных частей, и столбцы, которые идут внутри строк. Каждый столбец может занять от 1 до 12 частей строки:

Новый режим flexbox предоставляет нам новую возможность, где не нужно указывать столбцам определенный размер:

Столбцы без размера в сетке flexbox будут делить свободное пространство поровну, всегда занимая всю строку. Если мы хотим, чтобы столбец был больше или меньше, мы все еще можем сделать это при помощи класса .col-хs-размер.

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

3. Перенос колонок

Когда сумма всех столбцов в строке больше 12, лишние столбцы будут перенесены на следующую строку. Это работает одинаково в обычной и flexbox сетках.

<div>
<div>.col-xs-6</div>
<div>.col-xs-6</div>
<div>.col-xs-3, This column will move to the next line.</div>
</div>

Единственное, что нужно отметить, это то, что при использовании flexbox, столбец без указанного размера может занять всю строку, как только он будет перенесен.

4. Адаптивная сетка

Как уже было упомянуто во введении, в Bootstrap 4 добавили новый размер XL. Теперь адаптивная сетка может выглядеть следующим образом:

Очень маленький размер (xs) — меньше 576px

Маленький (sm) — между 576px и 768px

Средний (md) — между 768px и 992px

Большой (lg) — между 992px и 1200px

Очень большой (xl) — более 1200px

Помимо размера XL, никаких других серьезных изменений в создании адаптивных сеток нет. Обычные и flexbox сетки работают одинаковым образом.

5. Высота колонок

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

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

6. Горизонтальное выравнивание

В обычной Bootstrap-сетке столбцы позиционировались по горизонтали с помощью смещения (offset). Смещения работают как пустые колонки и позволяют перемещать элементы вправо (например, класс .offset-xs-3 перемещает столбец на 3 колонки вправо). Это может немного раздражать, так как нам нужно вручную регулировать количество необходимых отступов.

<div>
<div>Эта колонка теперь расположена по центру.</div>
</div>

Благодаря свойству justify-content, горизонтальное позиционирование делается очень легко, просто добавлением соответствующего класса.

<div>
<div>Все колонки в этой строке будут автоматически отцентрированы.</div>
</div>

Кроме того, если вы хотите использовать смещения, то это также делается просто!

7. Выравнивание по вертикали

В обычной сетке Bootstrap нет класса для вертикального выравнивания. Единственный способ сделать какой-либо вид вертикального позиционирования это использовать пользовательский CSS и это часто является причиной множества багов.

В тоже время flexbox дает нам не один, а два способа вертикального выравнивания столбцов:

Вертикальное выравнивание всего ряда:

<div>
<div> Середина </div>
</div>
<div>
<div> Низ </div>
</div>
<div>
<div> Верх </div>
</div>

Выравнивание отдельных столбцов в строке:

<div>
<div> Середина </div>
<div> Низ </div>
<div> Верх </div>
</div>

8. Изменение порядка колонок

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

<div>
<div> На MD экранах эта колонка сдвинется на 8 столбцов вправо. </div>
<div> На MD экранах эта колонка сдвинется на 4 столбца влево.</div>
</div>

Любой, кто использовал flexbox ранее, знает, что он имеет встроенное свойство order. Разработчики Bootstrap реализовали это с помощью трех классов:

.flex-xs-first — отображается на первом месте.

.flex-xs-last — отображается последним.

.flex-xs-unordered — отображается между первым и последним.

Ручных расчетов не требуется. Если вам нужно сделать перемещение более 3-х столбцов (что случается редко), вы можете использовать pull и push или сделать это с помощью CSS.

Заключение

Из всего того, что затронуто в статье, становится довольно ясно, что режим flexbox более продвинутый и универсальный для создания сетки. В конце концов, он включает в себя все что есть в обычной сетке, с некоторыми особенностями. Единственный небольшой недостаток это отсутствие поддержки в IE9.

Перевод статьи с tutorialzine.com.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Понимание системы Bootstrap 4 Grid

Сетка Bootstrap — это самый быстрый и простой способ создания адаптивного макета веб-страницы.

Что такое Bootstrap Grid System

Сетка

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

Bootstrap 4 включает предопределенные классы сетки для быстрого создания макетов сетки для различных типов устройств, таких как сотовые телефоны, планшеты, ноутбуки и настольные компьютеры и т. Д. Например, вы можете использовать классы .col- * для создания столбцов сетки для очень маленьких устройства мобильные телефоны в портретном режиме, аналогично вы можете использовать классы .col-sm- * для создания столбцов сетки для устройств с маленьким экраном, таких как мобильный телефон в ландшафтном режиме, классы .col-md- * для устройств со средним экраном как и планшеты, модель .col-lg- * классы для больших устройств, таких как настольные компьютеры, и классы .col-xl- * для очень больших экранов рабочего стола.

В следующей таблице приведены некоторые ключевые особенности новой системы координатной сетки.

Функции Bootstrap 4 Grid System	Очень маленький <576px	Маленький ≥576px	Средний ≥768px	Большой ≥992px	Очень большой ≥1200px
Макс.ширина контейнера	Нет (авто)	540px	720 пикселей	960px	1140px
Идеально для	Мобильный (вертикальный)	Мобильный (горизонтальный)	Таблетки	Ноутбуки	Ноутбуки и настольные ПК
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Количество столбцов	12
Ширина желоба	30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable	Есть
Колонка для заказа	Есть

Приведенная выше таблица демонстрирует одну важную вещь, применяя любой .col-sm- * класс элемента будет влиять не только на его стиль на небольших устройствах, но также на средних, больших и очень больших устройствах с шириной экрана больше или равной 540 пикселей, если .col-md- * , .col-lg- * или .col-xl- * класса нет. Точно так же класс .col-md- * будет влиять не только на стили элементов на средних устройствах, но также на больших и очень больших устройствах, если .col-lg- * или .col-xl- класса нет.

Теперь возникает вопрос, как создавать строки и столбцы с помощью этой адаптивной сеточной системы с 12 столбцами. Ответ довольно прост: сначала создайте контейнер, который действует как оболочка для ваших строк и столбцов, используя класс .container , затем создайте строки внутри контейнера, используя класс .row , и создайте столбцы внутри любого row вы можете использовать .col- * , .col-sm- * , .col-md- * , .col-lg- * и .col-xl- * классы. Столбцы — это фактическая область содержимого, в которую мы будем помещать наше содержимое. Давайте воплотим все это в жизнь. Посмотрим, как это работает на самом деле:

Создание макетов с двумя столбцами

В следующем примере показано, как создать макеты с двумя столбцами для средних, больших и очень больших устройств, таких как столы, ноутбуки, настольные компьютеры и т. Д. Однако на мобильных телефонах (ширина экрана менее 768 пикселей) столбцы автоматически станут горизонтальными.

  
    
    
         Столбец слева 
         Столбец справа 
    
    
    
    
         Столбец слева 
         Столбец справа 
    
    
    
    
         Столбец слева 
         Столбец справа

Примечание: В макете сетки содержимое должно быть размещено внутри столбцов (.col и .col- * ), и только столбцы могут быть непосредственными дочерними элементами строк ( .row ). Строки следует размещать внутри .container (фиксированной ширины) или .container-fluid (полной ширины) для надлежащего заполнения и выравнивания.

Совет: Ширина столбцов сетки задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.Кроме того, каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между отдельными столбцами.

Поскольку система сеток Bootstrap основана на 12 столбцах, поэтому, чтобы столбцы оставались в одной строке (т. Е. Рядом), сумма номеров столбцов сетки в одной строке не должна быть больше 12. Если вы пройдете через в приведенном выше примере кода внимательно вы найдете количество столбцов сетки (т.е. col-md- * ) добавьте до двенадцати (6 + 6, 4 + 8 и 3 + 9) для каждого ряда.

Создание макетов с тремя столбцами

Аналогичным образом вы можете создавать другие макеты, основанные на вышеупомянутом принципе. Например, в следующем примере обычно создаются макеты из трех столбцов для экранов ноутбуков и настольных компьютеров. Он также работает в планшетах в ландшафтном режиме, если разрешение экрана больше или равно 992 пикселей (например, Apple iPad). Однако в портретном режиме столбцы сетки, как обычно, будут горизонтальными.

  
    
    
         Столбец слева 
         В середине столбца 
         Столбец справа 
    
    
    
    
         Столбец слева 
         В середине столбца 
         Столбец справа 
    
    
    
    
         Столбец слева 
         В середине столбца 
         Столбец справа

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

Колонки авто-компоновки бутстрапа

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

Давайте попробуем следующий пример, чтобы понять, как это работает:

  
    
    
         Первый столбец 
         Вторая колонка 
    
    
    
    
         Первый столбец 
         Вторая колонка 
         Третий столбец

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

Если вы попробуете следующий пример, вы найдете столбцы в строке с классом . Col имеет одинаковую ширину.

  
    
    
         Первый столбец 
         Вторая колонка 
    
    
    
    
         Первый столбец 
         Вторая колонка 
         Третий столбец

Поведение при переносе столбца

Теперь мы собираемся создать более гибкие макеты, которые изменяют ориентацию столбцов в зависимости от размера области просмотра.В следующем примере создается макет из трех столбцов на больших устройствах, таких как ноутбуки и настольные компьютеры, а также на планшетах (например, Apple iPad) в альбомном режиме, но на средних устройствах, таких как планшеты, в портретном режиме (768 пикселей ≤ ширина экрана <992 пикселей), он изменится на макет из двух столбцов, где третий столбец перемещается внизу первых двух столбцов.

  
    
         Первый столбец 
         Вторая колонка 
         Третий столбец

Как вы можете видеть в приведенном выше примере, сумма номеров столбцов средней сетки (т.е.е. col-md- * ) равно 3 + 9 + 12 = 24> 12 , поэтому третий элемент

с классом .col-md-12 , который добавляет дополнительные столбцы сверх максимального 12 столбцов в строке .row переносятся на новую строку как один непрерывный блок на устройствах среднего размера экрана.

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

Создание макетов с несколькими столбцами с помощью Bootstrap

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

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

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

Теперь вопрос в том, как мы можем создавать такие отзывчивые макеты, используя эту новую сеточную систему Bootstrap. Начнем с основного целевого устройства. Предположим, что наше основное целевое устройство — ноутбук или обычный настольный компьютер.Поскольку наш макет ноутбука имеет 3 столбца и 4 строки, то есть макет сетки 3×4, поэтому HTML-код для создания такой структуры сетки будет выглядеть примерно так.

  
    
          Вставка 1 
 
          Вставка 2 
 
          Вставка 3 
 
          Вставка 4 
 
          Вставка 5 
 
          Вставка 6 
 
          Вставка 7 
 
          Вставка 8 
 
          Вставка 9 
 
          Вставка 10 
 
          Вставка 11 
 
          Вставка 12

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

Теперь пришло время настроить наш макет для других устройств. Давайте сначала настроим его для планшетного устройства. Поскольку внутри планшета наш макет отображается как сетка 2×6 (т.е. 2 столбца и 6 строк). Итак, добавьте класс .col-md-6 в каждый столбец.

  
    
          Вставка 1 
 
          Вставка 2 
 
          Вставка 3 
 
          Вставка 4 
 
          Вставка 5 
 
          Вставка 6 
 
          Вставка 7 
 
          Вставка 8 
 
          Вставка 9 
 
          Вставка 10 
 
          Вставка 11 
 
          Вставка 12

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

Точно так же вы можете настроить макет для очень больших устройств, таких как большой экран рабочего стола, добавив класс .col-xl-3 в каждый столбец, поскольку каждая строка в нашем макете очень большого устройства содержит 4 столбца. Вот окончательный код после объединения всего процесса.

  
    
          Вставка 1 
 
          Вставка 2 
 
          Вставка 3 
 
          Вставка 4 
 
          Вставка 5 
 
          Вставка 6 
 
          Вставка 7 
 
          Вставка 8 
 
          Вставка 9 
 
          Вставка 10 
 
          Вставка 11 
 
          Вставка 12

Совет: Согласно приведенной выше иллюстрации нет необходимости настраивать макет для мобильных телефонов; поскольку столбцы на сверхмалых устройствах автоматически становятся горизонтальными и отображаются в виде сетки столбцов 1×12 при отсутствии .col- * или .col-sm- * классы.

Вложение столбцов сетки

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

  
    
         Столбец слева

Создание столбцов переменной ширины

Вы можете использовать классы col- {breakpoint} -auto для изменения размера столбцов на основе естественной ширины их содержимого.Попробуйте следующий пример, чтобы увидеть, как это работает:

  
    
         Столбец слева 
         Столбец переменной ширины 
         Столбец справа 
    
    
         Столбец слева 
         Столбец переменной ширины 
         Столбец справа

Выравнивание столбцов сетки

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

Вертикальное выравнивание колонн сетки

Вы можете использовать классы .align-items-start , .align-items-center и .align-items-end для выравнивания столбцов сетки по вертикали вверху, посередине и внизу контейнера, соответственно.

  
    
         Первый столбец 
         Вторая колонка 
         Третий столбец 
    
    
         Первый столбец 
         Вторая колонка 
         Третий столбец 
    
    
         Первый столбец 
         Вторая колонка 
         Третий столбец

Отдельные столбцы внутри строки также можно выровнять по вертикали.Вот пример:

  
    
         Первый столбец 
         Вторая колонка 
         Третий столбец

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

Горизонтальное выравнивание столбцов сетки

Вы можете использовать классы .justify-content-start , .justify-content-center и .justify-content-end для выравнивания столбцов сетки по горизонтали слева, по центру и справа от контейнера. соответственно.Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:

  
    
         Первый столбец 
         Вторая колонка 
    
    
         Первый столбец 
         Вторая колонка 
    
    
         Первый столбец 
         Вторая колонка

В качестве альтернативы можно использовать класс .justify-content-around для равномерного распределения столбцов сетки с половинными промежутками на обоих концах, тогда как вы можете использовать класс .justify-content-between для равномерного распределения столбцов сетки там, где первый столбец расположен в начале и последний столбец помещается в конец. Попробуйте следующий пример, чтобы увидеть, как это работает на самом деле:

  
    
         Первый столбец 
         Вторая колонка 
    
    
         Первый столбец 
         Вторая колонка

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

Изменение порядка столбцов сетки

Вы даже можете изменить визуальный порядок столбцов сетки, не меняя их порядок в реальной разметке. Используйте класс .order-last , чтобы расположить столбец последним, тогда как используйте класс .order-first , чтобы расположить столбец первым. Рассмотрим пример:

  
    
         Первый, но наконец заказанный 
         Второй, но неупорядоченный 
         Последний, но сначала заказанный

Вы также можете использовать .order- * классы для упорядочивания столбцов сетки в зависимости от порядковых номеров. Столбец сетки с номером более высокого порядка идет после столбца сетки с номером более низкого порядка или столбца сетки без классов порядка. Он включает поддержку от 1 до 12 на всех пяти уровнях сетки.

  
    
         Первый, но наконец заказанный 
         Второй, но сначала заказанный 
         Последний, но заказывается вторым

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

Вы также можете перемещать столбцы сетки вправо для выравнивания, используя классы смещения столбцов, такие как .offset-sm- * , .offset-md- * , .offset-lg- * и т. д.

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

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

Примечание: Вы можете использовать класс .col-auto для создания столбцов, которые занимают столько места, сколько необходимо, то есть размеры самих столбцов зависят от содержимого.

Создание компактных столбцов

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

  
     Первый столбец 
     Вторая колонка 
     Третий столбец

Разделение столбцов на новую строку

Вы также можете создать столбцы одинаковой ширины, охватывающие несколько строк, вставив

с .w-100 класс, в котором вы хотите, чтобы столбцы разбивались на новую строку. Кроме того, вы можете сделать эти разрывы адаптивными, объединив класс .w-100 с вспомогательными классами адаптивного дисплея.

Мы надеемся, что вы поняли основы новой системы сеток Bootstrap 4.В следующих нескольких главах вы узнаете, как создавать базовые макеты веб-страниц, используя эту систему сеток flexbox.

React-Bootstrap · Документация по React-Bootstrap

Система сеток Bootstrap использует серию контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с использованием Flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.

Вы впервые или незнакомы с flexbox? Прочтите это руководство по Flexbox уловок CSS, чтобы узнать об основах, терминологии, рекомендациях и фрагментах кода.

Контейнер №

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

<Контейнер>
<Строка>
1 из 1

1 из 1

Fluid Container #

Вы можете использовать <Контейнер для жидкости /> для ширины: 100% для всех размеров окна просмотра и устройства.

<Контейнер для жидкости>
<Строка>
1 из 1

  <Контейнерная жидкость> 
   
   1 из 1

Вы можете установить контрольные точки для жидкости проп. Установка его на точку останова ( sm, md, lg, xl ) установит Container как жидкость до указанной точки останова.

<Контейнер для жидкости = "md">
<Строка>
1 из 1

1 из 1

столбцов с автоматической компоновкой #

Если ширина столбца не указана, компонент Col будет отображать столбцы одинаковой ширины

<Строка>
1 из 2
2 из 2

<Строка>
1 из 3
2 из 3
3 из 3

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

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

Автоматическая компоновка столбцов сетки Flexbox также означает, что вы можете установить ширину одного столбца и автоматически изменять размер столбцов-братьев вокруг него.Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других столбцов изменится независимо от ширины центрального столбца.

1 из 3

2 из 3 (шире)

3 из 3

1 из 3

2 из 3 (шире)

3 из 3

<Контейнер>
<Строка>
1 из 3
2 из 3 (шире)
3 из 3

<Строка>
1 из 3
2 из 3 (шире)
3 из 3

   
   
   1 из 3  
   2 из 3 (шире)  
   3 из 3  
   
   
   1 из 3  
   2 из 3 (шире)  
   3 из 3

Содержимое переменной ширины #

Установите значение столбца (для любого размера точки останова) на "авто" размер столбцов зависит от естественной ширины их содержимого.

1 из 3

Содержимое переменной ширины

3 из 3

1 из 3

Содержимое переменной ширины

3 из 3

<Контейнер>

1 из 3

Содержимое переменной ширины

3 из 3

<Строка>
1 из 3
Содержимое переменной ширины

3 из 3

1 из 3

< Col md = "auto"> Содержимое переменной ширины

3 из 3

< Столбец> 1 из 3

Содержимое переменной ширины

3 из 3

Адаптивные сетки #

Col позволяет указать ширину столбцов по 5 размерам точек останова (xs, sm, md, lg и xl).Для каждой точки останова вы можете указать количество столбцов для охвата или установить значение для автоматической ширины макета.

<Контейнер>
<Строка>
sm = 8
sm = 4

<Строка>
sm = true
sm = true
sm = true

   
   
   sm = 8  
   sm = 4  
   
   
   sm = true  
   sm = true  
   sm = true

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

xs = 6 md = 4

<Контейнер>
{/ * Сложите столбцы на мобильном устройстве, сделав одну полную, а другую половинную * /}
<Строка>

xs = 12 мкр = 8

xs = 6 мкр = 4

{/ * Ширина столбцов начинается с 50% на мобильных устройствах и увеличивается до 33,3% на компьютерах * /}
<Строка>

xs = 6 мкр = 4

xs = 6 мкр = 4

xs = 6 мкр = 4

{/ * Ширина столбцов всегда составляет 50%, как на мобильных устройствах, так и на компьютерах * /}
<Строка>
xs = 6
xs = 6

   
  {} 
   
   
  xs = 12 md = 8 
   
  < Столбец xs = {6} md = {4}> 
  xs = 6 md = 4 
   
   
  {} 
   
   
  xs = 6 md = 4 
   
   
  xs = 6 md = 4 
   
   
  xs = 6 md = 4 
   
   
  {} 
   
   xs = 6  
   xs = 6

Свойства точки останова Col также имеют более сложный объект prop form: {span: number, order: number, offset: number} для указания смещений и упорядочивания ts.

Свойство order можно использовать для управления визуальным порядком вашего контента.

Первая, но неупорядоченная

Вторая, но последняя

Третья, но вторая

<Контейнер>
<Строка>
Первый, но неупорядоченный
Второй, но последний
Третий, но второй

Первый, но неупорядоченный

Второй, но последний

Третий, но второй

Свойство order также поддерживает first ( order : -1 ) и последний (порядок : $ columns + 1 ).

Первый, но последний

Второй, но неупорядоченный

Третий, но первый

<Контейнер>
<Строка>
Первый, но последний
Второй, но неупорядоченный
Третий, но первый

Первый, но последний

Второй, но неупорядоченный

Третий, но первый

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

md = 4

md = {{span: 4, offset: 4}}

md = {{span: 3, offset: 3}}

md = {{диапазон: 6, смещение: 3}}

<Контейнер>
<Строка>
md = 4
{`md = {{span: 4, offset: 4}}`}

<Строка>
{`md = {{span: 3, offset: 3}}`}
{`md = {{span: 3, offset: 3}}`}

<Строка>
{`md = {{span: 6, offset: 3}}`}

   
   
   md = 4  
   { `md = {{span: 4, offset: 4}}`}  
   
   
   { `md = {{span: 3, offset: 3}}`}  
   {`md = {{span: 3, offset: 3}} `}  
   
   
   {` md = {{span: 6, offset: 3}} `}

Установка ширины столбца в строке №

Строка позволяет вам указать ширину столбца для 5 размеров точек останова (xs, sm, md, lg и xl).Для каждой точки останова вы можете указать количество столбцов, которые поместятся рядом друг с другом.

<Контейнер>
<Строка xs = {2} md = {4} lg = {6}>
1 из 2
2 из 2

<Строка xs = {1} md = {2}>
1 из 3
2 из 3
3 из 3

1 из 2

2 из 2 < / Col>

1 из 3

2 из 3

3 из 3

Обратите внимание, что ширина столбца Row переопределяет ширину Col , установленную на нижних контрольных точках, при просмотре на больших экранах.Размер будет заменен размером на средних и больших экранах.

<Контейнер>
<Строка md = {4}>
1 из 3
2 из 3
3 из 3

1 из 3

2 из 3

3 из 3

API #

импорт контейнера из 'react-bootstrap / Container' Скопируйте код импорта для компонента контейнера

Имя	Тип	По умолчанию	Описание
as	elementType		Для этого компонента можно использовать настраиваемый элемент
жидкость	`правда` \| `"см"` \| `"мкр"` \| `"lg"` \| `"xl"`	`false`	Позвольте контейнеру заполнить все доступное горизонтальное пространство.
bsPrefix	строка	`'контейнер'`	Измените имя базового класса CSS базового компонента и префикс имен классов модификаторов. Это аварийный люк для работы с сильно настроенными бутстраповыми CSS.

import Row from 'react-bootstrap / Row' Скопировать код импорта для компонента Row

Имя	Тип	По умолчанию	Описание
as	elementType		Для этого компонента можно использовать пользовательский тип элемента.
LG	номер \| {cols: number}		Количество столбцов, которые поместятся рядом друг с другом на больших устройствах (≥992px)
md	number \| {cols: number}		Количество столбцов, которые поместятся рядом друг с другом на средних устройствах (≥768 пикселей)
noGutters	boolean	`false`	Удаляет желоб интервал между `Col` s, а также любые добавленные отрицательные поля.
см	номер \| {cols: number}		Количество столбцов, которые поместятся рядом друг с другом на небольших устройствах (≥576 пикселей)
xl	число \| {cols: number}		Количество столбцов, которые поместятся рядом друг с другом на очень больших устройствах (≥1200 пикселей)
xs	number \| {cols: number}		Количество столбцов, которые будут помещаться рядом друг с другом на очень маленьких устройствах (<576 пикселей)
bsPrefix	string	`'row'`	Измените имя базового класса CSS базового компонента и префикс имен классов модификаторов. Это аварийный люк для работы с сильно настроенными бутстраповыми CSS.

import Col from 'react-bootstrap / Col' Скопировать код импорта для компонента Col

Имя	Тип	По умолчанию	Описание
as	elementType		Для этого компонента можно использовать пользовательский тип элемента.
lg	логический \| «авто» \| номер \| {span: boolean \| «авто» \| число, смещение: число, порядок: «первый» \| «последний» \| number}		Число столбцов, охватываемых на больших устройствах (≥992px)
md	boolean \| «авто» \| номер \| {span: boolean \| «авто» \| число, смещение: число, порядок: «первый» \| «последний» \| number}		Число столбцов, охватываемых на средних устройствах (≥768 пикселей)
sm	boolean \| «авто» \| номер \| {span: boolean \| «авто» \| число, смещение: число, порядок: «первый» \| «последний» \| number}		Число столбцов, охватываемых на небольших устройствах (≥576 пикселей)
xl	boolean \| «авто» \| номер \| {span: boolean \| «авто» \| число, смещение: число, порядок: «первый» \| «последний» \| number}		Число столбцов, охватываемых на очень больших устройствах (≥1200 пикселей)
xs	boolean \| «авто» \| номер \| {span: boolean \| «авто» \| число, смещение: число, порядок: «первый» \| «последний» \| number}		Число столбцов, охватываемых на сверхмалых устройствах (<576 пикселей)
bsPrefix	строка	`'col'`	Изменение имени базового класса CSS базового компонента и префикс имен классов модификаторов. Это аварийный люк для работы с сильно настроенными бутстраповыми CSS.

Bootstrap 4 Grid examples и Flex Grid System Tutorial (2021)

Самым важным элементом любого CSS-фреймворка является сетка. Сетка Bootstrap 4 используется на многих веб-сайтах по всему миру, что делает ее чрезвычайно стабильной. Эта кроссбраузерная поддержка — вот почему вы, вероятно, подумываете об использовании Bootstrap для своего веб-сайта (это было для меня). В этом посте я предоставлю обзор сетки и приведу примеры, которые помогут вам быстро применить ее к своим проектам.

Разделы

Вы раньше использовали Bootstrap?

Если вы использовали предыдущую версию Bootstrap, основными изменениями являются добавление нового уровня сетки xl и переход на flexbox вместо float. Название уровня сетки xl подразумевает размещение в нем больших экранов, но на самом деле все наоборот. Bootstrap 4 добавляет еще один маленький размер экрана и сдвигает все вправо. Эта новая точка останова поможет дать больше контроля маленьким экранам.

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

Какие версии Internet Explorer вам нужно поддерживать?

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

Если у вас нет аналитики для работы, я предлагаю взглянуть на StatCounter, чтобы увидеть самые популярные браузеры в вашей стране. Но по моему опыту, лучше всего иметь четкое представление о вашем идеальном посетителе сайта. Поскольку существует множество факторов, такие инструменты, как StatCounter, не учитываются. Одна из них — это корпоративные среды, которые медленно обновляются до новых браузеров. Например, на моем рабочем месте сейчас установлена Windows 7 с IE8.

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

Таблица выбора версии начальной загрузки

Что такое Flexbox и чем он отличается от Float?

В Bootstrap 3 и на большинстве веб-сайтов единственным способом создания макетов с несколькими столбцами было задание ширины столбцов и использование числа с плавающей запятой. Затем на мобильном устройстве вы просто удалите свойство float и width, чтобы оно превратилось в один столбец.

Демонстрирует, как сетка flexbox регулирует высоту соседних столбцов, а сетка с плавающей запятой — нет. Вверху: плавающие колонны; Внизу: столбцы Flexbox

Теперь с помощью flexbox или гибкого блока вы сможете создавать сложные макеты сетки с большим контролем и гибкостью для адаптации макета при изменении области просмотра.Если вы знакомы с отношениями UL и LI, flexbox очень похож на то, как он имеет подпункты или элементы flexbox внутри родительского контейнера-оболочки. Но поскольку flexbox является свойством отображения, он может применяться к любым родительским и дочерним элементам HTML и не имеет собственного элемента HTML, такого как .

Одна из самых интересных особенностей flexbox — это то, как он выполняет вертикальное выравнивание.

Имейте в виду, Bootstrap — это CSS-фреймворк, основанный на базовом языке CSS.Таким образом, flexbox — это основная технология CSS, которую Bootstrap использует для макета сетки, а не компонент, созданный Bootstrap. Поэтому полезно знать основы работы с flexbox на случай, если вам нужно что-то переопределить.

Bootstrap 4 Книга

и шаблоны для начинающих

Учитесь, шаг за шагом создавая панель администратора CMS и маркетинговую домашнюю страницу.

Купить сейчас

12 Column Bootstrap 4 Flexbox Grid

Итак, теперь, когда вы понимаете flexbox и почему он лучше float для макета, давайте посмотрим, как Bootstrap использует его для своей системы сеток.
Система сеток Bootstrap основана на сетке из 12 столбцов, потому что число 12 делится на 12, 6, 4, 3, 2. Таким образом, размеры столбцов внутри каждой строки должны быть равны 12. Эта математика делает сетку более гибкой для широкий выбор макетов.

Примеры общей сетки:

Сетка с двумя столбцами
.col-sm-6 + .col-sm-6 = 12
Сетка с двумя столбцами золотого сечения
.col-sm-8 + .col-sm-4 = 12
Сетка из 3 столбцов
.col-sm-4 + .col-sm-4 + .col-sm-4 = 12

Я создал эту ручку, в которой есть набор общих структур сетки, которые помогут вам визуализировать, как их построить.

Система сеток Bootstrap состоит из 3 основных частей: CRC

При работе с сеткой из 12 столбцов Bootstrap вы должны помнить о порядке элементов и о том, что всегда есть три части: контейнер C и R ow. , и любое количество столбцов C . CRC.

Если вы хотите, чтобы все содержимое вашей страницы было ограничено максимальной шириной, вам просто понадобится один .контейнер на всю страницу. Затем используйте серию блоков строк с разделителями столбцов для построения вашей сетки. Если в вашем дизайне нет горизонтальных цветовых полос, вы можете установить .container в тег body. Однако существует тенденция иметь горизонтальные цвета фона с максимальным значением ширины содержимого. Я добиваюсь этого эффекта с помощью тега раздела с установленным для него цветом фона.

Знакомы со структурой таблицы HTML? Сетка в Bootstrap 4 очень похожа.

Например:

table> tr> td — это как .container> .row> .col-sm-6

Container — .container или .container-fluid

Это родительский контейнер, который определяет, должны ли столбцы быть во всю ширину или нет.

Row — .row

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

Столбец — .col - * - *

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

Столбцы также имеют уровни сетки, которые сообщают столбцам, как они должны выглядеть в различных точках останова. В приведенном ниже примере я использовал .col-sm-6 , который, по сути, говорит: «Когда размер окна браузера 576 пикселей или выше, сделайте этот столбец охватывающим 6 из 12 столбцов. Для всего, что меньше 576 пикселей, сделайте его полной шириной.«Итак, когда вы объявляете уровень сетки, вы говорите, что он должен быть такого размера для указанного уровня и выше .

Bootstrap 4 Breakpoints

xs = Очень маленький <576px
sm = Маленький ≥576px
md = Средний ≥768px
lg = Большой ≥992px
xl = Большой ≥992px
xl = Большой ≥992px
xl px Очень большой 4 Примеры сеток

Примеры сеток, демонстрирующие разницу между классами .container и container-fluid

Как насчет вложения столбцов в Bootstrap 4?

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

Посмотреть демонстрацию Codepen

Сводка

Что ж, теперь вы должны хорошо разбираться в системе CSS Grid System в Bootstrap 4 и быть уверенными в том, что сможете использовать ее в своем следующем проекте. Он чрезвычайно настраиваемый и помогает более эффективно создавать макет страницы.

Ключевые точки

Использует сетку из 12 столбцов, количество столбцов должно равняться 12
CRC — .container> .row> .col - * - *
Большинству проектов нужен только один .container, если только вы не хотите использовать цветные полосы
Установка уровня сетки, например .col-sm-6 говорит для см и вверх
Столбцы имеют горизонтальное заполнение для создания промежутков между отдельными столбцами, однако вы можете удалить поля из строк и заполнение столбцов с .no-gutters в строке .row.
Столбцы сетки без установленной ширины автоматически будут иметь одинаковую ширину.

Это отрывок из моего краткого руководства по Bootstrap 4, где вы можете узнать, как создать адаптивную домашнюю страницу и панель администратора с помощью Bootstrap 4.

Автор: Джейкоб Летт — Джейкоб — консультант по маркетингу и веб-дизайну, который помогает производители увеличивают свою выручку. В отличие от своих конкурентов, он фокусируется на небольших и последовательных изменениях дизайна веб-сайта для повышения результатов. Недавно он создал тему Industrial HubSpot, чтобы помочь производителям быстро создать свой веб-сайт на платформе HubSpot.
Категория: Учебники
Теги: Bootstrap, Web Design

Bootstrap 4 | Grid System

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

Классы сетки: Система сеток начальной загрузки содержит пять классов, которые перечислены ниже:

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

Компоненты грид-системы:

Контейнеры: Для начальной загрузки требуется содержащий элемент для обертывания содержимого сайта в грид-системе. Слово контейнер используется для содержания элементов строки и элементов строки, содержащих элементы столбца.
Ряды: Ряды должны быть размещены внутри контейнера или контейнера для жидкости для надлежащего выравнивания и заполнения. Строки используются для создания горизонтальных групп столбцов.
Столбцы: Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три столбца col-lg-4.

Пример 1: В этом примере используется бутстрап для создания сетки столбцов одинаковой ширины на всех устройствах и экранах.

Вывод:

Пример 2: В этом примере используется бутстрап для создания адаптивной сетки столбцов одинаковой ширины. Когда размер экрана меньше 576 пикселей, столбцы автоматически накладываются друг на друга.

Вывод:

Запуск на большом экране (рабочий стол, планшеты):
Запуск на маленьком экране (мобильный):

Пример 3: В этом примере используется бутстрап для создания неравных ширина адаптивной сетки столбцов. Когда размер экрана меньше 576 пикселей, столбцы автоматически накладываются друг на друга.

Вывод:

Запуск на большом экране (рабочий стол, планшеты):
Запуск на маленьком экране (мобильный):

Bootstrap 4 Компонент макета карты

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

Сетки

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

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

Причина, по которой мы используем сетку из 12 столбцов, заключается в том, что 12 делится на множество чисел. Скажем, например, если вы хотите, чтобы макет содержимого занимал половину области просмотра каждый, то вы можете использовать 6 столбцов сетки для каждого содержимого.Точно так же, если вам нужен макет из 3 столбцов для вашей страницы, вы можете использовать 4 столбца сетки для своего контента.

Проще говоря, у вас есть 12 столбцов, составляющих вашу страницу. Вам нужен макет, в котором ваш контент, скажем, например, занимает три столбца подряд. Итак, у вас есть 12 сеток на странице, и вы хотите разделить ее на три. Таким образом, вы будете использовать 4 сетки для каждого вашего контента. Достаточно немного арифметики.

Необязательно, чтобы мы использовали только сетки одинаковой ширины.Вы можете смешивать и сопоставлять и создавать столбцы разной ширины. Как и на странице, вы можете создать боковую панель, которая занимает 4 столбца, а остальные 8 столбцов используются для некоторого контента, такого как блог, галерея изображений или панель инструментов.

Адаптивная сетка

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

Система сеток

Bootstrap помогает очень легко и быстро создавать адаптивный макет с помощью классов адаптивных сеток Bootstrap.

Адаптивные точки останова

Начиная с Bootstrap 3, система сеток стала отзывчивой. В Bootstrap 2 сетка по умолчанию была исправлена.Bootstrap 4 внес существенные изменения в систему сеток. Он представил еще один класс точки останова, чтобы включить дополнительные маленькие устройства и flexbox, что упростило создание сеток одинаковой высоты и ширины.

Точки останова — это ширина области просмотра устройства, с которой вы хотите изменить макет. Эти точки останова измеряются в пикселях. Таким образом, если размер экрана устройства превышает определенную точку останова, макет веб-страницы изменяется на наиболее подходящий для обеспечения наилучшего взаимодействия с пользователем.

Примечание: Хотя основные блоки CSS в Bootstrap 4 изменились на em и rem , пиксели используются в ширине контейнера и контрольных точках. это потому, что окна просмотра измеряются в пикселях и не зависят от размера шрифта.

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

Bootstrap 4 представляет новый класс точки останова xl. Так что теперь точкой останова для больших компьютеров будет xl. для среднего рабочего стола будет мд и тд. Таким образом, Bootstrap добавил не дополнительный класс для очень большого рабочего стола, а точку останова для сверхмалых устройств. Итак, класс xs на данный момент — это устройства с размером экрана менее 576 пикселей. Все остальные точки останова просто перескочили на класс.

	Очень маленький <576px	Небольшой ≥576px	Середина ≥768px	Большой ≥992px	Очень большой ≥1200 пикселей
Поведение сетки	По горизонтали всегда	Свернут, чтобы начать, горизонтально над контрольными точками
Макс.ширина контейнера	Нет (авто)	540px	720 пикселей	960px	1140px
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Кол-во столбцов	12
Ширина желоба	30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable	Есть
Смещения	Есть
Заказ колонки	Есть

Базовая структура HTML для создания сетки

Сначала мы создадим строку, в которой разместим наш контент.Эта строка будет разделена на столбцы в соответствии с макетом.

Строка всегда создается внутри контейнера. Контейнер похож на обертку, закрывающую сетку. Вы можете использовать либо класс .container для фиксированной ширины, либо класс .container-fluid для полной ширины. Класс .row создает горизонтальную строку, в которой вы можете разместить свой контент в разных столбцах.

Создание макета с двумя столбцами

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

Итак, у нас есть параграф и заголовок. Этот контент будет находиться внутри контейнера с классом .col-md-6 . Здесь col — это столбец, md определяет, что точка останова является средней, а 6 — это количество столбцов сетки, которые она занимает.

Приведенный ниже код создает строку с двумя столбцами одинаковой ширины.

Заголовок 1

Это пример сетки с двумя равными столбцами

Заголовок 2

Это пример сетки с двумя равными столбцами

Заголовок 1

Это пример сетки с двумя равными столбцами

Заголовок 2

Это пример сетки с двумя равными столбцами

Создание макета из трех столбцов

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

Этот раздел занимает 3 столбца сетки и смещен на 4 столбца

Заголовок 2

Этот раздел занимает 3 столбца сетки

Заголовок 2

Этот раздел занимает 3 столбца сетки и смещен на 4 столбца

Создание вложенной сетки

Класс .hidden - * - down используется для скрытия содержимого ниже заданной точки останова. Так, например, .hidden-md-down скрывает контент, если ширина экрана устройства составляет 768 пикселей или меньше.

Класс .hidden - * - up используется для скрытия содержимого выше заданной точки останова. Таким образом, .hidden-md-down скрывает контент, если ширина экрана устройства превышает 768 пикселей.

Чтобы отобразить содержимое между интервалом точек останова, вы можете объединить служебные классы .hidden - * - вверх и .hidden - * - вниз . Например, .hidden-md-down.hidden-xl-up сделает содержимое видимым только для больших окон просмотра.

Контент

.hidden-XS-вниз	Контент скрыт для сверхмалых устройств и виден для малых, средних, больших и очень больших устройств.
.hidden-sm-вниз	скрыт для небольших и сверхмалых устройств. Видно на средних, больших и очень больших устройствах.
.hidden-md-down	скрыт для устройств со средним и нижним окном просмотра, виден только для больших и очень больших устройств.
.hidden-LG-вниз	виден на большом устройстве. Контент скрыт для устройств большого и меньшего размера.
.hidden-XL-вниз	Контент скрыт на всех устройствах.
.скрытый-xs-up	Контент скрыт на всех устройствах.
.hidden-sm-up	Контент скрыт для всех устройств, кроме очень маленьких.
.hidden-md-up	содержимое видно для маленьких и очень маленьких устройств и скрыто для средних, больших и очень больших устройств.
. Скрытый-lg-up	: содержимое скрыто только для больших и очень больших устройств.
.hidden-XL-вверх	скрыт только для очень больших устройств.

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

Заголовок 1

Этот раздел скрыт для устройств среднего и меньшего размера.

Заголовок 2

Этот раздел виден на всех устройствах.

Заголовок 3

Этот раздел скрыт для больших и очень больших устройств.

Заголовок 1

Этот раздел скрыт для устройств среднего и меньшего размера.

Заголовок 2

Этот раздел виден на всех устройствах.

Заголовок 3

Этот раздел скрыт для больших и очень больших устройств.

Классы печати

Подобно адаптивным служебным классам, существуют служебные классы, которые делают определенный контент видимым при печати и скрытым в браузере.

.visible-print-block	содержимое скрыто в браузере и отображается при печати как блочный элемент.
.visible-print-inline	содержимое скрыто в браузере и отображается при печати как встроенный элемент.
.видимая печать встроенного блока	— контент, скрытый в браузере и видимый в элементе print и inline-block.
. Скрытая печать	контент виден в браузере и скрыт при печати.

Bootstrap Grid: освоение наиболее полезных свойств Flexbox

В этой статье я познакомлю вас с ключевыми CSS-классами Bootstrap для создания макетов с помощью системы сеток Bootstrap.

Bootstrap 4 использует Flexbox в качестве основы для своей грид-системы. Я объясню свойства CSS Flexbox, которые лежат в основе функциональности новой сетки, и определю, как работают служебные классы Bootstrap flex, чтобы помочь вам быстро и безболезненно создавать потрясающие макеты.

Что такое Flexbox?

Давайте сначала познакомим вас с Flexbox. Он расшифровывается как flex ible box и представляет собой передовую систему макета CSS, которая упрощает создание макетов для динамических или неизвестных размеров экрана.(Гибкий контейнер имеет возможность настраивать и контролировать размер своих дочерних элементов для адаптации к различным окнам просмотра.)

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

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

Введение в сеточную систему Bootstrap

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

Среди новых функций последней системы сеток Bootstrap вы найдете точку останова сетки xl (очень большая), соответствующую очень большому размеру экрана, и использование Flexbox вместо плавающих элементов в качестве основного механизма компоновки.

Ключевые классы системы сеток начальной загрузки

Вы можете создать макет, используя систему сеток Bootstrap, применив несколько классов Bootstrap: .container , .row и .col - * - * . (Первый * в .col - * - * необходимо заменить на спецификатор точки останова, например xs, sm, md, lg, xl , а второй * должен быть заполнен размером диапазона столбца. Сумма всех столбцов должна быть равна 12.)

Давайте теперь посмотрим на основные компоненты сетки Bootstrap.

Контейнер

Контейнер — это внешняя оболочка для макета сетки. Это div , который имеет либо класс .container для фиксированной ширины, либо .container-fluid для 100% полной ширины.

ряд

Строка служит логическим контейнером для столбцов.

Столбец

Столбец — это то, что образует блок в сетке. Он должен находиться в ряду.

Система сеток Bootstrap предоставляет следующие дополнительные классы столбцов:

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

Вам не нужно добавлять несколько классов, если вы хотите указать одинаковую ширину для разных размеров экрана; просто добавьте класс с наименьшей точкой останова.Так, например, вместо .col-sm-6 и .col-md-6 нужно применять только .col-sm-6 .

Bootstrap Grid Layouts с Flexbox против Float

Благодаря Flexbox вы можете легко добиться таких вещей, как столбцы одинаковой высоты или одинаковой ширины, чего раньше можно было добиться только с помощью CSS-хаков.

CSS float и clearfix методы построения макетов были среди таких приемов, которые затрудняли построение и отладку сложных макетов.

Например, рассмотрим макет с двумя столбцами. Если вы создадите этот макет с помощью Bootstrap 3, он будет выглядеть так:

См. Макет Pen Bootstrap 3 с двумя столбцами от SitePoint (@SitePoint) на CodePen.

Если вы создадите тот же макет с помощью Bootstrap 4, это то, что у вас есть:

См. Макет Pen Bootstrap 4 с двумя столбцами от SitePoint (@SitePoint) на CodePen.

С Bootstrap 4 и его сеткой на основе flexbox вы получаете более реалистичный столбец (как в таблице), поскольку столбцы в одной строке будут иметь одинаковую высоту.

Давайте займемся макетами столбцов одинаковой ширины. Благодаря Flexbox вы можете легко разделить доступное пространство между несколькими столбцами в одной строке. Если вы создаете макет сетки с несколькими столбцами без указания ширины столбца (например, с использованием классов .col- * ), доступное пространство будет автоматически и поровну разделено между этими столбцами.

Вот простой и быстрый пример:

  
  
    .col
  
  
    .Col
  
  
    .col
  
  
    .col

Каждый из четырех экземпляров .col-sm будет автоматически иметь ширину 25% от малой точки останова и выше.

С минимальным стилем, вот что вы получите:

Flexbox с автоматическими полями

Сочетание Flexbox с автоматическими полями дает несколько интересных трюков.

Например, посмотрите на макет выше: вы можете расположить элементы справа от элемента, добавив Bootstrap .mr-auto класс к элементу, что означает margin-right: auto; в обычном CSS или также расположите некоторые элементы слева от указанного элемента с помощью класса Bootstrap .ml-auto ( margin-left: auto; в обычном CSS). Вы можете увидеть это как перемещение элемента с классами .mr-auto или .ml-auto в крайнее правое или крайнее левое положение соответственно, а другие элементы в противоположном направлении.

См. Трюки Flexbox Pen Bootstrap 4 с автоматическими полями от SitePoint (@SitePoint) на CodePen.

Вы можете достичь этого результата как по горизонтали, так и по вертикали. Чтобы добиться того же поведения при перемещении гибких элементов вверх или вниз (а не вправо или влево), вам необходимо использовать mb-auto ( margin-bottom: auto; ) и mt-auto . ( margin-top: auto; ), установите flex-direction на column и примените класс align-items- (start | end) .

См. Трюки Flexbox Pen Bootstrap 4 с автоматическими полями от SitePoint (@SitePoint) на CodePen.

Полезные концепции Flexbox для работы с служебными классами Bootstrap Flex

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

Например, Bootstrap теперь применяет свойство display: flex к своим элементам контейнера сетки. Кроме того, Bootstrap позволяет превратить любой HTML-контейнер в гибкий контейнер, просто применив класс .d-flex к выбранному элементу.

Также доступны адаптивные классы, такие как .d-sm-flex и .d-md-flex и т. Д.

Однако, если вы не знаете, что такое гибкий контейнер и как он влияет на его дочерние элементы, использование служебных классов гибкости Bootstrap может быть немного проблематичным. То же самое можно сказать обо всех других гибких утилитах, таких как .flex-row , .flex-row-reverse , .flex-column и .flex-column-reverse .

Давайте кратко рассмотрим, как работает Flexbox.Скорее всего, вы найдете это полезным при работе с служебными классами Bootstrap flex.

Гибкие контейнеры

Flexbox определяет гибкий контейнер, применяя свойство display со значениями flex или inline-flex :

  .mycontainer {
  дисплей: гибкий;
}

Служебный класс Bootstrap flex для создания гибкого контейнера — d-flex .

Гибкие элементы

Каждый прямой дочерний элемент гибкого контейнера превращается в гибкий элемент.

Вы можете определить направление гибких элементов, используя свойство flex-direction CSS с одним из следующих значений: row , row-reverse , column и column-reverse .

ряд устанавливает горизонтальное направление слева направо
row-reverse устанавливает горизонтальное направление справа налево
столбец устанавливает вертикальное направление сверху вниз
обратный столбец устанавливает вертикальное направление снизу вверх.

Bootstrap использует классы flex-row , flex-row-reverse , flex-column и flex-column-reverse для определения направления гибких элементов.

Кроме того, Flexbox позволяет вам явно изменять визуальный порядок определенных гибких элементов с помощью свойства order , которое по умолчанию равно нулю:

  .item {
  заказ: 1;
}

Bootstrap предлагает свои собственные служебные классы для создания гибкого элемента первым, последним или для сброса свойства order к порядку DOM по умолчанию.Например, чтобы элемент гибкости отображался первым по отношению к его братьям и сестрам, добавьте в разметку order-1 .

Выравнивание гибких элементов

Flexbox позволяет быстро и легко выравнивать гибкие элементы любым удобным для вас способом.

Например, свойство justify-content в гибком контейнере позволяет выровнять гибкие элементы по главной оси (ось x по умолчанию, которую можно изменить, задав для flex-direction значение столбец ). Доступные значения:

flex-start : это начальное значение, элементы будут выстраиваться в начале контейнера
flex-end выравнивает элементы по концу родительского элемента
центр выравнивает элементы по центру контейнера
space-between создает пространство между гибкими элементами после их размещения
space-around создает равное количество пространства справа и слева от каждого гибкого элемента.

Служебные классы начальной загрузки для применения значений justify-content к элементам:

justify-content-start
justify-content-end
justify-content-center
justify-content-между
justify-content-around

Свойство align-items Flexbox позволяет изменять выравнивание гибких элементов по поперечной оси.(Если вы установите главную ось горизонтально, поперечная ось будет вертикальной, и наоборот.)

Возможные значения для align-items :

stretch : это начальное значение, которое заставляет гибкие элементы растягиваться до высоты их самых высоких родственных элементов
flex-start выравнивает элементы в начале гибкого контейнера
гибкий конец выравнивает элементы на конце гибкого контейнера
center отвечает за центрирование гибкого элемента внутри его контейнера.

Вы можете быстро применить это поведение с помощью следующих классов Bootstrap:

выровнять элементы-стрейч
align-items-start
выровнять элементы-конец
выровнять элементы по центру

Посмотрите на код в этой ручке, чтобы увидеть пример того, как вы можете применить классы утилит Bootstrap flex:

См. Раздел Pen Bootstrap 4 Vertical Alignment by SitePoint (@SitePoint) на CodePen.

Вы можете найти другие доступные утилиты в документации Bootstrap flex.

`Заключение`

В этой статье мы рассмотрели, как Flexbox делает систему сеток Bootstrap более универсальной с помощью таких функций, как автоматические макеты одинаковой ширины и столбцы одинаковой высоты. Затем мы рассмотрели некоторые свойства Flexbox, которые являются ключевыми для освоения служебных классов Bootstrap flex и получения максимальной отдачи от их мощных возможностей компоновки.

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

`m-spyratos / bootstrap-4-grid: система сеток Bootstrap 4 и утилиты компоновки.`

Bootstrap v4.4.1 сеточная система и утилиты компоновки.

`Что входит`

`Почему?`

Вот что вы получите, что Bootstrap 4 в настоящее время не предоставляет из коробки:

Если вам не нужно ничего из вышеперечисленного, Bootstrap 4 уже включает версию только для сетки с ее Пакет Bootstrap CSS и JS.

`Как использовать`

файлов Sass и CSS готовы к использованию в вашем проекте.

`CSS`

Довольно просто. Просто получите css / grid.min.css или css / grid.css и добавьте его в свой проект.

`Sass`

Вам нужно будет включить в свой проект все содержимое папки scss . Затем просто импортируйте grid.scss в файл sass вашего проекта.

`НПМ`

  npm установить bootstrap-4-grid

`Пряжа`

 пряжа  добавить бутстрап-4-сетка

`Поддержка браузера`

Мы используем autoprefixer для добавления префиксов к файлам css .По умолчанию поддерживаются последние 2 версии для каждого основного браузера. Чтобы изменить это, выполните настройку инструкции ниже.

ПРИМЕЧАНИЕ. Файлы Sass не содержат никаких префиксов браузера. Если вы включите их в свой проект, вам нужно будет использовать свой собственный инструмент css для добавления префиксов для разных браузеров. Если вы используете Angular CLI, тогда autoprefixer включен по умолчанию и тебе не о чем беспокоиться.

`Параметры сети`

Параметры сетки расположены внутри scss / grid.scss файл. Если вы собираетесь использовать файлы sass в ваш проект, достаточно их изменить. Если вы собираетесь использовать файлы CSS, вам необходимо: измените параметры, а затем скомпилируйте. Дополнительные сведения см. В приведенных ниже инструкциях по настройке.

ПРИМЕЧАНИЕ: Если вы используете файлы sass и хотите, чтобы ваши параметры не были переопределены обновлением, затем скопируйте и вставьте параметры в свой собственный файл sass и включите их перед файлом grid .

`Настройка`

Вы можете откатить собственную сборку и / или изменить поддержку браузера.

`Требования`

Затем установите зависимости:

  npm установить

`Изменить поддержку браузера`

Чтобы изменить поддержку браузера по умолчанию (последние 2 версии на данный момент), вам необходимо сначала изменить запрос в файле browserlist , расположенном в корне этого проекта.