Мрежова система
Използвайте нашата мощна мобилна мрежа flexbox за изграждане на оформления с всякакви форми и размери благодарение на система от дванадесет колони, пет нива по подразбиране, променливи и миксини на Sass и десетки предварително дефинирани класове.
Как работи
Мрежовата система на Bootstrap използва поредица от контейнери, редове и колони за оформление и подравняване на съдържанието. Създаден е с flexbox и е напълно отзивчив. По-долу е даден пример и задълбочен поглед върху това как се събира мрежата.
Нов или непознат за flexbox? Прочетете това ръководство за CSS Tricks flexbox за информация, терминология, насоки и кодови фрагменти.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Горният пример създава три колони с еднаква ширина на малки, средни, големи и изключително големи устройства, използвайки нашите предварително дефинирани класове на мрежата. Тези колони са центрирани в страницата с родителя .container
.
Разбивайки го, ето как работи:
- Контейнерите предоставят средство за центриране и хоризонтално подреждане на съдържанието на вашия сайт. Използвайте
.container
за адаптивна ширина на пиксела или.container-fluid
заwidth: 100%
всички размери на прозорците и устройствата. - Редовете са обвивки за колони. Всяка колона има хоризонтален
padding
(наречен улей) за контролиране на пространството между тях. Следpadding
това това се противодейства на редовете с отрицателни полета. По този начин цялото съдържание във вашите колони е визуално подравнено надолу вляво. - В мрежово оформление съдържанието трябва да бъде поставено в колони и само колони могат да бъдат непосредствени деца на редове.
- Благодарение на flexbox колоните на мрежата без зададени
width
автоматично ще се оформят като колони с еднаква ширина. Например четири екземпляра на.col-sm
автоматично ще бъдат с ширина 25% от малката точка на прекъсване и нагоре. Вижте раздела за колони с автоматично оформление за повече примери. - Класовете колони показват броя на колоните, които искате да използвате от възможните 12 на ред. Така че, ако искате три колони с еднаква ширина напречно, можете да използвате
.col-4
. - Колоните
width
са зададени в проценти, така че винаги са плавни и оразмерени спрямо техния родителски елемент. - Колоните са хоризонтални
padding
, за да създадат улуци между отделните колони, но можете да премахнетеmargin
от редове иpadding
от колони с.no-gutters
на.row
. - За да направите мрежата отзивчива, има пет точки на прекъсване на мрежата, по една за всяка реагираща точка на прекъсване : всички точки на прекъсване (много малки), малки, средни, големи и много големи.
- Точките на прекъсване на мрежата се основават на медийни заявки с минимална ширина, което означава, че се прилагат към тази точка на прекъсване и всички тези над нея (напр.
.col-sm-4
важи за малки, средни, големи и много големи устройства, но не и първата точка наxs
прекъсване). - Можете да използвате предварително дефинирани класове на мрежата (като
.col-4
) или миксини Sass за повече семантично маркиране.
Бъдете наясно с ограниченията и грешките около flexbox , като невъзможността да използвате някои HTML елементи като flex контейнери .
Опции за решетка
Докато Bootstrap използва em
s или rem
s за дефиниране на повечето размери, px
s се използват за точки на прекъсване на мрежата и ширини на контейнери. Това е така, защото ширината на прозореца за изглед е в пиксели и не се променя с размера на шрифта .
Вижте как аспектите на мрежовата система Bootstrap работят на множество устройства с удобна таблица.
Изключително малък <576px |
Малък ≥576px |
Среден ≥768px |
Голям ≥992px |
Изключително голям ≥1200px |
|
---|---|---|---|---|---|
Максимална ширина на контейнера | Няма (автоматично) | 540 пиксела | 720 пиксела | 960 пиксела | 1140 пиксела |
Префикс на класа | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# колони | 12 | ||||
Ширина на улука | 30px (15px от всяка страна на колона) | ||||
Нестабилен | да | ||||
Подреждане на колони | да |
Автоматично оформление на колони
Използвайте специфични за точката на прекъсване класове колони за лесно оразмеряване на колони без изричен номериран клас като .col-sm-6
.
Еднаква ширина
Например, ето две оформления на мрежата, които се прилагат за всяко устройство и прозорец за изглед, от xs
до xl
. Добавете произволен брой класове без единици за всяка точка на прекъсване, от която се нуждаете, и всяка колона ще бъде с еднаква ширина.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Многоредов с еднаква ширина
Създайте колони с еднаква ширина, които обхващат няколко реда, като вмъкнете .w-100
там, където искате колоните да се разделят на нов ред. Направете паузите отзивчиви, като смесите .w-100
с някои помощни програми за отзивчив дисплей .
Имаше грешка в Safari flexbox , която не позволяваше това да работи без изричен flex-basis
или border
. Има заобиколни решения за по-стари версии на браузъри, но те не би трябвало да са необходими, ако вашите целеви браузъри не попадат във версиите с грешки.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Задаване на ширина на една колона
Автоматичното оформление за решетъчните колони на flexbox също означава, че можете да зададете ширината на една колона и да накарате братските колони автоматично да преоразмеряват около нея. Можете да използвате предварително дефинирани класове на мрежата (както е показано по-долу), миксини на мрежата или вградени ширини. Имайте предвид, че другите колони ще се преоразмеряват независимо от ширината на централната колона.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Съдържание с променлива ширина
Използвайте col-{breakpoint}-auto
класове за оразмеряване на колони въз основа на естествената ширина на тяхното съдържание.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Отзивчиви класове
Решетката на Bootstrap включва пет нива от предварително дефинирани класове за изграждане на сложни адаптивни оформления. Персонализирайте размера на вашите колони на много малки, малки, средни, големи или много големи устройства, както сметнете за добре.
Всички точки на прекъсване
За мрежи, които са еднакви от най-малкото устройство до най-голямото, използвайте класовете .col
и . .col-*
Посочете номериран клас, когато имате нужда от колона с определен размер; в противен случай не се колебайте да се придържате към .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Подредени хоризонтално
Използвайки един набор от .col-sm-*
класове, можете да създадете основна мрежова система, която започва подредена и става хоризонтална при малката точка на прекъсване ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Смесете и комбинирайте
Не искате вашите колони просто да се подреждат в няколко нива на мрежата? Използвайте комбинация от различни класове за всяко ниво, ако е необходимо. Вижте примера по-долу за по-добра представа как работи всичко.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Улуци
Улуците могат да бъдат адаптивно коригирани чрез специфични за точката на прекъсване подложки и класове за полезност с отрицателен марж. За да промените улуците в даден ред, сдвоете помощна програма за отрицателен марж на .row
и съвпадащи помощни програми за подпълване на .col
s. .container
Може да се наложи родителят или да .container-fluid
се коригира също, за да се избегне нежелано препълване, като се използва отново съвпадаща помощна програма за подпълване.
Ето пример за персонализиране на мрежата на Bootstrap при голямата ( lg
) точка на прекъсване и по-горе. Увеличихме .col
подложката с .px-lg-5
, противодействахме на това с .mx-lg-n5
на родителя .row
и след това коригирахме .container
обвивката с .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Ред колони
Използвайте адаптивните .row-cols-*
класове, за да зададете бързо броя на колоните, които най-добре изобразяват вашето съдържание и оформление. Докато нормалните .col-*
класове се прилагат към отделните колони (напр. .col-md-4
), класовете на колоните на редовете се задават на родителя .row
като пряк път.
Използвайте тези класове колони на редове, за да създадете бързо основни оформления на мрежата или да контролирате оформленията на вашите карти.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Можете също да използвате придружаващия Sass mixin, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Подравняване
Използвайте помощни програми за подравняване на flexbox за вертикално и хоризонтално подравняване на колони. Internet Explorer 10-11 не поддържа вертикално подравняване на гъвкави елементи, когато гъвкавият контейнер има, min-height
както е показано по-долу. Вижте Flexbugs #3 за повече подробности.
Вертикално подравняване
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Хоризонтално подравняване
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Без улуци
Улуците между колоните в нашите предварително дефинирани класове на мрежата могат да бъдат премахнати с .no-gutters
. Това премахва отрицателните margin
s от .row
и хоризонталата padding
от всички непосредствени дъщерни колони.
Ето изходния код за създаване на тези стилове. Обърнете внимание, че замените на колони са обхванати само до първите дъщерни колони и са насочени чрез селектор на атрибути . Въпреки че това генерира по-специфичен селектор, подпълването на колони все още може да бъде допълнително персонализирано с помощта на помощни програми за интервали .
Имате нужда от дизайн от край до край? Пуснете родителя .container
или .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
На практика ето как изглежда. Имайте предвид, че можете да продължите да използвате това с всички други предварително дефинирани класове на мрежата (включително ширини на колони, адаптивни нива, пренареждане и други).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Обвиване на колони
Ако повече от 12 колони са поставени в рамките на един ред, всяка група от допълнителни колони, като една единица, ще се пренесе на нов ред.
Тъй като 9 + 4 = 13 > 12, този div с ширина на 4 колони се обвива в нов ред като една съседна единица.
Следващите колони продължават на новия ред.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Колоните се късат
Прекъсването на колони на нов ред във flexbox изисква малък хак: добавете елемент с width: 100%
където искате да обвиете колоните си на нов ред. Обикновено това се постига с множество .row
s, но не всеки метод на внедряване може да отчете това.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Можете също така да приложите това прекъсване в конкретни точки на прекъсване с нашите помощни програми за адаптивен дисплей .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Пренареждане
Поръчайте класове
Използвайте .order-
класове за контролиране на визуалния ред на вашето съдържание. Тези класове са отзивчиви, така че можете да зададете order
точката на прекъсване по (напр. .order-1.order-md-2
). Включва поддръжка за 1
всичките 12
пет нива на мрежата.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Има също отзивчиви .order-first
и .order-last
класове, които променят order
на елемент чрез прилагане order: -1
и order: 13
( order: $columns + 1
), съответно. Тези класове могат също да се смесват с номерираните .order-*
класове, ако е необходимо.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Изместване на колони
Можете да компенсирате колоните на мрежата по два начина: нашите адаптивни .offset-
класове на мрежата и нашите помощни програми за марж . Класовете на мрежата са оразмерени така, че да съответстват на колоните, докато полетата са по-полезни за бързи оформления, където ширината на отместването е променлива.
Офсетни класове
Преместете колони надясно с помощта на .offset-md-*
класове. Тези класове увеличават лявото поле на колона по *
колона. Например, .offset-md-4
преминава .col-md-4
през четири колони.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
В допълнение към изчистването на колони при реагиращи точки на прекъсване, може да се наложи да нулирате отместванията. Вижте това в действие в примера на мрежата .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Марж комунални услуги
С преминаването към flexbox във v4, можете да използвате помощни програми за маржове, като например .mr-auto
да принудите колоните да се разделят една от друга.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Гнездене
За да вложите съдържанието си в мрежата по подразбиране, добавете нова .row
и набор от .col-sm-*
колони в съществуваща .col-sm-*
колона. Вложените редове трябва да включват набор от колони, които се събират до 12 или по-малко (не е задължително да използвате всичките 12 налични колони).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
Когато използвате изходните Sass файлове на Bootstrap, имате възможност да използвате Sass променливи и миксини за създаване на персонализирани, семантични и отзивчиви оформления на страници. Нашите предварително дефинирани класове на мрежата използват същите тези променливи и миксини, за да осигурят цял набор от готови за използване класове за бързо реагиращи оформления.
Променливи
Променливите и картите определят броя на колоните, ширината на улука и точката на медийна заявка, от която да започнат плаващите колони. Използваме ги, за да генерираме предварително дефинираните класове на мрежата, документирани по-горе, както и за персонализираните миксини, изброени по-долу.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Миксини
Миксините се използват във връзка с променливите на мрежата за генериране на семантичен CSS за отделни колони на мрежата.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Примерна употреба
Можете да модифицирате променливите към свои собствени персонализирани стойности или просто да използвате миксините с техните стойности по подразбиране. Ето пример за използване на настройките по подразбиране за създаване на оформление с две колони с празнина между тях.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Персонализиране на мрежата
С помощта на нашите вградени променливи и карти на мрежата Sass е възможно напълно да персонализирате предварително дефинираните класове на мрежата. Променете броя на нивата, размерите на медийните заявки и ширините на контейнера – след това компилирайте отново.
Колони и улуци
Броят на колоните на мрежата може да се променя чрез променливи на Sass. $grid-columns
се използва за генериране на ширините (в проценти) на всяка отделна колона, докато $grid-gutter-width
задава ширината за каналите на колоните.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Решетъчни нива
Преминавайки отвъд самите колони, можете също да персонализирате броя на нивата на мрежата. Ако искате само четири нива на мрежата, бихте актуализирали $grid-breakpoints
и $container-max-widths
до нещо подобно:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Когато правите промени в Sass променливите или картите, ще трябва да запазите промените си и да компилирате отново. Това ще изведе чисто нов набор от предварително дефинирани класове на мрежата за ширини на колони, отмествания и подреждане. Отзивчивите помощни програми за видимост също ще бъдат актуализирани, за да използват персонализираните точки на прекъсване. Уверете се, че сте задали стойности на мрежата в px
(а не rem
, em
или %
).