Dagiti pagarigan ti grid ti bootstrap

Dagiti batayan a layout ti grid tapno makaammoka iti panagbangon iti uneg ti sistema ti grid ti Bootstrap.

Kadagitoy a pagarigan ti .themed-grid-colklase ket mainayon kadagiti kolum tapno mainayon ti sumagmamano a tema. Daytoy ket saan a klase a magun-od iti Bootstrap babaen ti default.

Lima a grid tier

Adda lima a tier iti sistema ti grid ti Bootstrap, maysa para iti tunggal sakop dagiti alikamen a suportaranmi. Tunggal tier ket mangrugi iti kabassitan a kadakkel ti viewport ken automatiko nga agaplikar kadagiti dakdakkel nga alikamen malaksid no nabalbaliwan.

.kol-4 nga

.kol-sm-4 nga

.kol-md-4 nga

.kol-lg-4 nga

.kol-xl-4 nga

.kol-xxl-4 nga

Tallo nga agpapada a kolum

Mangala ti tallo nga agpapada ti kalawana a kolum a mangrugi kadagiti desktop ken ag-scale kadagiti dadakkel a desktop . Kadagiti mobile device, tablet ken iti baba, automatiko nga agtumpok dagiti kolum.

.kol-md-4 nga

Tallo nga agpapada a kolum nga alternatibo

Babaen ti panagusar kadagiti .row-cols-*klase, nalaka laeng a makaaramidka iti grid nga addaan kadagiti agpapada a kolum.

.colanak ti .row-cols-md-3

Tallo a di agpapada a kolum

Mangala ti tallo a kolum a mangrugi kadagiti desktop ken ag-scale kadagiti dadakkel a desktop ti nadumaduma a kalawa. Laglagipem, dagiti adigi ti grid ket rumbeng a mangnayon aginggana iti sangapulo ket dua para iti maymaysa a horizontal a bloke. Ad-adu ngem dayta, ken dagiti kolum ket mangrugida nga agtumpok urayno ania ti viewport.

.kol-md-3 nga

.kol-md-6 nga

.kol-md-3 nga

Dua a kolum

Mangala ti dua a kolum a mangrugi kadagiti desktop ken ag-scale kadagiti dadakkel a desktop .

.kol-md-8 nga

.kol-md-4 nga

Naan-anay a kalawa, maymaysa nga adigi

Awan dagiti klase ti grid a kasapulan para kadagiti naan-anay a kalawa nga elemento.

Dua a kolum nga addaan iti dua a naisanglad a kolum

Kada dokumentasion, nalaka ti panagumok—ikabil laeng ti maysa a linia dagiti adigi iti uneg ti addan a kolum. Daytoy ket mangted kenka ti dua a kolum a mangrugi kadagiti desktop ken panag-scale kadagiti dadakkel a desktop , nga addaan kadagiti sabali pay a dua (agpada a kalawa) iti uneg ti dakdakkel a kolum.

Kadagiti kadakkel ti mobile device, tablet ken agpababa, dagitoy a kolum ken dagiti naisanglad a kolumda ket agtumpok.

.kol-md-8 nga

.kol-md-6 nga

.kol-md-4 nga

Naglaok: mobile ken desktop

Ti sistema ti grid ti Bootstrap v5 ket addaan kadagiti innem a tukad dagiti klase: xs (ekstra a bassit, daytoy nga infix ti klase ket saan a maus-usar), sm (bassit), md (kalalainganna), lg (dakkel), xl (x-dakkel), ken xxl (xx -dakkel). Mabalinmo nga usaren ti dandani ania man a kombinasion dagitoy a klase tapno mangpartuat kadagiti ad-adu a dinamiko ken nalaka a maibagay a layout.

Tunggal tier dagiti klase ket ag-scale up, kayatna a sawen no planom ti mangiset-up kadagiti agpapada a kalawa para iti md, lg, xl ken xxl, kasapulam laeng nga ikeddeng ti md.

.kol-md-8 nga

.kol-6 .kol-md-4

.kol-6

Naglaok: mobile, tablet, ken desktop

.kol-sm-6 .kol-lg-8

.kol-6 .kol-lg-4

.kol-6 .kol-sm-4

Dagiti kanal

Babaen .gx-*kadagiti klase, mabalin a maitunos dagiti horizontal gutters.

.colnga addaan kadagiti .gx-4kanal

Usaren dagiti .gy-*klase a mangkontrol kadagiti bertikal a kanal.

.colnga addaan kadagiti .gy-4kanal

Babaen .g-*kadagiti klase, mabalin a maitunos dagiti kanal iti agsumbangir a direksion.

.colnga addaan kadagiti .g-3kanal

Dagiti Pagkargaan

Dagiti kanayonan a klase a nainayon iti Bootstrap v4.4 ket mangipalubos kadagiti paglaon a 100% a kalawa aginggana ti partikular a breakpoint. Ti v5 ket mangnayon ti baro a xxlbreakpoint.

.container nga

.paglalaon-sm

.kargaan-md

.paglalaon-lg

.container-xl nga

.paglalaon-xxl

.container-a-pluido