Bootstrap div: Grid system

Содержание

Bootstrap: полосатая таблица div — CodeRoad

Я использую Bootstrap css lib. Я знаю, как сделать полосатый стол с этой lib, но как сделать полосатый div?

Для бывших:

<table>
    <thead>
        <th>Date</th>
        <th>Info</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">                
                <div>text 1</div> 
                <div>text 2</div>  
                <div>text 3</div>  
                <div>text 4</div>                                
            </td>
        </tr>
    </tbody>    
</table>

Вопрос в том, как сделать: <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div> полосатым?

html css twitter-bootstrap
Поделиться Источник Lugaru 22 июля 2013 в 08:17
3 ответа

7

Добавьте легенду класса в свой контейнер, а затем для каждой другой строки в divs в этой строке вы можете применить формат
CSS . legend .row:nth-of-type(odd) div { background-color:antiquewhite; } .legend .row:nth-of-type(even) div { background: #FFFFFF; } <div> <div> <div>text</div> <div>more Text</div> </div> <div> <div>text</div> <div>more Text</div> </div> </div>
Поделиться Rondakay 01 февраля 2017 в 15:58

6

использовать
td div:nth-of-type(odd|even)
Следующий пример CSS3 работает в современных браузерах
<style> td div:nth-of-type(odd) { background: #e0e0e0; } td div:nth-of-type(even) { background: #FFFFFF; } </style> <table> <thead> <th>Date</th> <th>Info</th> <th>Price</th> </thead> <tbody> <tr> <td colspan="3"> <div>text 1</div> <div>text 2</div> <div>text 3</div> <div>text 4</div> </td> </tr> </tbody> </table>
Поделиться shukshin.ivan 08 апреля 2015 в 09:39

1

Чередование Twitter Bootstrap работает только для строк таблицы. Поэтому для того, чтобы разделить ваши дивы, вам нужно добавить каждый из них в новую строку. Например:
<tr> <td> <div>text 1</div> </td> </tr> <tr> <td> <div>text 2</div> </td> </tr> ...
Кроме того, я не уверен, чего вы пытаетесь достичь с помощью colspan="3" . Если вы хотите создать правильную таблицу, вам нужно создать новую td для каждого столбца. Например:
<tr> <td>2013-07-22</td> <td>Text for info field 1</td> <td>9.99</td> </tr>
Поделиться jsalonen 22 июля 2013 в 08:21
Похожие вопросы:

Адаптивная таблица Bootstrap
Я пытаюсь сделать не реагирующую таблицу отзывчивой, используя bootstrap в Joomla. Таблица генерируется PHP для воспроизведения событий. Я уже применить загрузочный таблица классов и контейнер. Но…

Bootstrap: что делать, если очень широкая таблица не помещается в сетку
У меня есть jqGrid, который является частью контейнера bootstrap div. Этот jqGrid имеет переменную ширину: пользователь может выбрать до двадцати столбцов, и когда он или она выбирает все двадцать,…

bootstrap 3 отзывчивая таблица с фиксированным первым столбцом
Я специально ориентируюсь на мобильные устройства, поэтому у меня есть адаптивная таблица Bootstrap. Это просто div с классом bootstrap table-responsive и таблицей, вложенной внутрь с классами table…

Бутстрап-таблица и полосатая строка
Кто-нибудь знает разницу между b/w bootstrap .table и .table-striped ? Я не видел никакой разницы http://www.w3schools.com/загрузки/tryit.АСП?именем=trybs_table_basic&stacked=ч…

Bootstrap 4 beta (последняя версия ) изменение цвета полосатого стола
У меня есть полосатая таблица закодированная следующим образом: <table class=table-sm table-hover table-striped> <thead> <tr> <th>#</th> <th>First Name</th>…

CSS-фоновая перезапись таблицы Bootstrap-полосатая
У меня есть следующий класс: .highlight-lighter { background-color: #fafafa; } и следующий html, где я пытаюсь реализовать полосатую таблицу с помощью bootstrap css: <div class=highlight-lighter…

Таблица Bootstrap не разбивается на страницы
Следуя онлайн-учебникам, я реализовал следующий простой код html с помощью Bootstrap в надежде получить разбиение на страницы, панель поиска и многое другое: <!DOCTYPE html> <html>…

Bootstrap таблица не реагирует, почему?
Я использую Bootstrap 4 для добавления таблицы на свою веб-страницу и пытаюсь сделать ее отзывчивой на телефоне. К сожалению, все, что происходит, — это то, что таблица очень уменьшена, совсем не…

Bootstrap 4 полосатая таблица-добавить строку и перерисовать stripes
У меня есть таблица в полоску с использованием Bootstrap 4 . Я программно добавляю строку в верхнюю часть таблицы,и она отбрасывает нечетную/четную раскраску строк. Как мне повторно запустить…

Таблица полосатая с Bootstrap 3 Когда я скрываю некоторые элементы tr динамично
Каково разумное решение сделать так, чтобы полосатая таблица оставалась в своем шаблоне (например, gray-white-gray-white) , даже когда я динамически скрываю некоторые элементы <tr> ?
Bootstrap 4 система сеток, примеры использования
Система сеток Bootstrap 4 состоит из 12 столбцов.
Пример сетки Bootstrap 4:

.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-2
.col-xs-3
.col-xs-7
.col-xs-4
.col-xs-4
.col-xs-4
Цифра в конце каждого класса определяет количество столбцов, которое займет блок. Класс .col-xs-1 определяет 1 столбец, .col-xs-8 — 8 столбцов. xs — означает, что сетка будет действовать на экранах с очень маленьким разрешением (например, телефоны). Для других разрешений есть классы sm, md, lg.
Код сетки из примера выше:
<div>  <div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> <div>.col-xs-1</div> </div> <div> <div>.="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; } </style>
Сетка, приведенная выше, будет выглядеть одинаково на всех устройствах.
В следующем примере мы используем такую же разметку, только используем сетку md. Это значит, что на экранах с разрешением меньше 992px все ячейки сетки вытянутся на всю ширину экрана и расположатся друг на другом.

.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-2
.col-md-3
.col-md-7
.col-md-4
.col-md-4
.col-md-4
<div>  <div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> </div> <div> <div>.col-md-2</div> <div>.col-md-3</div> <div>.col-md-7</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-5</div> <div>.col-md-7</div> </div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div> <div> <div>.col-md-12</div> </div> </div>

Размеры сетки
Очень маленькие устройства <34em Малые устройства ≥34em Средние устройства ≥48em Большие устройства ≥62em Очень большие устройства ≥75em
Поведение сетки Горизонтальная всё время Collapsed to start, horizontal above breakpoints
Ширина контейнера Нет (auto) 34rem 45rem 60rem 72.25rem
Префикс класса .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
Количество колонок 12
Ширина отступов 30px (15px с каждой стороны колонки)
Вложенность Есть
Отступы Есть
Выравнивание колонок Есть
Контейнеры
Сетка должна располагаться внутри контейнера .container (ширина 1170px) или .container-fluid (растягивается на всю ширину экрана).
Row
Колонки должны располагаться внутри строк .row. Только колонки могут быть непосредственными потомками строк.
Padding
У колонок есть отступы. Отступы крайних колонок компенсируются отрицательным margin строки .row.
Больше 12 колонок в ряд?
Если расположить больше 12 колонок в ряд, то колонки будут перемещаться на следующий ряд. Это значит, что если вы расположите, например, .col-md-10 и .col-md-3 в один ряд .row, то .col-md-3 переместится в следующий ряд.
Адаптивная верстка
Для создания адаптивной верстки используйте несколько классов, например, class="col-sm-10 col-md-6".
html — Bootstrap: Съезжают div’ы
Решение средствами самого bootstap, без изменения css. Если у вас такая верстка на всех разрешениях можно добавить «перевод строки». После двух блоков пустой <div> c классом clearfix
<div></div>
Если у вас такая верстка, что вы хотите чтобы этот перенос был не на всех расширениях, то можно дополнительно задать видимость этого пустого div-а:
<div></div>
PS Измените в вашем примере span на div. У вас блочные элементы, span же используют в случае строчных элементов, так для вашего примера лучше подходит div.
PSS Верстать обычный текст и мелкие элементы заголовочными тегами <h5> и <h6> тоже неправильно
То есть итоговый код должен быть таким (неправильное использование h5 и h6 исправьте сами):
<div> <div> <div> <div><h4><a href="#">Совет директоров Facebook, работавший в 2013 году, может лишиться зарплаты из-за неправильной подписи Цукерберга</a></h4><h5>Слишком поздно. И подпись все еще стоит на другом, неправильном бланке. Суд Делавэра решил, что Цукерберг не использовал необходимый метод выражения согласия акционера, поэтому согласие не берется в расчет.</h5><h6>15.11.15 22:29 <i></i>355 <i></i>12</h6></div> <div><h4><a href="#">Совет директоров Facebook, работавший в 2013 году, может лишиться зарплаты из-за неправильной подписи Цукерберга</a></h4><h5>Если вы находитесь на самых высоких позициях в корпорациях, если у вас нет руководителя, кто решает, сколько вам будут платить? Для вас это не проблема. Вы сами решаете, сколько будете получать. Будьте щедрыми! Но это проблема для того босса, которого у вас нет: директора корпораций работают с акционерами, которые не всегда контролируют происходящее в компаниях. Директора выбирают себе зарплату, и некоторые акционеры начинают волноваться из-за того, что она слишком высокая.</h5><h6>15.11.15 22:29 <i></i>355 <i></i>12</h6></div> <div></div> <div><h4><a href="#">Совет директоров Facebook, работавший в 2013 году, может лишиться зарплаты из-за неправильной подписи Цукерберга</a></h4><h5>Вот что произошло в Facebook. В его совете директоров восемь человек. Из них шесть не являются сотрудниками компании. Еще двое — главный операционный директор Шерил Сэндберг, а также Марк Цукерберг, сооснователь, гендиректор и председатель совета директоров. Еще Цукерберг считается мажоритарным акционером компании — он владеет 15% акций, при этом контролирует 60% голосующих акций.</h5><h6>15.11.15 22:29 <i></i>355 <i></i>12</h6></div> </div> </div> </div>
Шаблон · Twitter Bootstrap: на Русском
Как использовать?
Для активации responsive-дизайна добавьте CSS-файл и meta-тег в <head> вашей страницы. Если вы компилировали Bootstrap со страницы Изменить и скачать, Вам необходимо включить только meta-тег.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Внимание! В Bootstrap по умолчанию не входят responsive-файлы так как не все страницы и элементы нуждаются в этих возможностях. Вместо того чтобы обременять разработчиков удалением responsive-дизайна и его элементов, мы считаем что логичнее предоставить простую возможность включения.
Подробнее о Динамическом дизайне
Медиа-запросы позволяют изменять CSS «на лету», в зависимости от размера экрана, соотношения ширины и высоты экрана, типа устройства, и т.д., но обычно используется для изменения min-width и max-width элементов.
Изменяется ширина колонок в сетке шаблона
Заменяются плавающие элементы на фиксированные при необходимости
Изменяется размер заголовков и основного шрифта на разных устройствах
Используйте динамические возможности Медиа-запросов только для создания мобильной версии сайта. Для крупных проектов мы рекомендуем создавать отдельную версию дизайна и сайта.
Поддерживаемые устройства
Bootstrap поддерживает несколько медиа-запросов в одном файле, что позволяет работать Вашему проекту на различных устройствах и с разными разрешениями экранов. Что включено:
Категория Ширина шаблона Ширина колонок Отступ колонок
Смартфоны 480px и меньше Плавающие колонки без фиксированной ширины
Планшеты 767px и меньше Плавающие колонки без фиксированной ширины
Портретные планшеты 768px и больше 42px 20px
По умолчанию 980px и больше 60px 20px
Большие дисплеи 1200px и больше 70px 30px
/* Landscape - телефоны */ @media (max-width: 480px) { ... } /* От ландшафтного экрана телефона до потретного планшета */ @media (max-width: 767px) { ... } /* От портретного планшета до ландшафтного экрана и настольных дисплеев */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Большой дисплей */ @media (min-width: 1200px) { ... }
Поддерживаемые классы
Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы находятся в responsive.less.
Класс Телефоны 767px и меньше Планшеты от 979px до 768px Десктопы По умолчанию
.visible-phone Виден Скрыто Скрыто
.visible-tablet Скрыто Виден Скрыто
.visible-desktop Скрыто Скрыто Виден
.hidden-phone Скрыто Виден Виден
.hidden-tablet Виден Скрыто Виден
.hidden-desktop Виден Виден Скрыто
Когда использовать?
Использование данного функционала позволяет не создавать разные версии одного и того же сайта под разные устройства. Вместо этого можно управлять показом и скрытием контента в зависимости от устройства.
Тестирование
Измените размер окна или откройте данную страницу на мобильном устройстве для тестирование вышеуказанных классов в действии.
Виден на…
Зеленая отметка означает что блок виден в текущем окне шаблона.
Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор
Скрыт на…
Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.
Телефон✔ Телефон
Планшет✔ Планшет
Монитор✔ Монитор
Система сеток Bootstrap 4 | WebReference
Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок.=»col»] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; } </style> <div> <!— Сетка Bootstrap —> <div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> </div> <div> <div>.col-sm-2</div> <div>.col-sm-3</div> <div>.col-sm-7</div> </div> <div> <div>.col-sm-4</div> <div>.col-sm-4</div> <div>.col-sm-4</div> </div> <div> <div>.col-sm-5</div> <div>.col-sm-7</div> </div> <div> <div>.col-sm-6</div> <div>.col-sm-6</div> </div> <div> <div>.col-sm-12</div> </div> </div>
Числа в конце каждого имени класса означают количество занимаемых колонок. Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь. sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).=»col»] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; } </style> <div> <!— Сетка Bootstrap —> <div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> </div> <div> <div>.col-md-2</div> <div>.col-md-3</div> <div>.col-md-7</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-5</div> <div>.col-md-7</div> </div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div> <div> <div>.col-md-12</div> </div> </div>
Размеры сетки
В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.
Сверхмалая <576px Малая ≥576px Средняя ≥768px Большая ≥992px Сверхбольшая ≥1200px
Максимальная ширина контейнера Нет (auto) 540px 720px 960px 1140px
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Число колонок 12
Межколоночный интервал 30px (по 15px с каждой стороны колонки)
Вложенность Да
Порядок колонок Да
Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).
Что надо знать про сетки
Контейнеры
Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.
Ряды и колонки
Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.
padding
Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.
Более 12 колонок на строку?
Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.
Менее 12 столбцов на строку?
Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.
Классы сетки
Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).
Несколько классов
Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать, тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.
Автор и редакторы
Автор: Йен Диксон
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Сетка | Bootstrap: Основы верстки
Сетка — главный компонент фреймворка Bootstrap. Разные проекты подключают Bootstrap только для возможности использовать сетку. Действительно, система сеток уже давно отработана на сотнях проектов и отлажена.
Понимание работы сетки в Bootstrap — важнейший навык при работе. Поняв хитрости построения шаблонов, вы сможете делать сложные макеты и не прибегать к ненужным дописываниям стилей.
Из курса по Grid вы знаете, что сетка — система линий, по которым выстраивается контент внутри шаблона. Эти линии являются невидимыми. Взгляните на шаблон блога Хекслета. На изображении указана сетка проекта. Тёмными линиями обозначены колонки, а оранжевыми отступы между колонками. Изучите этот пример и найдите закономерности того, как выстроен контент внутри блога.
Сетки в Bootstrap отвечают за раскладку блоков и за адаптивность. Сетка определяет, как на разных разрешениях будут отображаться контентные блоки.
Сетку можно разбить на три составные части:
Контейнер;
Строки;
Колонки.
В качестве примера используем код с использованием сетки Bootstrap:
<div> <div> <div> <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> </div> </div> </div>
В этой разметке демонстрируется подход контейнер → строка → колонка. Добавив текст в колонку с классом .col, получится следующий макет:
Визуально кажется, что ничего особого не произошло, а текст вывелся так, как если бы не добавлялись контейнеры, строки, столбцы. Но это не так! Уже запущен механизм адаптивной сетки и выстраивание колонок. Добавим ещё одну колонку с тем же текстом:
<div> <div> <div> <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p> </div> <div> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> </div> </div> </div>
Получились две колонки одинаковой ширины. Настало время повнимательнее изучить те классы, которые описаны в HTML.
container
Контейнер является ключевым элементом сетки Bootstrap. Главная задача контейнера — ограничение ширины контента. По умолчанию, контент в Bootstrap имеет максимальную ширину в 1140 пикселей. Это условие обуславливается доступностью: в этих рамках текст органично располагается по ширине и вмещает примерно 120 символов. Большее количество символов труднее читать, так как глазу сложнее перемещаться между строчками.
Это ограничение можно обойти. Для этого в Bootstrap используется класс .container-fluid, который не ограничивает ширину контента внутри себя. Двухколоночный макет из примера выше при использовании .container-fluid будет выглядеть следующим образом:
Внутри себя контейнер хранит элементы любых видов. Это не обязательно должны быть строки. Если для элементов сетка не нужна, то не стоит создавать строку с одним единственным элементом внутри.
Важно: не вкладывайте контейнер внутри контейнера. Это плохая практика. При необходимости в нескольких контейнерах, вместо вкладывания друг в друга разделите их. Если в процессе разметки заметили, что нужен контейнер в контейнере, то успокойтесь, попейте кофе и пересмотрите подход.
row
Как и в таблицах, строки — неотъемлемый атрибут столбцов. В Bootstrap строка берёт на себя роль flex-контейнера, внутри которой будут располагаться flex-элементы столбцы. Если пропустить обёртку, то столбцы перестанут работать.
Класс .row имеет следующие стили:
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
Интересным здесь является использование отрицательных внешних отступов. Данный приём используется по причине того, что колонки внутри Bootstrap имеют внутренние отступы, которые отделяют колонки друг от друга на фиксированное значение в 30 пикселей. Чтобы компенсировать отступы слева и справа и не образовать лишние отступы у первого и последнего элемента в строке используются отрицательные отступы у контейнера, которым является .row.
Внутри .row содержатся только колонки! Это гарантирует правильную вложенность и возможность создавать адаптивность. Сторонние элементы выносятся за пределы .row.
Так как .row flex-контейнер, то к нему возможно применять доступные свойства, описанные в курсе Flex
col и col-*
В примере с двухколоночным макетом использовался класс .col, который равномерно распределяет пространство между колонками с такими классами внутри контейнера .row. В макетах такая операция часто не нужна, а необходимо дать блокам своё количество колонок. Bootstrap — 12-колоночная система. Из этого следует, что помимо класса .col при создании сетки доступны 12 классов вида .col-*, где * — количество колонок, которые займёт элемент.
<div> <div> <div> <p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p> </div> <div> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> </div> </div> </div>
В этом примере первая часть текста получила 4 колонки из 12, вторая же часть текста получила 8 колонок из 12. Bootstrap автоматически переносит колонки, если суммарно они занимают больше 12 частей. Если в строке меньше колонок, то при добавлении нового элемента можно забыть этот момент.
Можно комбинировать класс .col с классами .col-*. Это позволит ограничивать только необходимую часть, автоматически просчитывая место для колонки с классом .col. Например, создавая двухколоночный макет, указывается col-* для сайдбара и .col для контентной части.
<div> <div> <aside>  </aside> <main>  </main> </div> </div>
Внутри колонок, как вы можете догадаться, может лежать абсолютно любой контент. В роли колонки так же может выступать любой элемент.
Важно: Такая структура, как контейнер → строка → колонка обязательна. Держите это в голове каждый раз, как создаёте сетку с помощью Bootstrap. Распространённая ошибка — исключение контейнера из этой цепочки. Хоть строка .row и не зависит напрямую от стилей контейнера, но не указав контейнер пропадёт одна из компенсаций внутренних отступов, так же вы потеряете равномерное выравнивание контента на различных размерах viewport.
Дополнительное задание
В созданном в прошлом уроке проекте создайте структуру вида:
Шапка проекта
Меню с подкатегориями товаров.
Bootstrap 4 по центру вертикального и горизонтального выравнивания
Обновление 2019 — Bootstrap 4.3.1
Там нет необходимости для дополнительного CSS . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (ы) формы в полный рост . Bootstrap 4 теперь имеет h-100класс для 100% роста …
Вертикальный центр:
<div> <div> <form> <div> <label for="formGroupExampleInput">Example label</label> <input type="text" placeholder="Example input"> </div> <div> <label for="formGroupExampleInput2">Another label</label> <input type="text" placeholder="Another input"> </div> </form> </div> </div>
высота контейнера с пунктом (пунктами) по центру должна составлять 100% (или независимо от желаемой высоты относительно центрального элемента)
Примечание. При использовании height:100%( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах height:100vh;вместо %получения желаемой высоты могут использоваться единицы vh .
Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.
Горизонтальный центр:
text-centerцентрировать display:inlineэлементы и содержимое столбца
mx-auto для центрирования внутри гибких элементов
offset-*или mx-autoможет быть использован для центрирования столбцов ( .col-)
justify-content-centerв колонках центра ( col-*) внутриrow
Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану
столбцов · Bootstrap v5.0
Внимание! Обязательно прочтите страницу «Сетка», прежде чем углубляться в то, как изменять и настраивать столбцы сетки.
Как они работают
Столбцы построены на архитектуре flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных столбцов и модификации групп столбцов на уровне строк. Вы выбираете, как столбцы увеличиваются, сжимаются или изменяются иным образом.
При построении макетов сетки все содержимое размещается в столбцах. Иерархия сетки Bootstrap идет от контейнера к строке, столбцу и содержимому. В редких случаях вы можете комбинировать содержимое и столбец, но имейте в виду, что это может иметь непредвиденные последствия.
Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Имея шесть точек останова и дюжину столбцов на каждом уровне сетки, у нас есть десятки классов, уже созданных для вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
Вертикальное выравнивание
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов Один из трех столбцов Один из трех столбцов
Горизонтальное выравнивание
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов Один из двух столбцов
Обмотка колонн
Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.
.col-9
.col-4
Поскольку 9 + 4 = 13> 12, этот div шириной 4 столбца переносится на новую строку как один непрерывный блок.
.col-6
Последующие столбцы продолжаются до новой строки.
.col-9 .col-4 Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок. .col-6 Последующие столбцы продолжаются до новой строки.
Обрыв столбца
Разбиение столбцов на новую строку в flexbox требует небольшого взлома: добавьте элемент с шириной : 100% везде, где вы хотите перенести столбцы на новую строку. Обычно это достигается с помощью нескольких .row s, но не каждый метод реализации может это учитывать.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3
Вы также можете применить этот перерыв в определенных точках останова с помощью наших утилит для адаптивного отображения.
.col-6.col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4
Повторный заказ
Классы заказа
Используйте .order- классы для управления визуальным порядком вашего контента. Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сети.
Сначала в DOM, порядок не применяется
Второй в DOM, с большим порядком
Третий в DOM, с порядком 1
Сначала в DOM, порядок не применяется Второй в DOM, с большим порядком Третий в DOM, порядка 1
Есть еще и отзывчивые .order-first и .order-last классы, которые изменяют order элемента, применяя order: -1 и order: 6 , соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order- * .
Сначала в DOM, заказывается последним
Второй в DOM, неупорядоченный
Третий в DOM, заказывается первым
Сначала в DOM, заказывается последним Второй в DOM, неупорядоченный Третий в DOM, заказывается первым
Колонны компенсационные
Вы можете смещать столбцы сетки двумя способами: наш отзывчивый .смещение - классов сети и наши маржинальные коммунальные услуги. Классы сетки имеют размер, соответствующий столбцам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.
Классы смещения
Переместите столбцы вправо, используя классы .offset-md- * . Эти классы увеличивают левое поле столбца на * столбца. Например, .offset-md-4 перемещает .col-md-4 по четырем столбцам.
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3
В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения.Посмотрите это в действии на примере сетки.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
.col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 .col-sm-6.col-md-5 .col-lg-6 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Маржинальные коммунальные услуги
С переходом на flexbox в v4 вы можете использовать утилиты полей, такие как .me-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
.col-md-4 .col-md-4 .ms-auto .col-md-3 .ms-md-auto .col-md-3 .ms-md-auto .col-auto .me-auto .col-auto
Классы автономных столбцов
Модель .col- * классы могут также использоваться вне .row , чтобы задать элементу определенную ширину. Когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.
.col-3: ширина 25%
.col-sm-9: ширина на 75% выше точки останова sm
.col-3: ширина 25% .col-sm-9: ширина на 75% выше точки останова sm
Классы могут использоваться вместе с утилитами для создания гибких плавающих изображений.Обязательно заверните содержимое в оболочку .clearfix , чтобы очистить float, если текст короче.
Заполнитель Адаптивное плавающее изображение
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации.Он просто занимает место, и его не стоит читать.
И все же вы здесь, все еще упорно читаете этот текст-заполнитель, надеясь получить еще какие-то идеи или скрытое пасхальное яйцо с содержанием. Возможно, шутка. К сожалению, здесь ничего этого нет.
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением. Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать. И все же вы здесь, все еще упорно читаете этот текст-заполнитель, надеясь получить еще какие-то идеи или скрытое пасхальное яйцо с содержанием.Возможно, шутка. К сожалению, здесь ничего этого нет.
Flex · Bootstrap
Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора гибких утилит flexbox. Для более сложных реализаций может потребоваться собственный CSS.
Включить гибкое поведение
Примените утилиты display для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex.Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.
Я контейнер Flexbox!
Я встроенный контейнер Flexbox!
Я встроенный контейнер flexbox!
Адаптивные варианты также существуют для .d-flex и .d-inline-flex .
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Направление
Задайте направление гибких элементов в гибком контейнере с помощью утилит направления. В большинстве случаев вы можете опустить горизонтальный класс здесь, поскольку браузер по умолчанию строка .Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).
Используйте .flex-row , чтобы задать горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.
Гибкий элемент 1
Гибкий элемент 2
Гибкий элемент 3
Гибкий элемент 1
Гибкий элемент 2
Гибкий элемент 3
Элемент Flex 1 Элемент Flex 2 Элемент Flex 3 Элемент Flex 1 Элемент Flex 2 Элемент Flex 3
Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.
Гибкий элемент 1
Гибкий элемент 2
Гибкий элемент 3
Гибкий элемент 1
Гибкий элемент 2
Гибкий элемент 3
Элемент Flex 1 Элемент Flex 2 Элемент Flex 3 Элемент Flex 1 Элемент Flex 2 Элемент Flex 3
Адаптивные варианты также существуют для flex-direction .
.flex-row
.flex-row-reverse
. Гибкая стойка
.flex-колонка-реверс
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-колонка
.flex-sm-колонка-реверс
.flex-md-row
.flex-md-row-reverse
.Flex-MD-столбец
.flex-md-колонка-реверс
.flex-lg-row
.flex-lg-row-обратный
.flex-LG-колонка
.flex-lg-колонка-реверс
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
Обоснование содержания
Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: column ).Выберите из начало (браузер по умолчанию), конец , центр , между или около .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
... ... ... ... ...
Варианты ответа также существуют для justify-content .
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-между
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.оправдать-контент-MD-около
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-между
.justify-content-lg-about
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-между
.justify-content-xl-around
Выровнять позиции
Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось y для начала, ось x, если flex-direction: column ). Выберите из начало , конец , центр , базовый или растяжение (браузер по умолчанию).
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
... ... ... ... ...
Адаптивные варианты также существуют для align-items .
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.выровнять элементы-sm-конец
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.выровнять элементы-LG-конец
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Самовыравнивание
Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column ).Выберите один из тех же параметров, что и align-items : начало , конец , центр , базовая линия или растянуть (браузер по умолчанию).
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Гибкий элемент
Выровненный гибкий элемент
Гибкий элемент
Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент Выровненный гибкий элемент
Адаптивные варианты также существуют для align-self .
.align-самозапуск
.align-self-end
.align-самоцентр
.align-self-baseline
. Выравнивание-саморастягивание
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-baseline
.align-self-sm-stretch
.выровнять-само-MD-старт
.align-self-md-конец
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-stretch
.выровняйте-self-xl-start
.align-self-xl-конец
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Автоматические поля
Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), смещение двух элементов вправо (.mr-auto ) и сдвинув два элемента влево ( .ml-auto ).
К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для гибких элементов, родительский элемент которых имеет нестандартное значение justify-content . См. Этот ответ StackOverflow для получения дополнительных сведений.
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex
С элементами выравнивания
Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex Элемент Flex
Обертка
Измените способ переноса гибких элементов в гибкий контейнер.Выберите вариант без обтекания (по умолчанию в браузере) с .flex-nowrap , обертывание с .flex-wrap или обратное обертывание с .flex-wrap-reverse .
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Адаптивные варианты также существуют для flex-wrap .
.flex-nowrap
. Гибкая пленка
.flex-wrap-реверс
.flex-sm-nowrap
.flex-sm-пленка
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-реверс
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-обратный
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Заказать
Измените порядок определенных гибких элементов visual с помощью нескольких утилит порядка порядка . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку порядок принимает любое целочисленное значение (например, 5 ), добавьте собственный CSS для любых дополнительных значений.
Первый элемент гибкости
Второй гибкий элемент
Третий элемент гибкости
Первый гибкий элемент Второй гибкий элемент Третий гибкий элемент
Адаптивные варианты также существуют для заказа .
. Заказ-0
. Заказ-1
. Заказ-2
. Заказ-3
.заказ-4
. Заказ-5
. Заказ-6
. Заказ-7
. Заказ-8
. Заказ-9
. Заказ-10
. Заказ-11
. Заказ-12
. Заказ-см-0
. Заказ-см-1
. Заказ-см-2
. Заказ-см-3
.заказ-см-4
. Заказ-см-5
. Заказ-см-6
. Заказ-sm-7
. Заказ-см-8
. Заказ-см-9
. Заказ-см-10
. Заказ-см-11
. Заказ-см-12
.order-md-0
.order-md-1
. Заказ-md-2
.заказ-md-3
. Заказ-md-4
. Заказ-md-5
. Заказ-md-6
. Заказ-md-7
. Заказ-md-8
. Заказ-md-9
.order-md-10
. Заказ-md-11
.order-md-12
.order-lg-0
.order-lg-1
.заказ-LG-2
. Заказ-LG-3
. Заказ-LG-4
. Заказ-LG-5
. Заказ-LG-6
. Заказ-LG-7
. Заказ-LG-8
. Заказ-LG-9
.order-lg-10
. Заказ-lg-11
. Заказ-lg-12
.order-xl-0
.заказ-XL-1
. Заказ-XL-2
.order-xl-3
. Заказ-XL-4
. Заказ-XL-5
. Заказ-XL-6
. Заказ-XL-7
. Заказ-XL-8
. Заказ-XL-9
. Заказ-XL-10
. Заказ-XL-11
. Заказ-XL-12
Выровнять содержимое
Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси.Выберите из начало (браузер по умолчанию), конец , центр , между , около или растяжение . Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество гибких элементов.
Внимание! Это свойство не влияет на отдельные строки гибких элементов.
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
Гибкий элемент
...
Адаптивные варианты также существуют для align-content .
.align-content-start
.align-content-end
.align-контент-центр
.align-content-около
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-около
.выровнять контент-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-около
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-about
.выровнять контент-LG-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
Сеточная система начальной загрузки
Сеточная система начальной загрузки
Сетка
Bootstrap позволяет размещать на странице до 12 столбцов.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:
пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1 пролет 1
пролет 4 пролет 4 пролет 4
пролет 4 пролет 8
пролет 6 пролет 6
пролет 12
Сетка Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране может выглядеть лучше с контент организован в три столбца, но на маленьком экране лучше, если элементы содержимого были наложены друг на друга.
Совет: Помните, что столбцы сетки должны составлять в сумме до двенадцати для ряд. Более того, столбцы будут складываться независимо от области просмотра.
Классы сетки
Система сеток Bootstrap имеет четыре класса:
xs (для телефонов — экраны шириной менее 768 пикселей)
см (для планшетов — экраны шириной не менее 768 пикселей)
md (для небольших ноутбуков — экраны шириной 992 пикселя или более)
LG (для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.
Правила сетевой системы
Некоторые правила сеточной системы Bootstrap:
Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения
Используйте строки для создания горизонтальных групп столбцов
Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
Предопределенные классы, например .row и .col-sm-4 доступны для быстрого создания макетов сетки
Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на . Row
Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-sm-4
Ширина столбцов указывается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
Базовая структура сетки начальной загрузки
Ниже представлена базовая структура сетки Bootstrap:

…

Итак, чтобы создать желаемый макет, создайте контейнер (
). Затем создайте строку (
). Затем добавьте желаемое количество столбцов (теги с соответствующими .col - * - * классы). Обратите внимание, что числа в .col - * - * всегда должны составлять до 12 для каждой строки.
Параметры сети
В следующей таблице показано, как сетка Bootstrap работает на нескольких устройствах:
Очень маленький
<768px Маленький
> = 768px Средний
> = 992px Большой
> = 1200 пикселей
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Подходит для Телефоны Таблетки Маленькие ноутбуки Ноутбуки и настольные компьютеры
Поведение сети По горизонтали всегда Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера Нет (авто) 750px 970px 1170px
Кол-во столбцов 12 12 12 12
Ширина колонны Авто ~ 62 пикс. ~ 81 пикс. ~ 97 пикселей
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable Есть Есть Есть Есть
Смещения Есть Есть Есть Есть
Заказ колонки Есть Есть Есть Есть
Примеры
В следующих главах показаны примеры грид-систем для различных устройств:

Понимание системы сеток Bootstrap 4
Сетка Bootstrap — это самый быстрый и простой способ создания адаптивного макета веб-страницы.
Что такое Bootstrap Grid System
Сетка
Bootstrap обеспечивает быстрый и удобный способ создания адаптивных макетов веб-сайтов. В последней версии Bootstrap 4 представлена новая система гибких сеток, ориентированная на мобильные устройства, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра.
Bootstrap 4 включает предопределенные классы сетки для быстрого создания макетов сетки для различных типов устройств, таких как сотовые телефоны, планшеты, ноутбуки, настольные компьютеры и т. Д.Например, вы можете использовать классы .col- * для создания столбцов сетки для мобильных телефонов с очень маленькими устройствами в портретном режиме, аналогично вы можете использовать классы .col-sm- * для создания столбцов сетки для устройств с маленьким экраном. как мобильный телефон в альбомном режиме, классы .col-md- * для устройств со средним экраном, например планшеты, классы .col-lg- * для больших устройств, таких как настольные компьютеры, и классы .col-xl- * классы для очень больших экранов рабочего стола.
В следующей таблице приведены некоторые ключевые особенности новой системы координатной сетки.
Функции
Bootstrap 4 Grid System
Очень маленький
<576px
Маленький
≥576px
Средний
≥768px
Большой
≥992px
Очень большой
≥1200px
Макс.ширина контейнера
Нет (авто) 540px 720 пикселей 960px 1140px
Идеально для
Мобильный (вертикальный) Мобильный (горизонтальный) Таблетки Ноутбуки Ноутбуки и настольные компьютеры
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Количество столбцов 12
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Нестабильный Есть
Заказ колонки Есть
Приведенная выше таблица демонстрирует одну важную вещь, применяя любой .col-sm- * класс элемента будет влиять не только на его стиль на небольших устройствах, но также на средних, больших и очень больших устройствах с шириной экрана больше или равной 540 пикселей, если .col-md- * , .col-lg- * или .col-xl- * класса нет. Точно так же класс .col-md- * будет влиять не только на стили элементов на средних устройствах, но также на больших и очень больших устройствах, если .col-lg- * или .col-xl- класса нет.
Теперь возникает вопрос, как создавать строки и столбцы с помощью этой адаптивной сеточной системы с 12 столбцами. Ответ довольно прост: сначала создайте контейнер, который действует как оболочка для ваших строк и столбцов, используя любые классы контейнеров, такие как .container , после этого создайте строки внутри контейнера, используя класс .row , и создайте столбцы внутри любой строки вы можете использовать .col- * , .col-sm- * , .col-md- * , .col-lg- * и .col-xl- * классы. Столбцы — это фактическая область содержимого, в которую мы будем помещать наше содержимое. Давайте применим все это на практике и посмотрим, как это работает на самом деле:
Создание макетов с двумя столбцами
В следующем примере показано, как создать макеты с двумя столбцами для средних, больших и очень больших устройств, таких как столы, ноутбуки, настольные компьютеры и т. Д. Однако на мобильных телефонах (ширина экрана менее 768 пикселей) столбцы автоматически станут горизонтальными (2 ряды, 1 столбец).
Столбец слева Столбец справа Столбец слева Столбец справа Столбец слева Столбец справа
Примечание: В макете сетки содержимое должно быть размещено внутри столбцов (.col и .col- * ), и только столбцы могут быть непосредственными дочерними элементами строк ( .row ). Кроме того, ряды следует размещать внутри контейнера (фиксированного или жидкого) для надлежащего заполнения и выравнивания.
Совет: Ширина столбцов сетки задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.Кроме того, каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между отдельными столбцами.
Поскольку система сеток Bootstrap основана на 12 столбцах, поэтому, чтобы столбцы оставались в одной строке (т. Е. Рядом), сумма номеров столбцов сетки в одной строке не должна быть больше 12. Если вы пройдете через в приведенном выше примере кода внимательно вы найдете количество столбцов сетки (т.е. col-md- * ) добавьте до двенадцати (6 + 6, 4 + 8 и 3 + 9) для каждого ряда.
Создание макетов с тремя столбцами
Точно так же вы можете создавать другие макеты на основе вышеуказанного принципа. Например, в следующем примере обычно создаются макеты с тремя столбцами для экранов ноутбуков и настольных компьютеров. Он также работает на планшетах в альбомном режиме, если разрешение экрана больше или равно 992 пикселей (например, Apple iPad). Однако в портретном режиме столбцы сетки, как обычно, будут горизонтальными.
Столбец слева В середине столбца Столбец справа Столбец слева В середине столбца Столбец справа Столбец слева В середине столбца Столбец справа
Примечание: Если более 12 столбцов сетки помещаются в одну строку, каждая группа дополнительных столбцов в целом переносится на новую строку.См. Поведение переноса столбцов.
Колонки авто-компоновки бутстрапа
Вы также можете создать столбцов с одинаковой шириной для всех устройств (очень маленькие, маленькие, средние, большие и очень большие), просто используя класс .col без указания номера столбца.
Давайте попробуем следующий пример, чтобы понять, как это работает:
Первый столбец Вторая колонка Первый столбец Вторая колонка Третий столбец
Кроме того, вы также можете установить ширину одного столбца и позволить соседним столбцам автоматически изменять размер вокруг него одинаково.Вы можете использовать предопределенные классы сетки или встроенную ширину.
Если вы попробуете следующий пример, вы найдете столбцы в строке с классом . Col имеет одинаковую ширину.
Первый столбец Вторая колонка Первый столбец Вторая колонка Третий столбец
Поведение при переносе столбца
Теперь мы собираемся создать более гибкие макеты, которые изменяют ориентацию столбцов в зависимости от размера области просмотра.В следующем примере создается макет из трех столбцов на больших устройствах, таких как ноутбуки и настольные компьютеры, а также на планшетах (например, Apple iPad) в альбомном режиме, но на средних устройствах, таких как планшеты, в портретном режиме (768 пикселей ≤ ширина экрана <992 пикселей), он изменится на макет из двух столбцов, где третий столбец перемещается внизу первых двух столбцов.
Первый столбец Вторая колонка Третий столбец
Как вы можете видеть в приведенном выше примере, сумма номеров столбцов средней сетки (т.е.е. col-md- * ) равно 3 + 9 + 12 = 24> 12 , поэтому третий элемент
с классом .col-md-12 , который добавляет дополнительные столбцы сверх максимального 12 столбцов в строке .row переносятся на новую строку как один непрерывный блок на устройствах среднего размера экрана.
Точно так же вы можете создавать еще более адаптируемые макеты для своих веб-сайтов, используя функцию переноса столбцов сетки в Bootstrap. Вот несколько готовых к использованию примеров сетки Bootstrap.
Создание макетов с несколькими столбцами с помощью Bootstrap
С новой системой гибких сеток Bootstrap 4 mobile first flexbox вы можете легко управлять тем, как макет вашего веб-сайта будет отображаться на разных типах устройств с разными размерами экрана или области просмотра, таких как мобильные телефоны, планшеты, настольные компьютеры и т. Д. Давайте рассмотрим следующую иллюстрацию.
На приведенной выше иллюстрации всего 12 блоков содержимого на всех устройствах, но их размещение зависит от размера экрана устройства, как и в мобильном устройстве, макет отображается как макет сетки из одного столбца, в котором 1 столбец и 12 строк расположены друг над другом. , тогда как на планшете он отображается как двухколоночная сетка с 2 столбцами и 6 строками.
Кроме того, на устройствах с большим размером экрана, таких как ноутбуки и настольные компьютеры, он отображается в виде трехколоночной сетки, которая имеет 3 столбца и 4 строки, и, наконец, в устройствах с очень большим экраном, таких как большие рабочие столы, она отображается как четырехколоночная сетка, которая имеет 4 столбца и 3 ряда.
Теперь вопрос в том, как мы можем создавать такие отзывчивые макеты, используя эту новую сеточную систему Bootstrap. Начнем с основного целевого устройства. Предположим, что наше основное целевое устройство — ноутбук или обычный настольный компьютер.Поскольку наш макет ноутбука имеет 3 столбца и 4 строки, то есть макет сетки 3×4, поэтому HTML-код для создания такой структуры сетки будет выглядеть примерно так.
Вставка 1 Вставка 2 Вставка 3 Вставка 4 Вставка 5 Вставка 6 Вставка 7 Вставка 8 Вставка 9 Вставка 10 Вставка 11 Вставка 12
Если вы видите результат приведенного выше примера на ноутбуке или настольном компьютере с шириной экрана или области просмотра, превышающей или равной 992 пикселей, но менее 1200 пикселей, вы обнаружите, что макет имеет 4 строки, каждая из которых имеет 3 равных столбца, что дает 3 x 4 Макет сетки.
Теперь пришло время настроить наш макет для других устройств. Давайте сначала настроим его для планшетного устройства. Поскольку внутри планшета наш макет отображается в виде сетки 2×6 (т.е. 2 столбца и 6 строк). Итак, добавьте класс .col-md-6 в каждый столбец.
Вставка 1 Вставка 2 Вставка 3 Вставка 4 Вставка 5 Вставка 6 Вставка 7 Вставка 8 Вставка 9 Вставка 10 Вставка 11 Вставка 12
Совет: Для удобства выберите основное целевое устройство и сначала создайте макет для этого устройства, после чего добавьте классы, чтобы оно реагировало на другие устройства.
Точно так же вы можете настроить макет для очень больших устройств, таких как большой экран рабочего стола, добавив класс .col-xl-3 в каждый столбец, поскольку каждая строка в нашем макете очень большого устройства содержит 4 столбца. Вот окончательный код после объединения всего процесса.
Вставка 1 Вставка 2 Вставка 3 Вставка 4 Вставка 5 Вставка 6 Вставка 7 Вставка 8 Вставка 9 Вставка 10 Вставка 11 Вставка 12
Совет: Как показано на рисунке выше, нет необходимости настраивать макет для мобильных телефонов; поскольку столбцы на сверхмалых устройствах автоматически станут горизонтальными и будут отображаться в виде сетки столбцов 1×12 при отсутствии .col- * или .col-sm- * классы.
Вложение столбцов сетки
Столбцы сетки Bootstrap также могут быть вложенными, что означает, что вы можете помещать строки и столбцы внутри существующего столбца. Однако формула размещения столбцов будет такой же, т.е. сумма номеров столбцов должна быть равна 12 или меньше в пределах одной строки.
Столбец слева
Создание столбцов переменной ширины
Вы можете использовать классы col- {breakpoint} -auto для изменения размера столбцов на основе естественной ширины их содержимого.Попробуйте следующий пример, чтобы увидеть, как это работает:
Столбец слева Столбец переменной ширины Столбец справа Столбец слева Столбец переменной ширины Столбец справа
Выравнивание столбцов сетки
Вы можете использовать утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов сетки внутри контейнера.Чтобы понять, как это работает, попробуйте следующие примеры:
Вертикальное выравнивание колонн сетки
Вы можете использовать классы .align-items-start , .align-items-center и .align-items-end для выравнивания столбцов сетки по вертикали вверху, посередине и внизу контейнера, соответственно.
Первый столбец Вторая колонка Третий столбец Первый столбец Вторая колонка Третий столбец Первый столбец Вторая колонка Третий столбец
Отдельные столбцы внутри строки также можно выровнять по вертикали.Вот пример:
Первый столбец Вторая колонка Третий столбец
Примечание: Вы можете пропустить номер в .col- * класса сетки и просто используйте класс .col для создания столбцов одинакового размера для всех устройств (очень маленький, маленький, средний, большой и очень большой).
Горизонтальное выравнивание колонн сетки
Вы можете использовать классы .justify-content-start , .justify-content-center и .justify-content-end для выравнивания столбцов сетки по горизонтали слева, по центру и справа от контейнера. соответственно.Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:
Первый столбец Вторая колонка Первый столбец Вторая колонка Первый столбец Вторая колонка
В качестве альтернативы можно использовать класс .justify-content-around для равномерного распределения столбцов сетки с промежутками половинного размера на обоих концах, тогда как вы можете использовать класс .justify-content-between для равномерного распределения столбцов сетки там, где первый столбец расположен в начале, а последний столбец помещается в конец. Попробуйте следующий пример, чтобы увидеть, как это работает на самом деле:
Первый столбец Вторая колонка Первый столбец Вторая колонка
Пожалуйста, ознакомьтесь с руководством по css3 flexbox, чтобы узнать больше о выравнивании гибких элементов.
Изменение порядка столбцов сетки
Вы даже можете изменить визуальный порядок столбцов сетки, не меняя их порядок в реальной разметке. Используйте класс .order-last , чтобы расположить столбец последним, тогда как используйте класс .order-first , чтобы расположить столбец первым. Рассмотрим пример:
Первый, но наконец заказанный Второй, но неупорядоченный Последний, но сначала заказанный
Вы также можете использовать .order- * классы для упорядочивания столбцов сетки в зависимости от порядковых номеров. Столбец сетки с номером более высокого порядка идет после столбца сетки с номером более низкого порядка или столбца сетки без классов порядка. Он включает поддержку от 1 до 12 на всех пяти уровнях сетки.
Первый, но наконец заказанный Второй, но сначала заказанный Последний, но заказывается вторым
Смещение столбцов сетки
Вы также можете перемещать столбцы сетки вправо для выравнивания, используя классы смещения столбцов, такие как .offset-sm- * , .offset-md- * , .offset-lg- * и т. д.
Эти классы смещают столбцы, просто увеличивая его левое поле на указанное количество столбцов. Например, класс .offset-md-4 в столбце .col-md-8 перемещает его вправо на четыре столбца от исходного положения. Попробуйте следующий пример, чтобы увидеть, как это работает:

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

Примечание: Вы можете использовать класс .col-auto для создания столбцов, которые занимают столько места, сколько необходимо, то есть размеры самих столбцов зависят от содержимого.
Создание компактных столбцов
Вы можете удалить желоба по умолчанию между столбцами для создания компактных макетов, добавив класс .no-gutters в .row . Этот класс удаляет отрицательные поля из строки и горизонтальное заполнение из всех непосредственных дочерних столбцов.Вот пример:
Первый столбец Вторая колонка Третий столбец
Разделение столбцов на новую строку
Вы также можете создать столбцы одинаковой ширины, охватывающие несколько строк, вставив
с .w-100 класс, в котором вы хотите, чтобы столбцы разбивались на новую строку. Кроме того, вы можете сделать эти разрывы адаптивными, объединив класс .w-100 с вспомогательными классами адаптивного дисплея.
.col .col .col .col .col .col .col .col
Мы надеемся, что вы поняли основы новой системы сеток Bootstrap 4.В следующих нескольких главах вы узнаете, как создавать базовые макеты веб-страниц, используя эту систему сеток flexbox.
Строительные леса · Bootstrap 2.3.1 Документация
Требуется тип документа HTML5
Bootstrap использует определенные элементы HTML и свойства CSS, которые требуют использования типа документа HTML5. Включите его в начало всех ваших проектов.
...
Типографика и ссылки
Bootstrap устанавливает основные глобальные стили отображения, оформления и ссылок. В частности, мы:
Удалить поля на корпусе
Установить цвет фона: белый; на корпусе
Используйте атрибуты @baseFontFamily , @baseFontSize и @baseLineHeight в качестве нашей типографской основы
Установите глобальный цвет ссылки через @linkColor и примените подчеркивание ссылок только на : hover
Эти стили можно найти в строительных лесах .менее .
Сброс через нормализацию
В Bootstrap 2 старый блок сброса был заменен Normalize.css, проектом Николаса Галлахера и Джонатана Нила, который также поддерживает HTML5 Boilerplate. Хотя мы используем большую часть Normalize в нашем reset.less , мы удалили некоторые элементы специально для Bootstrap.
Пример живой сетки
В сеточной системе Bootstrap по умолчанию используется 12 столбцов , что составляет контейнер шириной 940 пикселей без включения адаптивных функций.После добавления адаптивного файла CSS сетка адаптируется к ширине от 724 пикселей до 1170 пикселей в зависимости от области просмотра. Ниже 767 пикселей столбцы становятся плавными и располагаются вертикально.
Базовая сетка HTML
Для простого макета из двух столбцов создайте .row и добавьте соответствующее количество столбцов .span * . Поскольку это сетка из 12 столбцов, каждый .span * охватывает некоторое количество из этих 12 столбцов и всегда должен добавлять до 12 для каждой строки (или количества столбцов в родительском элементе).

...

...

В этом примере у нас есть .span4 и .span8 , что составляет 12 столбцов и целую строку.
Колонны компенсационные
Переместите столбцы вправо, используя классы .offset * . Каждый класс увеличивает левое поле столбца на целый столбец. Например, .offset4 перемещает .span4 на четыре столбца.

...

...

Вложенные столбцы
Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .row и набор из .span * столбцов в существующий столбец .span * . Вложенные строки должны включать набор столбцов, которые в сумме равны количеству столбцов его родительского элемента.

Столбец уровня 1

Уровень 2

Уровень 2

Пример сетки живого флюида
В системе гибкой сетки для ширины столбцов используются проценты, а не пиксели.Он имеет те же возможности реагирования, что и наша фиксированная сетка, обеспечивая правильные пропорции для ключевых разрешений экрана и устройств.
Базовая гидравлическая сетка HTML
Сделайте любой ряд «жидким», заменив .row на .row-fluid . Классы столбцов остаются неизменными, что упрощает переключение между фиксированными и гибкими сетками.

...

...

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

...

...

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

Жидкость 12

Жидкость 6

Жидкость 6

Жидкость 6

Жидкость 6

Фиксированная компоновка
Предоставляет общий макет фиксированной ширины (и, при необходимости, адаптивный), требующий только
.
<тело>
...

Схема жидкости
Создайте гибкую страницу с двумя столбцами с
— отлично подходит для приложений и документов.

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

Внимание! В настоящее время Bootstrap не включает в себя адаптивные функции по умолчанию, поскольку не все должно быть отзывчивым. Вместо того, чтобы побуждать разработчиков удалять эту функцию, мы считаем, что лучше включить ее по мере необходимости.
Об адаптивном Bootstrap
Медиа-запросы позволяют настраивать CSS на основе ряда условий — соотношений, ширины, типа отображения и т. Д. — но обычно фокусируются на min-width и max-width .
Изменить ширину столбца в нашей сетке
Укладывайте элементы вместо поплавка там, где это необходимо
Измените размер заголовков и текста, чтобы они соответствовали устройствам
Используйте медиа-запросы ответственно и только в качестве начала для вашей мобильной аудитории.Для более крупных проектов рассмотрите выделенные базы кода, а не слои медиа-запросов.
Поддерживаемые устройства
Bootstrap поддерживает несколько медиа-запросов в одном файле, чтобы сделать ваши проекты более подходящими для разных устройств и разрешений экрана. Вот что входит:
Этикетка Ширина макета Ширина колонны Ширина желоба
Большой дисплей 1200px и выше 70px 30 пикселей
По умолчанию 980px и выше 60px 20 пикселей
Планшеты с портретом 768px и выше 42px 20 пикселей
Телефоны к планшетам 767px и ниже Жидкостные колонки, без фиксированной ширины
Телефоны 480 пикселей и меньше Жидкостные колонки, без фиксированной ширины
/ * Большой рабочий стол * / @media (минимальная ширина: 1200 пикселей) {...} / * Вертикальная ориентация планшета на альбомную и настольную * / @media (min-width: 768px) и (max-width: 979px) {...} / * С телефона с горизонтальной ориентации на планшет с портретной ориентацией * / @media (max-width: 767 пикселей) {...} / * Горизонтальные телефоны и вниз * / @media (max-width: 480 пикселей) {...}
Адаптивные классы полезности
Для более быстрой разработки, удобной для мобильных устройств, используйте эти служебные классы для отображения и скрытия содержимого по устройствам. Ниже приведена таблица доступных классов и их влияние на заданный макет медиа-запроса (с пометкой по устройству).Их можно найти в responseive.less .
Класс Телефоны 767px и ниже Планшеты от 979 пикселей до 768 пикселей Настольные компьютеры По умолчанию
. Видимый телефон видимый Скрытый Скрытый
.видимый планшет Скрытый видимый Скрытый
. Видимый рабочий стол Скрытый Скрытый видимый
. Скрытый телефон Скрытый видимый видимый
.скрытый планшет видимый Скрытый видимый
. Скрытый рабочий стол видимый видимый Скрытый
Когда использовать
Используйте ограниченно и избегайте создания совершенно разных версий одного и того же сайта. Вместо этого используйте их для дополнения презентации каждого устройства.Адаптивные утилиты не должны использоваться с таблицами и как таковые не поддерживаются.
Тестовый пример отзывчивых утилит
Измените размер браузера или загрузите его на разных устройствах, чтобы протестировать вышеуказанные классы.
Виден на …
Зеленые галочки показывают, что класс отображается в текущем окне просмотра.
Телефон✔ Телефон
Таблетка✔ Таблетка
Рабочий стол ✔ Рабочий стол
Скрыто на…
Здесь зеленые галочки указывают, что класс скрыт в вашем текущем окне просмотра.
Телефон✔ Телефон
Таблетка✔ Таблетка
Рабочий стол ✔ Рабочий стол
Понимание макета Bootstrap 5 — Designmodo
Bootstrap Sam Norton • 24 марта 2021 г. • 10 минут ПРОЧИТАТЬ
Создание макета сайта — сложная задача. Когда появился Интернет, у нас не было никаких конкретных методов, только таблицы, которые были созданы позже.
Через несколько лет появилось divs вместе с некоторыми другими HTML-тегами и инструментами, которые могут помочь вам создавать достойные квадратные макеты веб-сайтов. Затем, по мере развития технологий, была представлена идея адаптивного дизайна веб-сайтов, поэтому фреймворки для внешнего интерфейса были заядлыми.
Bootstrap — одна из самых популярных интерфейсных сред для создания мощных, но потрясающих веб-макетов. Bootstrap всегда был востребованным мощным фреймворком для разработки адаптивных проектов. Bootstrap предлагает гибкую сеточную систему, ориентированную на мобильные устройства, которая адекватно масштабируется до 12 столбцов по мере увеличения размера экрана или области просмотра.Он набит предопределенными классами для легкого создания макетов, а также полезными миксинами для создания семантических и гибких макетов.
С недавно выпущенным Bootstrap 5 мы добавили несколько дополнительных классов, связанных с системой компоновки. Ниже приводится руководство по фундаментальной концепции новой версии Bootstrap, в частности, по сеточной системе.
Сеточная система макета Bootstrap 5
При стольких усилиях по созданию основы виртуальной сетки не было никакого успеха даже при использовании таблиц, которые делали масштабирование невозможным, особенно для небольших видовых экранов из-за негибкости горизонтального диапазона.Когда были представлены divs , стало возможным использование CSS для создания системы, подобной сетке, которая затем стала базовой основой всех фреймворков CSS, включая Bootstrap.
Bootstrap по умолчанию похож на холст с горизонтальной сеткой на веб-странице, где элементы помещаются в конкретный элемент управления области просмотра по мере увеличения размера экрана. Чтобы использовать базовую сеточную систему Bootstrap, вы должны использовать правильный тип документа с использованием HTML5 вместе с настройками области просмотра через мета-область просмотра .
Конструктор шаблонов электронной почты в Интернете
С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны электронных писем быстрее, чем когда-либо прежде.
Попробуйте бесплатноДругие продукты
См. Код ниже.
....
Использование адаптивного мета-тега окна просмотра выше просто означает, что браузер будет отображать ширину веб-страницы с размером области просмотра, в которой веб-страница просматривается в данный момент. Просто обратите внимание, что вы не должны использовать этот метатег, если не уверены, был ли ваш сайт разработан для адаптивного дизайна или нет. Результат может быть непредсказуемым.
Контейнеры
Bootstrap использует элементы контейнера в качестве основы для своей грид-системы.Контейнеры можно использовать несколько раз, но не должны быть вложенными. Вы можете использовать три типа контейнерных классов: .container , .container-fluid и response container . Класс .container обеспечивает центрированный макет адаптивной пиксельной сетки, в то время как. он .container-fluid обеспечивает макет во всю ширину для всех размеров области просмотра. Реагирующий контейнер просто генерирует отзывчивый контейнер шириной : 100% до указанной точки останова.Максимальная ширина контейнера будет меняться в разных окнах просмотра в зависимости от точки останова семантической ширины контейнера (например, .container- * ).
В таблице ниже показана максимальная ширина каждого контейнера, если вы решите использовать любой из предопределенных классов контейнера.
Давайте посмотрим, как каждый класс контейнера работает на разных разрешениях экрана или размерах области просмотра. Ниже у нас есть базовая разметка для каждого класса контейнера.
.container

.контейнер-жидкость

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

Контейнеры выше должны выглядеть так на двойном сверхбольшом разрешении экрана:
А вот так это должно выглядеть на очень большом разрешении экрана:
Вот так это должно выглядеть на большом экране:
Вот для среднего разрешения экрана или планшетных устройств:
Наконец, вот как это должно выглядеть на экране с меньшим разрешением или на мобильных устройствах:
рядов
Чтобы использовать систему сеток Bootstrap, вам необходимо вставить хотя бы одну строку столбцов.Каждый контейнерный класс может иметь одну или несколько вложенных строк. Строка начальной загрузки — это просто группа горизонтальных столбцов начальной загрузки, которые можно разбить на 12 частей.
Прежде чем говорить о столбцах, давайте посмотрим на разметку для строк.

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

Колонны
Bootstrap состоит из имеющегося в вашем распоряжении класса с шестью столбцами, который может адаптироваться ко всем шести точкам останова по умолчанию.Давайте рассмотрим тонкости каждого класса столбцов в Bootstrap 5.
Extra small (xs) класс столбца для таргетинга на мобильные устройства с максимальной шириной 575 пикселей.
Small (sm) Класс столбца для нацеливания на устройства с разрешением больше или равным 576 пикселей, но меньше 768 пикселей.
Средний (md) класс столбца для устройств таргетинга, размер которых больше или равен 768 пикселей, но меньше 992 пикселей.
Large (lg) класс столбца для устройств таргетинга, размер которых превышает 992 пикселей, но меньше 1200 пикселей.
Сверхбольшой (xl) класс столбца для устройств таргетинга, размер которых превышает 1200 пикселей, но меньше 1140 пикселей.
Extra extra large (xxl) Параметр класса столбца предназначен для всех разрешений, превышающих или равных 1400 пикселей.
Как указано выше, каждый из этих классов имеет свой уникальный префикс класса и модификаторы.Ширина промежутка между столбцами или желобом составляет 1,5 бэр (0,75 бэр слева и справа).
В таблице ниже показана ширина размеров столбцов.
В качестве примера создадим простой адаптивный макет из трех столбцов. Вот как должна выглядеть ваша разметка:

Столбец 1

Колонка 2

Колонка 3

Как видно из разметки выше, мы использовали три деления внутри .row class div , каждая содержит .col-md-4 class . Для устройств с разрешением больше и равно 768 пикселей и меньше 992 пикселей, вы увидите трехколоночный макет, например:
По мере того, как разрешение экрана уменьшается до тех пор, пока оно не достигнет разрешения менее 768 пикселей, ширина каждого столбца изменится на 100%, и каждый столбец будет накладываться друг на друга. В этом состоянии вы увидите макет из трех столбцов, например:
Теперь давайте посмотрим, как мы можем смешивать классы столбцов для разных разрешений экрана.Давайте рассмотрим трехколоночный макет сверху. Мы хотим, чтобы первый и второй столбцы располагались рядом друг с другом и имели 50% ширины каждый, когда разрешение экрана уменьшается до менее 768 пикселей. Затем третий столбец должен растянуться до 100% ширины и располагаться ниже первых двух столбцов.
Чтобы сделать этот макет, мы смешаем несколько разных классов столбцов. Вот как должна выглядеть разметка:

Столбец 1

Колонка 2

Колонка 3

Обратите внимание, что мы добавили .col-sm-6 класс к первому и второму столбцу делений . Когда разрешение экрана больше или равно 576 пикселей, но меньше 768 пикселей, для первых двух столбцов будет установлена ширина 50% каждый, а для третьего столбца будет использоваться макет ширины 100% с использованием .col-sm- 12 .
Результат должен выглядеть следующим образом на маленьком устройстве / окне просмотра:
Адаптивные столбцы
Если вы хотите иметь столбец с одинаковым размером от самого маленького до самого большого устройства / области просмотра, вы можете использовать .col или .col- * класс. Это означает, что независимо от того, как вы увеличиваете или уменьшаете разрешение экрана, размер каждого столбца останется неизменным в соответствии с вашим определенным размером столбца.
Давайте посмотрим на этот пример. Давайте создадим макет в две строки. Первая строка будет иметь три столбца, каждый из которых будет иметь класс .col , а вторая строка будет иметь три столбца с классами .col-3 , .col-6 и .col-3 по порядку.
Вот как должна выглядеть разметка:

Столбец 1

Столбец 2

Столбец 3

Столбец 3/12

Столбец 6/12

Столбец 3/12

Результат должен выглядеть так:
Кроме того, вы также можете создавать столбцы с накоплением по горизонтали, используя .col- * класс. « * » представляет размер области просмотра, который может быть xs , sm , md , lg , xl , xxl . Это заставит каждый столбец сворачиваться и складываться в горизонтальный вид, когда он достигает определенного разрешения экрана или размера области просмотра.
В качестве примера вернемся к нашему предыдущему примеру и изменим первые три столбца div с .col class на .col-sm .Это просто сворачивается и складывается в верхней части каждого столбца, если разрешение экрана меньше 768 пикселей.
Разметка должна выглядеть так:

Столбец 1

Столбец 2

Столбец 3

Столбец 3/12

Столбец 6/12

Столбец 3/12

Если разрешение экрана больше или равно 768 пикселей, результат должен выглядеть следующим образом:
Затем, если вы уменьшите размер экрана до разрешения экрана менее 768 пикселей, столбцы должны выглядеть следующим образом:
Ряд столбцов
Bootstrap также дает вам возможность быстро установить количество столбцов для рендеринга каждого содержимого с помощью .row-cols- * класс. Это просто создаст базовые макеты сетки или элементы управления содержимым.
В качестве примера создадим макет из двух строк с шестью столбцами одинакового размера. Для этого нам нужно добавить класс .row-cols-3 внутри обычного класса .row div , а затем создать класс div с шестью столбцами с классом .col для каждого из них. .
Вот как должна выглядеть разметка:

Столбец 1

Столбец 2

Столбец 3

Столбец 4

Колонка 5

Столбец 6

Результат должен выглядеть так:
Как видно выше, при использовании .Класс row.cols-3 распределил три столбца по две строки каждый.
Колонны смещения
Возможно, ваш макет требует от вас смещения некоторых столбцов и наличия некоторого горизонтального пустого пространства до или после вашего элемента. Bootstrap 5 предлагает два способа сделать это. Сначала с помощью адаптивного смещения — * — * (первый « * » снова обозначает базовую ширину медиа-запросов, а второй « * » — количество столбцов для смещения) классы сетки и второй — с использованием утилит маржи, таких как .ms-auto , чтобы разделить одноуровневые столбцы друг от друга.
Давайте сначала посмотрим, как работает класс .offset — * — * . Вот как должна выглядеть наша разметка:

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

Как видно из разметки выше, мы использовали .offset-md-4 класс во втором столбце первого .row class div . Это даст пустое пространство в четыре столбца с левой стороны сетки перед последними четырьмя столбцами. Таким же образом мы добавили .offset-md-3 к каждому из div второго .row class div , так что это даст по три пустых места слева от сетки соответственно.
Результат должен быть таким:
Теперь давайте посмотрим, как добиться того же, используя утилиты маржи.Вот как должна выглядеть наша разметка:

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-md-3 .ms-md-auto

В первой строке выше мы использовали класс .ms-auto во втором столбце div. Письмо « м » от .ms-auto означает margin , а буква « s » используется для установки margin-left и margin-right . Слово « auto » означает, что мы устанавливаем маржу на auto, которая вытянет .col-md-4 в конец сетки.
Для второй строки мы используем класс .ms-md-auto . И снова буква « м » обозначает поле , а буква « с » используется для установки поля слева и поля справа .Буквы « md » обозначают точку останова, в которой для столбца будет установлена максимальная ширина 100%, в данном случае среднее окно просмотра или среднее разрешение экрана. Вы можете изменить это на любую точку останова, которую вы предпочитаете, в соответствии с потребностями вашего макета. Вы также можете посетить страницу утилит маржи, чтобы узнать больше о параметрах интервалов.
Результирующий макет будет выглядеть так:
Желоба
Bootstrap 5 предоставляет предопределенные классы желобов для добавления отступов между столбцами, которые в основном используются для быстрого размещения и выравнивания содержимого.Промежутки — это промежутки между содержимым столбцов, которые можно быстро отрегулировать и которые специально создаются с помощью горизонтального заполнения.
Есть несколько классов, которые следует помнить, когда дело доходит до использования желобов начальной загрузки:
Класс .gx- * используется в основном для управления шириной горизонтального желоба.
. Класс gy- * используется в основном для управления шириной вертикального желоба.
.g- * класс используется в основном для управления шириной желоба как по горизонтали, так и по вертикали.
.g-0 класс удаляет предопределенные классы сетки, включая отрицательные поля из класса .row и горизонтальные отступы из связанных столбцов.
Давайте подробнее рассмотрим каждый из этих классов желобов на нескольких примерах.

Горизонтальный желоб

Горизонтальный желоб

Горизонтальный желоб

Вертикальный желоб

Вертикальный желоб

Вертикальный желоб

Вертикальный желоб

Желоб V&H

Желоб V&H

Желоб V&H

Желоб V&H

Без желоба

Без желоба

Чтобы понять разметку выше, давайте подробно рассмотрим тонкости каждого класса div:
Первый контейнер представляет собой горизонтальный желоб.Как вы можете видеть внутри класса .row div первого контейнера, мы добавили класс .gx-5 , чтобы добавить пробелы между каждым столбцом, который контролирует ширину горизонтального желоба. Чем меньшее число вы укажете в классе .gx- * , тем меньше будет места или ширины горизонтального желоба.
Второй контейнер представляет собой вертикальный желоб. Внутри .row class div второго контейнера мы добавили класс .gy-5 , который добавит пространство между каждым столбцом по вертикали.Как и в случае с горизонтальным желобом, чем меньше числа вы поместите в класс .gy- * , тем меньше будет места или ширины вертикального желоба.
Третий контейнер представляет собой горизонтальный и вертикальный желоб. Используя класс .g-3 внутри .row class div , мы в основном добавляем пространство как по горизонтальной, так и по вертикальной ширине желоба соответственно.
Есть два способа установить смещение столбцов в начальной загрузке: первый — через .смещение — * — * класс и через наценки .
Последний контейнер представляет собой нулевую ширину желоба, которая в основном удаляет предопределенные классы сетки, связанные с желобом через .g-0 class, добавленный вместе с .row class div .
Чтобы избежать нежелательного переполнения на больших желобах, вы можете использовать соответствующий вспомогательный класс заполнения, например .px- * class, или использовать .overflow-hidden class вместе с .контейнер class div в качестве обертки.
Давайте посмотрим, как это выглядит в браузере:
Сетка в двух словах
Основная концепция любого веб-сайта Bootstrap — это компонент макета или сетки. Сетка Bootstrap состоит из 12 столбцов одинаковой ширины. Используя его встроенные предопределенные классы, вы создаете столбцы и охватываете несколько столбцов за раз. Кроме того, вы можете использовать строки внутри столбцов, чтобы добавить новые значения ширины столбцов.
При работе с макетом сетки полезно знать следующее:
каждый (.row ) должен находиться в контейнере ( .container , .container-fluid или response container ).
Каждую строку можно использовать горизонтально для размещения нескольких элементов вместе.
Каждый столбец нужно размещать внутри строк. Вы можете разместить дополнительные строки внутри одной строки, чтобы иметь более контролируемую ширину столбцов.
Если для определенного элемента требуются столбцы, которые могут быть расположены в строке и превышают ограничение в двенадцать столбцов, вся коллекция будет упакована.
Вы можете использовать класс .col , если хотите иметь сетки одинакового размера от наименьшего до наибольшего разрешения экрана.
Вы также можете быстро установить количество столбцов для рендеринга для каждого, используя .row-cols- * . Это просто создаст базовые макеты сетки или элементы управления содержимым.
Если вы хотите иметь сетку с горизонтальным стеком, вы можете использовать .col — * — * класс, где первый «*» — это точка останова, в которой вы хотите, чтобы ваши сетки складывались, а последний « * » для столбца. count (e.г .col-sm-5 ).
Промежутки для столбцов предопределены по умолчанию, ширина которых начинается с 1,5 бэр (24 пикселя), но их можно быстро отрегулировать. gy- *, . gx- *, .g- * и. г-0 .
На этом мы завершаем основы сетки Bootstrap 5, которые вам необходимо знать. Мы не обсуждали здесь flexbox или другие полезные утилиты; имеет смысл создать отдельный учебник, чтобы не сомневаться в исходной системе сеток.
Сетка
Bootstrap — это мощная и полностью адаптивная сеточная система, разработанная для широкого спектра применений и совместимая со многими устройствами и разрешениями экрана.Создать собственный макет легко, имея базовые знания.
Для получения дополнительной информации о сетке Bootstrap обратитесь к официальной документации здесь.
Нравится то, что вы читаете? Подпишитесь на наши главные новости.
Общие сведения о сеточной системе Bootstrap — База знаний Pair
Эта статья была обновлена для работы с Bootstrap v.4.2.
Bootstrap — это фреймворк для создания веб-сайтов.Это избавляет от необходимости создавать основу для сайта. Вместо этого вы можете загрузить файлы Bootstrap на свой сервер, а затем добавить шаблон Bootstrap. Инструкции о том, как это сделать, можно найти в нашей статье Настройка Bootstrap.
Это даст вам базовый сайт. Однако что действительно делает Bootstrap впечатляющим, так это широкий спектр компонентов веб-сайта, которые можно добавить на сайт. Поскольку в Bootstrap уже есть встроенный CSS и Javascript, компоненты уже стилизованы и функциональны. Конечно, вы можете редактировать CSS и Javascript, чтобы настроить свой сайт по своему вкусу.
Сеточная система Bootstrap
Bootstrap использует сетку для правильного масштабирования компонентов для различных экранов просмотра. Это может показаться запутанным, но в этой статье мы подробно остановимся на том, как работает сетка.
Сетка Bootstrap состоит из контейнеров, строк и столбцов, которые используются для определения макета сайта.
Контейнеры
Контейнеры Bootstrap используются для определения ширины макета. Элементы добавляются внутри контейнеров и зависят от ширины контейнера.Контейнер — это элемент
с class = «container». Контейнер повлияет на все элементы в контейнере
.

Контейнеры по умолчанию имеют отступ в 15 пикселей, который смягчает его от конца страницы и от других контейнеров.
Внутри контейнеров будет добавлено
строк и столбцов.
Не вставляйте контейнер в контейнер.
Контейнеры фиксированной ширины
Контейнеры имеют фиксированную ширину по умолчанию, которая будет меняться в зависимости от размера устройства просмотра. Ширина устройства просмотра и соответствующая ширина контейнера указаны в таблице ниже:
Ширина устройства обзора Ширина контейнера
Менее 575 пикселей Авто
576–767 пикселей 540px
768–991 пикселей 720 пикселей
992px до 1199px 960px
1200px или выше 1140px
Контейнеры для жидкости
Если вы не хотите, чтобы размеры контейнеров менялись по фиксированной ширине, вы можете использовать class = «container-fluid» вместо class = «container».Это заставит контейнеры всегда соответствовать ширине экрана просмотра, а не изменять размер до фиксированной ширины.
Столбцы и строки
Сетка Bootstrap позволяет размещать до 12 столбцов на странице. Эти столбцы можно использовать по отдельности или сгруппировать. Чтобы сгруппировать столбцы вместе, вам нужно создать строки. Чтобы создать строки, добавьте div с class = «row», который заключает в себе код столбца.
Ряды всегда должны размещаться внутри контейнера.
Пример:

Содержимое столбца.

Рядов занимают всю ширину контейнера. В конце они имеют отрицательное поле в 15 пикселей, по существу удаляя поле в 15 пикселей, установленное его контейнером. Это связано с тем, что каждый столбец имеет собственное поле в 15 пикселей, которое заменяет поле контейнера.
Строки имеют отступ -15 пикселей, что сводит на нет отступ контейнера 15 пикселей.
Столбцы, выровненные рядом друг с другом, будут иметь поле 15 пикселей, в результате чего поле между двумя столбцами составит 30 пикселей. На содержимое в столбце будет влиять поле столбца в 15 пикселей.
Столбцы имеют отступ 15 пикселей. Столбцы, расположенные рядом друг с другом, будут иметь отступ 15 пикселей, в результате чего получится буфер 30 пикселей.
Добавление столбцов
Размер столбцов начальной загрузки можно различить по классам столбцов.Классы столбцов обычно задаются в формате «префикс столбца — Номер столбца », который будет напоминать этот пример:

Контент

Контент

Столбцы должны быть размещены внутри строки .
Замените префикс и ColumnNumber предпочтительным размером префикса и количеством столбцов.
Префиксы определяют, для какого устройства предназначена колонка. Например, см предназначен для маленьких экранов, таких как телефоны.
Размер Префикс Столбец Для
Очень маленький Нет (по умолчанию) .col- <576
Малый (телефоны) см .col-sm- ≥576px
Средний (таблетки) мкр .col-md- ≥768px
Large (ноутбуки) LG .col-lg- ≥992px
Extra Large (настольные ПК) xl .col-xl- ≥1200 пикселей

ColumnNumber в конце класса сетки, например class = «col-md-4», устанавливает, сколько столбцов он должен охватывать. В примере class = «col-md-4» содержимое
столбца будет охватывать четыре столбца на устройстве среднего размера, например портативном компьютере.Когда столбец установлен с префиксом для меньшего устройства, например sm , он будет отображаться аналогичным образом и на больших устройствах. Другими словами, столбец, определенный как см , будет работать для устройств размером с планшет или больше.
Чтобы столбцы были выровнены бок о бок, включите их в одну строку.

Контент

Контент

В конце концов, вы хотите, чтобы количество столбцов в строке было равно двенадцати.
Регулировочные колонки для различных устройств
Вы также можете настроить столбцы таким образом, чтобы они имели разную ширину столбцов в зависимости от размера устройства. Для этого вы просто включаете в свой класс еще один col-prefix-columnNumber. Это будет выглядеть примерно так:

Контент

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

Содержимое родительского столбца

Содержимое дочернего столбца

Bootstrap — это CSS-фреймворк с открытым исходным кодом, разрешенный под лицензией MIT.Bootstrap не является продуктом Pair Networks, Inc., и Pair Networks не предоставляет никаких гарантий на Bootstrap. Обратите внимание, что существует множество уровней фреймворков CSS. Проконсультируйтесь со своим ИТ-специалистом за советом и указаниями по подходящей структуре CSS. Этот конкретный продукт может соответствовать вашим потребностям, а может и не соответствовать. Компания Pair Networks, Inc. обеспечивает поддержку этого руководства для вашего удобства и не несет ответственности за производительность Bootstrap.
Категории: Разное

Bootstrap div: Grid system · Bootstrap

Bootstrap: полосатая таблица div — CodeRoad

3 ответа

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

Bootstrap 4 система сеток, примеры использования

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

Контейнеры

Row

Padding

Больше 12 колонок в ряд?

Адаптивная верстка

html — Bootstrap: Съезжают div’ы

Шаблон · Twitter Bootstrap: на Русском

Как использовать?

Подробнее о Динамическом дизайне

Поддерживаемые устройства

Поддерживаемые классы

Когда использовать?

Тестирование

Виден на…

Скрыт на…

Система сеток Bootstrap 4 | WebReference

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

Что надо знать про сетки

Контейнеры

Ряды и колонки

padding

Более 12 колонок на строку?

Менее 12 столбцов на строку?

Классы сетки

Несколько классов

Автор и редакторы

Сетка | Bootstrap: Основы верстки

container

row

col и col-*

Дополнительное задание

Bootstrap 4 по центру вертикального и горизонтального выравнивания

столбцов · Bootstrap v5.0

Как они работают

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

Вертикальное выравнивание

Горизонтальное выравнивание

Обмотка колонн

Обрыв столбца

Повторный заказ

Классы заказа

Колонны компенсационные

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

Маржинальные коммунальные услуги

Классы автономных столбцов

Flex · Bootstrap

Включить гибкое поведение

Направление

Обоснование содержания

Выровнять позиции

Самовыравнивание

Автоматические поля

С элементами выравнивания

Обертка

Заказать

Выровнять содержимое

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

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

Классы сетки

Правила сетевой системы

Базовая структура сетки начальной загрузки

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

Примеры

Понимание системы сеток Bootstrap 4

Что такое Bootstrap Grid System

Создание макетов с двумя столбцами

Создание макетов с тремя столбцами

Колонки авто-компоновки бутстрапа

Поведение при переносе столбца

Создание макетов с несколькими столбцами с помощью Bootstrap

Вложение столбцов сетки

Создание столбцов переменной ширины

Выравнивание столбцов сетки

Вертикальное выравнивание колонн сетки