Bootstrap sm md lg xs: Grid system · Bootstrap

Что означает 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 столбцов, если вы знаете, как они будут реагировать. — Это спорный вопрос, и не все с этим согласны.

Bootstrap Grid Examples

Ниже мы собрали некоторые примеры основных Bootstrap макетов сетки.

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

.col-sm-4

.col-sm-4

.col-sm-4

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

пример

<div>
  <div>.col-sm-4</div>
 
<div>.col-sm-4</div>
  <div
class=»col-sm-4″>.col-sm-4</div>
</div>

Попробуй сам »

Три Неравные Колонны

.col-sm-3

.col-sm-6

.col-sm-3

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

пример

<div>
  <div
class=»col-sm-3″>.col-sm-3</div>
  <div
class=»col-sm-6″>.col-sm-6</div>
  <div
class=»col-sm-3″>.col-sm-3</div>
</div>

Попробуй сам »

Два Неравные Колонны

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

пример

<div>
  <div
class=»col-sm-4″>.col-sm-4</div>
  <div
class=»col-sm-8″>.col-sm-8</div>
</div>

Попробуй сам »

Две колонны с двумя вложенными Колонны

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

пример

<div>
  <div>
   
.col-sm-8
    <div>
     
<div>.col-sm-6</div>
      <div
class=»col-sm-6″>.col-sm-6</div>
    </div>
 
</div>
  <div>.col-sm-4</div>
</div>

Попробуй сам »

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

Bootstrap подвесная система имеет четыре класса: xs (телефонов), sm (таблетки), md (настольные компьютеры) и lg (большие настольные компьютеры). Классы могут быть объединены для создания более динамичных и гибких макетов.

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

пример

  .col-xs-9
.col-md-7
  .col-xs-3
.col-md-5

<div>
  <div
class=»col-xs-6 col-md-10″>.col-xs-6 .col-md-10</div>
  <div
class=»col-xs-6 col-md-2″>.col-xs-6 .col-md-2</div>
</div>

<div
class=»row»>
  <div>.col-xs-6</div>
<  div
class=»col-xs-6″>.col-xs-6</div>
</div>

Попробуй сам »

Совет: Помните , что столбцы сетки должны добавить до двенадцати для ряда. Более того, столбцы будут складываться независимо от viewport .

Смешанный: Мобильный, планшетом и рабочий стол

пример

  .col-xs-7 .col-sm-6 .col-lg-8
  .col-xs-5 .col-sm-6 .col-lg-8

<div
class=»row»>
  <div>.col-xs-6
.col-sm-8 .col-lg-10</div>
  <div>.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>

Попробуй сам »

Четкие поплавков

Четкие поплавки (с .clearfix класса) в определенных контрольных точек , чтобы предотвратить странное обертку с неравномерным содержанием:

пример

<div>
  <div>
   
Column 1
    <br>
    Resize the browser
window to see the effect.
  </div>
  <div>Column 2</div>
  <!— Add clearfix for only the required
viewport —>
  <div></div>
 
<div>Column 3</div>
  <div>Column 4</div>
</div>

Попробуй сам »

Взаимозачет Колонны

Переместить столбцы вправо , используя .col-md-offset-* классы. Эти классы увеличивают левое поле столбца по * столбцов:

пример

<div>
  <div>.col-sm-5
.col-md-6</div>
  <div>
  .col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div>

Попробуй сам »

Тяговое и толкающее — Изменить столбец Заказ

Изменение порядка столбцов сетки с .col-md-push-* и .col-md-pull-* классов:

пример

<div>
  <div>.col-sm-4 .col-sm-push-8</div>
  <div>.col-sm-8 .col-sm-pull-4</div>
</div>

Попробуй сам »

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 ,…

Поддержка формата Bootstrap 3 в конструкторе сайта ReadyScript

