Shembuj të rrjetit të bootstrap

Paraqitjet bazë të rrjetit për t'ju njohur me ndërtimin brenda sistemit të rrjetit Bootstrap.

Në këta shembuj .themed-grid-colklasa u shtohet kolonave për të shtuar disa tema. Kjo nuk është një klasë që është e disponueshme në Bootstrap si parazgjedhje.

Pesë nivele rrjeti

Ekzistojnë pesë nivele në sistemin e rrjetit Bootstrap, një për çdo gamë pajisjesh që mbështesim. Çdo nivel fillon me një madhësi minimale të portit të pamjes dhe zbatohet automatikisht në pajisjet më të mëdha, përveç rasteve kur anashkalohet.

.kol-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tre kolona të barabarta

Merrni tre kolona me gjerësi të barabartë duke filluar nga desktopët dhe duke u shkallëzuar në desktopët e mëdhenj . Në pajisjet celulare, tabletët dhe më poshtë, kolonat do të grumbullohen automatikisht.

.col-md-4

Alternativa me tre kolona të barabarta

Duke përdorur .row-cols-*klasat, mund të krijoni lehtësisht një rrjet me kolona të barabarta.

.colfëmijë i .row-cols-md-3

Tre kolona të pabarabarta

Merrni tre kolona duke filluar nga desktopët dhe duke u shkallëzuar në desktop të mëdhenj me gjerësi të ndryshme. Mbani mend, kolonat e rrjetit duhet të shtojnë deri në dymbëdhjetë për një bllok të vetëm horizontal. Më shumë se kaq, dhe kolonat fillojnë të grumbullohen pa marrë parasysh pamjen.

.col-md-3

.col-md-6

.col-md-3

Dy kolona

Merrni dy kolona duke filluar nga desktopët dhe duke u shkallëzuar në desktop të mëdhenj .

.col-md-8

.col-md-4

Gjerësia e plotë, kolona e vetme

Asnjë klasë rrjeti nuk është e nevojshme për elementët me gjerësi të plotë.

Dy kolona me dy kolona të mbivendosura

Sipas dokumentacionit, foleja është e lehtë - thjesht vendosni një rresht kolonash brenda një kolone ekzistuese. Kjo ju jep dy kolona që fillojnë në desktop dhe shkallëzohen në desktop të mëdhenj , me dy të tjera (gjerësi të barabarta) brenda kolonës më të madhe.

Në madhësitë e pajisjes celulare, tabletët dhe më poshtë, këto kolona dhe kolonat e tyre të mbivendosura do të grumbullohen.

.col-md-8

.col-md-6

.col-md-4

Të përziera: celular dhe desktop

Sistemi i rrjetit Bootstrap v5 ka gjashtë nivele klasash: xs (ekstra e vogël, ky infix i klasës nuk përdoret), sm (i vogël), md (i mesëm), lg (i madh), xl (x-i madh) dhe xxl (xx). - e madhe). Ju mund të përdorni pothuajse çdo kombinim të këtyre klasave për të krijuar paraqitje më dinamike dhe fleksibël.

Çdo nivel i klasave rritet, që do të thotë nëse planifikoni të vendosni të njëjtat gjerësi për md, lg, xl dhe xxl, ju duhet vetëm të specifikoni md.

.col-md-8

.col-6 .col-md-4

.kol-6

Të përziera: celular, tablet dhe desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Ulluqe

Me .gx-*klasa, ulluqet horizontale mund të rregullohen.

.colme .gx-4ulluqe

Përdorni .gy-*klasat për të kontrolluar ulluqet vertikale.

.colme .gy-4ulluqe

Me .g-*klasa, ulluqet në të dy drejtimet mund të rregullohen.

.colme .g-3ulluqe

Kontejnerët

Klasat shtesë të shtuara në Bootstrap v4.4 lejojnë kontejnerët që janë 100% të gjerë deri në një pikë të caktuar ndërprerjeje. v5 shton një pikë të re xxlndërprerjeje.

.enë

.container-sm

.konteiner-md

.container-lg

.container-xl

.container-xxl

.enë-lëng