Содержание
Значение чисел в «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>
jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>Классы 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 | . |
| Показать только на md | .d-none .d-md-block .d-lg-none |
| Показать только на lg | .d-none .d-lg-block .d-xl-none |
| Показать только на xl | .d-none .d-xl-block |
d-none .d-sm-block .d-md-noneСоответствие классам из 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-blockShow/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-noneShow/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” колонки..png)
Такие безразмерные колонки дают вам больше гибкости при разработке шаблонов.
Основные идеи модуля 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, элементы, мол, сами решат, как стать. Размер будет правильный, иногда отступы больше, иногда меньше и т.п.
Но дизайнер, использующий сетку, ждёт, что при уменьшении экрана элементы продолжат стоять по сетке. Либо резиново уменьшаясь по ширине, либо перескакивая друг под друга, но при этом:
- по размеру оставаясь кратными N колонкам
- сохраняя отступы между колонками
Разумеется, этот список справедлив не для всех элементов, но для большинства.
Без фреймворков постоянно следовать сетке неприятно — получается много однотипного кода. Любой сеточный фреймворк легко решает задачу, но про них уже были написаны пункты 1 и 2.
Smart Grid предлагает схему, которая позволяет использовать сетку без перечисленных выше проблем.
Но для начала следует определиться с тем,
какой код
мы хотим получить на выходе.
Примеры сеток начальной загрузки
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равных столбца
.col-sm-4
.col-sm-4
.col-sm-4
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с
планшеты и масштабирование до больших рабочих столов.
На мобильных телефонах столбцы автоматически складываются в стопку:
Пример
Попробуй сам »
Три неравных колонны
.
col-sm-3
.col-sm-6
.col-sm-3
В следующем примере показано, как получить три столбца различной ширины, начиная с
планшеты и масштабирование до больших компьютеров:
Пример
Попробуй сам »
Две неравные колонны
В следующем примере показано, как получить два столбца разной ширины, начиная с
планшеты и масштабирование до больших компьютеров:
Пример
Попробуй сам »
Без желобов
Используйте .row-no-gutters класс для удаления желобов из строки и ее столбцов:
Пример
Попробуй сам »
Две колонки с двумя вложенными колонками
В следующем примере показано, как получить два столбца, начиная с планшетов и масштабируясь до больших рабочих столов.
с двумя другими столбцами (равной ширины) внутри большего столбца (на мобильных
телефоны,
эти столбцы и их вложенные столбцы будут складываться):
Пример
Попробуй сам »
Смешанный: мобильный и настольный
Сетка Bootstrap имеет четыре класса: xs (телефоны), sm (планшеты), md (рабочие столы) и lg (большие рабочие столы).
Классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.
Пример
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
col -xs-6Попробуй сам »
Совет: Помните, что сумма столбцов сетки должна составлять двенадцать для
строка. Более того, столбцы будут складываться независимо от области просмотра.
Смешанное: мобильный, планшетный и настольный
Пример
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
Попробуй сам »
Очистить поплавки
Очистить числа с плавающей запятой (с классом .clearfix ) в определенных точках останова, чтобы предотвратить странное обертывание с неравномерным
содержание:
Пример
Измените размер окна браузера, чтобы увидеть эффект.
< div> Столбец 4
col-md-offset- *