Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Col xs: Страница не найдена. Bootstrap. Документация на русском языке · Bootstrap v5.0.1

Содержание

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

Применяется только к Bootstrap 3.

Игнорируя буквы (x s , sm , md , lg) , я начну только с цифр…

  • числа (1-12) представляют собой часть общей ширины любого div
  • все дивы разделены на 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 , так как ваши оскорбительные дивы столкнутся со следующей строкой (не .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. NOTE: Поскольку каждый класс .col имеет заполнение 15 пикселей с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row , который имеет поля-15 пикселей. Это позволяет избежать дублирования заполнения и сохраняет содержимое выровненным между вложенными и не вложенными классами col.

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

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

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

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

Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это основа того, что делает bootstrap отзывчивым). например: 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 -->

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

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

NOTE: на самом деле все в порядке, если ваш .row включает в себя более 12 колов, если вы знаете, как они отреагируют. —Это спорный вопрос, и не все с ним согласны.

`Col-Xs- *` Не Работает В Bootstrap 4

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

<h2>Hello, world!</h2>

<div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>

Текстовое выравнивание отлично работает:

Но при том, что столбец будет таким же маленьким, как:

 <div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>

Затем текст-align больше не работает:

Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как я думаю. У меня никогда не было этой проблемы, так как мой текст всегда сопоставлялся в прошлом с xs. Любая помощь будет принята с благодарностью.
Вот мой полный код:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h2>Hello, world!</h2>

<div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>

<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code. jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Размер экрана Классы
Скрыть на всех .d-none
Скрыть только на xs .d-none .d-sm-block
Скрыть только на sm .d-sm-none .d-md-block
Скрыть только на md .d-md-none .d-lg-block
Скрыть только на lg .d-lg-none .d-xl-block
Скрыть только на xl .d-xl-none
Показать на всех .d-block
Показать только на xs .d-block .d-sm-none
Показать только на sm . d-none .d-sm-block .d-md-none
Показать только на md .d-none .d-md-block .d-lg-none
Показать только на lg .d-none .d-lg-block .d-xl-none
Показать только на xl .d-none .d-xl-block

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Сетка в Bootstrap 4.

Подробное руководство | by Stas Bagretsov

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

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

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

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

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

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

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

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

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

<divks da">container"> 
<divks da">row">
<divks da">col">Left column</div>
<divks da">col">Right column</div>
</div>
</div>

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

<divks da">container"> 
<divks da">row">
<divks da">col">Left column</div>
<divks da">col">Center column</div>
<divks da">col">Right column</div>
</div>
</div>

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

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

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

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

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

Колонки должны быть прямыми потомками Row

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

Row должны быть помещены внутри контейнера

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

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

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

Контейнер

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

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

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

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

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

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

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

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

<div></div>

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

<div></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основные идеи модуля Smart Grid

На наш взгляд, первый и главный вопрос, требующий рассмотрения, —
зачем создавать ещё одну сетку для web-страниц, когда есть boostrap и множество других сеток и ui-фреймворков. А ещё ведь и чистый CSS Grid Layout всё лучше и лучше поддерживается браузерами.

Ответ на данный вопрос во многом зависит от ряда философских моментов.

1. Какой подоход вам нравится для задания CSS-стилей?

Если вы фанат atomic CSS, и толпа классов в HTML-разметке вас не смущает, smart-grid не для вас. Bootstrap, spectre.css и другие, похожие на них фреймворки, в таком случае подойдут лучше.

Небольшой тест — как вы относитесь к HTML-разметке, расположенной ниже?


<div>
   <div>
      text 1
   </div>
   <div>
      text 2
   </div>
   <div>
      text 3
   </div>
   <div>
      text 4
   </div>
</div> 

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

Emmet спасает ситуацию лишь при первичном написании разметки, потом править придётся вручную. Pug поможет, но он нравится далеко не всем.

2. Насколько аккуратную адаптивку вы делаете?