Bootstrap – cамый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Он использует самые современные технологии CSS и HTML, именно поэтому он был включен в список поддерживаемых сеточных фреймворков в конструкторе сайта ReadyScript. Прежде всего, давайте рассмотрим, какие преимущества имеют темы оформления ReadyScript, собранные по сетке, для этого детальнее окунемся в техническую часть таких тем.  

Тема оформления, собранная по сетке оперирует понятиями: контейнер, строка, секция, блок. Первые три элемента — это понятия, которые полностью дублируют сущности, используемые в bootstrap.

• Контейнер – это элемент с классом «container», который имеет условную ширину в 12 колонок и может содержать Строки.
• Строка – это элемент с классом «row», который может содержать Секции или вложенные Строки.
• Секция – это элемент с классом «col-*-*», который может содержать вложенные Секции, Строки или Блоки. Ширина секции, задается в диапазоне от 1 до 12 и определяет количество колонок, которые она занимает.
• Блок – это видимая часть модулей системы, например, блок категорий, блок меню, блок с баннерами, блок со списком товаров, и т.д.

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

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

Bootstrap 3 по-умолчанию поддерживает адаптации для 4х видов устройств:

• очень малые устройства (XS), экран менее 768 px
• малые устройства (SM), экран не менее 768 px
• средние устройства (MD), экран не менее 992 px
• большие устройства (LG), экран не менее 1200 px

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

Показать HTML для данной сетки

<div>
<div>
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>
</div>

Рассмотрим на примерах различные случаи генерации сетки

1. Классический пример

<div>
<div>
<div>…здесь будут Блоки…</div>
<div>…здесь будут Блоки…</div>
</div>
</div>

В Конструкторе сайта это будет выглядеть так:

2. Что делать, если до или после контейнера(.container) требуется вставка индивидуальной разметки?

<div>
<div>
<div>
<p> Custom text</p>

<div>
<div>…здесь будут Блоки…</div>
<div>…здесь будут Блоки…</div>
</div>

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

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

<div>
{$wrapped_content}
</div>

А внутренний, назовем его inside.tpl следующее:

<div>
<p> Custom text</p>
{$wrapped_content}
</div>

Переменная $wrapped_content всегда содержит HTML-код вложенных элементов. Указываем шаблоны outside.tpl, inside.tpl в настройках контейнера.

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

3. Что делать, если после секции(.col-*-*) требуется вставка индивидуальной разметки?

<div>
<div>
<div>
<div>
<p> Custom text </p>

…здесь будут Блоки…
</div>
</div>
<div>…здесь будут Блоки…</div>
</div>
</div>

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

<div>
<p> Custom text</p>
{$wrapped_content}
</div>

Указываем шаблон inside.tpl в настройках секции.

Если необходимо после Секции (col-*-*) вставить clearfix, то необходимо отметить соответствующий флажок в окне редактирования секции. Итоговый HTML будет в этом случае таким:

<div>
<div>
<div>…здесь будут Блоки…</div>
<div></div>
<div>…здесь будут Блоки…</div>
</div>
</div>

4. Как добавить произвольные классы к генерируемым системой элементам?

<div>
<div>
<div>…здесь будут Блоки…</div>
<div></div>
<div>…здесь будут Блоки…</div>
</div>
</div>

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

Файлы стилей в темах оформления

После того, как сетка в Конструкторе сайта будет настроена, ReadySript успешно сгенерирует соответствующий HTML, однако подключение необходимых CSS файлов в клиентской части полностью ложится на разработчика темы. То есть в файле layout.tpl нужно позаботиться о подключении файлов CSS фреймворка нужной конфигурации, чтобы HTML обрел необходимую форму.

{* Подключаем CSS файлы для темы оформления *}
{addcss file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css» basepath=»root» no_compress=true}

{* Подключаем JS файлы для темы оформления *}
{addjs file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js» basepath=»root» no_compress=true}

{* Выводим bootstrap сетку из Конструктора сайта *}
{$app->blocks->renderLayout()}

Приятная мелочь

