Bootstrap grid mysallary
“Bootstrap” grid ulgamynyň gurluşygy bilen tanyşmak üçin esasy gözenek düzülişleri.
Bu mysallarda .themed-grid-col
kä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.
Üç 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.
Üç 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.
Iki sütün
Iş stollaryndan başlap, uly iş stollaryna ulalmak üçin iki sütün alyň .
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.
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.
Garyşyk: ykjam, planşet we iş stoly
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
.