Shembuj të rrjetit të bootstrap

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

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 3 ka katër nivele klasash: xs (telefonat), sm (tabletat), md (tavolinat e punës) dhe lg (desktopët më të mëdhenj). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Të përziera: celular, tablet dhe desktop

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

Pastrimi i kolonës

Pastroni notat në pika të veçanta për të parandaluar mbështjelljen e vështirë me përmbajtje të pabarabartë.

.col-xs-6 .col-sm-3 Ndryshoni madhësinë e portit
tuaj të pamjes ose shikoni atë në telefonin tuaj për një shembull.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Kompensimi, shtytja dhe tërheqja rivendoset

Rivendos kompensimet, shtytjet dhe tërheqjet në pika të veçanta ndërprerjeje.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0