Во время настройки элементов в Конструкторе сайта, существует вероятность, что какая-либо секция съедет за область видимости браузера, в случае некорректного указания параметров у секции. Как найти потом такую секцию, чтобы открыть её повторно к редактированию и ввести корректные параметры? С помощью специально разработанной для таких случаев кнопки, расположенной в правой части контейнера. Нажатие на данную кнопку будет включать режим «плоского» отображения всех элементов. В таком режиме не действуют смещения и размеры элементов, поэтому абсолютно любую секцию можно будет легко найти.

Заключение

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

03 ноября 2015 18:22, Артем Полторанин

Рассказать друзьям:

Bootstrap 3 grid, действительно ли это * действительно количество столбцов в строке?

У меня есть макет формы, на котором есть группы загрузочных 3-х форм. Я хочу, чтобы эти группы форм в одном столбце на < небольшие, 2 столбца на разрыве размера планшета и 4 столбца на больших экранах.

У меня это, видимо, работает отлично, однако после того, как я прочитал здесь, то, что я сделал, похоже, нарушает предполагаемое правило, что каждый столбец в строке должен содержать до 12. Однако в каждом учебнике и документах я мог бы всегда использовать слова ласки, такие как «должен» или «идеально», если говорить, что он должен добавить до 12. Здесь, похоже, нет четких указаний.

Я определил свои группы следующим образом:

<div>
    <div ><!--....etc-->

и в настоящее время у меня есть 4 из них в каждой строке. Это означает, что 4 * col-lg-3 добавляет до 12, но группы div формы 4 * col-md-6 добавляют до 24, а не 12.

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

Должен ли я быть обеспокоен? Это имеет значение в любом случае? Разумеется, я не должен делать два совершенно разных макета, которые дублируют все эти элементы управления один раз для col-md-6 и col-lg-3 на одной странице?

ОТВЕТЫ

Ответ 1

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

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

Следующий код:

<div>
    <div>Hi</div>
    <div>Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

Результаты в этом: (Демо в скрипте)

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

Следующий код:

<div>
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
    <div>Hi</div>
</div>

Результаты в этом: (Демо в скрипте)

Кроме этого, иногда бывает, что 12 макетов столбцов выглядят лучше, но вам не нужно их использовать; это не судоку:)

Ответ 2

4 * col-md-6 создаст 2 «строки» на среднем экране. Поскольку вы обертываете все в .row, он будет функционировать должным образом. Если вы удалите это, тогда все будет гнездиться рядом друг с другом.

например.

<div>
  <div>Hello</div>
</div>
<div>
  <div>Hello</div>
</div>

создаст 2 строки по 1 столбцу каждая, каждая из которых будет равна 16.67%, как родительская строка, и плавающая влево, потому что строка имеет ширину 100%. Ширины столбцов указаны в процентах (2/12 = 0.166667): col — ** — (число/12)

<div>Hello</div>
<div>Hello</div>

создаст 1 строку с 2 столбцами, каждая из которых будет равна 16.667%, как и родительский объект. Поэтому вы можете отказаться от .row, если вы сделали

<divcol-sm-12 col-md-6 col-lg-3></div>
<divcol-sm-12 col-md-6 col-lg-3></div>

Это создаст: Маленький экран (столбцы шириной 4 строки) Средний экран (2 строки по 2 столбца с шириной 50%) Большой экран (1 строка 4 столбца на 25% ширины)

Ответ 3

В последнее время я видел много использования сайта «col-xs-12 col-md-10 col-md-offset-1». Смещение центрирует контент, но каждая строка заполняется всего 11 столбцами.
Если следующий элемент представляет собой col-1, он должен также включать col-offset-1 (принудительное общее число 13, перемещение col-1 со смещением-1 в следующую строку, выравнивание красиво). Если следующий элемент шире, ему по-прежнему требуется смещение (для пропуска первого столбца).

На стороне CSS это все работает с процентами. Если общая ширина столбцов превышает 100%, она вынуждает следующий элемент на новой строке.
U может легко играть с этой концепцией, создав html файл с большим количеством div.
Добавьте следующие css в divs (основы начальной загрузки)

