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-colklaso 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.

.kol-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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.

.col-md-4

Tri egalaj kolumnoj alternativo

Uzante la .row-cols-*klasojn, vi povas facile krei kradon kun egalaj kolumnoj.

.colinfano 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.

.col-md-3

.col-md-6

.col-md-3

Du kolumnoj

Akiru du kolumnojn komencante ĉe labortabloj kaj grimpante al grandaj labortabloj .

.col-md-8

.col-md-4

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.

.col-md-8

.col-md-6

.col-md-4

Miksita: poŝtelefono kaj labortablo

La kradsistemo Bootstrap v5 havas ses klasojn: xs (ekstra malgranda, ĉi tiu klasa infikso ne estas uzata), sm (malgranda), md (meza), lg (granda), xl (x-granda), kaj xxl (xx). -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, ke se vi planas agordi la samajn larĝojn por md, lg, xl kaj xxl, vi nur bezonas specifi md.

.col-md-8

.col-6 .col-md-4

.kol-6

Miksita: poŝtelefono, tablojdo kaj labortablo

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Defluiloj

Kun .gx-*klasoj, la horizontalaj defluiloj povas esti alĝustigitaj.

.colkun .gx-4defluiloj

Uzu la .gy-*klasojn por kontroli la vertikalajn kanalojn.

.colkun .gy-4defluiloj

Kun .g-*klasoj, la defluiloj en ambaŭ direktoj povas esti alĝustigitaj.

.colkun .g-3defluiloj

Ujoj

Pliaj klasoj aldonitaj en Bootstrap v4.4 permesas ujojn kiuj estas 100% larĝaj ĝis aparta rompopunkto. v5 aldonas novan xxlrompopunkton.

.ujo

.ujo-sm

.ujo-md

.ujo-lg

.ujo-xl

.ujo-xxl

.ujo-fluido