Bootstrap grid: Grid system · Bootstrap

Почему 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.

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

1. Каждая строчка должна быть с отдельным тэгом <div> .
2. Для обозначения макета должны использоваться имена классов (col-xs-2).
3. Когда этот шаблон усложняется, 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 Grid System

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

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

Если вы не хотите использовать все 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 работает на различных размерах экрана.

Примеры

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

преимущества и недостатки сеток, возможность объединения

От автора: до того, как я открыл для себя CSS Grid, я часто использовал сетку Bootstrap. Сетка Bootstrap была разумным решением для многих проблем с адаптивностью, которые у меня в то время возникали. Затем я обнаружил CSS Grid. Преимущество CSS Grid над Bootstrap — это ее двумерная природа (возможность использовать строки и столбцы), а не одна строка в Bootstrap.

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

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

Ссылка на codepen.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

В приведенном выше коде я создал вложенную в section сетку с классом .section из четырех столбцов. Я на самом деле хочу, чтобы четыре столбца занимали половину ширины экрана на устройствах менее 998 пикселей и располагались друг над другом на небольшом экране для удобства чтения. Но CSS Grid не дает мне такой возможности. Они остается такими же, как вы можете видеть на изображении ниже.

для большого экрана

маленький экран (мобильное представление)

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

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Сетка Bootstrap позволяет размещать в строке до 12 столбцов. На большом экране четыре столбца располагаются рядом. Каждый столбец занимает 3 единицы из 12 столбцов.

большой экран > 1000 пикселей

планшеты

На среднем экране столбцы теперь занимают 6 единиц, общие 12 столбцов поделить на два столбца.

мобильное представление

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

Автор: Barri Sambaris

Источник: //hackernoon.com

Редакция: Команда webformyself.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

Содержимое · Bootstrap v5.0

Предварительно скомпилированный Bootstrap

После загрузки распакуйте сжатую папку, и Вы увидите что-то вроде этого:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

Это самая простая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS (bootstrap.*), а также скомпилированные и минифицированные CSS и JS (bootstrap.min.*). source maps (bootstrap.*.map) доступны для использования с инструментами разработчика некоторых браузеров. Связанные файлы JS (bootstrap.bundle.js) и минифицированные bootstrap.bundle.min.js) включают Popper.

Файлы CSS

Bootstrap включает несколько вариантов для включения некоторых или всего нашего скомпилированного CSS.

Файлы JS

Точно так же у нас есть варианты для включения части или всего нашего скомпилированного JavaScript.

Исходный код Bootstrap

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

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.0/
│              └── examples/
├── js/
└── scss/

scss/ и js/ являются исходным кодом для наших CSS и JavaScript. Папка dist/ включает все, что указано в предварительно скомпилированном разделе загрузки выше. В папке site/docs/ находится исходный код нашей документации и использование Bootstrap в папке examples/. Кроме того, любой другой включенный файл обеспечивает поддержку пакетов, информацию о лицензии и разработку.

Создание Bootstrap-сетки в Figma

Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:

Результат этого урока (готовые сетки Figma) вы можете скачать здесь:

Скачать Bootstrap Figma

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

Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном «Desktop»:

Здесь у нас создается фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберемся подробнее.

На панели справа найдем «Layout grid» и добавим сетку со следующими параметрами:

Сетка Bootstrap с настройками по умолчанию имеет общую ширину 1140 пикселей на больших разрешениях (Extra large, см. документацию), но при создании сетки в Figma следует учитывать тот факт, что CSS-сетка имеет дополнительные отступы слева и справа по 15px, а в программе этих отступов нет, можно указывать только общее значение Gutter между колонками. Соответственно, ширина сетки в Figma будет иметь общую ширину 1100px (1140px — 15px — 15px). Размер одной ячейки в этом случае рассчитывается следующим образом. Во-первых, у нас есть 12 промежутков по 30px (11 по 30px в самой сетке и 15px + 15px по бокам). Общая ширина всех отступов сетки составляет 12 * 30 = 360px. Теперь вычтем из общей ширины сетки Bootstrap в CSS ширину всех отступов: 1140px — 360px = 780px. Это общая ширина всех колонок без промежутков. Далее делим общую ширину всех колонок на 12 и получаем ширину одной колонки в системе сеток Bootstrap на самых больших разрешениях: 780px / 12 = 65px.

