Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Bootstrap 4 grid: Grid system · Bootstrap

CSS-сетка · Bootstrap v5.1

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

Внимание! Наша система CSS Grid является экспериментальной и поддерживает версию 5.1.0! Мы включили ее в CSS нашей документации, чтобы продемонстрировать ее вам, но по умолчанию она отключена. Продолжайте читать, чтобы узнать, как включить его в свои проекты.

Как это устроено

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

  • CSS Grid включен. Отключите сетку по умолчанию, установив $enable-grid-classes: false, и включите CSS Grid, установив $enable-cssgrid: true. Затем перекомпилируйте свой Sass.

  • Замените экземпляры .row на .grid. Класс .grid устанавливает display: grid и создает grid-template, который вы создаете с помощью вашего HTML.

  • Замените классы .col-* классами .g-col-*. Это потому, что наши столбцы CSS Grid используют свойство grid-column вместо width.

  • Столбцы и размеры желоба устанавливаются с помощью переменных CSS. Задайте их в родительском .grid и настройте, как хотите, встроенным или в таблице стилей, с помощью --bs-columns и --bs-gap.

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

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

Сравнение с сеткой по умолчанию:

  • Утилиты Flex не влияют на столбцы CSS Grid таким же образом.

  • Заменяет зазоры водосточные желоба. Свойство gap заменяет горизонтальный padding из нашей системы сетки по умолчанию и работает больше как margin.

  • Таким образом, в отличие от .row, .grid не имеет отрицательного отступа, и утилиты отступа не могут использоваться для изменения промежутков сетки. Промежутки сетки по умолчанию применяются по горизонтали и вертикали. Смотрите раздел кастомизации для получения более подробной информации.

  • Встроенные и пользовательские стили следует рассматривать как замену для классов модификаторов (например, style="--bs-columns: 3;" против class="row-cols-3").

  • Вложение работает аналогично, но может потребовать от вас сбросить счетчик столбцов для каждого экземпляра вложенного файла .grid. Смотрите раздел вложенности для получения подробной информации.

Примеры

Три колонки

Три столбца одинаковой ширины во всех окнах просмотра и на всех устройствах могут быть созданы с помощью классов . g-col-4. Добавьте отзывчивые классы, чтобы изменить макет по размеру области просмотра.

.g-col-4

.g-col-4

.g-col-4

<div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
</div>

Адаптивность

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

.g-col-6 .g-col-md-4

.g-col-6 .g-col-md-4

.g-col-6 .g-col-md-4

<div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
</div>

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

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Обертка

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

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Начало

Стартовые классы призваны заменить классы смещения нашей сетки по умолчанию, но они не совсем такие же. CSS-Сетка создает шаблон сетки с помощью стилей, которые говорят браузерам «начинать с этого столбца» и «заканчиваться в этом столбце». Это свойства grid-column-start и grid-column-end. Стартовые классы являются сокращением для первых. Соедините их с классами столбцов, чтобы задать размер и выровнять столбцы, как вам нужно. Начальные классы начинаются с 1, поскольку 0 является недопустимым значением для этих свойств.

.g-col-3 .g-start-2

.g-col-4 . g-start-6

<div>
  <div>.g-col-3 .g-start-2</div>
  <div>.g-col-4 .g-start-6</div>
</div>

Авто колонки

Когда в элементах сетки нет классов (непосредственные дочерние элементы для .grid), размер каждого элемента сетки автоматически будет равен одному столбцу.

1

1

1

1

1

1

1

1

1

1

1

1

<div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Это поведение можно смешивать с классами столбцов сетки.

.g-col-6

1

1

1

1

1

1

<div>
  <div>.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Вложенность

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

  • Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS: --bs-columns: 3.
  • В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
  • Во втором автоматическом столбце мы сбросили счетчик столбцов во вложенном .grid на 12 (наше значение по умолчанию).
  • В третьем автоколонке нет вложенного содержимого.

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

Первая автоколонка

Автоколонка

Автоколонка

Вторая автоколонка

6 of 12

4 of 12

2 of 12

Третья автоколонка

<div>
  <div>
    Первая автоколонка
    <div>
      <div>Автоколонка</div>
      <div>Автоколонка</div>
    </div>
  </div>
  <div>
    Вторая автоколонка
    <div>
      <div>6 of 12</div>
      <div>4 of 12</div>
      <div>2 of 12</div>
    </div>
  </div>
  <div>Третья автоколонка</div>
</div>

Кастомизация

Настройте количество столбцов, количество строк и ширину промежутков с помощью локальных переменных CSS.

ПеременнаяРезервное значениеОписание
--bs-rows1Количество строк в шаблоне сетки
--bs-columns12Количество столбцов в шаблоне сетки
--bs-gap1.5remРазмер промежутка между столбцами (по вертикали и горизонтали)

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до тех пор, пока не будет предоставлен локальный экземпляр. Например, мы используем var(--bs-rows, 1) для наших строк CSS Grid, который игнорирует

