Систем мреже
Користите нашу моћну флекбок мрежу која је на првом месту за мобилне уређаје да бисте направили распореде свих облика и величина захваљујући систему од дванаест колона, шест подразумеваних нивоа одзива, Сасс променљивим и миксинама и десетинама унапред дефинисаних класа.
Пример
Боотстрап-ов мрежни систем користи низ контејнера, редова и колона за распоред и поравнање садржаја. Направљен је са флексбоксом и потпуно реагује. Испод је пример и детаљно објашњење како се мрежни систем спаја.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Горњи пример креира три колоне једнаке ширине на свим уређајима и оквирима за приказ користећи наше унапред дефинисане класе мреже. Те колоне су центриране на страници са родитељем .container
.
Како то ради
Разбијајући то, ево како се систем мреже спаја:
-
Наша мрежа подржава шест тачака прекида . Тачке прекида су засноване на
min-width
упитима медија, што значи да утичу на ту тачку прекида и све оне изнад ње (нпр..col-sm-4
односи се наsm
,md
,lg
,xl
, иxxl
). То значи да можете да контролишете величину и понашање контејнера и колона за сваку тачку прекида. -
Контејнери центрирају и хоризонтално постављају ваш садржај. Користите
.container
за прилагодљиву ширину пиксела,.container-fluid
заwidth: 100%
све оквире за приказ и уређаје, или одговарајући контејнер (нпр..container-md
) за комбинацију ширине флуида и пиксела. -
Редови су омоти за колоне. Свака колона има хоризонтални
padding
(који се назива олуком) за контролу простора између њих. Овоpadding
се онда супротставља на редовима са негативним маргинама како би се осигурало да је садржај у вашим колонама визуелно поравнат на левој страни. Редови такође подржавају класе модификатора за уједначену примену величине колона и класа олука за промену размака вашег садржаја. -
Колоне су невероватно флексибилне. Постоји 12 колона шаблона доступних по реду, што вам омогућава да креирате различите комбинације елемената који обухватају било који број колона. Класе колона означавају број колона шаблона које треба обухватити (нпр.
col-4
обухвата четири).width
с се постављају у процентима тако да увек имате исту релативну величину. -
Олуци су такође прилагодљиви и прилагодљиви. Класе олука су доступне на свим тачкама прекида, са свим истим величинама као и наше маргине и размаци између поља . Замените хоризонталне олуке са
.gx-*
класама, вертикалне олуке са.gy-*
, или све олуке са.g-*
класама..g-0
доступан је и за уклањање олука. -
Сасс варијабле, мапе и мешавине напајају мрежу. Ако не желите да користите унапред дефинисане класе мреже у Боотстрап-у, можете користити изворни Сасс наше мреже да креирате сопствену са више семантичких ознака. Такође укључујемо нека ЦСС прилагођена својства за коришћење ових Сасс променљивих за још већу флексибилност за вас.
Будите свесни ограничења и грешака око флекбок-а , као што је немогућност коришћења неких ХТМЛ елемената као флек контејнера .
Опције мреже
Боотстрап-ов мрежни систем може да се прилагоди на свих шест подразумеваних тачака прекида и било које тачке прекида које прилагодите. Шест подразумеваних нивоа мреже су следећи:
- Изузетно мали (кс)
- Мала (см)
- средњи (мд)
- велики (лг)
- Екстра велики (кл)
- Екстра велики (ккл)
Као што је горе наведено, свака од ових тачака прекида има сопствени контејнер, јединствени префикс класе и модификаторе. Ево како се мрежа мења на овим тачкама прекида:
кс <576пк |
см ≥576пк |
мд ≥768пк |
лг ≥992пк |
кл ≥1200пк |
ккл ≥1400пк |
|
---|---|---|---|---|---|---|
Контејнерmax-width |
Ништа (аутоматски) | 540пк | 720пк | 960пк | 1140пк | 1320пк |
Префикс класе | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Број колона | 12 | |||||
Ширина олука | 1.5рем (.75рем лево и десно) | |||||
Прилагођени олуци | да | |||||
Нестабле | да | |||||
Редослед колона | да |
Аутоматски распоред колона
Користите класе колона специфичне за тачку прекида за једноставно одређивање величине колона без експлицитне нумерисане класе као што је .col-sm-6
.
Једнаке ширине
На пример, ево два распореда мреже која се примењују на сваки уређај и оквир за приказ, од xs
до xxl
. Додајте било који број класа без јединица за сваку тачку прекида која вам је потребна и свака колона ће бити исте ширине.
<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>
Подешавање ширине једне колоне
Аутоматски распоред за колоне флекбок мреже такође значи да можете да подесите ширину једне колоне и да сродним колонама аутоматски промените величину око ње. Можете користити унапред дефинисане класе мреже (као што је приказано испод), мешавине мреже или ширине у линији. Имајте на уму да ће се величина осталих колона променити без обзира на ширину централне колоне.
<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>
Респонсиве цлассес
Боотстрап мрежа укључује шест нивоа унапред дефинисаних класа за изградњу сложених респонзивних изгледа. Прилагодите величину својих колона на изузетно малим, малим, средњим, великим или екстра великим уређајима како год вам одговара.
Све тачке прекида
За мреже које су исте од најмањег уређаја до највећег, користите класе .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-cols-*
класе да брзо подесите број колона које најбоље приказују ваш садржај и изглед. Док се нормалне .col-*
класе примењују на појединачне колоне (нпр. .col-md-4
), класе колона реда су постављене на родитељу .row
као пречица. Помоћу .row-cols-auto
њих можете дати колонама њихову природну ширину.
Користите ове класе колона редова за брзо креирање основних распореда мреже или за контролу изгледа картица.
<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-auto">
<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>
Такође можете користити пратећи Сасс миксин, 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);
}
}
Нестинг
Да бисте свој садржај угнездили са подразумеваном мрежом, додајте нову .row
и скуп .col-sm-*
колона унутар постојеће .col-sm-*
колоне. Угнежђени редови треба да обухватају скуп колона које имају збир до 12 или мање (није обавезно да користите свих 12 доступних колона).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="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>
Сасс
Када користите изворне Сасс датотеке Боотстрап-а, имате опцију да користите Сасс променљиве и миксине за креирање прилагођених, семантичких и прилагодљивих изгледа страница. Наше унапред дефинисане класе мреже користе ове исте варијабле и миксине да обезбеде читав пакет класа спремних за употребу за брзо реаговање распореда.
Променљиве
Променљиве и мапе одређују број колона, ширину олука и тачку упита медија у којој ће почети плутајуће колоне. Користимо их да генеришемо унапред дефинисане класе мреже које су горе документоване, као и за прилагођене миксине наведене у наставку.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Микинс
Миксини се користе заједно са варијаблама мреже за генерисање семантичког ЦСС-а за појединачне колоне мреже.
// 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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@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>
Прилагођавање мреже
Користећи наше уграђене мрежне Сасс променљиве и мапе, могуће је потпуно прилагодити унапред дефинисане класе мреже. Промените број слојева, димензије медијског упита и ширине контејнера — а затим поново компајлирајте.
Стубови и олуци
Број колона мреже може се мењати преко Сасс променљивих. $grid-columns
користи се за генерисање ширине (у процентима) сваке појединачне колоне док $grid-gutter-width
поставља ширину за олуке колоне.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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
);
Када правите било какве промене у Сасс променљивим или мапама, мораћете да сачувате промене и поново компајлирате. На тај начин ће се добити потпуно нови скуп унапред дефинисаних класа мреже за ширине колона, помаке и редослед. Ажурирани услужни програми за видљивост ће такође бити ажурирани да користе прилагођене тачке прекида. Обавезно поставите вредности мреже у px
(не rem
, em
, или %
).