Обратите внимание в «Type» мы указали «Center» – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придется переделывать.

Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим еще одну сетку (Rows) и зададим следующие значения:

Здесь мы указываем «Count» — «Auto» для того, чтобы вся доступная область выбранного фрейма заполнялась сеткой. Для того, чтобы сетка не была такой контрастной и не мешала работе над дизайном, я обычно прибираю значение непрозрачности цвета «Color» до 5%.

Обратите внимание, что «Type» мы можем указать как «Center» или «Top» – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно «Top», чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.

В качестве «Gutter» и «Height» мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров. Экспериментируйте.

Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определен наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1.65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения «Gutter» и «Height» для горизонтальной сетки в 13px:

На панели справа найдем секцию «Frame» в Figma, укажем высоту макета 3500 (H) и перейдем к созданию сетки для следующего разрешения.

При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):

Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):

Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:

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

Отлично! Переходим к созданию сетки для следующего разрешения. Создаем новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не «схлопывается», контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.

Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.

И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.

Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ «Bootstrap-Figma». Откройте его.

Для того, чтобы включить или отключить сетки в Figma, воспользуйтесь горячими клавишами Ctrl + Shift + 4.

Любой из фреймов документа «Bootstrap-Figma» вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

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 частей строки:

<div>
   <div>.col-xs-2</div>
   <div>.col-xs-4</div>
   <div>.col-xs-6</div>
</div>

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

<div>
    <div>.col-xs</div>
    <div>.col-xs</div>
    <div>.col-xs</div>
</div>

Столбцы без размера в сетке 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 | Кэрол Скелли | WDstack

Почему в Bootstrap 12 столбцов?

Причина, по которой Bootstrap имеет сетку из 12 единиц (вместо 10, 16 и т. Д.), Состоит в том, что 12 равномерно делятся на 6 (половинки), 4 (четверти) и 3 (трети). Это значительно упрощает адаптацию к различным макетам. Столбцы сетки Bootstrap идентифицируются различными классами CSS col- (точка останова) — (единицы). Так, например, col-md-3 будет столбцом, занимающим 3 из 12 единиц (или 25%) в строке.

Чтобы включить или «установить» ширину столбца в макете, просто используйте соответствующий класс col — * — * в разметке HTML. Столбцы занимают процентную ширину родительского контейнера.

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

• xs — для экрана с наименьшей шириной экрана , например смартфонов <768 пикселей
• см — для экрана с малой шириной экрана , например для смартфонов и планшетов > = 768 пикселей
• md — для средняя ширина экрана , как у планшетов и ноутбуков > = 992 пикселей
• lg — для больших размеров экрана , таких как настольные компьютеры > = 1200 пикселей

В предстоящей сетке Bootstrap 4 будет добавлена ​​новая точка останова xl в подходят для самых широких экранов рабочего стола с высоким разрешением.Различные точки останова комбинируются с блоками столбцов для создания различных макетов столбцов на разных устройствах. Например, col-md-3 будет иметь ширину 25% на экранах среднего размера, а затем вы можете добавить col-xs-6, чтобы сделать тот же столбец шириной 50% на самых маленьких экранах.

Чтобы включить или «использовать» размер сетки, вы просто указываете его, используя соответствующий класс col — * — * в разметке HTML. Например,

шириной 3 единицы на средних экранах …

 
.. 
 

6 единиц шириной на маленьких экранах …

 
 .. 
 

Объедините классы, чтобы использовать изменение ширины столбцов в разной сетке. размеры…

 
 .. 
 

Ключевые моменты , о которых следует помнить о точках останова и размерах сетки:

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

  фактически то же самое, что

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

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

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

Перенос столбцов

