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

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

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

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

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

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

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

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

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

.col-md-3
.col-md-6
.col-md-3

Два слупкі

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

.col-md-8
.col-md-4

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

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


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

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

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

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

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4