Ekzemploj de Bootstrap krado

Bazaj kradaj aranĝoj por familiarigi vin kun konstruado ene de la Bootstrap kradsistemo.

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
.col-md-4
.col-md-4

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-6
.col-md-4

Miksita: poŝtelefono kaj labortablo

La kradsistemo Bootstrap 3 havas kvar nivelojn de klasoj: xs (telefonoj), sm (tablojdoj), md (skribotabloj), kaj lg (pli grandaj labortabloj). 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 xs kaj sm, vi nur bezonas specifi xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Miksita: poŝtelefono, tablojdo kaj labortablo

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Malplenigo de kolumnoj

Klaraj flosiloj ĉe specifaj rompopunktoj por malhelpi mallertan envolvadon kun neegala enhavo.

.col-xs-6 .col-sm-3
Regrandigu vian vidfenestron aŭ kontrolu ĝin en via telefono por ekzemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Ofsecu, puŝi kaj tiri restarigis

Restarigi kompensojn, puŝojn kaj tirojn ĉe specifaj rompopunktoj.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0