В некоторых адаптивных сценариях вы увидите, что необходимо иметь столбцов, превышающих 12 единиц в одном элементе .row. Рассмотрим, например, макет, в котором нам нужно 3 столбца на больших устройствах и 2 столбца на меньших устройствах :

Как работает сеточная система Bootstrap

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

В Интернете Bootstrap — это фундаментальная структура или скелетная поддержка, более известная как каркас, представляющий собой динамический, отзывчивый, ориентированный на мобильные устройства интерфейсный каркас, используемый для более быстрой и простой веб-разработки.Это набор предварительно написанных CSS и JS, которые можно сразу включить в любой веб-сайт, чтобы получить элементы автоматического стиля, такие как заголовки, абзацы, кнопки, стили изображений и т. Д., А также такие функции, как предупреждения, карусели, раскрывающиеся меню и т. Д. назвать несколько.

Зачем использовать Bootstrap?

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

1. Более быстрая и простая разработка:
Фреймворк Bootstrap действительно ускоряет и упрощает разработку в Интернете, поскольку он готов к развертыванию.

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

3. Интерфейс, ориентированный на мобильные устройства:
Люди в основном используют мобильные устройства для просмотра веб-страниц, поэтому совместимость веб-сайта с мобильными экранами является очень важным аспектом в настоящее время. Bootstrap был разработан с упором на мобильные устройства.

4. Реализация без ошибок:
Реализация будет иметь очень минимальную вероятность появления каких-либо ошибок из-за предварительно написанных сценариев CSS и JavaScripts.

5. Модульный:
Пользователи могут выбрать использование всех или только тех, которые им требуются. Пользователь может выбрать загрузку только части или всех ее частей за раз, например, загрузку только bootstrap.min.css или bootstrap.bundle.js или загрузку обоих одновременно.

Как работает Bootstrap?

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

13-я сетка сдвигается на новую строку

. Bootstrap классифицирует размеры экрана от очень маленьких до очень больших на основе пикселей. Ниже представлена ​​таблица различных размеров экрана.

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

Расположение сеток меняется при изменении размера экрана.

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

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

Исправлено: внезапно изменяется при достижении установленных точек останова.
Жидкость: без резких изменений. Переходы бесшовные.

2. Строка:
Строки относятся к горизонтальному разделению экрана. Строки в бутстрапе имеют отрицательное поле в 15 раз с каждой стороны.

3. Столбец:
Столбцы — это вертикальное деление экрана. 15-кратное заполнение столбцов помогает сохранить содержимое внутри столбцов, где оно должно быть.

4. Вложенность:
Вложенность — это когда мы помещаем элементы внутрь элементов.И строки, и столбцы могут быть вложенными, например, строки внутри строк и столбцы внутри столбцов.

Вложенные строки внутри столбцов.

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

5. Смещения:
Они используются для добавления дополнительного промежутка между контейнером и содержимым. Смещения будут вести себя по-разному для первого и второго столбца из-за отрицательных полей в строках.

6. Push / Pull:
Push / Pull переворачивает элементы слева направо, что является одним из ключевых аспектов адаптивного веб-сайта.

Сдвиг

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

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

Понимание системы сеток Bootstrap 3 — Scotch.io

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

Разница

Самым интересным изменением для меня стала разница в сетке . Bootstrap 2 обслуживал два разных размера браузеров (настольный и мобильный). С Bootstrap 3 вы теперь создаете в первую очередь с учетом мобильных устройств, а система сеток позволяет вам создавать различных систем сетки на основе размера браузера .

Бутстрап 2

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

Бутстрап 3

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

Допустим, вам нужен сайт, на котором есть:

• 1 столбец на сверхмалых устройствах
• 2 столбца на малых И средних устройствах
• 4 колонки на больших устройствах

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

 

    

        Это часть нашей сетки.
    
    

        Это часть нашей сетки.
    
    

        Это часть нашей сетки.
    

        Это часть нашей сетки.
    

 
 

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

Мы объясним различные размеры сетки и способы их создания, а затем покажем примеры.

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

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

Начать с JavaScript
бесплатно!

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