body > div {
    margin: 0;
    padding: 0;
    float: left;
    width: 8.333333% (or 1/12th)
}

Тогда u может изменить размер отдельных divs, чтобы увидеть, что происходит. Возможно, было бы легче играть с круглыми значениями (например, 10%/20%), просто приклеенными к бутстрапу здесь.
Надеюсь, это даст вам представление о том, как браузер обрабатывает загрузочную сетку (которую вы только что сделали базовой версией)

Документы Bootstrap на колонтитуле также дают хороший пример.

Изображения Не В Центре В Столбце Bootstrap Xs

У меня есть следующий код HTML:

 <div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
<div>
<div>
<a href="builtupletters.htm"><img src="images/builtupletters370x280.png"></a>
</div>
</div>
</div>
</div> 

Используя метод столбцов bootstraps, в lg и md это отображает 6 изображений в двух строках по 3 изображения в каждой строке. Изображения отвечают и изменяют размер, и они выглядят так, как я хочу. В sm столбцы затем расширяются так, что каждое изображение складывается поверх друг друга. Я использовал следующий CSS, чтобы центры изображений были сами собой.

@media (min-width: 768px) and (max-width: 992px) {
#what-we-do {
margin-left: 190px;
margin-right: 190px;
}

}

Тем не менее, в xs изображения укладываются в один столбец другого типа md, но я не могу их центрировать. Я попытался использовать CSS, который я использовал в md, чтобы достичь того же результата, но он не работает, потому что xs может быть множеством ширины, auto и inherit не работают. Может ли кто-нибудь помочь мне сосредоточить эти изображения в классе столбцов xs.

Bootstrap предлагает адаптивный дизайн, тогда почему столбец имеет эти классы: col-sm- * и col-lg- *

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

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

Вопрос превратился в замешательство

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

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

Понять на примере

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

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

А

В

С

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

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

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

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

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

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

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

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

использованная литература

https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-bootstrap

Ставьте лайки и подписывайтесь

Это действительно побуждает писать больше, если кому-то понравился ваш пост, поэтому обязательно понравитесь, если он вам понравился!

И следуй за мной, чтобы получать новые интересные вещи, подобные этой!

Ким Джон
Json Grid <= Разработано с любовью!

37 — Какова ширина столбцов начальной загрузки (xs sm md lg xl) в Dreamweaver

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

Для этого я собираюсь создать здесь совершенно новый файл. Вы можете следовать, но не обязаны. И я хочу создать отдельный размер, чтобы мы не возились с нашим оригиналом, просто чтобы мы поняли принцип, прежде чем двигаться дальше.Теперь, чтобы сделать это правильно, мне нужно создать совершенно новый сайт, потому что я не хочу возиться, и начать настраивать сайт, над которым я работаю. Я собираюсь перейти на «Новый сайт». Я назову это «демонстрация Mobile — Column». Куда я его положу? Воткну на рабочий стол. Я собираюсь создать новую папку под названием «Мобильная демонстрация». И я могу убрать это позже.

Итак, я собираюсь нажать «Сохранить». Мой сайт определен, и теперь я перейду на «Новый». Я собираюсь закрыть это. Я собираюсь пойти «Новый».И я собираюсь перейти в «Новый документ», я собираюсь начать с «Bootstrap». Я собираюсь создать новый файл Bootstrap. Я не собираюсь включать «готовый макет». Я собираюсь нажать «Создать». Я собираюсь его спасти. Я назову его «Индекс». Нажмите «Сохранить». А теперь давайте сложим коробки. Мы собираемся положить несколько коробок, мы собираемся положить сюда шесть из них. А потом мы будем настраивать их в зависимости от размера экрана.