--bs-rows, потому что он еще нигде не установлен. Как только это произойдет, экземпляр .grid будет использовать это значение вместо резервного значения 1.

Нет классов сетки

Непосредственные дочерние элементы для . grid являются элементами сетки, поэтому их размер будет изменяться без явного добавления класса .g-col.

Автоколонка

Автоколонка

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

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

Отрегулируйте количество столбцов и промежутков.

.g-col-2

.g-col-2

<div>
  <div>.g-col-2</div>
  <div>.g-col-2</div>
</div>

.g-col-6

.g-col-4

<div>
  <div>.g-col-6</div>
  <div>.g-col-4</div>
</div>

Добавление строк

Добавление дополнительных строк и изменение размещения столбцов:

Автоколонка

Автоколонка

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Промежутки

Изменяйте вертикальные промежутки, только изменяя row-gap. Обратите внимание, что мы используем gap в .grid, но row-gap и column-gap можно изменить по мере необходимости.

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Из-за этого у вас могут быть разные вертикальные и горизонтальные

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Sass

Одним из ограничений CSS Grid является то, что наши классы по умолчанию по-прежнему генерируются двумя переменными Sass: $grid-columns и $grid-gutter-width. Это фактически предопределяет количество классов, сгенерированных в нашем скомпилированном CSS. У вас есть два варианта:

  • Измените эти переменные Sass по умолчанию и перекомпилируйте свой CSS.
  • Используйте встроенные или настраиваемые стили для расширения предоставленных классов.

Например, вы можете увеличить количество столбцов и изменить размер зазора, а затем изменить размер «столбцов» с помощью сочетания встроенных стилей и предопределенных классов столбцов таблицы CSS (например, .g-col-4).

14 колонок

.g-col-4

<div>
  <div>14 колонок</div>
  <div>.g-col-4</div>
</div>
Примеры

Bootstrap Grid — примеры и руководство.

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

Примечание: Эта документация предназначена для более старой версии Bootstrap (v.4). А для Bootstrap 5 доступна более новая версия. Мы рекомендуем перейти на последнюю версию нашего продукта — Material Design для Bootstrap 5.
Перейти к документации v.5

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

Пятиъярусная сетка

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

.col-4

.col-4

.col-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-m д-4

.col-md-4

.col-md-4

.COL-LG-4

.COL-LG-4

.COL-LG-4

.COL-XL-4

.COL-XL-4

.COL-XL-4

Показать код Изменить в песочнице

            
             <дел>
                <дел>
                  
. col-4

                  
.col-4

                  
.col-4
<дел>
.col-sm-4
.col-sm-4
.col-sm-4
<дел>
.col-md-4
.col-md-4
.col-md-4
<дел>
.col-lg-4
.col-lg-4
.col-lg-4
<дел>
.col-xl-4
.col-xl-4
.col-xl-4

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

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

.col-md-4

.col-md-4

.col-md-4

Показать код Изменить в песочнице

            
                <дел>
                  <дел>
                    
.col-md-4

                    
.col-md-4

                    
.col-md-4

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

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

. col-md-3

.col-md-6

.col-md-3

Показать код Изменить в песочнице

            
                  <дел>
                    <дел>
                      
.col-md-3

                      
.col-md-6

                      
.col-md-3

Два столбца

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

.col-md-8

.col-md-4

Показать код Изменить в песочнице

            
                  <дел>
                    <дел>
                      
.col-md-8

                      
. col-md-4

Полная ширина, один столбец

Для элементов полной ширины классы сетки не требуются.

Два столбца с двумя вложенными столбцами

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

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

.col-MD-8

.col-md-6

.col-md-6

.col-md-4

Показать код Изменить в песочнице

            
                    <дел>
                      <дел>
                          . col-MD-8
                          <дел>
                              
.col-md-6

                              
.col-md-6

                          
                      
                      
.col-md-4

Смешанный: мобильный и настольный

Система сетки Bootstrap v4 имеет пять уровней классов: xs (очень маленький), sm (маленький), md (средний), 901 53 lg (большой ) и xl (очень большой). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

. col-6 .col-md-4

.col-6 .col-md-4

.col-6

.col-6

Показать код Изменить в песочнице

            
            <дел>
              <дел>
                
.col-12 .col-md-8

                
.col-6 .col-md-4

              
              <дел>
                
.col-6 .col-md-4

                
.col-6 .col-md-4

                
.col-6 .col-md-4

              
              <дел>
                
.col-6

                
.col-6

Смешанная: мобильные, планшетные и настольные

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

.col-12 .col-sm-6 .col-lg-8

. col-6 .col-lg-4

.col-6 .col-sm-4

.col-6 .col -sm-4

.col-6 .col-sm-4

Показать код Изменить в песочнице

            
                <дел>
                  <дел>
                    
.col-12 .col-sm-6 .col-lg-8

                    
.col-6 .col-lg-4

                  
                  <дел>
                    
.col-6 .col-sm-4

                    
.col-6 .col-sm-4

                    
.col-6 .col-sm-4

