Bootstrap grid mysallary

“Bootstrap” grid ulgamynyň gurluşygy bilen tanyşmak üçin esasy gözenek düzülişleri.

Bu mysallarda .themed-grid-colkäbir mowzuk goşmak üçin sütünlere synp goşulýar. Bu, Bootstrap-da adaty ýagdaýda elýeterli synp däl.

Bäş sany gözenek

“Bootstrap” grid ulgamyna bäş gatlak bar, goldaýan enjamlarymyzyň her biri üçin biri. Her bir dereje iň pes görnüşden başlaýar we awtomatiki usulda has uly enjamlara degişlidir.

.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-xxl-4
.col-xxl-4
.col-xxl-4

Üç sany sütün

Iş stollaryndan başlap, uly iş stollaryna çenli ulaldylan üç sany giňlikdäki sütün alyň . Jübi enjamlarynda, planşetlerde we aşakda sütünler awtomatiki usulda saklanar.

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

Üç sany sütün alternatiwasy

Sapaklary ulanyp, .row-cols-*deň sütünler bilen aňsatlyk bilen gözenek döredip bilersiňiz.

.colçagasy .row-cols-md-3
.colçagasy .row-cols-md-3
.colçagasy .row-cols-md-3

Üç sany deň däl sütün

Iş stollaryndan başlap, dürli giňlikdäki uly iş stollaryna çenli üç sany sütün alyň . Grid gorizontal blok üçin gözenek sütünleriniň on iki-e çenli goşmalydygyny ýadyňyzdan çykarmaň. Munuň üstesine-de, sütünler haýsy görnüşe garamazdan tapawudy ýok.

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

Iki sütün

Iş stollaryndan başlap, uly iş stollaryna ulalmak üçin iki sütün alyň .

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

Doly ini, ýeke sütün

Doly giňlikdäki elementler üçin hiç hili gözenek synplary zerur däl.

Iki sany sütünli iki sütün

Resminamalara görä höwürtge aňsat - bar bolan sütüniň içinde bir hatar sütün goýuň. Bu size iş stolundan başlap, uly sütüniň içinde ýene iki (deň giňlik) bilen iki sany sütün berýär.

Jübi enjamlarynyň ululyklarynda, planşetlerde we aşakda bu sütünler we olaryň ýerleşdirilen sütünleri saklanar.

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

Garyşyk: ykjam we iş stoly

“Bootstrap v4” grid ulgamynda bäş derejeli synp bar: xs (goşmaça kiçi, bu synp infiksi ulanylmaýar), sm (kiçi), md (orta), lg (uly) we xl (goşmaça uly). Has dinamiki we çeýe düzülişleri döretmek üçin bu synplaryň islendik kombinasiýasyny diýen ýaly ulanyp bilersiňiz.

Her synp derejesi ulalýar, ýagny md, lg we xl üçin birmeňzeş giňlikleri meýilleşdirýän bolsaňyz, diňe md görkezmeli.

.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

Garyşyk: ykjam, planşet we iş stoly

.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

Gutlar

Sapaklar bilen .gx-*keseligine çukurlary sazlap bolýar.

.col.gx-4çukurlar bilen
.col.gx-4çukurlar bilen
.col.gx-4çukurlar bilen
.col.gx-4çukurlar bilen
.col.gx-4çukurlar bilen
.col.gx-4çukurlar bilen

.gy-*Dik çukurlary dolandyrmak üçin sapaklary ulanyň .

.col.gy-4çukurlar bilen
.col.gy-4çukurlar bilen
.col.gy-4çukurlar bilen
.col.gy-4çukurlar bilen
.col.gy-4çukurlar bilen
.col.gy-4çukurlar bilen

Sapaklar bilen .g-*iki tarapdaky çukurlary sazlap bolýar.

.col.g-3çukurlar bilen
.col.g-3çukurlar bilen
.col.g-3çukurlar bilen
.col.g-3çukurlar bilen
.col.g-3çukurlar bilen
.col.g-3çukurlar bilen

Konteýnerler

Bootstrap v4.4-de goşulan goşmaça synplar, belli bir nokada çenli 100% giňlikdäki gaplara mümkinçilik berýär. v5 täze aralyk goşýar xxl.

.container
konteýner-sm
.container-md
.container-lg
.container-xl
.container-xxl
konteýner-suwuklyk