Bootstrap сетка: Система сеток. Разметка · Bootstrap. Версия v4.0.0 — Вебджем.рф

Содержание

Сетка в Bootstrap 4. Подробное руководство | by Stas Bagretsov

Понимание сеток в Bootstrap — это самый важный момент работы с этим замечательным фреймворком, понимая сетки, вы сможете делать на нем без препятствий буквально всё, что захотите. Советую почитать статьи Узнаем Bootstrap 4 за 30 минут, создавая лендинг и Самые полезные хитрости в Bootstrap

Перевод статьи How the Bootstrap 4 Grid Works

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

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

Сетки на Bootstrap могут использоваться отдельно, без Bootstrap JavaScript и других CSS компонентов. Вам надо только скачать и сослаться на "bootstrap-grid.css", который включает в себя flexbox классы и классы для сетки. Вообще, более подробно для этого есть отдельная документация на официальном сайте.

Вот самый простой пример применения сетки:

<divlg cz">container"> 
<divlg cz">row"> 
<divlg cz">col">I'm your content inside the grid!</div> 
</div> 
</div>

Этот код выдаст нам одну большую колонку на всю ширину вьюпорта.

А вот уже две колонки:

<divlg cz">container"> 
<divlg cz">row"> 
<divlg cz">col">Left column</div>
<divlg cz">col">Right column</div> 
</div> 
</div>

И вот на три колонки:

<divlg cz">container"> 
<divlg cz">row"> 
<divlg cz">col">Left column</div>
<divlg cz">col">Center column</div>
<divlg cz">col">Right column</div> 
</div> 
</div>

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

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

Я коснусь этих вопросов немного позже. Но сначала, я хочу сделать шаг назад и объяснить кое-что важное, по поводу использования сеток.

Поверьте мне. Понимание “Правил сетки” сэкономит вам кучу времени и нервов. Прочитайте их очень внимательно.

Правила сетки:

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

Эти правила ОЧЕНЬ ВАЖНЫ. Строки и колонки всегда работают вместе и вам надо смотреть за тем, что один не оставался без другого.

Ждите косяка, если вы не будете соблюдать эти три простые правила. Я ответил на бесчисленное количество вопросов на Stack Overflow, просто применяя эти правила. По началу, это может быть довольно сложным, но всё последующее реально станет доступным для понимания, после того, как вы поймете то, как работает сетка.

Как использовать сетку Bootstrap. Правильный подход.

Контейнер

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

<divlg cz">container"> 
<divlg cz">row"> 
<divlg cz">col">I'm content inside the grid!</div> 
</div> 
</div>

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

<div>
<h3>My Heading</h3> 
<div> 
<div>I'm content inside the grid!</div> 
</div> 
</div>

Не игнорируйте контейнер

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

У Bootstrap 4 есть 2 типа контейнера. В моих примерах я использовал .container, но также есть и полноэкранный .container-fluid. Вы можете использовать любой из них:

1 — Контейнер с фиксированной шириной, для центровки контейнера по середине шаблона.

<div></div>

2 — Контейнер с шириной во весь экран.

<div></div>

.container масштабируется адаптивно по ширине экрана, так что в конце концов он может стать шириной на весь экран, как и .container-fluid, но на маленьких устройствах.

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

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

У строк (rows) есть отрицательные левые/правые внешние отступы в -15px. Внутренний отступ контейнера в 15px используется для пресечения срабатывания отрицательных внешних отступов в строке контейнера. Это делается для равномерного выравнивания по граням в шаблоне. Если вы не поместите строку (row) в контейнер, то она будет выходить за пределы своего контейнера, вызывая нежелательные горизонтальные прокрутки.

Строки (Rows) и Колонки (Columns)

Сейчас, я бы хотел, чтобы .row в Bootstrap не были на самом деле именованы как “строки” (row). Название “строка”, зачастую запутывающее и скрывает настоящее предназначение . row.

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

Думайте о строках, как о группе колонок (Columns)

Это потому, что колонки внутри .row не всегда располагаются горизонтально вдоль вьюпорта. Иногда нам надо, чтобы колонки в шаблоне были горизотальны, а иногда нам надо, чтобы они располагались вертикально. Концепция горизонтального vs. Вертикального шаблона является сущностью адаптивного дизайна. Единственным предназначением “строки”, является содержание одной или более “колонки”.

Не вставляйте контент прямо в “строку”!

Так делать нельзя:

<div>
This is very bad, wrong way, no bueno!!
</div><div>
<p>This is also very bad, the wrong way!!</p>
</div><div>
<h3>No headings either! This is the wrong way!!</h3>
</div>

“колонки” и только колонки, размещаются внутри “строк”.

А контент размещается уже внутри “колонок”.

<div>
<div>Happy :-) This is the right way.</div>
</div>

Так же очень важно упомянуть, что .row имеет display: flex. А как потомок в Flexbox, “колонка” в каждой строке одной и той же высоты.

Благодаря Flexbox, горизонтальное и вертикальное выравнивание легко делается с использованием рабочих классов Bootstrap 4 — flex и auto-margin.

А теперь настало время углубиться в строки и колонки и то, как они на самом деле взаимодействуют. Есть разные типы колонок и разные способы использования их в шаблоне. Они как магия.

Счастье в колонках!

Создают горизонтальные разделители по вьюпорту.

Могут иметь разную ширину.

Раскладку горизонтально слева направо, вертикально сверху вниз.

Могут изменять позицию (порядок) относительно родственных элементов в той же строке.

Имеют ту же высоту, что и другие родственные элементы в той же строке.

Могут “расти” или “урезаться” по ширине.

Могут автоматически врапиться или вертикально “слепляться” при необходимости или при нужной ширине экрана.

Могут содержать больше строк и колонок при вложении.

Всё что нужно знать о колонках Bootstrap

Снова не забываем, что колонки должны быть прямыми потомками строк.

И так, колонки создают горизонтальные деления по вьюпорту. Пространство между колонками называется “gutter”.

Классическая сетка Bootstrap имеет 12 колонок:

Таким образом, колонки могут быть равномерно разделены на 12 частей. Вот пример, 6 колонок (12/6=2) :

И дальше уже дело простой математики:

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

Учитывая такую гибкость, возможности шаблона кажутся бесконечными.

Но сетка не всегда может быть из 12 элементов. Спасибо flexbox, у Bootstrap 4 есть новые “auto-layout” колонки. Такие безразмерные колонки дают вам больше гибкости при разработке шаблонов.

Сетка — Bootstrap: Основы

Bootstrap: Основы

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

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

Из курса по Grid вы знаете, что сетка — система линий, по которым выстраивается контент внутри шаблона. Эти линии являются невидимыми. Взгляните на шаблон блога Хекслета. На изображении указана сетка проекта. Тёмными линиями обозначены колонки, а оранжевыми отступы между колонками. Изучите этот пример и найдите закономерности того, как выстроен контент внутри блога.

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

Сетку можно разбить на три составные части:

Контейнер;
Строки;
Колонки.

В качестве примера используем код с использованием сетки Bootstrap:

<div>
  <div>
    <div>
      <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
      <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
      <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.
  </p>
    </div>
  </div>
</div>

В этой разметке демонстрируется подход контейнер → строка → колонка. Добавив текст в колонку с классом .col, получится следующий макет:

Визуально кажется, что ничего особого не произошло, а текст вывелся так, как если бы не добавлялись контейнеры, строки, столбцы. Но это не так! Уже запущен механизм адаптивной сетки и выстраивание колонок. Добавим ещё одну колонку с тем же текстом:

<div>
  <div>
    <div>
      <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
    </div>
    <div>
      <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.  </p>
    </div>

Bootstrap сетка за 15 минут

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

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

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)

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

Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета

<!-- Не правильно-->
<div>
    Ваш контент
</div>

<!-- Правильно-->
<div>
    <div>Правильно размещенный контент</div>
</div>

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.

<div>
    <div>Вся ширина ряда</div>
</div>

<div>
    <div>25%</div>
    <div>25%</div>
    <div>50%</div>
</div>

3. Обертывание колонок

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

В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

<div>
    <div></div>
    <div></div>
    <div>Эта колонка шириной 9 будет перенесена на следующую строчку</div>
</div>

4. Классы для размеров экрана

Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер

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

<div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
</div>

5. Clearfix

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

<div>
    <div>Эта колонка выше чем все остальныне</div>
    <div></div>
    <div></div>
    <div></div>
</div>

6.

Offsets (Смещения) — ваши друзья

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

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .

7. Классы Push и Pull

Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

<div>
    <div>На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева</div>
    <div><img src="city.jpg"></div>
</div>

Заключение

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

Но помимо данных правил существует еще ряд других, более расширенных,которые также часто используются.. Для их изучение посмотрите на русскоязычный портал о bootstrap http://bootstrap-3.ru/

Как получить 18 столбцов в Bootstrap grid

Я использую последнюю версию Bootstrap 3.2.0 с MVC 5, и я новичок в обоих.

Что я хотел бы сделать, так это сделать сетку из 18 столбцов с помощью Bootstrap. Я вижу здесь http://getbootstrap. com/css / #grid-less , что это действительно возможно, изменив @grid-columns .

Итак, в моем представлении MVC я пробую это:

<style>
    @grid-columns: 18;
</style>

За этим следует HTML:

<div>
  <div>col 1</div>
  <div>col 2</div>
  <div>col 3</div>
  <div>col 4</div>
  <div>col 5</div>
  <div>col 6</div>
  <div>col 7</div>
  <div>col 8</div>
  <div>col 9</div>
  <div>col 10</div>
  <div>col 11</div>
  <div>col 12</div>
  <div>col 13</div>
  <div>col 14</div>
  <div>col 15</div>
  <div>col 16</div>
  <div>col 17</div>
  <div>col 18</div>
</div>

Но это не работает. Что я должен сделать, чтобы это сработало?

Спасибо!

css twitter-bootstrap-3 asp.

net-mvc-5
Поделиться Источник brinch 16 августа 2014 в 00:11
2 ответа

3

Как уже упоминалось в другом ответе, вы можете скачать пользовательскую версию Bootstrap с 18 столбцами, перейдя в Bootstrap Customizer и создав пользовательский файл bootstrap. Однако вы должны понимать, что это не является перспективным решением. Если вы когда-нибудь захотите обновить свой bootstrap, вам нужно будет обновить эти переменные таким же образом, чтобы получить версию, которая не нарушит ваши функции.
Я рекомендую вам ознакомиться с LESS и тем, как он компилируется, чтобы вы могли создавать свои собственные исходные файлы LESS . Это домашняя страница LESS : http://lesscss.org/
Чтобы начать с этого, поймите несколько простых вещей: Во-первых, LESS -это расширение до CSS , которое требует специального компилятора, который переведет его в стандартный CSS . Именно этот стандарт CSS вы включаете на свой сайт, а не сам LESS . Во-вторых, можно скомпилировать LESS по требованию с определенными движками, но это просто немного сложно настроить. Вы можете думать об этом отношении с помощью этой аналогии: как php относится к html , так и LESS к CSS
Поделиться OneHoopyFrood 16 августа 2014 в 00:26

0

просто скачайте свою пользовательскую версию Bootstrap с 18 столбцами и проблема будет решена. Перейдите в Bootstrap Customizer затем в правом столбце В разделе меньше переменных найдите точки останова Media запросов
Вы также можете использовать полученную настроенную версию для изучения того, как сделать это самостоятельно, если вам это понадобится в будущем
Поделиться Devin 16 августа 2014 в 00:21
Похожие вопросы:

Как получить доступ к определенному столбцу в системе bootstrap grid?
В системе bootstrap grid существует 12 столбцов,и класс col-*- * используется для группировки определенного количества столбцов. Но когда я хочу использовать первые 3 столбца, а затем только…

SASS-Bootstrap 3 GRID и только Navbar-как?
Как я могу импортировать Bootstrap 3 grid и navbar в мой файл .sass? Я пытался: @import bootstrap/variables @import bootstrap/mixins //@import bootstrap/mixins/grid-framework //@import…

Может ли bootstrap grid содержать более 12 столбцов?
Я часто вижу такой код в markup : <div> , но, как я знаю, bootstrap grid имеет 12 столбцов. Итак, что значит col-md-23 ?

как настроить файл bootstrap grid.less; 16 столбцов для рабочего стола и 12 столбцов для планшета
Я хочу создать 16 столбцов для настольных компьютеров и 12 столбцов для планшетов и мобильных устройств. bootstrap использует функции float-grid-columns, make-grid-column для создания сетки. Я…

Bootstrap сетки хз будет 18 столбцов не 12 колонн
<div class=row> <div class=col-xs-12 col-sm-6 col-lg-8>. col-xs-12 .col-sm-6 .col-lg-8</div> <div class=col-xs-6 col-lg-4>.col-xs-6 .col-lg-4</div> Я читал в bootstrap…

Как создать систему bootstrap grid с 14 столбцами?
У меня есть 7 элементов, я хочу показать их все рядом с одинаковой шириной. Я использую bootstrap grid system, чтобы правильно разместить его. Я не могу разделить 7 элементов на 12 столбцов поровну….

Twitter Bootstrap grid:
Я хочу получить сетку, подобную показанной ниже: Я искал Twitter Bootstrap grid system, Но поскольку она ориентирована на строки, я не вижу, как этого добиться. Есть ли какой-нибудь способ сделать…

Bootstrap Grid — Как выбрать?
мой первый пост здесь, Я разрабатываю макет в photoshop, и я знаю, что важно иметь слой, где у меня есть моя сетка, чтобы проектировать элементы в соответствии с этим. Я искал в интернете psds для…

Использование bootstrap grid для отображения элементов из api call with ngFor
Я делаю вызов api, чтобы получить данные из базы данных фильмов . Затем я хочу отобразить данные с помощью системы bootstrap grid. Вот как это выглядит в настоящее время с использованием сетки…

Как реализовать небольшие размеры столбцов в Bootstrap Grid?
Я пытаюсь спроектировать это с помощью React Bootstrap Grid, как мне сделать свою сетку так, чтобы COLORBAR занимал только очень маленькую ширину? Я пытаюсь это сделать <Grid> <Row>…
Bootstrap сетка. Что такое? Bootstrap greed PSD.
Для создания ровных и красивых сайтов -лучше всего использовать Bootstrap сетку.

Bootstrap сетка — это сетка с определенными расстояниями между линиями.

Стандартизация сетки - позволяет "разговаривать" на одном языке - и верстальщику и дизайнеру. И позволяет ускорить работу над проектом!

Существуют конкретные параметры Bootstrap сетки в PSD формате:

Общая ширина рабочей области: 1920px;

Ширина контейнера с отступами: 1170px;

Ширина колонки без отступов: 68px;

Ширина отступа (Gutter): 15px;

Система сетки: 12-ти колоночная.

Расстояние между колонками а также некоторые размеры вполне могут иметь погрешность   +/- 1px   в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Однако это не-критично при разработке PSD-макета.

Существуют правила работы с PSD сеткой Bootstrap

PSD Bootstrup сетка, для создания дизайна сайта - разрабатывалась опираясь на физические свойства сетки CSS фреймворка Bootstrap.

Правило 1

Крайние поля — служат ТОЛЬКО для отступов — и   НЕ МОГУТ БЫТЬ ИСПОЛЬЗОВАНЫ для размещения каких либо элементов дизайна или контента сайта.

Правило 2

Можно использовать ЛЮБОЕ КОЛИЧЕСТВО одиночных колонок   — для визуализации различных блоков сайта.

Правило 3

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

Правило 4

Можно спокойно — ВЫХОДИТЬ ЗА РАМКИ СЕТКИ — если нам нужна, какая то не стандартная секция (блок). Т.е. вне рамок Bootstrap-сетки.

Но важно придерживаться — какой либо системы.

Например:    Придерживаться центра макета!

Соблюдайте КРАТНОСТЬ ЭЛЕМЕНТОВ , или любой другой логике — при создании не стандартного блока.

Правило 5

Можно и НУЖНО   — выходить за рамки Bootstrap сетки.

Что бы дизайн — получался   РАЗНООБРАЗНЫМ!

Пример — 1

Пример — 2

Не нужно зацикливаться на использовании Bootstrap-сетки для графики. Жесткие ограничения как правило применяют к плагинам: Карусели, слайдеры и т.д.

Спасибо!