Итак, мы можем показать вам, как эти структуры применяются.Итак, перейдем на панель «Вставка». Убедитесь, что вы щелкнули по своему Body, затем щелкнули «Grid Row» и «Nested». Я собираюсь сделать ему 6. И если я щелкну внутри одного из них, вы увидите, что он установлен на это «md». Если я немного уменьшу масштаб, на самом деле в Dreamweaver есть 4 порта просмотра. Вот этот медиа-запрос — этот здесь считается «хз» или маленький. Это все, что меньше 767 пикселей, что мы считаем хз. Здесь между этими двумя есть промежуток в 768. Он увеличивается до 991. Это считается портом просмотра sm.Вот это md, а вот lg. Такие большие, средние, маленькие и очень маленькие.

Поскольку я был увеличен в Dreamweaver, когда я создавал свою колонку, она добавляла эту колонку под названием md. Вы видите, здесь край моего документа. Если вы используете экран большего размера, чем у меня, возможно, у вас установлен lg. На данный момент я собираюсь вручную сделать свой lg, потому что сначала хочу сделать большой. И я хочу, чтобы они были большими по всей длине. Я просто собираюсь отрегулировать их здесь, или, если вы делаете это в режиме просмотра кода, в режиме просмотра кода было бы проще.Я хочу, чтобы все это было LG. Я просто заменю их. Это первое, я хочу начать с большого — моего рабочего стола. На моем большом рабочем столе они все будут. Если я уменьшу масштаб сейчас, когда я нахожусь на свободе, вы увидите, что это 1, 2, 3, 4, 5, 6. И все они занимают 2 столбца, составляя мои 12.

Итак, давайте добавим немного контента, чтобы облегчить задачу. Я собираюсь поместить здесь некоторый текст в представление «Код» и назову его «box1». И это будет box2, box 3, box 4, box 5 и box 6.Я тоже хочу немного стилизовать его. Итак, я собираюсь создать «класс css». Вот, я собираюсь … У меня нет отдельного, я не хочу настраивать бутстрап. Итак, я собираюсь создать свой собственный CSS-лист. Я назову его «основным», лучше строчные. Я собираюсь его спасти. Затем я создам «Селектор». Я назову это «коробчатым».

Что я хочу сделать сейчас, я собираюсь сказать … Я собираюсь сделать пару вещей, чтобы было легче видеть эти коробки.И это будет немного высоты. Я собираюсь установить высоту, возможно, в пикселях. Я поставлю «100 пикселей». И я собираюсь добавить фоновый цвет зелено-голубого цвета. И оттенок, более темный цвет. И я собираюсь установить цвет текста, чтобы все внутри было белого цвета. И я собираюсь сосредоточить их. И я собираюсь сделать его немного большим, чтобы мы его увидели. Я собираюсь перейти к пикселям. Я собираюсь довести его до «25 пикселей».Ничего другого еще не применялось, поэтому я собираюсь щелкнуть здесь. Я собираюсь увеличить масштаб, чтобы вы его увидели. Щелкните внутри этого. Я собираюсь добавить класс под названием «блочный стиль».

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

Итак, это мои 6 коробок. Теперь, что я хочу сделать, это когда он уменьшится до этого размера, который в данном случае равен md, я хочу, чтобы он охватывал, может быть, 4 сверху и 2 снизу.Я могу сделать это с помощью моих маленьких ползунков, но Dreamweaver — видите ли, я сейчас не вижу в этом края. Там было немного места, куда я мог перетащить и сдвинуть с места. В Dreamweaver есть несколько мелких ошибок, из-за которых я больше не вижу края. Так что я не могу вручную перетащить его, поэтому мы будем делать это в режиме просмотра кода. Итак, я собираюсь сказать, здесь я собираюсь сказать, что когда столбец средний, я хочу, чтобы это первое поле занимало 3. Как вы видите, он охватывает это, поэтому я собираюсь скопировать и вставить это для всех, на самом деле я мог бы взять вот это.Оставь это там. Скопируйте вас.

