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 se samodejno uporablja 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

Zagotovite si tri enako široke stolpce, ki se začnejo pri namizjih in se razširijo 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 število stolpcev mreže znašati do dvanajst za en vodoravni blok. Š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) v večjem stolpcu.

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 v4 ima pet stopenj razredov: xs (zelo majhen, ta infiks razreda se ne uporablja), 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čuje, kar pomeni, da če nameravate nastaviti enake širine za md, lg in xl, morate določiti 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 je možno prilagoditi žlebove 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