Primeri mrež Bootstrap

Osnovne postavitve mrež za seznanitev z gradnjo znotraj omrežnega sistema Bootstrap.

Trije enaki stolpci

Pridobite tri enako široke stolpce, ki se začnejo pri namizjih in se povečajo na velika namizja . V mobilnih napravah, tablicah in starejših se stolpci samodejno zložijo.

.col-md-4
.col-md-4
.col-md-4

Trije neenaki stolpci

Dobite tri stolpce, ki se začnejo pri namizjih in se razširijo na velika namizja različnih širin. Ne pozabite, da bi moralo biti število stolpcev mreže za en vodoravni blok dvanajst. Še več, stolpci se začnejo zlagati ne glede na vidno polje.

.col-md-3
.col-md-6
.col-md-3

Dva stolpca

Dobite dva stolpca, ki se začneta pri namizjih in se prilagajata velikim namizjem .

.col-md-8
.col-md-4

Polna širina, en stolpec

Za elemente polne širine niso potrebni nobeni mrežni razredi.

Dva stolpca z dvema ugnezdenima stolpcema

V skladu z dokumentacijo je gnezdenje enostavno – samo postavite vrstico stolpcev znotraj obstoječega stolpca. Tako dobite dva stolpca, ki se začneta pri namizjih in se povečata na velika namizja , s še dvema (enake širine) znotraj večjega stolpca.

Pri velikostih mobilnih naprav, tabličnih računalnikih in manj, se ti stolpci in njihovi ugnezdeni stolpci zložijo.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mešano: mobilni in namizni

Mrežni sistem Bootstrap 3 ima štiri stopnje razredov: xs (telefoni), sm (tablični računalniki), md (namizni računalniki) in lg (večji namizni računalniki). Za ustvarjanje bolj dinamičnih in prilagodljivih postavitev lahko uporabite skoraj katero koli kombinacijo teh razredov.

Vsaka stopnja razredov se poveča, kar pomeni, da če nameravate nastaviti enake širine za xs in sm, morate podati samo 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

Mešano: mobilni, tablični in namizni računalniki

.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

Čiščenje stolpca

Počistite lebdeče na določenih prelomnih točkah, da preprečite nerodno ovijanje z neenakomerno vsebino.

.col-xs-6 .col-sm-3
Spremenite velikost vidnega polja ali si ga za primer oglejte v telefonu.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Ponastavitev zamika, potiskanja in vlečenja

Ponastavite zamike, potiske in vlečenja na določenih prelomnih točkah.

.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