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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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

Alternativa trem enakim stolpcem

Z uporabo .row-cols-*razredov lahko preprosto ustvarite mrežo z enakimi stolpci.

.colotrok od .row-cols-md-3

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-4

Mešano: mobilni in namizni

Mrežni sistem Bootstrap v5 ima šest stopenj razredov: xs (zelo majhen, ta infiks razreda se ne uporablja), sm (majhen), md (srednji), lg (velik), xl (x-velik) in xxl (xx -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 md, lg, xl in xxl, morate podati le md.

.col-md-8

.col-6 .col-md-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Žlebovi

S .gx-*razredi je mogoče vodoravne žlebove prilagoditi.

.colz .gx-4žlebovi

Uporabite .gy-*razrede za nadzor navpičnih žlebov.

.colz .gy-4žlebovi

S .g-*razredi se lahko prilagodijo žlebovi v obe smeri.

.colz .g-3žlebovi

Zabojniki

Dodatni razredi, dodani v Bootstrap v4.4, omogočajo vsebnike, ki so 100 % široki do določene prelomne točke. v5 doda novo xxlprekinitveno točko.

.posoda

.posoda-sm

.container-md

.kontejner-lg

.container-xl

.kontejner-xxl

.posoda-tekočina