Shembuj të rrjetit të bootstrap

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

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

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
.col-md-4
.col-md-4

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-6
.col-md-4

Të përziera: celular dhe desktop

Sistemi i rrjetit Bootstrap v4 ka pesë nivele klasash: xs (ekstra i vogël), sm (i vogël), md (mesatar), lg (i madh) dhe xl (ekstra i madh). 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 xs dhe sm, ju duhet vetëm të specifikoni 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
.kol-6
.kol-6

Të përziera: celular, tablet dhe desktop

.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