HTML/CSS.
Сеточная система Bootstrap 3
Данный туториал предоставляет информацию о «грид» системе фреймворка Bootstrap 3.
Сеточная система Twitter Bootstrap предлагает быстрый и простой способ создавать разметку веб-страниц. Twitter Bootstrap 3 идет в комплекте с адаптивной мобильной плавающей системой сеток, которая структурируется вплоть до 12 колонок в зависимости от увеличения размера устройства или экрана. Давайте посмотрим, как она работает.
Чтобы правильно выравнять и задать внутренний отступ сетки, блоки с классом .row нужно располагать внутри блоков с классом .container (фиксированная ширина) или .container-fluid (по ширине странице).
Блоки с классом .row необходимо использовать для создания горизонтальных групп колонок.
Содержание нужно располагать внутри колонок и только колонки могут быть непосредственными потомками блоков с классом .row.
Предопределенные классы сеток, например . row и .col-xs-4, позволяют быстро создавать разметку сеток. Также можно использовать миксины языка стилей less для увеличения количества типов семантической разметки.
Колонки создают промежутки (gutters) (разрывы между содержанием колонок) через внутренний отступ (padding). Этот внутренний отступ (padding) смещается для первой и последней колонок из-за отрицательного значения внешнего отступа (margin) блоков с классом .row.
Колонки сеток создаются путем указания требуемого числа из двенадцати доступных колонок. Например, для трех одинаковых колонок нужно использовать три контейнера с классом .col-xs-4.
Классы сеток применяются к устройствам, в которых ширина больше или равна контрольным размерам, и переопределяют классы сеток, предназначенных для меньших устройств. Таким образом, применение любого класса .col-md- к элементу задаст стиль не только для средних, но и для больших устройств в том случае, если не используется класс . col-lg- .
Разметка
Twitter Bootstrap 3 включает предопределенные классы сеток, чтобы быстро верстать сеточную разметку для различных типов устройств, например мобильные телефоны, планшеты, компьютеры и т.п. Например, можно использовать класс .col-xs- , чтобы создавать сеточные колонки для очень маленьких устройств, как, например, мобильный телефон; таким же образом класс .col-sm- употребляется для маленьких устройств ~ планшетов, класс .col-md- для средних устройств ~ компьютеров и .col-lg- для больших экранов компьютеров. Ниже приводятся виды разметки системы сеток Bootstrap.
Очень маленькие устройства ~ телефоны (<768px)
Маленькие устройства ~ планшеты (≥768px)
Средние устройства ~ компьютеры (≥992px)
Большие устройства ~ компьютеры (≥1200px)
Настройки сеток
Пожалуйста, ознакомьтесь со следующей таблицей для более детальной информации:
Разметка сеточной системы Bootstrap 3 Очень маленькие устройства
Телефоны (<768px) Маленькие устройства
Планшеты (≥768px) Средние устройства
Компьютеры (≥992px) Большие устройства
Компьютеры (≥1200px)
Максимальная ширина контейнера Нет (авто) 750px 970px 1170px
Префикс класса . col-xs- .col-sm- .col-md- .col-lg-
Максимальная ширина колонки Авто ~62px ~81px ~97px
Ширина промежутка (Gutter) 15px с каждой стороны колонки (например 30px)
Применение класса .col-sm- к элементу повлияет на стиль не только для маленьких устройств, например планшетов, но также для средних и больших устройств с шириной экрана больше или равной 768px (т.е. ≥768px), если не употребляются классы .col-md- и .col-lg- . Подобным образом, класс .col-md- повлияет не только на стиль для средних устройств, но также и для больших, если не употребляется класс .col-lg- .
Приведем примеры:
Stacked-to-horizontal (Построение блоков столбцом, которое переходит в строчное на компьютерах). При помощи простого набора сеточных классов .col-md-*, можно создать базовую сеточную систему, при которой блоки располагаются столбцом на мобильных устройствах и планшетах (очень маленькие и маленькие устройства), но трансформируются в строку на компьютерах (средние устройства). Колонки сетки могут располагаться в любом блоке с классом .row.
Пример кода:
<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-8</div> <div>.col-md-4</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div>
Fluid container (Подвижный контейнер). Превратите любую сеточную разметку с фиксированной шириной в подвижную, изменив класс контейнера с .container на .container-fluid.
<div> <div> ... </div> </div>
Mobile and desktop (Мобильные устройства и компьютер). Можно использовать классы сеток для очень маленьких и средних устройств, добавляя .col-xs-* .col-md-* в колонки.
Пример кода:
 <div> <div>.col-xs-12 .col-md-8</div> <div>.col-xs-6 .col-md-4</div> </div>  <div> <div>.col-xs-6 .col-md-4</div> <div>.col-xs-6 .col-md-4</div> <div>.col-xs-6 .col-md-4</div> </div>  <div> <div>. col-xs-6</div> <div>.col-xs-6</div> </div>
Mobile, tablet, desktops (Мобильный, планшет, компьютеры). Постройте еще более динамичную разметку для планшета при помощи класса .col-sm-* , используя предыдущий пример.
Пример кода:
<div> <div>.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div> </div> <div> <div>.col-xs-6 .col-sm-4</div> <div>.col-xs-6 .col-sm-4</div>  <div></div> <div>.col-xs-6 .col-sm-4</div> </div>
Column wrapping (Перенос колонок). Если в одном блоке с классом .row находится больше 12 колонок, каждая группа дополнительных колонок будет переходить на новою строку как единое целое.
Пример кода:
<div> <div>. col-xs-9</div> <div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div>.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
Responsive column resets (Исправление адаптивных колонок). При использовании четырех доступных сеток, вы столкнетесь с проблемой, когда в определенных точках колонки выглядят неправильно из-за разницы высоты. Чтобы это исправить, используйте комбинацию блока с классом .clearfix и адаптивных служебных классов.
Пример кода:
<div> <div>.col-xs-6 .col-sm-3</div> <div>.col-xs-6 .col-sm-3</div>  <div></div> <div>.col-xs-6 .col-sm-3</div> <div>.col-xs-6 .col-sm-3</div> </div>
Offsetting columns (Смещение колонок). Двигайте колонки вправо при помощи классов .col-md-offset-* . Эти классы увеличивают отступ слева от блока на * количество колонок. Например, класс .col-md-offset-4 подвинет блок с классом .col-md-4 на четыре колонки.
Пример кода:
<div> <div>.col-md-4</div> <div>.col-md-4 .col-md-offset-4</div> </div> <div> <div>.col-md-3 .col-md-offset-3</div> <div>.col-md-3 .col-md-offset-3</div> </div> <div> <div>.col-md-6 .col-md-offset-3</div> </div>
Nesting columns (Вложенные колонки). Чтобы вложить содержание в основную сетку, добавьте новый блок с классом .row и набор колонок .col-sm-* внутри существующей колонки .col-sm-*. Вложенные блоки с классом row должны включать набор из 12 или менее колонок (не рекомендуется использовать все 12 доступных колонок).
Пример кода:
<div> <div> Level 1: . col-sm-9 <div> <div> Level 2: .col-xs-8 .col-sm-6 </div> <div> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
Column ordering (Порядок отображения колонок). Порядок отображения встроенных сеточных колонок можно изменить при помощи модифицированных классов .col-md-push-* and .col-md-pull-*.
Пример кода:
<div> <div>.col-md-9 .col-md-push-3</div> <div>.col-md-3 .col-md-pull-9</div> </div>
Адаптивные служебные классы Bootstrap
Используйте следующие адаптивные классы, чтобы управлять видимостью элементов на устройствах, чьи размеры экранов подпадают под определенный тип. В версии v3.2.0, классы .visible-*-* для каждого контрольного размера представляются в трех вариантах, по одному на каждое значение свойства CSS display : inline, block и inline-block.
Класс Описание
.visible-xs-*
Делает элемент видимым только для очень маленьких устройств с шириной экрана меньше 768px. Скрыт для других.
.visible-sm-*
Делает элемент видимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Скрыт для других.
.visible-md-*
Делает элемент видимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Скрыт для других.
.visible-lg-*
Делает элемент видимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Скрыт для других.
Подобным образом можно использовать служебные классы для скрытия, чтобы прятать элементы на определенных устройствах:
Класс Описание
. hidden-xs
Делает элемент невидимым только для очень маленьких устройств с шириной экрана меньше 768px. Видим для других.
.hidden-sm
Делает элемент невидимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Видимый для других.
.hidden-md
Делает элемент невидимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Видимый для других.
.hidden-lg
Делает элемент невидимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Видимый для других.
Можно использовать следующие служебные классы, чтобы показать или убрать определенные элементы при печати страницы.
.visible-print-block
Делает невидимыми блочные элементы (block) при предпросмотре страницы в браузере для печати.
.visible-print-inline
Делает невидимыми строчные элементы (inline) при предпросмотре страницы в браузере для печати.
.visible-print-inline-block
Делает невидимыми строчно-блочные элементы (inline-block) при предпросмотре страницы в браузере для печати.
.hidden-print
Скрывает элементы, которые видимы в браузере, при печати.
Bootstrap: что это такое и как его установить
Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.
Что нужно знать о Bootstrap перед началом работы
У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.
Про плюсы и минусы фреймворка вы можете почитать в этой статье. За 2 года ничего не изменилось. Bootstrap правда очень помогает сэкономить время и при этом создать приличный шаблон, но тащит кучу лишнего кода и слабо подходит для нестандартных проектов. Все недостатки Bootstrap можно устранить перебором его исходных файлов, но это занимает столько времени, что любой опытный разработчик выберет верстку макета с нуля.
Какую версию Bootstrap выбрать?
Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11.
В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.
В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.
В пятой версии не будет поддержки Internet Explorer.

Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.
Как установить Bootstrap
Установить Bootstrap можно несколькими способами:
Подключить компилированные файлы c помощью BootstrapCDN.

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

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

Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке. Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.
Посмотрим способы подключения, которые позволяют быстро получить работающий фреймворк и приступить к изучению его особенностей.
Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.
Код может быть таким:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <h2>Привет, мир!</h2>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script> </body> </html>
Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js.
В папке css — файлы стилей.
bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.

bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.

bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.
bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.

bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS.
Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.
Код шаблона может быть таким:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.css" > </head> <body> <h2>Привет, мир!</h2>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.
Начинаем верстать с помощью Bootstrap
Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.
Для удобства рекомендую скачать примеры. Они помогают понять возможности фреймворка. Примеры можно использовать для верстки прототипов, особенно в ситуации, когда макет нужно было сдать еще вчера.
Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно.
Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента.
Изначально карусель выглядит вот так.
Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править.
Находим в коде карусель. Вот она:
<div data-ride="carousel">
Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами.
Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.
Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.
Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.
Конечно, редактирование шаблона — это не верстка. Но я могу взять код той же карусели и внедрить его в свой проект, к которому подключен Bootstrap. В этом главный плюс фреймворка.
Bootstrap содержит огромное количество готовых компонентов. Разработчику нужно только выбрать то, что необходимо для решения его задачи. По сути, это как работа с конструктором сайтов, только намного более гибким. Именно поэтому Bootstrap так хорош для прототипирования и быстрой верстки, но становится неудобным при разработке проектов с индивидуальным дизайном.
Сеточная система начальной загрузки
Сеточная система начальной загрузки
Сетка
Bootstrap позволяет размещать на странице до 12 столбцов.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:
пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1
пролет 4 пролет 4 пролет 4
пролет 4 пролет 8
пролет 6 пролет 6
пролет 12
Сетка Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране может выглядеть лучше с контент организован в три столбца, но на маленьком экране лучше, если элементы содержимого были наложены друг на друга.
Совет: Помните, что сумма столбцов сетки должна составлять двенадцать для строка. Более того, столбцы будут складываться независимо от области просмотра.
Классы сетки
Система сеток Bootstrap имеет четыре класса:
xs (для телефонов — экраны шириной менее 768 пикселей)
см (для планшетов — экраны шириной не менее 768 пикселей)
md (для небольших ноутбуков — экраны шириной не менее 992 пикселей)
LG (для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.
Правила сетевой системы
Некоторые правила сеточной системы Bootstrap:
Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения
Используйте строки для создания горизонтальных групп столбцов
Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
Предопределенные классы, например .row и .col-sm-4 доступны для быстрого создания макетов сетки
Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца с помощью отрицательного поля на . Строк
Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-sm-4
Ширина столбцов указывается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
Базовая структура сетки начальной загрузки
Ниже представлена базовая структура сетки Bootstrap:

…

Итак, чтобы создать желаемый макет, создайте контейнер (
). Затем создайте строку (
). Затем добавьте желаемое количество столбцов (теги с соответствующими .col - * - * классы). Обратите внимание, что числа в .col - * - * всегда должны составлять 12 для каждой строки.
Параметры сети
В следующей таблице показано, как сеточная система Bootstrap работает на нескольких устройствах:
Очень маленький
<768px Маленький
> = 768px Средний
> = 992px Большой
> = 1200 пикселей
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Подходит для Телефоны Таблетки Маленькие ноутбуки Ноутбуки и настольные ПК
Поведение сетки По горизонтали всегда Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера Нет (авто) 750px 970px 1170px
Кол-во столбцов 12 12 12 12
Ширина колонны Авто ~ 62 пикс. ~ 81 пикс. ~ 97 пикселей
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable Есть Есть Есть Есть
Смещения Есть Есть Есть Есть
Заказ колонки Есть Есть Есть Есть
Примеры
В следующих главах показаны примеры грид-систем для различных устройств:

Grid system — Bootstrap — University of Houston
Bootstrap включает в себя адаптивную мобильную первую гибкую сеточную систему, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или области просмотра.Предопределенные классы включены для упрощения настройки макета.
Введение
Системы сетки
используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap:
Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения.
Используйте строки для создания горизонтальных групп столбцов.
Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки.
Столбцы создают промежутки (промежутки между содержимым столбца) через заполнение . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
Отрицательный запас — вот почему приведенные ниже примеры неактуальны. Это значит, что содержимое в столбцах сетки совмещается с содержимым, не относящимся к сетке.
Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить.Например, три равных столбца будут использовать три .col-xs-4 .
Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет, как единое целое, переноситься на новую строку.
Классы сетки применяются к устройствам с шириной экрана больше или равной размеру точки останова и переопределяют классы сетки, нацеленные на устройства меньшего размера. Поэтому, например, применение любого класса .col-md- * к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если .col-lg- * класса нет.
Посмотрите примеры применения этих принципов к вашему коду.
Мы используем следующие медиа-запросы для создания ключевых точек останова в нашей сеточной системе.
/ * Очень маленькие устройства (телефоны, менее 768 пикселей) * / / * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * / / * Маленькие устройства (планшеты, 768 пикселей и выше) * / @media (min-width: @ screen-sm-min) {...} / * Средние устройства (настольные компьютеры, 992 пикселей и выше) * / @media (min-width: @ screen-md-min) {...} / * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * / @media (min-width: @ screen-lg-min) {...}
Мы иногда расширяем эти медиа-запросы, добавляя max-width , чтобы ограничить CSS более узким набором устройств.
@media (max-width: @ screen-xs-max) {...} @media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...} @media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...} @media (min-width: @ screen-lg-min) {...}
Параметры сети
Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.
Сверхмалые устройства Телефоны (<768 пикселей) Маленькие устройства Планшеты (≥768 пикселей) Средние устройства Настольные компьютеры (≥992 пикселей) Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сетки По горизонтали всегда Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера Нет (авто) 750px 970px 1170px
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Кол-во столбцов 12
Ширина колонны Авто ~ 62 пикс. ~ 81 пикс. ~ 97 пикселей
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable Есть
Смещения Есть
Колонка для заказа Есть
Пример: с накоплением по горизонтали
Используя один набор .col-md- * , вы можете создать базовую сеточную систему, которая начинается на мобильных устройствах и планшетах (от очень малого до небольшого диапазона), а затем становится горизонтальной на настольных (средних) устройствах. Поместите столбцы сетки в любой .row .
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6
Пример: контейнер для жидкости
Превратите любой макет сетки с фиксированной шириной в макет полной ширины, изменив внешний вид .контейнер с по . контейнер для жидкости .
...
Пример: мобильный и настольный ПК
Не хотите, чтобы ваши столбцы просто складывались в небольшие устройства? Используйте классы сетки дополнительных малых и средних устройств, добавив в столбцы .col-xs- * .col-md- * . См. Пример ниже, чтобы лучше понять, как все это работает.
.col-xs-12 .col-md-8
.col-xs-6.col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6
Пример: мобильный телефон, планшет, компьютер
Постройте предыдущий пример, создав еще более динамичные и мощные макеты с помощью классов tablet .col-sm- * .
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4
Пример: упаковка столбцов
Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одна единица переноситься на новую строку.
.col-xs-9
.col-xs-4
Поскольку 9 + 4 = 13> 12, этот div шириной 4 столбца переносится на новую строку как один непрерывный блок.
.col-xs-6
Последующие столбцы продолжаются вдоль новой строки.
.col-xs-9 .col-xs-4 Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок. .col-xs-6 Последующие столбцы продолжаются вдоль новой строки.
Сброс адаптивного столбца
С четырьмя доступными уровнями сеток вы обязательно столкнетесь с проблемами, когда в определенных точках останова ваши столбцы не очищаются правильно, поскольку один выше другого.Чтобы исправить это, используйте комбинацию .clearfix и наших отзывчивых служебных классов.
.col-xs-6 .col-sm-3
Измените размер окна просмотра или посмотрите его на своем телефоне для примера.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3
В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения, подталкивать или вытягивать . Посмотрите это в действии на примере сетки.
.col-sm-5 .col-md-6 .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0 .col-sm-6 .col-md-5 .col-lg-6 .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
Колонны смещения
Переместите столбцы вправо, используя классы .col-md-offset- * . Эти классы увеличивают левое поле столбца на * столбцов. Например, .col-md-offset-4 перемещает .col-md-4 по четырем столбцам.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
.col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3
Вложенные столбцы
Чтобы вложить контент в сетку по умолчанию, добавьте новый .строка и набор из столбцов .col-sm- * в существующем столбце .col-sm- * . Вложенные строки должны включать набор столбцов, которые в сумме составляют до 12 или меньше (необязательно, чтобы вы использовали все 12 доступных столбцов).
Уровень 1: .col-sm-9
Уровень 2: .col-xs-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6
Уровень 1: .col-sm-9 Уровень 2: .col-xs-8 .col-sm-6 Уровень 2: .col-XS-4 .col-sm-6
Колонка заказная
Простое изменение порядка столбцов встроенной сетки с классами модификаторов .col-md-push- * и .col-md-pull- * .
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
.col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9
Как использовать сетку начальной загрузки
Система сеток Bootstrap используется для макета, в частности Адаптивные макеты . Понимание того, как это работает, жизненно важно для понимания Bootstrap. Сетка состоит из групп строк и столбцов внутри одного или нескольких контейнеров .
Bootstrap Grid можно использовать отдельно, без Bootstrap JavaScript и других компонентов CSS. Вам просто нужно скачать и обратитесь к "bootstrap-grid.css" , который содержит классы Grid и Flexbox.Подробнее об использовании только CSS-файл Bootstrap Grid находится здесь, в документации.
Базовый пример использования сетки:
Я ваш контент внутри сетки!
Это дает нам одну большую «колонку» по горизонтали во вьюпорте…
2 столбца…
Левый столбец Правый столбец
3 столбца…
Левый столбец Средний столбец Правый столбец
Основные концепции Grid быстро понятны, но вам может быть интересно, почему все это Разметка HTML необходима.У вас могут возникнуть вопросы, например…
Зачем мне нужен контейнер?
Можно ли сделать одну колонку шире других?
Нужно ли мне использовать строку?
Я отвечу на подобные вопросы по Grid чуть позже. Но сначала я хочу сделать шаг назад, чтобы объяснить кое-что очень важное об использовании Grid.Понимание «правил сетки» сэкономит вам много времени и нервов. Прочтите их внимательно…
1. Столбец
должен быть непосредственным дочерним элементом строки.
2. Строки
, только используются для столбцов, ничего больше.
3. Строки должны быть помещены в контейнер.
Эти правила очень ВАЖНЫ.Строки и столбцы всегда работают вместе, и у вас никогда не должно быть одного без другого. Плохие вещи произойдут, если вы не будете точно следовать этим 3 простым правилам Grid. Я ответил на бесчисленное количество вопросов по Bootstrap. на Stack Overflow, просто применив эти правила. Сначала это может показаться сложным, но это действительно легко, если вы поймете, как работает Grid.
Есть
правильный путь для использования Bootstrap Grid...
В базовых примерах вы могли заметить, что я использовал класс .container для обертывания .row . Контейнер - это корневой (также известный как верхний уровень, самый внешний) элемент Bootstrap Grid.
Я доволен сеткой!
Контейнер можно использовать для хранения любых элементов и содержимого.Он используется не только для Строки и столбцы сетки. Например, это вполне допустимая разметка Bootstrap:
Мой заголовок Я доволен сеткой!
Поначалу Контейнер может показаться тривиальным или ненужным, но для управления он очень важен. ширина макета.Контейнер также используется для для равномерного выравнивания левого и правого краев макет в области просмотра браузера.
Bootstrap 4 имеет 2 типа контейнеров. В своих примерах я использовал .container , но есть также полная ширина . контейнер-жидкость . Вы можете использовать любой:
1 - Контейнер фиксированной ширины для центрирования макета посередине:

2 - Контейнер во всю ширину для макета, занимающего всю ширину:

Модель .контейнер быстро масштабируется по ширине (по мере уменьшения ширины экрана), так что в конечном итоге он становится во всю ширину, как .container-fluid на небольших устройствах.
Примечание. Контейнер может использоваться для хранения любого содержимого, а не только строк и столбцов сетки. Но если ты используйте строки и столбцы сетки, строки должны быть помещены внутри контейнера.Попробуйте демонстрацию контейнера на Codeply
При использовании сетки внутри контейнера будет размещена еще одна строка. У вас может быть несколько строк в Контейнер, и вы можете иметь несколько Контейнеров на одной странице. Все зависит от того, какой макет вы пытаетесь создать. достигнуть, но пока не слишком об этом беспокоиться.
Важно, чтобы контейнер использовался для хранения строк сетки (.строка).
Строки имеют отрицательное левое / правое поле -15 пикселей. Заполнение контейнера размером 15 пикселей используется для нейтрализации отрицательных полей строки. Это сделано для того, чтобы содержимое было равномерно выровнено по краям макета. Если вы не поместите строку в контейнер, она переполнится. контейнер, вызывающий нежелательную горизонтальную прокрутку.
Обратите внимание, что я сгруппировал «Строки и столбцы» в одном разделе этой статьи.Это потому, что вы не можете иметь его без другое, как объяснялось ранее в «Правилах сетки».
Некоторое время мне хотелось, чтобы Bootstrap .row на самом деле не назывался "row". Название «строка» часто вводит в заблуждение и скрывает истинное назначение .row . Когда вы думаете «ряд», вы, вероятно, думаете, что горизонтальная линия , и это нормально, НО лучше подумать о .row просто как родительских столбцов.
Думайте о строке как о группе столбцов Это связано с тем, что столбцы внутри .row не всегда располагаются горизонтально по области просмотра. Иногда мы хотим, чтобы расположение столбцов было горизонтальным, в то время как в других случаях мы хотим, чтобы столбцы располагались вертикально вниз по области просмотра. Концепция горизонтального и вертикального расположения - это суть Адаптивный дизайн.Единственная цель «строки» - содержать 1 или более «столбцов».
НЕ ПОЛОЖИТЕ СОДЕРЖИМОЕ НАПРЯМУЮ ВНУТРИ РЯДА!
Опять же, только Row предназначен для сдерживания Coumns.
⛔
Это очень плохо, неверно, никакого буэно !!

Это тоже очень плохо, неверно !!

Заголовков тоже нет! Это неправильный путь !!

столбцов, а только столбцов помещаются внутри строки.
✅

Счастлив :-) Это правильный путь.

Также важно отметить, что .row - это дисплей : flex . Как дети Flexbox, Столбцы в каждой строке имеют одинаковую высоту. Благодаря Flexbox, горизонтальное и вертикальное выравнивание (выравнивание по правому краю, центру, низу и т. Д.).) легко достигается с помощью классов Bootstrap 4 Flex и Auto-margin Utility. Теперь пора глубже взглянуть на Rows & Columns и , а именно на , как они работают вместе. Существуют разные «типы» столбцов и разные способы их использования в макете. Они волшебные.
Счастье - это ... Колонны.
Все, что может делать Bootstrap 4 Columns...
Создайте горизонтальные разделения на видовом экране.
Может иметь различную заданную ширину.
Может изменяться по ширине при разной ширине экрана.
Макет горизонтально слева направо, затем вертикально вверх и вниз.
Может изменять положение (переупорядочивать) относительно братьев и сестер в той же строке.
Они того же роста, что и их братья и сестры в одном ряду.
Может «увеличиваться» или «уменьшаться» в ширину.
Может автоматически «оборачивать» или «складывать» по вертикали по мере необходимости или с разной шириной.
Может содержать больше строк и столбцов__, это называется «вложением».
Все, что вам нужно знать о столбцах Bootstrap ...
Столбцы создают горизонтальные деления на видовом экране.Пространство между колоннами называется «желобом».
Классическая сетка Bootstrap состоит из 12 столбцов:
Примечание для чайников: Столбцы на самом деле не светло-розовые. Это используется только для того, чтобы вы могли видеть левую / правую границы столбцов. В большинстве случаев вы не собираетесь использовать все 12 отдельных столбцов, как показано выше.Вместо этого вы будете использовать комбинация 12 для содержания страницы…
Таким образом, столбцы можно равномерно разделить на коэффициенты по 12. Например, 6 столбцов (12/6 = 2):
И вы можете посчитать ...
Столбцы могут быть разделены с использованием любой части из 12 единиц.И можно использовать меньше 12 . Также можно использовать вместо 12 , которые я покажу вам позже.
При всей этой гибкости возможности компоновки кажутся безграничными ...
Но сетка не всегда около 12. Благодаря Flexbox, Bootstrap 4 имеет новые столбцы «Автоматическая компоновка».Эти безблочные колонны обеспечивают еще большую гибкость при проектировании макетов .
Теперь вы знаете, как использовать столбцы для создания горизонтального макета. Но подождите ... это еще не все! Давайте поговорим о некоторых более интересных вещах, которые умеют делать Columns.
Как вы видели ранее, столбцы могут быть разной ширины:
Знаете ли вы, что ширина столбца может изменять в зависимости от ширины экрана ?
Это называется Отзывчивый дизайн , и я очень скоро расскажу вам, как именно он работает.Но, обо всем по порядку, мне нужно закончить рассказ о столбцах. Помните раньше, когда я сказал « Можно использовать более 12 столбцов в строке »?
Столбцы в одном макете строки горизонтально, а затем складываются вертикально вниз. Это вертикальное «штабелирование» или «заворачивание» происходит, когда количество столбцов в одной строке превышает 12.Это называется "переносом столбца"… Столбцы в той же строке переносятся на следующую строку каждые 12 единиц:
Ширина столбца и «упаковка» могут контролироваться с помощью различных уровней адаптивной сетки (также известных как «точки останова сетки»):
Столбцы могут изменять положение (переупорядочивать) относительно братьев и сестер в той же строке:
Столбцы могут содержать детские строки и столбцы.Это называется «вложением»:
Столбцы могут «увеличиваться» или «уменьшаться» в ширину. Это столбцы с автоматической компоновкой:
Теперь, когда вы понимаете основы использования системы сеток Bootstrap, теперь я покажу вам, что средние значения
sm , -md , -lg и -xl . Я объясню больше о том, как использовать сетку для адаптивного дизайна .
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: .контейнер , . row и .col - * - * . (Первый * в .col - * - * необходимо заменить спецификатором точки останова, например xs, sm, md, lg, xl , а второй * должен быть заполнен размером диапазона столбца. Сумма всех столбцов должна быть равна 12.)
Давайте теперь посмотрим на основные компоненты сетки Bootstrap.
Контейнер
Контейнер - это внешняя оболочка для макета сетки. Это div с классом .контейнер для фиксированной ширины или .container-fluid для 100% полной ширины.
Ряд
Строка служит логическим контейнером для столбцов.
Колонна
Столбец - это то, что составляет блок в сетке. Он должен находиться в ряду.
Система сеток Bootstrap предоставляет следующие дополнительные классы столбцов:
.col-xs- * : предназначен для очень маленьких экранов менее 576px шириной
.col-sm- * : предназначен для небольших экранов с шириной не менее 576px
.col-md- * : предназначен для средних экранов с шириной> = 768px
.col-lg- * : предназначен для больших экранов с шириной> = 992px
.col-xl- * : предназначен для очень больших экранов, ширина которых равна или больше 1200px .
Вам не нужно добавлять несколько классов, если вы хотите указать одинаковую ширину для разных размеров экрана; просто добавьте класс с наименьшей точкой останова.Так, например, вместо .col-sm-6 и .col-md-6 нужно применить только .col-sm-6 .
Макеты сеток Bootstrap с 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) class.
См. Трюки 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 может быть немного проблематичным. То же самое можно сказать и обо всех других гибких утилитах, таких как .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-reverse устанавливает горизонтальное направление справа налево
столбец задает вертикальное направление сверху вниз
column-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
Свойство Flexbox align-items позволяет изменять выравнивание гибких элементов по поперечной оси.(Если вы установите главную ось горизонтально, поперечная ось будет вертикальной, и наоборот.)
Возможные значения для align-items :
stretch : это начальное значение, которое заставляет гибкие элементы растягиваться до высоты их самых высоких родственных элементов
flex-start выравнивает элементы в начале гибкого контейнера
гибкий конец выравнивает элементы в конце гибкого контейнера
center отвечает за центрирование гибкого элемента внутри его контейнера.
Вы можете быстро применить это поведение с помощью следующих классов Bootstrap:
выровнять элементы-стрейч
align-items-start
align-items-end
выровнять элементы по центру
Посмотрите на код в этой ручке, чтобы увидеть пример того, как вы можете применить классы утилит Bootstrap flex:
См. Раздел Pen Bootstrap 4 Vertical Alignment by SitePoint (@SitePoint) на CodePen.
Вы можете найти другие доступные утилиты в документации Bootstrap flex.
Заключение
В этой статье мы рассмотрели, как Flexbox делает систему сеток Bootstrap более универсальной, с такими функциями, как автоматические макеты одинаковой ширины и столбцы одинаковой высоты. Затем мы рассмотрели некоторые свойства Flexbox, которые являются ключевыми для освоения служебных классов Bootstrap flex и получения максимальной отдачи от их мощных возможностей компоновки.
Если вы слышали о Bootstrap, но откладывали его изучение, потому что он кажется слишком сложным, то пройдите наш курс Введение в Bootstrap 4, чтобы быстро и весело познакомиться с возможностями Bootstrap.
dragma / styled-bootstrap-grid: Полная реализация сеточной системы Twitter Bootstrap v4
Кредиты
Этот модуль основан на модуле 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
Предварительные требования
нпм 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 может быть обернутым (или обернутым) компонентом стиля 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.
наименование псевдонимы css сгенерировано
XS меньше все размеры: @media (max-width: 575 пикселей) {/ * * /}
см телефон @media (min-width: 576px) {/ * * /}
мкр планшет @media (min-width: 768 пикселей) {/ * * /}
LG настольный @media (min-width: 992px) {/ * * /}
xl гигант @media (min-width: 1200px) {/ * * /}
xxl очень Гигантский @media (min-width: 1440px) {/ * * /}
Определение реквизита
GridThemeProvider
стойки по умолчанию тип описание
gridTheme undefined Объект См. Описание ниже (*)
(*)
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 .
ряд
стойки по умолчанию тип описание
alignItems неопределенный строка начало или конец или центр или базовая линия или растяжение . Эквивалент align-items- {value}
smAlignItems неопределенный строка начало или конец или центр или базовая линия или растяжение .Эквивалент align-items-sm- {value}
mdAlignItems неопределенный строка начало или конец или центр или базовая линия или растяжение . Эквивалент align-items-md- {value}
lgAlignItems неопределенный строка начало или конец или центр или базовая линия или растяжение .Эквивалент align-items-lg- {value}
xlAlignItems неопределенный строка начало или конец или центр или базовая линия или растяжение . Эквивалент align-items-xl- {value}
justifyContent неопределенный строка начало или конец или центр или между или около .Эквивалент justify-content- {value}
smJustifyContent неопределенный строка начало или конец или центр или между или около . Эквивалентно justify-content-sm- {value}
mdJustifyContent неопределенный строка начало или конец или центр или между или около .Эквивалент justify-content-md- {value}
lgJustifyContent неопределенный строка начало или конец или центр или между или около . Эквивалент justify-content-lg- {value}
xlJustifyContent неопределенный строка начало или конец или центр или между или около .Эквивалент justify-content-xl- {value}
Плюс те, которые унаследованы от styled-components div .
Col
стойки по умолчанию тип описание
col неопределенный номер или строка или логическое значение Идет от 1 до 12.Эквивалент col- * (или col в случае true )
смещение неопределенный номер или строка Идет от 0 до 11. Эквивалентно смещению - *
авто неопределенный логическое Эквивалент col-auto
alignSelf неопределенный строка авто или начало или конец или центр или базовая линия или растяжение .Эквивалент align-self- {value}
заказать неопределенный номер или строка первый или последний или 0 до 12 . Эквивалент заказа - {value}
нет Желоб неопределенный логическое Эквивалент без желоба
см неопределенный номер или строка Идет от 1 до 12.Эквивалент col-sm- * (или col-sm в случае true )
скрытыйXsUp неопределенный логическое Скрывает содержимое от точки останова xs до бесконечности
скрытоXsDown неопределенный логическое Скрывает содержимое от точки останова xs до 0
smOffset неопределенный номер или строка Идет от 0 до 11.Эквивалент offset-sm- *
smAuto неопределенный логическое Эквивалент col-sm-auto
smAlignSelf неопределенный строка авто или начало или конец или центр или базовая линия или растяжение . Эквивалент align-self-sm- {value}
smOrder неопределенный номер или строка первый или последний или 0 до 12 .Эквивалент order-sm- {value}
скрытоSmUp неопределенный логическое Скрывает содержимое от точки останова sm до бесконечности
скрытоSmDown неопределенный логическое Скрывает содержимое от точки останова sm до 0
мкр неопределенный номер или строка Идет от 1 до 12.Эквивалент col-md- * (или col-md в случае true )
mdOffset неопределенный номер или строка Идет от 0 до 11. Эквивалентно offset-md- *
mdAuto неопределенный логическое Эквивалент col-md-auto
mdAlignSelf неопределенный строка авто или начало или конец или центр или базовая линия или растяжение .Эквивалент align-self-md- {value}
mdЗаказать неопределенный номер или строка первый или последний или 0 до 12 . Эквивалент order-md- {value}
скрыто неопределенный логическое Скрывает содержимое от точки останова MD до бесконечности
скрыто неопределенный логическое Скрывает содержимое от точки останова md до 0
LG неопределенный номер или строка Идет от 1 до 12.Эквивалент col-lg- * (или col-lg в случае true )
lgOffset неопределенный номер или строка Идет от 0 до 11. Эквивалент offset-lg- *
LG Авто неопределенный логическое Эквивалент col-lg-auto
LGAlignSelf неопределенный строка авто или начало или конец или центр или базовая линия или растяжение .Эквивалент align-self-lg- {value}
LG Заказать неопределенный номер или строка первый или последний или 0 до 12 . Эквивалентно order-lg- {value}
скрытый LGUp неопределенный логическое Скрывает содержимое от точки останова lg до бесконечности
скрытоLgDown неопределенный логическое Скрывает содержимое от точки останова lg до 0
xl неопределенный номер или строка Идет от 1 до 12.Эквивалент col-xl- * (или col-xl в случае true )
xl Смещение неопределенный номер или строка Изменяется от 0 до 11. Эквивалентно offset-xl- *
xlAuto неопределенный логическое Эквивалент col-xl-auto
xlAlignSelf неопределенный строка авто или начало или конец или центр или базовая линия или растяжение .Эквивалент align-self-xl- {value}
xlЗаказать неопределенный номер или строка первый или последний или 0 до 12 . Эквивалент order-xl- {value}
скрытыйXlUp неопределенный логическое Скрывает содержимое от точки останова xl до бесконечности
скрытоXlDown неопределенный логическое Скрывает содержимое от точки останова xl до 0
Плюс те, которые унаследованы от styled-components div .
Выполнить пример
Для запуска примера
Откройте терминал и перейдите в каталог example с cd <путь к папке styled-bootstrap-grid> / example
Установите зависимости примера с пряжей
Пробег Начало пряжи
Зависимости
задача
полная веб-документация
Есть еще идеи? Пожалуйста, оставьте предложение.
CSS Grid vs Bootstrap: какой из них вам подходит.
Пользовательский интерфейс — это то, с чем фактически взаимодействует каждый пользователь веб-сайта при доступе к сайту. Функциональность, эстетическая привлекательность и интуитивный характер пользовательского интерфейса определяют качество пользовательского опыта. Таким образом, высокопроизводительный, отзывчивый и визуально приятный пользовательский интерфейс является обязательным условием успеха веб-сайта.
Есть несколько инструментов, которые помогают определять макет веб-сайта и размещать элементы пользовательского интерфейса. Важно выбрать правильный инструмент, поскольку от него зависит качество пользовательского интерфейса, а также легкость его создания.
В этой статье сравниваются два часто используемых инструмента, также называемых сетками макетов — CSS Grid и Bootstrap. Но перед сравнением давайте обсудим эти инструменты и их работу по отдельности.
Что такое CSS Grid?
CSS Grid — это двухмерная сетка, используемая для работы с макетом элементов пользовательского интерфейса и сегментов веб-страницы. Сетка состоит из горизонтальных и вертикальных линий, образующих строки и столбцы, как в таблице.
Использование CSS Grid для размещения элементов пользовательского интерфейса помогает точно позиционировать их, что полезно для реализации адаптивного дизайна для сайта.Сетка использует пиксели для фиксации размеров дорожек, и они тоже могут быть гибкими на процентной основе. Это помогает той же веб-странице настраивать свой дизайн в соответствии с размером экрана различных устройств, таких как телефоны, планшеты, настольные компьютеры и т. Д.
Проверьте свой веб-сайт с помощью этого бесплатного средства проверки адаптивного дизайна.
CSS Grid, таким образом, играет важную роль в создании макетов веб-страниц, которые способствуют быстрому реагированию. Это ключевой инструмент в создании кроссплатформенного программного обеспечения, способствующий созданию привлекательного пользовательского интерфейса, который радует пользователей.
Как работает CSS Grid?
CSS Grid разделяет пространство страницы веб-сайта с помощью строк и столбцов, которые могут быть выделены фиксированным образом, указав пиксели или долю (с использованием от ) доступного пространства, которое должно быть выделено для назначенного раздела. fr используется, чтобы сделать макет адаптивным и кроссплатформенным.
Давайте посмотрим на пример с макетом, определяющим 7 областей, которые разделены дробями — столбцы: 2 дроби, 3 дроби, 1 дробь, и в строках : 1 дробь, 2 дроби, 3 дроби .
Вот как будет выглядеть макет:

Макет страницы
HTML (вызов класса оболочки, определенного с помощью CSS Grid)

Один

Два

Три

Четыре

Пять

Шесть

Семь

CSS (определение макета с помощью гибкой сетки CSS)
.wrapper { дисплей: сетка; сетка-шаблон-столбцы: 2fr 3fr 1fr; сетка-шаблон-строки: 1fr 2fr 3fr } * {box-sizing: border-box;}
Следующий код добавит текст в область, определенную полем Five « Добро пожаловать в BrowserStack! ”
Поскольку макет такой же, класс CSS останется неизменным, и будет изменен только код HTML.
HTML (вызов класса оболочки, определенного с помощью CSS Grid)

Один

Два

Три

Четыре

Пять
Добро пожаловать в BrowserStack!

Шесть

Семь

Макет страницы при добавлении текста в поле номер пять
Что такое Bootstrap?
Bootstrap — это пакет, содержащий набор инструментов HTML, CSS и JavaScript, используемых для создания веб-сайтов.Он гибкий и предлагает кроссбраузерную совместимость за счет многократно используемых компонентов пользовательского интерфейса. В этой статье основное внимание будет уделено системе сеток Bootstrap, которая может помочь читателям понять сравнение макетов.
Bootstrap имеет адаптивную сеточную систему с настраиваемыми точками останова. Он предлагает дизайн, ориентированный на мобильные устройства, который обеспечивает единое масштабирование кода для нескольких устройств, таких как телефоны, планшеты и настольные компьютеры. Как и CSS Grid, это тоже определяется с помощью двумерной сетки, состоящей из горизонтальных и вертикальных линий, образующих строки и столбцы.
Как работает Bootstrap Grid?
В отличие от CSS Grid, в Bootstrap Grid элементы столбцов размещаются внутри элементов строк, создавая горизонтальную группу столбцов с каждой строкой. Столбцы остаются непосредственными дочерними элементами соответствующих строк, в которые они помещаются. В полной строке максимальное количество столбцов должно быть 12.
Он предлагает четыре уровня классов, а именно xs, sm, md и lg, , которые классифицируются следующим образом в зависимости от размера устройства:
xs класс предназначен для телефонов размером <768 пикселей.
sm класс предназначен для планшетов с размером > = 768 пикселей и <992 пикселей .
md класс используется для рабочих столов размером > = 992 пикселей, и <1200 пикселей.
LG класс определен для больших рабочих столов с размером > = 1200 пикселей.
Эта классификация по размеру устройства помогает реализовать адаптивность веб-сайта для устройств разных размеров, чтобы обеспечить идеальный до пикселя пользовательский интерфейс.
Проверить отклик веб-сайта бесплатно
Давайте посмотрим на пример с макетом, определяющим 7 областей — 3 столбца в первой строке и 4 во второй строке. Область, обозначенная пятым полем, содержит текст «Добро пожаловать в BrowserStack!»
Вот как будет выглядеть макет:

Макет страницы для уровня md class, т.е. рабочего стола> = 992 px

Один

Два

Три

Четыре

Five Добро пожаловать в BrowserStack!

Шесть

Семь

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

Один

Два

Три

Четыре

Five Добро пожаловать в BrowserStack!

Шесть

Семь

Приведенный выше код приведет к созданию такого же макета для настольных устройств (уровень MD), но на телефонах он будет выглядеть по-другому.

Макет страницы для уровня xs, т.е. мобильных телефонов <786 пикселей
CSS Grid vs Bootstrap
Вот секретное сравнение CSS Grid и Bootstrap:
CSS Grid
Критерии 05 90 Bootstrap
Markup Имеет более чистую и разборчивую разметку. Макет сетки не определяется в разметке, но выполняется в CSS Требуется тег div для каждой строки и для определения уровня класса для определения макета в каждом теге div.Это делает код более длинным.
Ограничение столбца Предлагает гибкий макет без ограничения столбца. Это позволяет очень легко иметь любое количество столбцов. Поскольку сетка разделена на 12 столбцов, любой макет, который не суммируется до 12, трудно материализовать
Скорость отклика Даже если HTML остается То же самое, просто добавьте различные медиа-запросы в CSS и определите макет сетки для каждого элемента HTML. Можно определить макет области содержимого индивидуально для разных размеров устройства, используя предопределенные уровни классов.Но это делает разметку более громоздкой, поскольку они увеличивают количество классов div.
Скорость загрузки страницы Хорошо поддерживается большинством браузеров и версий. Никаких загрузок не требуется, и скорость загрузки страницы выше. Необходимо загрузить файлы поддержки таблиц стилей, что снижает скорость загрузки страницы.
Какой из них лучше?
Bootstrap предлагает больше, чем систему компоновки сетки, и представляет собой скорее набор инструментов внешнего интерфейса, способный создавать сложные адаптивные проекты с помощью предопределенных классов.
С другой стороны, CSS Grid — это простая и гибкая система макета сетки, в которой применяется кросс-совместимый дизайн, обеспечивающий первоклассный пользовательский интерфейс. Таким образом, использование CSS Grid поверх Bootstrap имеет смысл при реализации простых макетов.
Чтобы создать веб-приложение, которое доставит удовольствие клиентам, важно обеспечить правильную визуальную привлекательность для разных платформ и устройств.
После реализации проекта тестирование кроссбраузерной совместимости становится обязательным.Важно обеспечить единообразную визуализацию пользовательского интерфейса на нескольких устройствах, предлагая согласованный пользовательский интерфейс. Для получения точных результатов кроссбраузерные тесты необходимо запускать в реальном облаке устройства. Используйте облачную сетку Selenium из более чем 2000 реальных устройств BrowserStack для комплексного тестирования автоматизации в реальных пользовательских условиях.
Зарегистрируйтесь, выберите нужную комбинацию устройство-браузер-ОС и начните тестирование бесплатно.
Bootstrap (Часть 2) | Сетка

< html lang = "en" >
< головка >
< title > Пример начальной загрузки title >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width = device-width, initial-scale = 1" />
< ссылка
rel = «таблица стилей»
href =
90 075 < сценарий src =
сценарий >
< сценарий src =
сценарий >
< сценарий src =
сценарий >
головка >
< корпус >
< заголовок >
< div класс = «контейнер» >
< h2 стиль = 900 75 "цвет: зеленый" > GeeksforGeeks h2 >
< strong >
Портал компьютерных наук для компьютерных фанатов
strong >
div >
Заголовок >
< div class = «контейнер» >
< div class = «row» >
< div class = "bg bg-secondary w-100" >
Первый Строка
div >
div >
< div class = «строка» >
< div class = "bg bg-primary w-100" >
Вторая строка
div >
div >
div >
< br />
< div class = «контейнер» >
< div class = "row" >
< div class = "col-xs-2 col-sm-6 col-md -3
col-lg-4 col-xl-6 ">
< div class = " bg bg-success " >
Первый столбец
div >
div >
< div class = "col- xs-2 col-sm-6 col-md-3
col-lg-4 col-xl-6 ">
< div класс 9 0075 = «bg bg-dangerous» >
второй столбец
< div class = «row» >
< div class = "col-md-3 col-lg-4 col-xl-6" >
< div class = «bg bg-success» >
Первый вложенный столбец
div >
div >
< div class = "col-md-3 col-lg-4 col-xl-6" >
< div class = "bg bg-primary" >
Второй вложенный столбец
div >
div >
div >
div >
div >
div >
div >
< нижний колонтитул >
< часов />
< div class = «контейнер» >
< p >
Посетите a > наш сайт
p >
< p >
Like a > нас на фейсбуке
p >
div >
нижний колонтитул >
корпус >
html 90 074>
.

Разметка сеточной системы Bootstrap 3	Очень маленькие устройства Телефоны (<768px)	Маленькие устройства Планшеты (≥768px)	Средние устройства Компьютеры (≥992px)	Большие устройства Компьютеры (≥1200px)
Максимальная ширина контейнера	Нет (авто)	750px	970px	1170px
Префикс класса	. col-xs-	.col-sm-	.col-md-	.col-lg-
Максимальная ширина колонки	Авто	~62px	~81px	~97px
Ширина промежутка (Gutter)	15px с каждой стороны колонки (например 30px)

Класс	Описание
.visible-xs-*	Делает элемент видимым только для очень маленьких устройств с шириной экрана меньше 768px. Скрыт для других.
.visible-sm-*	Делает элемент видимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Скрыт для других.
.visible-md-*	Делает элемент видимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Скрыт для других.
.visible-lg-*	Делает элемент видимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Скрыт для других.

Класс	Описание
. hidden-xs	Делает элемент невидимым только для очень маленьких устройств с шириной экрана меньше 768px. Видим для других.
.hidden-sm	Делает элемент невидимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Видимый для других.
.hidden-md	Делает элемент невидимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Видимый для других.
.hidden-lg	Делает элемент невидимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Видимый для других.

.visible-print-block	Делает невидимыми блочные элементы (block) при предпросмотре страницы в браузере для печати.
.visible-print-inline	Делает невидимыми строчные элементы (inline) при предпросмотре страницы в браузере для печати.
.visible-print-inline-block	Делает невидимыми строчно-блочные элементы (inline-block) при предпросмотре страницы в браузере для печати.
.hidden-print	Скрывает элементы, которые видимы в браузере, при печати.

пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1	пролет 1
пролет 4				пролет 4				пролет 4
пролет 4				пролет 8
пролет 6						пролет 6
пролет 12

	Очень маленький <768px	Маленький > = 768px	Средний > = 992px	Большой > = 1200 пикселей
Префикс класса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Подходит для	Телефоны	Таблетки	Маленькие ноутбуки	Ноутбуки и настольные ПК
Поведение сетки	По горизонтали всегда	Свернут, чтобы начать, горизонтально над контрольными точками	Свернут, чтобы начать, горизонтально над контрольными точками	Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера	Нет (авто)	750px	970px	1170px
Кол-во столбцов	12	12	12	12
Ширина колонны	Авто	~ 62 пикс.	~ 81 пикс.	~ 97 пикселей
Ширина желоба	30 пикселей (по 15 пикселей с каждой стороны столбца)	30 пикселей (по 15 пикселей с каждой стороны столбца)	30 пикселей (по 15 пикселей с каждой стороны столбца)	30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable	Есть	Есть	Есть	Есть
Смещения	Есть	Есть	Есть	Есть
Заказ колонки	Есть	Есть	Есть	Есть

	Сверхмалые устройства Телефоны (<768 пикселей)	Маленькие устройства Планшеты (≥768 пикселей)	Средние устройства Настольные компьютеры (≥992 пикселей)	Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сетки	По горизонтали всегда	Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера	Нет (авто)	750px	970px	1170px
Префикс класса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Кол-во столбцов	12
Ширина колонны	Авто	~ 62 пикс.	~ 81 пикс.	~ 97 пикселей
Ширина желоба	30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable	Есть
Смещения	Есть
Колонка для заказа	Есть

наименование	псевдонимы	css сгенерировано
XS	меньше	все размеры: `@media (max-width: 575 пикселей) {/ * * /}`
см	телефон	`@media (min-width: 576px) {/ * * /}`
мкр	планшет	`@media (min-width: 768 пикселей) {/ * * /}`
LG	настольный	`@media (min-width: 992px) {/ * * /}`
xl	гигант	`@media (min-width: 1200px) {/ * * /}`
xxl	очень Гигантский	`@media (min-width: 1440px) {/ * * /}`

стойки	по умолчанию	тип	описание
alignItems	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `базовая линия` или `растяжение` . Эквивалент `align-items- {value}`
smAlignItems	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-items-sm- {value}`
mdAlignItems	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `базовая линия` или `растяжение` . Эквивалент `align-items-md- {value}`
lgAlignItems	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-items-lg- {value}`
xlAlignItems	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `базовая линия` или `растяжение` . Эквивалент `align-items-xl- {value}`
justifyContent	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `между` или `около` .Эквивалент `justify-content- {value}`
smJustifyContent	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `между` или `около` . Эквивалентно `justify-content-sm- {value}`
mdJustifyContent	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `между` или `около` .Эквивалент `justify-content-md- {value}`
lgJustifyContent	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `между` или `около` . Эквивалент `justify-content-lg- {value}`
xlJustifyContent	`неопределенный`	`строка`	`начало` или `конец` или `центр` или `между` или `около` .Эквивалент `justify-content-xl- {value}`

стойки	по умолчанию	тип	описание
col	`неопределенный`	`номер` или `строка` или `логическое значение`	Идет от 1 до 12.Эквивалент `col- *` (или `col` в случае `true` )
смещение	`неопределенный`	`номер` или `строка`	Идет от 0 до 11. Эквивалентно смещению `- *`
авто	`неопределенный`	`логическое`	Эквивалент `col-auto`
alignSelf	`неопределенный`	`строка`	`авто` или `начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-self- {value}`
заказать	`неопределенный`	`номер` или `строка`	`первый` или `последний` или `0` до `12` . Эквивалент заказа `- {value}`
нет Желоб	`неопределенный`	`логическое`	Эквивалент `без желоба`
см	`неопределенный`	`номер` или `строка`	Идет от 1 до 12.Эквивалент `col-sm- *` (или `col-sm` в случае `true` )
скрытыйXsUp	`неопределенный`	`логическое`	Скрывает содержимое от точки останова xs до бесконечности
скрытоXsDown	`неопределенный`	`логическое`	Скрывает содержимое от точки останова xs до 0
smOffset	`неопределенный`	`номер` или `строка`	Идет от 0 до 11.Эквивалент `offset-sm- *`
smAuto	`неопределенный`	`логическое`	Эквивалент `col-sm-auto`
smAlignSelf	`неопределенный`	`строка`	`авто` или `начало` или `конец` или `центр` или `базовая линия` или `растяжение` . Эквивалент `align-self-sm- {value}`
smOrder	`неопределенный`	`номер` или `строка`	`первый` или `последний` или `0` до `12` .Эквивалент `order-sm- {value}`
скрытоSmUp	`неопределенный`	`логическое`	Скрывает содержимое от точки останова sm до бесконечности
скрытоSmDown	`неопределенный`	`логическое`	Скрывает содержимое от точки останова sm до 0
мкр	`неопределенный`	`номер` или `строка`	Идет от 1 до 12.Эквивалент `col-md- *` (или `col-md` в случае `true` )
mdOffset	`неопределенный`	`номер` или `строка`	Идет от 0 до 11. Эквивалентно `offset-md- *`
mdAuto	`неопределенный`	`логическое`	Эквивалент `col-md-auto`
mdAlignSelf	`неопределенный`	`строка`	`авто` или `начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-self-md- {value}`
mdЗаказать	`неопределенный`	`номер` или `строка`	`первый` или `последний` или `0` до `12` . Эквивалент `order-md- {value}`
скрыто	`неопределенный`	`логическое`	Скрывает содержимое от точки останова MD до бесконечности
скрыто	`неопределенный`	`логическое`	Скрывает содержимое от точки останова md до 0
LG	`неопределенный`	`номер` или `строка`	Идет от 1 до 12.Эквивалент `col-lg- *` (или `col-lg` в случае `true` )
lgOffset	`неопределенный`	`номер` или `строка`	Идет от 0 до 11. Эквивалент `offset-lg- *`
LG Авто	`неопределенный`	`логическое`	Эквивалент `col-lg-auto`
LGAlignSelf	`неопределенный`	`строка`	`авто` или `начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-self-lg- {value}`
LG Заказать	`неопределенный`	`номер` или `строка`	`первый` или `последний` или `0` до `12` . Эквивалентно `order-lg- {value}`
скрытый LGUp	`неопределенный`	`логическое`	Скрывает содержимое от точки останова lg до бесконечности
скрытоLgDown	`неопределенный`	`логическое`	Скрывает содержимое от точки останова lg до 0
xl	`неопределенный`	`номер` или `строка`	Идет от 1 до 12.Эквивалент `col-xl- *` (или `col-xl` в случае `true` )
xl Смещение	`неопределенный`	`номер` или `строка`	Изменяется от 0 до 11. Эквивалентно `offset-xl- *`
xlAuto	`неопределенный`	`логическое`	Эквивалент `col-xl-auto`
xlAlignSelf	`неопределенный`	`строка`	`авто` или `начало` или `конец` или `центр` или `базовая линия` или `растяжение` .Эквивалент `align-self-xl- {value}`
xlЗаказать	`неопределенный`	`номер` или `строка`	`первый` или `последний` или `0` до `12` . Эквивалент `order-xl- {value}`
скрытыйXlUp	`неопределенный`	`логическое`	Скрывает содержимое от точки останова xl до бесконечности
скрытоXlDown	`неопределенный`	`логическое`	Скрывает содержимое от точки останова xl до 0

Критерии	05 90	Bootstrap
Markup	Имеет более чистую и разборчивую разметку. Макет сетки не определяется в разметке, но выполняется в CSS	Требуется тег div для каждой строки и для определения уровня класса для определения макета в каждом теге div.Это делает код более длинным.
Ограничение столбца	Предлагает гибкий макет без ограничения столбца. Это позволяет очень легко иметь любое количество столбцов.	Поскольку сетка разделена на 12 столбцов, любой макет, который не суммируется до 12, трудно материализовать
Скорость отклика	Даже если HTML остается То же самое, просто добавьте различные медиа-запросы в CSS и определите макет сетки для каждого элемента HTML.	Можно определить макет области содержимого индивидуально для разных размеров устройства, используя предопределенные уровни классов.Но это делает разметку более громоздкой, поскольку они увеличивают количество классов div.
Скорость загрузки страницы	Хорошо поддерживается большинством браузеров и версий. Никаких загрузок не требуется, и скорость загрузки страницы выше.	Необходимо загрузить файлы поддержки таблиц стилей, что снижает скорость загрузки страницы.