Размеры по умолчанию для сетки начальной загрузки

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

Запросы загрузочного носителя и точки останова

Адаптивные утилиты

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

• .visible-xs
• .visible-sm
• .visible-md
• .visible-LG
• .hidden-xs
• .скрытый-см
• .hidden-md
• .hidden-LG

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

Примеры

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

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

Простой: большой настольный компьютер против мобильного

Допустим, вы хотели, чтобы на сайте было 1 столбец на сверхмалых (телефон) и маленьких (планшеты) устройствах, 2 столбца на средних (средних настольных) устройствах и 4 столбца на больших (настольных) устройствах.

Большие устройства!

Средние устройства!

Очень маленькие и маленькие устройства

Большие устройства!

Средние устройства!

Очень маленькие и маленькие устройства

Большие устройства!

Средние устройства!

Очень маленькие и маленькие устройства

Большие устройства!

Средние устройства!

Очень маленькие и маленькие устройства

Вот код для этого примера:

 

    

        
 Большие устройства! 
        
 Средние устройства! 
        
 Очень маленькие и маленькие устройства 
    
    

        
 Большие устройства! 
        
 Средние устройства! 
        
 Очень маленькие и маленькие устройства 
    
    

        
 Большие устройства! 
        
 Средние устройства! 
        
 Очень маленькие и маленькие устройства 
    
    

        
 Большие устройства! 
        
 Средние устройства! 
        
 Очень маленькие и маленькие устройства 
    

 
 

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

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

Я вторичная боковая панель, которая отображается только на БОЛЬШИХ устройствах.

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

 

    

        Я главное содержание.
    
    

        Я главная боковая панель.
    
    

        Я вторичная боковая панель, которая отображается только на БОЛЬШИХ устройствах.


 
 

Advanced: разная сетка для каждого размера

Это будет более сложный пример.Предположим, что ни в какой точке нашей сетки мы не хотим, чтобы все наши столбцы складывались в стопку. Для очень маленьких устройств нам нужны 2 столбца. Для малых устройств нам нужно 3 столбца. Для средних устройств нам нужно 4 столбца. Для больших устройств нам нужно 6 столбцов (один, который отображается только на больших устройствах).

Теперь вы получите дрель. Давайте сразу перейдем к примеру и коду.

Я виден только на больших устройствах!

 

    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

        Я виден только на больших устройствах!
    

 
 

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

Это Gridtastic!

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

Понравилась эта статья?

Подпишитесь на @chris__sev в Twitter

style-bootstrap-grid — npm

Кредиты

Этот модуль основан на модуле styled-components.

Этот модуль во многом вдохновлен великолепной работой, проделанной над модулем response-bootstrap.

Этот модуль также основан на Twitter Bootstrap v4.1.3 bootstrap-grid.css .
CSS, предоставленный для стилизованной сетки начальной загрузки, не мой.

Для получения дополнительной информации о том, как работает эта сеточная система (я имею в виду такие классы, как контейнеры, row, col, offset, push) , обратитесь к официальной документации по макету Twitter Bootstrap.

Установить

npm i -S style-bootstrap-grid

Предпосылки

npm i -S react-styled-components

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

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

 // app.js

импортировать {BaseCSS} из 'style-bootstrap-grid';

экспорт по умолчанию (реквизиты) =>
 <Что угодно>
    
 ; 

Вы также можете ввести свой собственный CSS, например:

импортировать {BaseCSS} из 'style-bootstrap-grid';

const customCSS = `
  тело {
    красный цвет;
  }
`;

экспорт по умолчанию (реквизиты) =>
 <Что угодно>
    
 ; 

По сути, BaseCSS принимает строковую опору и добавляет к этой строке базовый CSS макета начальной загрузки по умолчанию.

CSS макета начальной загрузки по умолчанию:

 html {
  -webkit-box-sizing: border-box;
          размер коробки: рамка-рамка;
  -ms-overflow-style: полоса прокрутки;
}

*,
*::до,
*::после {
  -webkit-box-sizing: наследовать;
          размер коробки: наследовать;
} 