CSS-сетки весьма ограничены в количестве breakPoints. Обычно в пакете идёт 4-5 контрольных точек, но не маловато ли этого для качественной адаптивной вёрстки?

Понятно, что это точки под основные экраны популярных устройств, но зачастую заказчики проверяют адаптивку, просто уменьшая экран мышкой. Попробуйте доказать им, что, скажем, на 800px сайт имеет право быть кривым 🙂 Они скажут, что это верстальщик кривой, и будут правы.

Также понятен стиль bootstrap, который делает ширину контейнера меньше, чем следующий break point. Но это не настоящая адаптивная вёрстка, это большое количество свободного пространства по бокам. То есть подход, чтобы не напрягаться. Иногда результат устраивает, иногда нет.

Конечно, можно сделать 10 контрольных точек. Но! В CSS-сетке каждая контрольная точка означает появление кучи новых классов, которые будут использоваться весьма редко.

3. Насколько вы следуете сетке, сделанной дизайнером?

На большом экране, который по размеру не меньше присланного дизайнером макета, вариантов нет — всё равно px perfect делать придётся. А вот что на меньших размерах?

Любители «чистой вёрстки без фреймворков» порой продвигают идеи, что сетка — это зло, которое делает сайты похожими друг на друга. Наверно, просто лень её соблюдать. Поставили display flex, basis и justufy-content, элементы, мол, сами решат, как стать. Размер будет правильный, иногда отступы больше, иногда меньше и т.п.

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

  1. по размеру оставаясь кратными N колонкам
  2. сохраняя отступы между колонками

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

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

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

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

Примеры сеток начальной загрузки


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


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

.col-sm-4

.col-sm-4

.col-sm-4

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

Пример

.col-sm-4

.col-sm-4

.col-sm-4

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


Три неравных колонны

. col-sm-3

.col-sm-6

.col-sm-3

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

Пример

.col-sm-3

.col-sm-6

.col-sm-3

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



Две неравные колонны

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

Пример

.col-sm-4

.col-sm-8

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


Без желобов

Используйте .row-no-gutters класс для удаления желобов из строки и ее столбцов:

Пример

.col-sm-3

.col-sm-6

.col-sm-3

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


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

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

Пример

.col-sm-8

.col-sm-6

.col-sm-6

.col-sm-4

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


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

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

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

Пример

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

.col-xs-6 .col-md-10

.col-xs-6 .col-md-2

.col-xs-6

. col -xs-6

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

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


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

Пример

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

.col-xs -6 .col-sm-8 .col-lg-10

.col-xs-6 .col-sm-4 .col-lg-2

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


Очистить поплавки

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

Пример

Столбец 1

Измените размер окна браузера, чтобы увидеть эффект.

Столбец 2

Столбец 3

< div> Столбец 4

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


Колонны смещения

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

Пример

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

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


Push and Pull — изменение заказа колонки

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

Пример

.col-sm-4 .col-sm-push-8

.col-sm-8 .col-sm-pull-4

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

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- * и col-sm- * в Bootstrap?

Давайте упростим Bootstrap!

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

Вот код:

  
col
col
col
col-sm
col-sm
col-sm

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

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

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


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

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

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

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

  
col
col
col

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

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

  
col-7
col-3
col-2

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

  
col-sm-7
col-sm-3
col-sm-2

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

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

  
col-12
col-9
col-6
col-6

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

  
col-12 col-sm TOP
col col-sm
col col-sm

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

Шаблон сетки

для Bootstrap

Три равные колонны

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

.col-md-4

.col-md-4

.col-md-4

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

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

.col-md-3

.col-md-6

.col-md-3

Две колонны

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

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

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


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

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

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


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

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

Каждый уровень классов масштабируется, что означает, что если вы планируете установить одинаковую ширину для 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 .col-sm-смещение-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

React-Bootstrap · Документация по React-Bootstrap

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

