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

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

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

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

.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 3 мае чатыры ўзроўні класаў: xs (тэлефоны), sm (планшэты), md (настольныя кампутары) і lg (большыя працоўныя сталы). Вы можаце выкарыстоўваць практычна любую камбінацыю гэтых класаў для стварэння больш дынамічных і гнуткіх макетаў.

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

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

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

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

Расчыстка калоны

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

.col-xs-6 .col-sm-3
Змяніце памер акна прагляду або праверце яго на тэлефоне для прыкладу.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Скіды зрушэння, націскання і выцягвання

Скід зрушэнняў, штуршкоў і выцягванняў у пэўных кропках супыну.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0