В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

В чем разница между col-lg-*, col-md-*и col-sm-*в Twitter Bootstrap?

Обновлено 2019 ...

Bootstrap 3 Сетка поставляется в 4 -х уровнях (или «точки останова») ...

• Очень маленький (для смартфонов .col-xs-*)
• Маленький (для планшетов .col-sm-*)
• Средний (для ноутбуков .col-md-*)
• Большой (для ноутбуков / десктопов .col-lg-*).

Эти размеры сетки позволяют вам управлять поведением сетки на различной ширине. Различные уровни контролируются CSS медиа - запросов .

Так в сетке Bootstrap с 12 столбцами ...

col-sm-3имеет 3 из 12 столбцов шириной (25%) на типичной небольшой ширине устройства (> 768 пикселей)

col-md-3имеет 3 из 12 столбцов шириной (25%) на типичной средней ширине устройства (> 992 пикселей)

Меньший уровень ( xs, smили md) также определяет размер для большей ширины экрана . Таким образом, для столбца одинакового размера на всех уровнях просто установите ширину для наименьшего видового экрана ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> такой же как,

<div class="col-sm-3">..</div>

Большие уровни подразумеваются. Потому что col-sm-3означает 3 units on sm-and-up, если специально не переопределено большим уровнем, который использует другой размер.

xs(по умолчанию)> переопределено sm> переопределено md> переопределеноlg

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

<div class="col-md-3 col-sm-6">..</div>

В sm, mdи lgсетки будет все «стек» вертикально на экранах / видовых менее чем 768 пикселей. Это где xsсетка вписывается. Столбцы, которые используют col-xs-*классы, не будут складываться вертикально, и продолжают уменьшаться на самых маленьких экранах.

Измените размер браузера, используя эту демонстрацию, и вы увидите эффекты масштабирования сетки.

Bootstrap 4

В Bootstrap 4 появился новый -xl-размер, посмотрите эту демонстрацию . Кроме того , -xs-инфикс был удален , так маленькие колонки просто col-1, col-2.. col-12и т.д ..

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Демо

Кроме того, Bootstrap 4 включает в себя новые столбцы автоматической разметки . Они также имеют адаптивные контрольные точки ( col, col-sm, col-mdи т.д ..), но не имеют определенные% ширины. Следовательно, столбцы автоматического размещения заполняются одинаковой шириной по всей строке.

Эта статья объясняет больше о сетке Bootstrap

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

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

Например, если вы начинаете со столбцов: ABC

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

A

В

С

Если вы выберете col-lg, столбцы будут складываться при ширине <1200 пикселей.

Если вы выберете col-md, столбцы будут складываться, когда ширина <992px.

Если вы выберете col-sm, столбцы будут складываться при ширине <768 пикселей.

Если вы выберете col-xs, столбцы никогда не будут складываться.

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

Если вы выберете col-sm, столбцы станут горизонтальными, если ширина будет> = 768 пикселей.

Если вы выберете col-md, столбцы станут горизонтальными, когда ширина> = 992px.

Если вы выберете col-lg, столбцы станут горизонтальными, когда ширина> = 1200px.

Из документации по загрузке Twitter :

• маленькая сетка (≥ 768 пикселей) = .col-sm-*,
• средняя сетка (≥ 992px) = .col-md-*,
• большая сетка (≥ 1200px) = .col-lg-*.

Я думаю, что запутанным аспектом этого является тот факт, что BootStrap 3 является мобильной первой адаптивной системой и не объясняет, как это влияет на иерархию col-xx-n в этой части документации Bootstrap. Это заставляет задуматься о том, что происходит на меньших устройствах, если вы выбираете значение для больших устройств, и заставляет задуматься, нужно ли указывать несколько значений. (Вы не)

Я бы попытался прояснить это, заявив, что ... Попытка более мелких типов (xs, sm) сохранить внешний вид макета на меньших экранах, а более крупные типы (md, lg) будут корректно отображаться только на больших экранах, но обернут столбцы на меньших устройствах. Значения, указанные в предыдущих примерах, относятся к порогу, при котором начальная загрузка ухудшает внешний вид, чтобы соответствовать доступному состоянию экрана.

На практике это означает, что если вы сделаете столбцы col-xs-n, они будут сохранять правильный внешний вид даже на очень маленьких экранах, пока размер окна не станет настолько ограничительным, что страница не будет отображаться правильно. Это должно означать, что устройства, имеющие ширину 768 пикселей или менее, должны отображать вашу таблицу в том виде, как вы ее разработали, а не в ухудшенном виде (в виде столбца в виде одиночной или свернутой строки). Очевидно, это все еще зависит от содержимого столбцов, и в этом весь смысл. Если страница пытается отобразить несколько столбцов с большими данными рядом на небольшом экране, то столбцы естественным образом будут ужасно перенесены, если вы не учли их. Поэтому, в зависимости от данных в столбцах, вы можете выбрать точку, в которой макет будет выделен для адекватного отображения содержимого.

Например, если ваша страница содержит три столбца col-sm-n, программа начальной загрузки обернет столбцы в строки, когда ширина страницы упадет ниже 992px. Это означает, что данные все еще видны, но для их просмотра потребуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет ухудшался, выберите xs (при условии, что ваши данные могут быть адекватно отображены на устройстве с более низким разрешением в трех столбцах)

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

Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не опустится ниже порога xs в 1200 пикселей.

Размеры устройства и префикс класса:

• Очень маленькие устройства Телефоны (<768px) - .col-xs-
• Планшеты для небольших устройств (≥768px) - .col-sm-
• Средние устройства Рабочие столы (≥992px) - .col-md-
• Большие устройства для настольных ПК (≥1200px) - .col-lg-

Варианты сетки:

Ссылка: Grid System

TL; DR

.col-X-Yозначает, что на экране размера X и выше , растянуть этот элемент, чтобы заполнить Y столбцов .

Bootstrap обеспечивает сетку из 12 столбцов на каждый .row, поэтому Y = 3 означает ширину = 25%.

xs, sm, md, lg размеры для смартфона, планшета, ноутбука, рабочего стола соответственно.

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

пример

<div class="col-lg-6 col-xs-12">

Значение: 50% ширины на настольных компьютерах, 100% ширины на мобильных устройствах, планшетах и ​​ноутбуках.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Один конкретный случай: прежде чем изучать систему сетки начальной загрузки, убедитесь, что масштабирование браузера установлено на 100% (сто процентов). Например: если разрешение экрана (1600px x 900px) и масштабирование браузера составляет 175%, то элементы «bootstrap-ped» будут сгруппированы.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Браузер на 100 процентов - элементы расположены горизонтально

Chrome zoom 175%

Браузер 175 процентов - сложенные элементы

Давайте не будем усложнять Bootstrap!

Обратите внимание, что col-sm занимает 100% ширину (другими словами, разбивает на новую строку) ниже, 576pxа col - нет. Вы можете заметить текущую ширину в верхнем центре в GIF.

Вот код:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap по умолчанию выравнивает все столбцы ( ) в одной строке с одинаковой шириной. В этом случае три colбудут занимать 100% / 3 ширины каждый, независимо от размера экрана. Вы можете заметить это в GIF.

Теперь, что если мы хотим визуализировать только один столбец на строку, т.е. дать 100% ширину каждому столбцу, но для небольших экранов ? Теперь идет col-xxклассы!

я использовал col-sm потому что я хотел разбить столбцы на отдельные строки ниже 576 пикселей. Эти 4 col-xxкласса предоставляются Bootstrap для различных устройств отображения, таких как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т. Д.

Таким образом, col-smбудет ниже 576px, col-mdниже 768px,col-lg ниже 992px и col-xlниже 1200px.

Обратите внимание, что col-xsв начальной загрузке 4 нет классов.

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

Но это еще не все. Теперь приходитcol-* и col-xx-*для настройки ширины.

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

Строка начальной загрузки разделена на 12 частей, поэтому в приведенном выше примере было 3 col поэтому каждая из них занимает 12/3 = 4 части. Вы можете рассмотреть эти части как способ измерения ширины.

Мы также можем написать это в формате, col-*например, col-4так:

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

И это не имело бы никакого значения, потому что по умолчанию начальная загрузка дает равную ширину col (4 + 4 + 4 = 12).

Но что если мы хотим дать 7 частей 1-й col, 3 части 2-й, colа остальные 2 части (12-7-3 = 2) - 3-й col(7 + 3 + 2, итого 12), мы можем просто сделать это:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

и вы можете настроить ширину col-xx-*классов также.

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

Как это выглядит в действии?

Что если сумма colбольше 12? Затем colбудет смещен / скорректирован ниже линии. Да, в строке может быть любое количество столбцов!

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

Что если нам нужно 3 столбца подряд для больших экранов, но разделить эти столбцы на 2 строки для маленьких экранов?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Вы можете поиграть здесь: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Я думаю, что это изображение очень хорошо, чтобы лучше понять концепцию!

для более детального понимания, пожалуйста, перейдите по ссылке ниже:

https://getbootstrap.com/docs/3.4/css/

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

col-xs-2

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

xs-col-2 md-col-4

тогда в каждом ряду будут показаны 2 столбца для размеров экрана от xs до sm (в комплекте) и изменения при получении следующего размера, т. е. для md до lg (в комплекте) для лучшего понимания размеров экрана, попробуйте запустить их в различных режимах экрана в Режим разработчика Chrome (Ctrl + Shift + I) и попробуйте различные пиксели или устройства