Вы впервые или незнакомы с flexbox? Прочтите это руководство по Flexbox уловок CSS, чтобы узнать об исходной информации, терминологии, рекомендациях и фрагментах кода.

Контейнер №

Контейнеры служат средством для центрирования и горизонтального размещения содержимого вашего сайта. Используйте Container для настройки ширины в пикселях.

<Контейнер>
<Строка>
1 из 1

Fluid Container #

Вы можете использовать <Контейнер для жидкости /> для ширины: 100% для всех размеров окна просмотра и устройства.

<Контейнер для жидкости>
<Строка>
1 из 1

Вы можете установить контрольные точки для жидкости проп. Установка его на точку останова ( sm, md, lg, xl, xxl ) установит Container как жидкость до указанной точки останова.

<Контейнер для жидкости = "md">
<Строка>
1 из 1

столбцов с автоматической компоновкой #

Если ширина столбца не указана, компонент Col будет отображать столбцы одинаковой ширины


<Строка>
1 из 2
2 из 2

<Строка>
1 из 3
2 из 3
3 из 3

Установка ширины одного столбца #

Автоматическая компоновка столбцов сетки Flexbox также означает, что вы можете установить ширину одного столбца и автоматически изменять размер столбцов-братьев вокруг него.Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других столбцов изменится независимо от ширины центрального столбца.

1 из 3

2 из 3 (шире)

3 из 3

1 из 3

2 из 3 (шире)

3 из 3

<Контейнер>
<Строка>
1 из 3
2 из 3 (шире)
3 из 3

<Строка>
1 из 3
2 из 3 (шире)
3 из 3

Содержимое переменной ширины #

Установите значение столбца (для любого размера точки останова) на "авто" размер столбцов зависит от естественной ширины их содержимого.

1 из 3

Содержимое переменной ширины

3 из 3

1 из 3

Содержимое переменной ширины

3 из 3

<Контейнер>


1 из 3

Содержимое переменной ширины

3 из 3


<Строка>
1 из 3
Содержимое переменной ширины

3 из 3


Адаптивные сетки #

Колонка Col позволяет указать ширину столбцов по 6 размерам точек останова (xs, sm, md, lg, xl и xxl).Для каждой точки останова вы можете указать количество столбцов для охвата или установить значение для автоматической ширины макета.

<Контейнер>
<Строка>
sm = 8
sm = 4

<Строка>
sm = true
sm = true
sm = true

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

xs = 6 md = 4

xs = 6 md = 4

xs = 6 md = 4

<Контейнер>
{/ * Сгруппируйте столбцы на мобильном устройстве, сделав одну полную, а другую половинную * /}
<Строка>

xs = 12 мкр = 8


xs = 6 мкр = 4

{/ * Ширина столбцов начинается с 50% на мобильных устройствах и увеличивается до 33,3% на компьютерах * /}
<Строка>

xs = 6 мкр = 4


xs = 6 мкр = 4


xs = 6 мкр = 4

{/ * Ширина столбцов всегда составляет 50%, как на мобильных устройствах, так и на компьютерах * /}
<Строка>
xs = 6
xs = 6

Свойства точки останова Col также имеют более сложный объект prop form: {span: number, order: number, offset: number} для указания смещений и упорядочивания. ts.

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

Первая, но неупорядоченная

Вторая, но последняя

Третья, но вторая

<Контейнер>
<Строка>
Первый, но неупорядоченный
Второй, но последний
Третий, но второй

Свойство order также поддерживает first ( order : -1 ) и последний (порядок : $ columns + 1 ).

Первый, но последний

Второй, но неупорядоченный

Третий, но первый

<Контейнер>
<Строка>
Первый, но последний
Второй, но неупорядоченный
Третий, но первый

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

md = 4

md = {{span: 4, offset: 4}}

md = {{span: 3, offset: 3}}

md = {{span: 3, offset: 3}}

md = {{диапазон: 6, смещение: 3}}