Основы

 импортировать React из React;
import {Container, Row, Col} из 'styled-bootstrap-grid';

экспорт по умолчанию (реквизиты) =>
 <Что угодно>
    <Контейнер>
      <Строка>
        
            Макет Hello Bootstrap
        
      
    
    <Контейнерная жидкость>
      <Строка>
        
            Макет Hello Bootstrap Fluid
        
      
    
 ; 

Продвинутый

Водосточный желоб по индивидуальному заказу

Пакет предоставляет GridThemeProvider , который допускает несколько настраиваемых свойств тем.С этим провайдером вы можете:

• Определить пользовательские точки останова
• Изменить значение по умолчанию для контейнера слева и справа
• Измените значение по умолчанию для поля строки слева и справа
• Измените значение по умолчанию для поля Col слева и справа

GridThemeProvider может быть обернут (или обернут) style-component ThemeProvider .

Пример:

 импортировать React из React;
импортировать ReactDOM из react-dom;
импортировать {GridThemeProvider} из 'style-bootstrap-grid';
импортировать {ThemeProvider} из 'стилизованных-компонентов';

импортировать приложение из './ что угодно / приложение / папка ';

const gridTheme = {
  gridColumns: 24, // по умолчанию 12
  точки останова: {// значения по умолчанию ниже
    XXL: 1440,
    xl: 1200,
    LG: 992,
    мкр: 768, г.
    см: 576,
    хз: 575,
    // или вы можете использовать псевдонимы
    // veryGiant: 1440,
    // гигант: 1200,
    // рабочий стол: 992,
    // планшет: 768,
    // телефон: 576,
    // меньше: 575,
  },
  ряд: {
    padding: 10, // по умолчанию 15
  },
  col: {
    padding: 5, // по умолчанию 15
  },
  container: {
    padding: 0, // по умолчанию 15
    maxWidth: {// значения по умолчанию ниже
      XXL: 1141,
      XL: 1140,
      lg: 960,
      мкр: 720,
      см: 540,
      хз: 540,
      // или вы можете использовать псевдонимы
      // veryGiant: 1141,
      // гигант: 1140,
      // рабочий стол: 960,
      // планшет: 720,
      // телефон: 540,
      // меньше: 540,
    },
  },
};
const styledTheme = {
  mainColor: 'фиолетовый',
}

ReactDOM.оказывать(
  
    
      <Приложение />
    
  ,
  document.getElementById ('корень')
); 

MediaTypes

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

 импортировать стили из 'styled-components';
импортировать {медиа} из 'style-bootstrap-grid';

const CustomDiv = в стиле.div`
  черный цвет;
  $ {media.smaller`
    цвет: зеленый;
  `}
  $ {media.xs`
    цвет: зеленый;
  `}
  $ {media.phone`
    цвет синий;
  `}
  $ {media.sm`
    цвет синий;
  `}
  $ {media.tablet`
    красный цвет;
  `}
  $ {media.md`
    красный цвет;
  `}
  $ {media.desktop`
    цвет: фиолетовый;
  `}
  $ {media.lg`
    цвет: фиолетовый;
  `}
  $ {media.giant`
    цвет: желтый;
  `}
  $ {media.xl`
    цвет: желтый;
  `}
  $ {media.veryGiant`
    оранжевый цвет;
  `}
  $ {media.xxl`
    оранжевый цвет;
  `}
`;

экспорт по умолчанию CustomDiv; 

Использование этого медиа-объекта поможет вам создавать медиа-запросы, которые будут соответствовать тому же принципу, что и Bootstrap.

Определение реквизита

GridThemeProvider

(*)

