Прыклады сетак Bootstrap

Асноўныя макеты сетак, якія дапамогуць вам пазнаёміцца з пабудовай у сістэме сетак Bootstrap.

У гэтых прыкладах .themed-grid-colклас дадаецца да слупкоў, каб дадаць некаторую тэматыку. Гэта не той клас, які даступны ў Bootstrap па змаўчанні.

Пяць узроўняў сеткі

У сеткавай сістэме Bootstrap ёсць пяць узроўняў, па адным для кожнага дыяпазону прылад, якія мы падтрымліваем. Кожны ўзровень пачынаецца з мінімальнага памеру акна прагляду і аўтаматычна прымяняецца да вялікіх прылад, калі ён не перавызначаны.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Тры роўныя слупкі

Атрымайце тры слупкі аднолькавай шырыні, пачынаючы з працоўных сталоў і маштабуючыся да вялікіх працоўных сталоў . На мабільных прыладах, планшэтах і ніжэй слупкі будуць аўтаматычна складвацца.

.col-md-4

Альтэрнатыва трох роўных слупкоў

Выкарыстоўваючы .row-cols-*класы, вы можаце лёгка стварыць сетку з роўнымі слупкамі.

.colдзіця з .row-cols-md-3

Тры няроўныя слупкі

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

.col-md-3

.col-md-6

.col-md-3

Два слупкі

Атрымайце два слупкі, пачынаючы з працоўных сталоў і маштабуючыся да вялікіх працоўных сталоў .

.col-md-8

.col-md-4

Поўная шырыня, адзін слупок

Для элементаў поўнай шырыні класы сеткі не патрэбныя.

Два слупкі з двума ўкладзенымі слупкамі

Згодна з дакументацыяй, укладванне простае - проста змясціце радок слупкоў у існуючы слупок. Гэта дае вам два слупкі, пачынаючы з працоўных сталоў і маштабуючыся да вялікіх працоўных сталоў , з двума (роўнай шырыні) у большым слупку.

На мабільных прыладах памераў, планшэтаў і менш, гэтыя слупкі і іх укладзеныя слупкі будуць складацца.

.col-md-8

.col-md-6

.col-md-4

Змешаны: мабільны і настольны

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

Кожны ўзровень класаў павялічваецца, гэта значыць, калі вы плануеце ўсталяваць аднолькавую шырыню для md, lg і xl, вам трэба ўказаць толькі md.

.col-md-8

.col-6 .col-md-4

.col-6

Змешаны: мабільны, планшэт і працоўны стол

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Жолабы

З .gx-*класамі гарызантальныя жолабы можна рэгуляваць.

.colз .gx-4жолабамі

Выкарыстоўвайце .gy-*класы для кіравання вертыкальнымі жолабамі.

.colз .gy-4жолабамі

Пры .g-*занятках жолабы ў абодва бакі можна рэгуляваць.

.colз .g-3жолабамі

Кантэйнеры

Дадатковыя класы, дададзеныя ў Bootstrap v4.4, дазваляюць выкарыстоўваць кантэйнеры шырынёй 100% да пэўнай кропкі перапынку. v5 дадае новую xxlкропку супыну.

.кантэйнер

.кантэйнер-см

.container-md

.container-lg

.container-xl

.container-xxl

.кантэйнер-вадкасць