<Контейнер>
<Строка>
md = 4
{`md = {{span: 4, offset: 4}}`}

<Строка>
{`md = {{span: 3, offset: 3}}`}
{`md = {{span: 3, offset: 3}}`}

<Строка>
{`md = {{span: 6, offset: 3}}`}

Установка ширины столбца в строке №

Строка Row позволяет указать ширину столбца для 5 размеров точек останова (xs, sm, md, lg, xl и xxl).Для каждой точки останова вы можете указать количество столбцов, которые поместятся рядом друг с другом. Вы также можете указать auto , чтобы установить естественную ширину столбцов.

<Контейнер>
<Строка xs = {2} md = {4} lg = {6}>
1 из 2
2 из 2

<Строка xs = {1} md = {2}>
1 из 3
2 из 3
3 из 3


1 из 3
2 из 3
3 из 3

Обратите внимание, что ширина столбца Row переопределяет ширину Col , установленную на более низких точках останова при просмотре на больших экранах.Размер будет заменен размером на средних и больших экранах.

<Контейнер>
<Строка md = {4}>
1 из 3
2 из 3
3 из 3

API #

Импорт контейнера из 'react-bootstrap / Container' Скопируйте код импорта для компонента контейнера

Имя Тип По умолчанию Описание
as

elementType

Для этого компонента можно использовать специальный элемент 4

правда | "см" | "мкр" | "lg" | "xl" | "xxl"

false

Позвольте контейнеру заполнить все доступное горизонтальное пространство.

bsPrefix

строка

'контейнер'

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

import Row from 'react-bootstrap / Row' Скопировать код импорта для компонента Row

Имя Тип По умолчанию Описание
как элемент

Для этого компонента можно использовать пользовательский тип элемента.

LG

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые поместятся рядом друг с другом на больших устройствах (≥992 пикселей).
Используйте auto , чтобы придать столбцам их естественную ширину.

мкр

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые поместятся рядом друг с другом на средних устройствах (≥768 пикселей).
Используйте auto , чтобы придать столбцам их естественную ширину.

см

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые поместятся рядом друг с другом на небольших устройствах (≥576 пикселей).
Используйте auto , чтобы придать столбцам их естественную ширину.

xl

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые поместятся рядом друг с другом на очень больших устройствах (≥1200 пикселей).Используйте auto , чтобы придать столбцам их естественную ширину.

xs

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые поместятся рядом друг с другом на очень маленьких устройствах (<576 пикселей). Используйте auto , чтобы придать столбцам их естественную ширину.

xxl

номер | «авто» | {cols: number | ‘auto’}

Количество столбцов, которые будут помещаться рядом друг с другом на сверхбольших устройствах (≥1400 пикселей).Используйте auto , чтобы придать столбцам их естественную ширину.

bsPrefix

строка

'строка'

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

import Col from 'response-bootstrap / Col' Скопировать код импорта для компонента Col

Имя Тип По умолчанию Описание
y

Для этого компонента можно использовать пользовательский тип элемента.

lg

логический | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов, охватываемых на больших устройствах (≥992px)

md

boolean | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов, охватываемых на средних устройствах (≥768 пикселей)

sm

boolean | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов, охватываемых на небольших устройствах (≥576 пикселей)

xl

boolean | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов, охватываемых на очень больших устройствах (≥1200 пикселей)

xs

boolean | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов, охватываемых на сверхмалых устройствах (<576 пикселей)

xxl

boolean | «авто» | номер | {span: boolean | «авто» | число, смещение: число, порядок: «первый» | «последний» | number}

Число столбцов для охвата на очень больших устройствах (≥1400 пикселей)

bsPrefix

строка

'col'

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

Грид — React Suite

Компонент макета сетки, который предоставляет 24 сетки, относящиеся к дизайну ответа Bootstrap.

Состоит из следующих компонентов:

Соответствует ширине экрана:

  • xs, очень маленький: < 480px
  • см, малое: ≥ 480px
  • мкр, средний: ≥ 992px
  • lg, большой: ≥ 1200px

Использование

  импорт {Grid, Row, Col} из 'rsuite';  

Примеры

Стойка

<Сетка>

Имущество Тип (по умолчанию) Описание
компонент Класс React.Тип элемента ('div') Для этого компонента можно использовать пользовательский тип элемента
жидкость логический Гидравлический макет, (ширина 100%)

<строка>

Имущество Тип (по умолчанию) Описание
компонент Класс React.ElementType ('div') Для этого компонента можно использовать пользовательский тип элемента
желоб номер Шаг решеток

Имущество Тип (по умолчанию) Описание
компонент Класс React.Тип элемента ('div') Для этого компонента можно использовать пользовательский тип элемента
LG номер Число столбцов, которые вы хотите охватить для больших устройств Настольные компьютеры (≥ 1200px )
lgHidden логический Скрыть столбец на больших устройствах Настольные компьютеры
LGOffset номер Переместить столбцы вправо для устройств среднего размера Настольные компьютеры
LGPull номер Измените порядок столбцов сетки влево для больших устройств Настольные компьютеры
LGPush номер Изменить порядок столбцов сетки вправо для больших устройств Настольные компьютеры
мкр номер Количество столбцов, которые вы хотите охватить для средних устройств Настольные компьютеры (≥ 992px )
mdHidden логический Скрыть столбец на средних устройствах Настольные компьютеры
mdOffset номер Переместить столбцы вправо для устройств среднего размера Настольные компьютеры
mdPull номер Измените порядок столбцов сетки слева для устройств среднего размера Настольные компьютеры
mdPush номер Изменить порядок столбцов сетки вправо для устройств среднего размера Настольные ПК
см номер Количество столбцов, которые вы хотите охватить для небольших устройств и планшетов (≥ 480 пикселей )
см Скрытый логический Скрыть столбец на малых устройствах Планшеты
smOffset номер Переместить столбцы вправо для малых устройств Планшеты
smPull номер Измените порядок столбцов сетки влево для небольших устройств Планшеты
smPush номер Изменить порядок столбцов сетки вправо для малых устройств Планшеты
xs номер Число столбцов, которые вы хотите охватить для сверхмалых устройств. Телефоны (< 480px )
xs Скрытый логический Скрыть столбец на сверхмалых устройствах Телефоны
xs Смещение номер Переместите столбцы вправо для сверхмалых устройств Телефоны
xs тянуть номер Измените порядок столбцов сетки влево для сверхмалых устройств Телефоны
xsPush номер Измените порядок столбцов сетки вправо для сверхмалых устройств Телефоны

Flexbox Grid

Responsive

Responsive модификаторы позволяют указать различные размеры столбцов, смещения, выравнивание и распределение при ширине окна просмотра xs, sm, md и lg.

  
Адаптивный

Fluid

Ширина на основе процентов позволяет плавно изменять размер столбцов и строк.

  .col-xs-6 {
  флекс-основа: 50%;
}  

Простой синтаксис

Все, что вам нужно запомнить, — это строка, столбец, содержимое.

  
12

Смещения

Смещение колонны

  
смещение

Автоматическая ширина

Добавьте любое количество столбцов автоматического изменения размера в строку.Пусть решает сетка.

  
авто

Вложенные сетки

Вложенные сетки внутри сеток внутри сеток.

  
авто

Выравнивание

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

.start-

  
Начало

.center-

  
Начало

.end-

  
конец

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

Пример

  
Все вместе сейчас

.top-

  
вершина

. Средний-

  
центр

.снизу -

  
Нижний

Распределение

Добавьте классы для распределения содержимого строки или столбца.

. Вокруг -

  
вокруг
вокруг
вокруг

.между-

  
между
между
между

Изменение порядка

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

. Первый-

  
1
2
3

.последний-

  
1
2
3

Реверс

.

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

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