Ekzemploj de Bootstrap krado
Bazaj kradaj aranĝoj por familiarigi vin kun konstruado ene de la Bootstrap kradsistemo.
En ĉi tiuj ekzemploj la .themed-grid-col
klaso estas aldonita al la kolumnoj por aldoni iom da temo. Ĉi tio ne estas klaso disponebla en Bootstrap defaŭlte.
Kvin kradaj niveloj
Estas kvin niveloj al la Bootstrap kradsistemo, unu por ĉiu gamo da aparatoj, kiujn ni subtenas. Ĉiu nivelo komenciĝas je minimuma vidfenestrograndeco kaj aŭtomate validas por la pli grandaj aparatoj krom se anstataŭigata.
Tri egalaj kolumnoj
Akiru tri egallarĝajn kolumnojn komencante ĉe labortabloj kaj skaliĝante al grandaj labortabloj . Sur porteblaj aparatoj, tablojdoj kaj sube, la kolumnoj aŭtomate stablos.
Tri egalaj kolumnoj alternativo
Uzante la .row-cols-*
klasojn, vi povas facile krei kradon kun egalaj kolumnoj.
.col
infano de
.row-cols-md-3
.col
infano de
.row-cols-md-3
.col
infano de
.row-cols-md-3
Tri neegalaj kolumnoj
Akiru tri kolumnojn komencante ĉe labortabloj kaj grimpante al grandaj labortabloj de diversaj larĝoj. Memoru, kradaj kolumnoj devus aldoni ĝis dek du por ununura horizontala bloko. Pli ol tio, kaj kolumnoj komencas stakiĝi, negrave la vidfenestro.
Du kolumnoj
Akiru du kolumnojn komencante ĉe labortabloj kaj grimpante al grandaj labortabloj .
Plena larĝo, ununura kolumno
Neniuj kradaj klasoj estas necesaj por plenlarĝaj elementoj.
Du kolumnoj kun du nestitaj kolumnoj
Laŭ la dokumentado, nestado estas facila—nur metu vicon da kolumnoj ene de ekzistanta kolumno. Ĉi tio donas al vi du kolumnojn komenciĝantajn ĉe labortabloj kaj grimpantaj al grandaj labortabloj , kun pliaj du (egalaj larĝoj) ene de la pli granda kolumno.
Je poŝtelefonaj grandecoj, tablojdoj kaj malsupren, ĉi tiuj kolumnoj kaj iliaj nestitaj kolumnoj stablos.
Miksita: poŝtelefono kaj labortablo
La kradsistemo Bootstrap v4 havas kvin klasojn: xs (ekstra malgranda, ĉi tiu klasa infikso ne estas uzata), sm (malgranda), md (meza), lg (granda), kaj xl (ekstra granda). Vi povas uzi preskaŭ ajnan kombinaĵon de ĉi tiuj klasoj por krei pli dinamikajn kaj flekseblajn aranĝojn.
Ĉiu nivelo de klasoj pligrandiĝas, tio signifas, se vi planas agordi la samajn larĝojn por md, lg kaj xl, vi nur bezonas specifi md.
Miksita: poŝtelefono, tablojdo kaj labortablo
Defluiloj
Kun .gx-*
klasoj, la horizontalaj defluiloj povas esti alĝustigitaj.
.col
kun
.gx-4
defluiloj
.col
kun
.gx-4
defluiloj
.col
kun
.gx-4
defluiloj
.col
kun
.gx-4
defluiloj
.col
kun
.gx-4
defluiloj
.col
kun
.gx-4
defluiloj
Uzu la .gy-*
klasojn por kontroli la vertikalajn kanalojn.
.col
kun
.gy-4
defluiloj
.col
kun
.gy-4
defluiloj
.col
kun
.gy-4
defluiloj
.col
kun
.gy-4
defluiloj
.col
kun
.gy-4
defluiloj
.col
kun
.gy-4
defluiloj
Kun .g-*
klasoj, la defluiloj en ambaŭ direktoj povas esti alĝustigitaj.
.col
kun
.g-3
defluiloj
.col
kun
.g-3
defluiloj
.col
kun
.g-3
defluiloj
.col
kun
.g-3
defluiloj
.col
kun
.g-3
defluiloj
.col
kun
.g-3
defluiloj
Ujoj
Pliaj klasoj aldonitaj en Bootstrap v4.4 permesas ujojn kiuj estas 100% larĝaj ĝis aparta rompopunkto. v5 aldonas novan xxl
rompopunkton.