Primeri mrež Bootstrap

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

V teh primerih je .themed-grid-colrazred dodan stolpcem, da doda nekaj tematizacije. To ni razred, ki je privzeto na voljo v programu Bootstrap.

Pet stopenj mreže

Mrežni sistem Bootstrap ima pet stopenj, po eno za vsako vrsto naprav, ki jih podpiramo. Vsaka stopnja se začne pri najmanjši velikosti vidnega polja in samodejno velja za večje naprave, razen če je preglasena.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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 v4 ima pet stopenj razredov: xs (zelo majhen), sm (majhen), md (srednji), lg (velik) in xl (zelo velik). 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-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

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