const gridTheme = {
  gridColumns: 12, // по умолчанию 12
  точки останова: {// значения по умолчанию ниже
    XXL: 1440,
    xl: 1200,
    LG: 992,
    мкр: 768, г.
    см: 576,
    хз: 575,
    // или вы можете использовать псевдонимы
    // veryGiant: 1440,
    // гигант: 1200,
    // рабочий стол: 992,
    // планшет: 768,
    // телефон: 576,
    // меньше: 575,
  },
  ряд: {
    padding: 10, // по умолчанию 15
  },
  col: {
    padding: 5, // по умолчанию 15
  },
  container: {
    padding: 0, // по умолчанию 15
    maxWidth: {// значения по умолчанию ниже
      XXL: 1141,
      XL: 1140,
      lg: 960,
      мкр: 720,
      см: 540,
      хз: 540,
      // или вы можете использовать псевдонимы
      // veryGiant: 1141,
      // гигант: 1140,
      // рабочий стол: 960,
      // планшет: 720,
      // телефон: 540,
      // меньше: 540,
    },
  },
} 

Контейнер

Плюс те, которые унаследованы от styled-components div .

Ряд

Плюс те, которые унаследованы от styled-components div .

Col

Плюс те, которые унаследованы от styled-components div .

Выполнить пример

Для запуска примера

1. Откройте терминал и перейдите в каталог example с cd <путь к папке styled-bootstrap-grid> / example
2. Установите зависимости примера с пряжей
3. Бег Начало пряжи

Зависимости

todo

• полная веб-документация

Есть еще идеи?
Пожалуйста, оставьте предложение.

Bootstrap Grid System — Tutlane

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

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

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

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

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

• .col- *
• .col-sm- *
• .col-md- *
• .col-lg- *
• .col-xl- *

Здесь звездочка ( * ) — это ширина диапазона столбца от 1 до 12 . В следующей таблице показано, как классы системы сетки будут работать на нескольких устройствах.

Структура сетки начальной загрузки

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

Если вы заметили приведенный выше код, мы создали макет сетки, указав строки и столбцы в пределах .container . Здесь первая звездочка ( * ) будет указывать на отзывчивость, и это должно быть либо sm, md, lg, либо xl. Вторая звездочка ( * ) будет обозначать число, которое должно быть от 1 до 12 для каждой строки.

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

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

Макет сетки начальной загрузки с отзывчивыми тремя столбцами

Ниже приведен пример создания адаптивного макета с тремя столбцами для поддержки устройств с шириной экрана более 576 пикселей в начальной загрузке.

Live Preview

col-sm-4
col-sm-4
col-sm-4

col-sm-2
col-sm-4
col-sm-6

col-sm- 2
col-sm-5
col-sm-5

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

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

Макет сетки начальной загрузки с автоматическими столбцами

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

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

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

Live Preview

col 1
col 2
col 3

col 1
col 2

col 1

Если вы посмотрите на приведенный выше пример, мы создали столбцы только с расширением.col класс. Таким образом, сеточная система начальной загрузки будет одинаково настраивать размер столбцов в зависимости от размера экрана устройства.

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

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

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

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

Live Preview

col 1
col 2
col 3

col 1
col 2

col 1

Если вы посмотрите на приведенный выше пример, мы определили ширину для одного столбца ( .col-sm-6 ) в первой строке, а остальные столбцы будут регулироваться автоматически.

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

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

Макет сетки начальной загрузки со столбцами переменной ширины

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

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

Live Preview

col 1
Содержимое столбца переменной ширины
col 2

col 1
col 2
Содержимое столбца переменной ширины

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

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

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

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

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

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

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

Live Preview

Область содержимого 1
Область содержимого 2
Область содержимого 3

В приведенном выше примере будет показана одна строка с 3 столбцами на большом и среднем экранах. На маленьких экранах он будет показывать одну строку с 2 столбцами и еще одну строку с еще одним столбцом на половине экрана. На очень маленьких экранах, таких как смартфоны, мы видим 3 строк, и в каждом из них будет один полноэкранный столбец.

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

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

Смещение столбца макета сетки начальной загрузки

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

Ниже приведен пример смещения столбцов сетки с использованием классов .offset- * в начальной загрузке.

Предварительный просмотр

.col-md-4
.col-md-4 .offset-md-4

.col-md-3 .offset-md-3
.col-md-3 .offset-md-3

. col-md-6 .offset-md-3