Доступ ограничен

Для просмотра этого раздела у вас должен быть активный PRO-аккаунт

Войдите в свою учетную запись или приобретите подписку MDB5 PRO , если у вас ее нет.

ВойтиКупить MDB Pro

Bootstrap 4: Изучите «Сетку». Суть макетов с помощью Bootstrap… | Кэрол Скелли | WDstack

Опубликовано в

·

Чтение: 5 мин.

·

10 февраля 2018 г.

Суть макетов с помощью строк и столбцов Bootstrap 90 008

Часть 2 руководства по Bootstrap 4

Вам нужно знать и понимать систему сеток Bootstrap для компоновки содержимого в Bootstrap 4. Я уже писал о сетке Bootstrap 3 ранее, и хотя многие концепции остались теми же, в Bootstrap есть кое-что новое, о чем вам следует знать 4.

Что такое «Сетка»?

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

Контейнер

Корневым (верхним) элементом сетки Bootstrap является Контейнер . Поначалу контейнер может показаться тривиальным или ненужным, но он очень важен для контроль ширины макета. Bootstrap 4 предоставляет 2 типа контейнеров . Выберите один, чтобы сдержать макет…

1- Контейнер с фиксированной шириной , чтобы сосредоточиться на макете в середине:

  Контейнер ">

2- Полнотех container для компоновки охватывает всю ширину:

 container-fluid  ">

Fixed-width .container масштабируется по ширине в зависимости от реакции, так что в конечном итоге он становится шириной 100% (так же, как . container-fluid ) на небольших устройствах.

Bootstrap 4 Containers

Rows & Columns

Непосредственно внутри Container, находятся одна или несколько Rows …

 
 
 row  ">

«Строки — это оболочки для столбцов. Каждый столбец имеет горизонтальный 90 153 отступ 90 154 (называемый желобом) для управления пространством между ними. это заполнение затем противодействует строкам с отрицательными полями. Таким образом, весь контент в ваших столбцах визуально выровнен по бокам».

Непосредственно внутри строки находится один или несколько столбцов . Непосредственный родительский элемент Столбец ВСЕГДА должен быть Строкой . Колонки являются держателями содержимого. Есть 12 единиц столбца , которые простираются горизонтально (в ряд) по ширине контейнера…

Bootstrap 12 Column Units
 container  "> 
 row  "> 
 col-12  ">Я сетка!

Попробуйте на Codeply

И с этой комбинацией контейнера , строк и столбцов сетка готова! Теперь давайте подробнее рассмотрим столбцы.

Ширина столбцов

Блок с одним столбцом ( col-1 ) занимает всего 8,33333% ширины. Это довольно мало, поэтому в большинстве случаев вы создаете макеты, которые охватывают более одного столбца.

У вас может быть столбец one ( col-12 ), который охватывает всю ширину (100%) контейнера…

 
 
 
 
 col-12  " >Я шириной 12 единиц

или , вы можете использовать несколько столбцов, чтобы охватить часть из возможных 12. Например, вот макет из 2 столбцов с более узким столбцом слева и более широким столбцом справа…

 
 
 
 
 
Ширина 3 столбца
 
 
Ширина 9 столбцов

Можно использовать меньше чем 12 столбцов в одном .row …

 
 
 
 
 
Ширина 10 столбцов

Или можно использовать больше 900 06, чем 12 колонок в одном .row . После превышения 12 столбцов « перенос » на следующую горизонтальную строку…

 
 
 
 
 
..
 
 
..
 
 
 ..
 
  
 
..
 
 
..
 
 
..

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

Попробуйте эту сетку Bootstrap demo .

12 столбцов сетки Bootstrap

Столбцы также могут быть контейнерами для большего количества строк и столбцов.
Это называется « Вложение »…

 
 
 
 
 
 
 
 
 
ширина в 3 столбца
 
 
ширина в 9 столбцов
 
 
 
 
 
 
 
 
 
 
Ширина 9 столбцов
 
 
Ширина 3 столбца

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

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

В: Могу ли я поместить содержимое и элементы HTML непосредственно в контейнер ? Должен ли я использовать строки и столбцы?

A: Да , . container используется для управления шириной макета страницы и таких компонентов, как панель навигации. У вас нет для использования .row > .col-* внутри .container , но при этом .row должен находиться внутри .container .

В: Могу ли я поместить содержимое и элементы HTML непосредственно в строку ? Должен ли я использовать столбцы внутри строки?

A: № , .row — это только , используемый для содержания .col-* , и содержимое никогда не должно размещаться непосредственно в .col-* . 0153 .ряд . Только столбцы должны быть непосредственными дочерними элементами строки. Это потому что . Строка имеет отрицательные поля, чтобы противодействовать заполнению столбцов.

В: Почему столбцов «12»? Почему не 5, 10, 16 или что-то еще?

A: Потому что 12 без остатка делится на 6 (половины), 4 (четверти) и 3 (трети).

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *