Bootstrap sm xs md lg: Grid system · Bootstrap

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

Давайте не будем усложнять Бутстрэп!

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

А вот и код:

<div>
    <div>
        <div>col</div>
        <div>col</div>
        <div>col</div>
    </div>
    <div>
        <div>col-sm</div>
        <div>col-sm</div>
        <div>col-sm</div>
    </div>
</div>

Bootstrap по умолчанию выравнивает все столбцы (col) в одной строке равной ширины. В этом случае три 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

Обратите внимание, что в bootstrap 4 нет класса col-xs .

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

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

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

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

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

<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

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

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

<div>
  <div>col-7</div>
  <div>col-3</div>
  <div>col-2</div>
</div>

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

<div>
    <div>col-sm-7</div>
    <div>col-sm-3</div>
    <div>col-sm-2</div>
</div>

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

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

<div>
        <div>col-12</div>
        <div>col-9</div>
        <div>col-6</div>
        <div>col-6</div>
    </div>

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

<div>
    <div>col-12 col-sm TOP</div>
    <div>col col-sm</div>
    <div>col col-sm</div>
</div>

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

Что означает xs, md, lg в системе CSS Flexbox?

Я разрабатываю приложение с использованием React и хотел бы стилизовать компоненты, я нашел https://roylee0704.github.io/react-flexbox-grid/ что говорит о жидкой сеточной системе. Пример выглядит следующим образом:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

и я не знаю , что такое xs, sm и lg ? Не мог бы кто-нибудь объяснить?

css

reactjs

flexbox

react-flexbox-grid

Поделиться

Источник

daydreamer    

17 апреля 2017 в 05:22

2 ответа

• SEO влияние Bootstraps visible-lg/md/sm/xs-классы

  Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На большинстве страниц основной контент находится слева, а затем есть несколько ссылок в правой части…

• Bootstrap отличается размером img на lg, md sm и xs

  Мне нужно изменить размер изображения, если у зрителя есть смартфон или PC. Это достигает того, чего я хочу, но это плохой способ сделать это из-за загрузки img 4 раза, и это избыточно: <div class=col-md-4 text-center> <img class=hidden-md hidden-sm hidden-xs…

41

Предположим, что наш экран разделен на 12 столбцов.

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

Пример, который вы привели:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

Для нашего блага предположим , что эти три столбца названы как col-1, col-2 и col-3

На очень маленьком экране:

col-1 занимает все 12 столбцов, а rest два из них занимают по 6(в новой строке)

На маленьких экранах

col-1 и col-3 занимают 3, в то время как средний col-2 занимает 6

Аналогично

Средние экраны

Большие экраны

P.S. Изображения-это скриншоты предоставленной вами ссылки (путем изменения размера браузера для каждого размера экрана)

Поделиться

Jones Joseph    

17 апреля 2017 в 06:46

8

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

Система сетки делит экран на 12 столбцов, и вы можете указать, какую ширину можно использовать для компонентов в мобильных устройствах, планшетах и настольных компьютерах. Точки останова для xs , sm , md , lg и xl равны 576px, 768px, 992px и 1200px.

Вы можете увидеть разницу, изменив размер окна браузера на странице https://roylee0704.github.io/react-flexbox-grid/

Это то же самое, что и приведенный ниже запрос media

// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Поделиться

Lini Susan V    

17 апреля 2017 в 05:34

• Значение чисел в «col-md-4″,» col-xs-1″, «col-lg-2» в Bootstrap

  Меня смущает сеточная система в новом Bootstrap, особенно эти классы: col-lg-* col-md-* col-xs-* (где * представляет некоторое число). Может ли кто-нибудь объяснить следующее: Как это число выравнивает сетки? Как использовать эти цифры? Что они на самом деле представляют?

• Как изменить размеры bootstrap по умолчанию для ключевых слов xs sm md lg?

  Согласно http://getbootstrap.com/css / #grid-options , отсечки по умолчанию для xs, sm, md, lg обрезаются на 768px, 992px и 1200px. Могу ли я по-прежнему использовать эти классы ключевых слов столбцов, такие как .col-xs-3 , не имея ширины, при которой срабатывают различные размеры (например, xs sm…

Похожие вопросы:

Bootstrap list теряет выравнивание, если я сворачиваюсь До xs / sm, а затем возвращаюсь (изменяю размер) обратно в md или lg в Google Chrome.

вот это jsFiddle. Мобильный дизайн не завершен, но поведение сворачивания до sm и xs, а затем расширения обратно до md или lg покажет, что происходит. Нажмите кнопку ‘run’ еще раз, чтобы вернуть вид…

Зачем использовать несколько col-[lg|md|sm|xs]-in bootstrap?

Я видел некоторые проекты, использующие что-то вроде <div class=col-xs-12 col-sm-8 col-md-6 col-lg-4> Почему они используют несколько col-?

Bootstrap grid без sm, md и lg

Нашел какой-то тег div ниже. <div class=col-6 col-sm-12 col-md-12 col-lg-6> что означает col-6 ? Знаете, в bootstrap мы можем предоставить col-xs-* или col-sm — , col — md — , col-lg-* в…

SEO влияние Bootstraps visible-lg/md/sm/xs-классы

Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На…

Bootstrap отличается размером img на lg, md sm и xs

Мне нужно изменить размер изображения, если у зрителя есть смартфон или PC. Это достигает того, чего я хочу, но это плохой способ сделать это из-за загрузки img 4 раза, и это избыточно: <div…

Значение чисел в «col-md-4″,» col-xs-1″, «col-lg-2» в Bootstrap

Меня смущает сеточная система в новом Bootstrap, особенно эти классы: col-lg-* col-md-* col-xs-* (где * представляет некоторое число). Может ли кто-нибудь объяснить следующее: Как это число…

Как изменить размеры bootstrap по умолчанию для ключевых слов xs sm md lg?

Согласно http://getbootstrap.com/css / #grid-options , отсечки по умолчанию для xs, sm, md, lg обрезаются на 768px, 992px и 1200px. Могу ли я по-прежнему использовать эти классы ключевых слов…

в чем разница между col-lg-4 и col-md-3 и col-xs-3?

Для размера поля я дал col-lg-4 и col-Md-3 и col-XS-2.but наконец размер столбца равен 4 только тогда зачем нам нужны col-MD-3 и col-XS-2.explain мне пожалуйста… texttext 1

radio-inline должен применяться только на col-lg-*, col-md-*, col-sm-*, но не на col-xs-*

У меня есть требование, согласно которому переключатели должны располагаться вертикально на col-xs-* view и должны отображаться горизонтально на всех других (col-lg- , col-md — и col-sm-*) view. В…

Нужно установить col-lg-** col-md-** col-sm-** col-xs-** для каждого cols?

Это может быть слишком простой вопрос, я пока не мог найти ответа. Я часто использую одну и ту же настройку для некоторых размеров monitar. В данном случае я сделал вот так , <div class=col-lg-8…

Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap

Относится только к Bootstrap 3.

Не обращая внимания на письма (х S , см , мкр , Lg ) для в настоящее время , я начну с только цифры …

• числа (1-12) представляют часть общей ширины любого деления
• все делятся на 12 столбцов
• так, col-*-6охватывает 6 из 12 столбцов (половина ширины), col-*-12охватывает 12 из 12 столбцов (вся ширина) и т. д.

Итак, если вы хотите, чтобы два одинаковых столбца занимали div, напишите

<div>Column 1</div>
<div>Column 2</div>

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

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>

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

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

<div>
  <div>
    <div>Column 1-a</div>
    <div>Column 1-b</div>
  </div>
</div>
<div>
  <div>
    <div>Column 2-a</div>
    <div>Column 2-b</div>
  </div>
</div>

Каждый набор вложенных элементов div также охватывает до 12 столбцов родительского элемента div. ПРИМЕЧАНИЕ. Так как каждый .colкласс имеет заполнение по 15px с каждой стороны, обычно следует .rowпомещать вложенные столбцы в a с полями -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое выровненным между вложенными и не вложенными классами col.

— Вы специально не спрашивали об xs, sm, md, lgиспользовании, но они идут рука об руку, поэтому я не могу не коснуться этого …

Вкратце, они используются для определения размера экрана, который должен применяться этим классом:

• xs = очень маленькие экраны (мобильные телефоны)
• sm = маленькие экраны (планшеты)
• md = средние экраны (некоторые рабочие столы)
• lg = большие экраны (оставшиеся рабочие столы)

Прочтите
главу « Параметры сетки » в официальной документации Bootstrap для получения более подробной информации.

Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает загрузчик отзывчивым). Например: div с классами col-xs-6и col-sm-4будет занимать половину экрана на мобильном телефоне (xs) и 1/3 экрана на планшетах (sm).

<div>Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div>Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

ПРИМЕЧАНИЕ: согласно комментарию ниже, классы сетки для данного размера экрана применяются к этому размеру экрана и больше, если только другое объявление не переопределяет его (то есть col-xs-6 col-md-4охватывает 6 столбцов xs иsm 4, и 4 столбца md иlg даже, хотя smи lgникогда не было явно объявлено)

Примечание: если вы не определите xs, он будет по умолчанию col-xs-12(т.е. col-sm-6равна половине ширины на sm, mdи lgэкранах, но полную ширину на xsэкранах).

ПРИМЕЧАНИЕ: на самом деле вполне нормально, если вы .rowвключаете более 12 столбцов, если вы знаете, как они будут реагировать. — Это спорный вопрос, и не все с этим согласны.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Обновлено 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>..</div> — это то же самое, что и

<div>..</div>

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

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

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

<div>..</div>

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

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

Бутстрап 4

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

col-* — 0 (хс)
col-sm-* — 576 пикселей
col-md-* — 768 пикселей
col-lg-* — 992 пикселя
col-xl-* — 1200 пикселей

Bootstrap 4 Grid Демо

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

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

Ответ 2

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

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

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

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

А

В

С

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

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

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

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

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

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

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

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

Ответ 3

От Twitter Загрузочная документация:

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

• Дополнительные мелкие устройства Телефоны (< 768px) — .col-xs-
• Маленькие устройства Таблетки (≥768px) — .col-sm-
• Средние устройства Настольные компьютеры (≥992px) — .col-md-
• Крупные устройства Настольные компьютеры (≥1200px) — .col-lg-

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

Ссылка: Grid System

Ответ 6

.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 

Ответ 7

TL; DR

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

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

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

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

пример

<div>

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

Ответ 8

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

HTML

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

Chrome zoom 100%

Браузер 100% — элементы, расположенные горизонтально

Chrome zoom 175%

Браузер 175% — сложенные элементы

Ответ 9

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

col-xs-2

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

xs-col-2 md-col-4

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

Ответ 10

Ну, это Bootstrap Grid Divisions для отзывчивости устройств.

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

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

Bootstrap grid без sm, md и lg

Нашел какой-то тег div ниже.

<div>

что означает col-6 ? Знаете, в bootstrap мы можем предоставить col-xs-* или col-sm —, col — md —, col-lg-* в bootstrap, но если я использую col-6, будет ли это применимо к смартфонам, планшетам, ноутбукам или настольным компьютерам?

twitter-bootstrap

Поделиться

Источник

Arav    

26 февраля 2015 в 03:22

1 ответ

• SEO влияние Bootstraps visible-lg/md/sm/xs-классы

  Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На большинстве страниц основной контент находится слева, а затем есть несколько ссылок в правой части…

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

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

1

Только что проверил, что он не существует в bootstrap, так что вы, возможно, ввели опечатку в свой css или, возможно, в html, проверьте его, чтобы увидеть его свойства css.

Кроме того, какую версию bootstrap вы используете?

Поделиться

jsg    

26 февраля 2015 в 12:36

Похожие вопросы:

Bootstrap 3.0 col-sm-offset-1 влияет на устройства md и lg

Мне нужно просто установить смещение col-sm-offset-1 ,и это также влияет на устройства md и lg , даже после установки их смещений тоже. Я не знаю, что является причиной этого. <div…

Зачем использовать несколько col-[lg|md|sm|xs]-in bootstrap?

Я видел некоторые проекты, использующие что-то вроде <div class=col-xs-12 col-sm-8 col-md-6 col-lg-4> Почему они используют несколько col-?

Отличается ли порядок этих классов; col-sm, col-lg ,col-md и col-xs

У меня есть вопрос относительно порядка классов bootstrap 3.0, теперь, если я напишу следующее, Где я начинаю с sm до lg:- <div class=col-sm-4 col-md-4 col-lg-4 address> будет ли он…

SEO влияние Bootstraps visible-lg/md/sm/xs-классы

Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На…

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

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

Bootstrap отличается размером img на lg, md sm и xs

Мне нужно изменить размер изображения, если у зрителя есть смартфон или PC. Это достигает того, чего я хочу, но это плохой способ сделать это из-за загрузки img 4 раза, и это избыточно: <div…

Как изменить размеры bootstrap по умолчанию для ключевых слов xs sm md lg?

Согласно http://getbootstrap.com/css / #grid-options , отсечки по умолчанию для xs, sm, md, lg обрезаются на 768px, 992px и 1200px. Могу ли я по-прежнему использовать эти классы ключевых слов…

Bootstrap3 игнорирует col-lg col-md и col-sm в IE8

Проблема: IE8 учитывает только мой макет сетки с классами col-X. Я нашел связанную / похожую проблему IE8 с Twitter Bootstrap 3 wrt Respond.js и htm5shiv. Я перепробовал все возможные комбинации, но…

Bootstrap 3 Изменение Col-вложенности в MD/LG

Есть ли хитрость в изменении группировки COL? Как вы можете видеть на картинке, первый COL 12 должен быть длинным в MD, в LG только 9. В LG правая колонка должна скользить вверх, Вот так: Вопрос :…

Какой синтаксис имеет эта переменная LESS @grid-breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px;

В порт начальной загрузки less я вижу такой синтаксис: @grid-breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px; что это? это не карта, не массив… Как я могу получить значение для lg ,…

css — Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap

Относится только к Bootstrap 3.

Игнорирование букв (x s , sm , md , lg ) пока , начну с цифр …

• числа (1-12) представляют собой часть общей ширины любого div
• все div разделены на 12 столбцов
• так, col - * - 6 охватывает 6 из 12 столбцов (половина ширины), col - * - 12 охватывает 12 из 12 столбцов (по всей ширине) и т. Д.

Итак, если вы хотите, чтобы два равных столбца занимали div, напишите

  
 Столбец 1 
 Столбец 2 
  

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

  
 Столбец 1 
 Столбец 2 
 Столбец 3 
  

Вы заметите, что количество столбцов всегда равно 12.Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div-ы переместятся на следующую строку (а не на .row , что совсем другое дело).

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

  

  

    
 Колонка 1-а 
    
 Столбец 1-b 
  


  

    
 Колонка 2-а 
    
 Колонка 2-б 
  

  

Каждый набор вложенных div также охватывает до 12 столбцов своего родительского div. ПРИМЕЧАНИЕ: Поскольку каждый класс .col имеет отступы по 15 пикселей с каждой стороны, вам обычно следует заключать вложенные столбцы в .row с полями -15 пикселей. Это позволяет избежать дублирования заполнения и позволяет выстраивать содержимое между вложенными и невложенными классами col.

— Вы специально не спрашивали об использовании xs, sm, md, lg , но они идут рука об руку, поэтому я не могу не коснуться этого …

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

• xs = очень маленьких экранов (мобильные телефоны)
• см = маленьких экранов (планшеты)
• md = средних экранов (некоторые рабочие столы)
• lg = больших экранов (остальные рабочие столы)

Читать «Сетка »
Комплектация »
главу из официальной документации Bootstrap для более подробной информации.

Вы должны обычно классифицировать div, используя несколько классов столбцов, поэтому он ведет себя по-разному в зависимости от размера экрана (это суть того, что делает загрузку отзывчивой). например: div с классами col-xs-6 и col-sm-4 будет охватывать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (sm).

  
 Столбец 1 
 
 Столбец 2 
 
  

ПРИМЕЧАНИЕ: в соответствии с комментарием ниже, классы сетки для данного размера экрана применяются к этому размеру экрана и более , если другое объявление не отменяет его (т.е. col-xs-6 col-md-4 охватывает 6 колонок на xs и sm и 4 колонки на md и lg , хотя sm и lg были никогда явно не декларировался)

ПРИМЕЧАНИЕ: , если вы не определяете xs , по умолчанию будет col-xs-12 (т.е. col-sm-6 — половина ширины на sm , md и lg экранов, но в полную ширину на экранах xs ).

ПРИМЕЧАНИЕ: на самом деле совершенно нормально, если ваш .row включает более 12 столбцов, если вы знаете, как они отреагируют. — Это спорный вопрос, и не все согласны.

css — В чем разница между col-lg и col-md в bootstrap3

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

.col-xs = * Очень маленькие устройства (например, телефоны) (<768 пикселей)

.col-sm = Маленькие устройства (например, планшеты) (≥768px)

.col-md = Средние устройства (например, ноутбуки или небольшие настольные компьютеры) (≥992px)

.col-lg = большие устройства (например, настольные компьютеры) (≥1200 пикселей) *

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

ОБНОВЛЕНИЕ

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

Следовательно, когда вы используете .col-sm-4 для элемента, это означает, что элемент займет 4 столбца из 12 общей ширины.
Это логически означает, что если используется .col-sm-4 , то только 3 элемента в строке могут поместиться на странице на планшете.

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

  

    

        
        

            
 Проект 1 
            

                 Tech Stack 
                
 HTML5, CSS, JS 
            
        
    

  

Использование class = "col-xs-12 col-sm-6 col-md-4 col-lg-3" одновременно используется для активации различных свойств CSS для элемента при просмотре страницы на определенном устройство.

Другими словами, если пользователь открывает сайт на рабочем столе, col-lg-3 означает, что всего будет отображаться 4 карточки, когда col-md-4 означает всего 3 карточки, col -sm-6 всего 2 карты, а затем col-xs-12 означает, что на мобильном телефоне только 1 карта будет со 100% шириной страницы.

Шаблон сетки

для Bootstrap

Базовые макеты сеток, чтобы познакомить вас со сборкой в ​​системе сеток Bootstrap.

Пять ярусов сетки

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

.col-xs-4

.col-xs-4

.col-xs-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-md-4

.col-md-4

.col-md-4

.col-lg-4

.col-lg-4

.col-lg-4

.col-xl-4

.col-xl-4

.col-xl-4

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

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

.col-md-4

.col-md-4

.col-md-4

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

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

.col-md-3

.col-md-6

.col-md-3

Две колонны

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

Полная ширина, одна колонка

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

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

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

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

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

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

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

.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-sm-6 .col-lg-8

.col-xs-6 .col-lg-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

.col-xs-6 .col-sm-4

Очистка колонны

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

.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 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap

Относится только к Bootstrap 3.

Игнорирование букв (x s , sm , md , lg ) сейчас , Начну с цифр …

• числа (1-12) представляют собой часть общей ширины любого div
• все div разделены на 12 столбцов
• так, col - * - 6 охватывает 6 из 12 столбцов (половина ширины), col - * - 12 охватывает 12 из 12 столбцов (по всей ширине) и т. Д.

Итак, если вы хотите, чтобы два равных столбца занимали div, напишите

  
 Столбец 1 
 Столбец 2 
  

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

  
 Столбец 1 
 Столбец 2 
 Столбец 3 
  

Вы заметите, что количество столбцов всегда равно 12.Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div-ы переместятся на следующую строку (а не на .row , что совсем другое дело).

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

  

  

    
 Колонка 1-а 
    
 Столбец 1-b 
  


  

    
 Колонка 2-а 
    
 Колонка 2-б 
  

  

Каждый набор вложенных div также охватывает до 12 столбцов своего родительского div. ПРИМЕЧАНИЕ: Поскольку каждый класс .col имеет отступы по 15 пикселей с каждой стороны, вам обычно следует заключать вложенные столбцы в .row с полями -15 пикселей. Это позволяет избежать дублирования заполнения и позволяет выстраивать содержимое между вложенными и невложенными классами col.

— Вы специально не спрашивали об использовании xs, sm, md, lg , но они идут рука об руку, поэтому я не могу не коснуться этого …

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

• xs = очень маленьких экранов (мобильные телефоны)
• см = маленьких экранов (планшеты)
• md = средних экранов (некоторые рабочие столы)
• lg = больших экранов (остальные рабочие столы)

Читать «Сетка »
Комплектация »
главу из официальной документации Bootstrap для более подробной информации.

Вы должны обычно классифицировать div, используя несколько классов столбцов, поэтому он ведет себя по-разному в зависимости от размера экрана (это суть того, что делает загрузку отзывчивой). например: div с классами col-xs-6 и col-sm-4 будет охватывать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (sm).

  
 Столбец 1 
 
 Столбец 2 
 
  

ПРИМЕЧАНИЕ: в соответствии с комментарием ниже, классы сетки для данного размера экрана применяются к этому размеру экрана и более , если другое объявление не отменяет его (т.е. col-xs-6 col-md-4 охватывает 6 колонок на xs и sm и 4 колонки на md и lg , хотя sm и lg были никогда явно не декларировался)

ПРИМЕЧАНИЕ: , если вы не определяете xs , по умолчанию будет col-xs-12 (т.е. col-sm-6 — половина ширины на sm , md и lg экранов, но в полную ширину на экранах xs ).

ПРИМЕЧАНИЕ: на самом деле совершенно нормально, если ваш .row включает более 12 столбцов, если вы знаете, как они отреагируют. — Это спорный вопрос, и не все согласны.

Сетка Bootstrap имеет четыре класса:
xs (для телефонов)
sm (для планшетов)
md (для настольных компьютеров)
lg (для больших настольных компьютеров)

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

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

Хорошо, ответ прост, но читайте дальше:

col-lg- обозначает большой столбец ≥ 1200px
col-md- обозначает средний столбец ≥ 992px
col-xs- обозначает сверхмалый столбец ≥ 768px

Номера пикселей — это точки останова, поэтому, например, col-xs нацеливается на элемент, когда окно меньше 768px (вероятно, мобильные устройства)…

Я также создал изображение ниже, чтобы показать, как работает система сеток, в этих примерах я использую их с 3, например col-lg-6 , чтобы показать вам, как система сеток работает на странице, посмотрите, как lg , md и xs реагируют на размер окна:

Главное здесь:

col-lg- * col-md- * col-xs- * col-sm определяет, сколько столбцов будет на экранах разных размеров.

Пример: если вы хотите, чтобы на экранах рабочего стола и на экранах телефона было две колонки, вы помещаете в свои колонки два класса col-md-6 и два col-xs-6 .

Если вы хотите, чтобы на экранах рабочего стола было два столбца и только один столбец на экранах телефонов (т. Е. Две строки, расположенные друг над другом), вы помещаете два col-md-6 и два col-xs-12 в ваши столбцы, и поскольку сумма будет равна 24, они будут автоматически накладываться друг на друга или просто оставить стиль xs .

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

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

Разница

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

Бутстрап 2

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

Бутстрап 3

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

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

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

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

 

    

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

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

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

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

 
 

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

    

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

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

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

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

 
 

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

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

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

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

 

    

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

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

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


 
 

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

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

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

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

 

    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

        Я доволен!
    
    

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

 
 

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

Это Gridtastic!

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

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

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

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

В самой документации Bootstrap есть сравнительная таблица между классами сетки.

То есть .col-xs- * наборы классов сетка для устройств с шириной экрана более 768 пикселей. Класс .col-sm- * устанавливает для экранов больше, чем 768 пикселей. на основе размера дисплея пользователя.

Например, вы можете захотеть отобразить на экране монитор вашего сайта на двух столбцах, устанавливая каждый класс .col-sm-6 .Однако на устройствах с маленьким экраном, таких как сотовые телефоны, две колонки могут быть неидеальными, оставляя содержимое сжатым и маленьким, поэтому вы можете определить, что в этих устройствах, а не на двух колонках, этот сектор будет состоять только из одной колонки с классом .col-xs-12 .

Обычно вы говорите браузеру: если ширина экрана пользователя больше, чем больше, чем 768 пикселей, отобразите этот div , занимающий 6 12 столбцов моей сетки. Уже, если ширина меньше 768 пикселей, отобразите его, занимая 12 столбцов сетки.

  ...