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

Üç 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 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 görnüş görnüşine garamazdan tertipläp başlaýar.

.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), 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 bir synp derejesi ulalýar, ýagny xs we sm üçin birmeňzeş giňlikleri meýilleşdirýän bolsaňyz, diňe xs görkezmeli.

.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

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

.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