Если вы посмотрите на приведенный выше пример, мы увеличиваем левое поле столбца на 4 и 3 столбцов, используя классы offset-md-4 и offset-md-3 .

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

Изменение порядка столбцов макета сетки начальной загрузки

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

В макете сетки порядок столбцов сетки зависит от заданных порядковых номеров. Например, столбцы сетки с более низким порядком (например, .col , .order-1 ) или без классов порядка будут отображаться первыми, а столбцы с номерами более высокого порядка появятся после столбцов с номерами более низкого порядка.Система сетки будет поддерживать порядок столбцов от 1 до 12 на всех пяти уровнях сетки.

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

Просмотр в реальном времени

Первый
Второй
Третий

Если вы посмотрите на приведенный выше пример, мы изменим порядок столбцов, указав порядковые номера ( order-10 , order-4 ), а для третьего столбца мы не указали какой-либо класс заказа.

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

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

Мы также можем изменить порядок столбцов макета сетки, используя .order-first и .order-last , как показано ниже.

Если вы посмотрите на приведенный выше пример, мы пытаемся изменить внешний вид столбца, используя классы .order-first и .order-last .

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

Если вы наблюдаете приведенный выше результат, второй столбец появился первым из-за присвоения класса .order-first , а первый столбец перемещен в последний из-за класса .order-last .

Вложенные столбцы сетки начальной загрузки

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

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

Просмотр в реальном времени

Первый столбец

Столбец 1 внутри первого столбца

Столбец 2 внутри первого столбца

Второй столбец

Если вы посмотрите на приведенный выше пример, мы создали вложенные столбцы сетки, добавив новую строку (.row ) и набор столбцов в существующем столбце .col-sm-9 .

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

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

Обертка столбца сетки начальной загрузки

Bootstrap рассчитан на 12 столбцов в строке. Если вы используете более 12 столбцов в строке, то дополнительные столбцы будут перенесены на новую строку как одна единица.

Ниже приведен пример создания макета сетки начальной загрузки с более чем 12 столбцов в строке для достижения переноса столбцов.

Просмотр в реальном времени

Первый столбец
Второй столбец
Третий столбец

Если вы посмотрите на приведенный выше пример, первый столбец имеет ширину 9 столбцов, а второй — 4 (9 + 4 = 13) , поэтому столбцы не могут быть в одной строке, а дополнительные столбцы будут перенесены в новую линия.

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

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

Сеточная система начальной загрузки

Введение

Сетка Bootstrap адаптивна, и столбцы меняются в зависимости от размера экрана.

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

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

Классы сетки

Сетка

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

1. xs используется для области просмотра мобильного телефона.
2. sm используется для области просмотра планшетов.
3. md используется для области просмотра настольных компьютеров или ноутбуков.
4. ld используется для большого экрана рабочего стола.

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

Некоторые основные правила сеточной системы приведены ниже.

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

Базовая структура Bootstrap Grid
Теперь давайте сместим наше внимание на базовую структуру сетки Bootstrap.

В приведенном выше примере сначала мы создали контейнер с помощью (

 

  ...

 

 

  
 ... 
  
 ... 

 

 

  
 ... 
  
 ... 

 

 

  

    Столбец уровня 1
    

      
 Уровень 2 
      
 Уровень 2 
    
  

 

 

  
 ... 
  
 ... 

 

 

  
 ... 
  
 ... 

 

 

  

    Жидкость 12
    

      

        Жидкость 6
        

          
 Жидкость 6 
          
 Жидкость 6 
        
      
      
 Жидкость 6 
    
  

 

 <тело>
  

    ...
  
 
 

 / * Большой рабочий стол * /
@media (минимальная ширина: 1200 пикселей) {...}

/ * Вертикальная ориентация планшета на альбомную и настольную * /
@media (min-width: 768px) и (max-width: 979px) {...}

/ * С телефона с горизонтальной ориентации на планшет с портретной ориентацией * /
@media (max-width: 767 пикселей) {...}

/ * Горизонтальные телефоны и вниз * /
@media (max-width: 480 пикселей) {...}