Мы на среднем, 3 широких. Это означает, что в окне просмотра, если я уменьшу масштаб, так что в окне просмотра этот размер будет большим, 6 в поперечнике, но когда он опустится до среднего, он изменится. Будет 4 сверху и 2 снизу, и именно так я иду и меняю, основываясь на Медиа-запросах, структуру моей стороны. Давайте взглянем на этот шаблон здесь. При этом они установлены на большие. Их насчитывается по 3 штуки. А когда доходит до представления на планшете, на самом деле он охватывает 6.6 и 6 равны 12, и это моя полная ширина.

Итак, давайте сделаем то же самое здесь, давайте перейдем к этому представлению здесь. И этот будет маленьким. Так что, когда ширина столбца уменьшится до small, я сделаю их так, чтобы их было 6. Я скопирую и вставлю это на всех. Прекрасный. Итак, Рабочий стол, 6 сверху, 4 и 2, а затем этот должен быть 2, еще 3 строки. Давайте перейдем к мобильному устройству, и по умолчанию он имеет полную ширину, равную 12. Я мог бы написать здесь «col = xs» и сделать 12, но мне это не нужно.Почему? Потому что в любом случае это значение по умолчанию. Так что вы можете сделать это, если хотите, чтобы все перечисленные вещи были педантичными, но нам это не нужно. Давайте просмотрим это в браузере. Так что я перейду. Обратитесь к этому парню и превью. Средний вид, маленький вид, очень маленький.

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

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- * : предназначен для очень больших экранов, ширина которых равна или превышает 1200 пикселей .

Вам не нужно добавлять несколько классов, если вы хотите указать одинаковую ширину для разных размеров экрана; просто добавьте класс с наименьшей точкой останова.Так, например, вместо .col-sm-6 и .col-md-6 вам нужно применить только .col-sm-6 .

Макеты сеток Bootstrap с Flexbox и Float

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

CSS float и clearfix методы построения макетов были среди таких приемов, которые затрудняли построение и отладку сложных макетов.

Например, рассмотрим макет с двумя столбцами. Если вы создадите этот макет с помощью Bootstrap 3, он будет выглядеть так:

См. Макет Pen Bootstrap 3 из 2 столбцов от 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) .

См. Трюки 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 , row-reverse , column and column-reverse .

• строка устанавливает горизонтальное направление слева направо
• row-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-between
• justify-content-around

Свойство Flexbox align-items позволяет изменять выравнивание гибких элементов по поперечной оси.(Если вы установите главную ось горизонтально, поперечная ось будет вертикальной, и наоборот.)

Возможные значения для align-items :

• stretch : это начальное значение, которое заставляет гибкие элементы растягиваться до высоты их самых высоких родственных элементов
• flex-start выравнивает элементы в начале гибкого контейнера
• гибкий конец выравнивает элементы на конце гибкого контейнера
• center отвечает за центрирование гибкого элемента внутри его контейнера.

Вы можете быстро применить это поведение с помощью следующих классов Bootstrap:

• align-items-stretch
• align-items-start
• выровнять элементы-конец
• выровнять элементы по центру

Посмотрите на код в этой ручке, чтобы увидеть пример того, как вы можете применить классы утилит Bootstrap flex:

См. Раздел Pen Bootstrap 4 Vertical Alignment by SitePoint (@SitePoint) на CodePen.

Вы можете найти другие доступные утилиты в документации Bootstrap flex.

Заключение

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

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

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

Ответ № 1:

Относится только к 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 столбцов, если вы знаете, как они отреагируют. — Это спорный вопрос, и не все согласны.

Ответ 2:

Сетка 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 реагируют на размер окна:

Ответ № 5:

Держите

col-lg-2: если экран большой ( lg ), то этот компонент займет пространство из 2 элементов, учитывая, что вся строка может уместиться 12 элементов (так что вы увидите, что на большом экране этот компонент занимает 16% места ряда)

col-lg-6: если экран большой ( lg ), то этот компонент займет пространство из 6 элементов, учитывая, что вся строка может вместить 12 элементов — при применении вы увидите, что компонент занял половину доступного место в ряду.

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

На изображении ниже показаны различные размеры экрана:

Bootstrap — ODS Discovery

Центр помощи

Центр помощи

Гид пользователя

Библиотека кода

часто задаваемые вопросы

Виджеты

API

Академия

• Технические хитрости
  

• {{tt.fields.titre_en}}

• Концепции продукта
  

• {{csm.fields.titre_en}}

• Шаблоны
  

• {{temp.fields.titre_en}}

• Учебники
  

• {{тут.fields.titre_en}}

• Каталог
  

• Связаться с нами
  

• en
• fr

Адаптивный макет в Bootstrap — Tech Funda

Как создать адаптивный макет на основе сетки в Bootstrap?

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

Чтобы создать макет на основе сетки, нам необходимо использовать следующие классы Bootstrap

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

• для ширины экрана от 768 до 991 пикселей, ширина контейнера будет 750 пикселей
• для экрана от 992 до 1199 пикселей, ширина контейнера будет 970 пикселей
• для экрана более 1200 пикселей ширина контейнера будет 1170 пикселей

• ширина будет соответствовать ширине экрана

Как работают классы col-xx-x?

Полная ширина экрана (100%) разделена на 12 столбцов, и ее ширина изменяется в зависимости от размеров экрана. Таким образом, ширина столбца определяется в зависимости от того, какой класс col-xx-x мы используем. Сегмент 2 ^и в имени класса сообщает нам размер экрана.

• col-lg-n — lg обозначает большой экран, ширина которого составляет больше 1200 пикселей (большой экран рабочего стола)
• col-md-n — md обозначает экран среднего размера, ширина которого составляет от 992 пикселей до 1199 пикселей (экран ноутбука или небольшого рабочего стола)
• col-sm-n — sm обозначает маленький экран с шириной от 768px до 991px (экран планшета)
• col-xs-n — xs обозначает очень маленький экран, ширина которого составляет от 0 пикселей до 767 пикселей (экран телефона)

Итак, когда мы говорим

• — это означает, что этот div будет занимать 25% (12/3 = 4, поэтому 100/4 = 25) ширины среднего и большого экранов.На маленьком или очень маленьком экране он занимает весь экран (100%, поскольку для маленького и очень маленького класса CSS не написан).

• — (обратите внимание, что у нас здесь два класса css) это означает, что этот div будет занимать 25% ширины на большом экране и 33,33% (12/4 = 3, поэтому 100/3 = 33,33) ширины в средний экран. На маленьком и очень маленьком экране он занимает 100% ширины. Таким образом, два вышеупомянутых

  будут иметь одинаковый эффект.
• — (обратите внимание на 3 класса css) это означает, что этот div будет занимать 25% ширины на большом экране, 33.33% ширины на среднем экране и 50% (12/6 = 2, поэтому 100/2 = 50) ширины на маленьком экране. На очень маленьком экране он занимает 100% ширины.

• — (обратите внимание на 4 класса css) это означает, что этот div будет занимать 25% ширины на большом экране, 33,33% ширины на среднем экране, 50% ширины на маленьком экране и 100% (12/12 = 1, поэтому 100/1 = 100) ширина на очень маленьком экране.

Чтобы лучше понять, мы можем сказать, что

 
 
 
 
 
 col-md-3 
 
 
 col-md-9 
 
 
 
 
 

 
 
 
 
 
 col-sm-3 
 
 
 col-sm-9 
 
 
 
 
 

  

 .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-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 
  

  

 .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-9 
 .col-xs-4 
 Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок. 
 .col-xs-6 
 Последующие столбцы продолжаются вдоль новой строки. 
  

  

 .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-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 
  

  


Уровень 1: .col-sm-9


Уровень 2: .col-xs-8 .col-sm-6


Уровень 2: .col-xs-4 .col-sm-6



  

  

 .col-md-9 .col-md-push-3 
 .col-md-3 .col-md-pull-9