. Nëse keni nevojë për kolona me gjerësi të pabarabartë, atëherë thjesht do t'ju duhet të plotësoni kushtin që numrat pas col-xs- në të tre klasat duhet të mblidhen deri në 12 (për shembull, 2-4-6). Por së pari, le të shohim se çfarë është "xs" në këtë hyrje dhe çfarë do të thotë?

Pak më poshtë në zonën "Opsionet e rrjetit" do të gjeni një shpjegim për sa më sipër katër madhësi rrjete Bootstrap modern.

1. Së pari vjen një rrjet shumë i vogël (në kolonën "Pajisje ekstra të vogla"), i projektuar për pajisje të lëvizshme, madhësia e ekranit të së cilës është më pak se 768 piksele në gjerësi (lexoni për të në lidhjen e dhënë). Do të jetë gjithmonë horizontale në çdo madhësi ekrani, dhe unë do të përpiqem të shpjegoj se çfarë është pak më e ulët. Ju lutemi vini re se prefiksi i klasës për këtë lloj rrjetë do të jetë i drejtë col-xs, si në shembullin e diskutuar më sipër.
2. Nëse madhësia e ekranit të pajisjes varion nga 768 në 992 piksele (në ditët e sotme këto janë më shpesh tableta), atëherë rrjeti Bootstrap, i krijuar për pajisje të vogla, është i përshtatshëm për ta. Quhet i vogël dhe prefikset e klasës përdoren për ta specifikuar atë col-sm.
3. Për pajisjet me një madhësi ekrani më të madh se 992, por më të vogël se 1200 (kryesisht monitorë desktop ose laptop), ekziston një rrjet për pajisjet e mesme. Quhet medium, dhe prefiksi i klasës është col-md.
4. Epo, për monitorët me gjerësi mbi 1200 pikselë, ekziston rrjeti më i madh me një prefiks të klasës kol-lg.

Tre rrjetat e fundit do të jenë horizontale vetëm nëse gjerësia e ekranit është më e madhe se pika në të cilën ndodh "kolapsi". Për shembull, për një rrjet të madh në ekrane më të vogla se 1200 piksele, ai nuk do të jetë më horizontal dhe do të kthehet në vertikal. Faqja në faqen zyrtare të GetBootstrap.com që po shikojmë aktualisht ofron shembuj dhe shpjegime për këtë çështje. Sidoqoftë, për mendimin tim, gjithçka atje është disi konfuze dhe e ndërlikuar.

Një shembull se si funksionon sistemi i rrjetit Bootstrap 3 në gjerësi të ndryshme të ekranit

Do të përpiqem t'i shpjegoj të gjitha këto në shembull i përfunduar. Do t'ju duhet vetëm të kopjoni skedarin setka.html(për ta bërë këtë, zgjidhni nga menyja e kontekstit artikulli "Ruaj lidhjen si..."). Nëse e hapni direkt këtë skedar në shfletues (duke klikuar në lidhjen e dhënë me butonin e majtë të miut), atëherë asgjë nuk do të funksionojë, sepse korniza Bootstrap nuk do të lidhet.

Vendosni skedarin e shkarkuar setka.html në dosjen Bootstrap, për të cilën folëm në . Duhet të jetë në të njëjtin nivel me skedarin index.html që kemi krijuar më parë.

Tani hapeni këtë skedar setka.html në çdo shfletues të përshtatshëm për ju dhe bëni disa eksperimente me madhësinë e dritares së shfletuesit tuaj për të parë Bootstrap 3 në veprim dhe për të kuptuar se si funksionon sistemi i rrjetit. Cilet? Unë do të shpjegoj tani.

Gjerësia e ekranit tim të monitorit është 1280 piksele, që është më e madhe se pika e thyerjes prej 1200 pikselësh e vendosur për rrjetin e madh. Çfarë shohim si rezultat? Diçka si kjo:

Këtu janë pesë shembuj të paraqitjeve të faqeve të internetit të ndërtuara mbi të tipe te ndryshme rrjetet:

1. Rreshti i parë përshkruhet duke përdorur të katër sistemet e rrjetit të disponueshëm ky moment në Bootstrap. Në varësi të rezolucionit të ekranit të pajisjes në të cilën shihet faqosja, aty do të shfaqet emri i rrjetës që përdoret në secilën prej qelizave (tani sipër rreshtit të parë thotë se përdoret një rrjet i madh, dhe në qelizat “cl-lg” është parashtesa e klasës së rrjetit të madh) . Ndërsa gjerësia e ekranit zvogëlohet, këto etiketa do të ndryshojnë.
2. Në rreshtat e mbetur të vendosura më poshtë, përdoret vetëm një sistem i madhësisë së rrjetës - shumë i vogël, i vogël, i mesëm dhe i madh (në atë renditje).

Në këtë mënyrë ne mund të vëzhgojmë dhe krahasojmë se si këto rrjete Bootstrap 3 funksionojnë së bashku dhe si funksionojnë individualisht (duke përdorur vetëm një lloj). Sepse Kur bëra pamjen e mëparshme të ekranit, shfletuesi im u maksimizua për të mbushur të gjithë ekranin (më shumë se 1200 piksel i gjerë), më pas të pesë këta shembuj të paraqitjes së faqes vendosen horizontalisht (kolonat janë të vendosura pranë njëra-tjetrës përgjatë gjerësisë së ekranit ).

Tani le të ngushtojmë pak madhësinë e dritares së shfletuesit në mënyrë që të mund të vëzhgojmë prishjen (kolapsin) që ka ndodhur.

Teksti mbi rreshtin e sipërm dhe prefikset e klasës në qelizat e tij kanë ndryshuar (për këtë janë përdorur klasat e dukshmërisë, për të cilat do të flasim më vonë). Rrjeti i mesëm është përdorur tani dhe shfaqet ende horizontalisht. Në të njëjtën kohë, rreshti më i ulët (i cili ilustron përdorimin e vetëm rrjetë e trashë) e palosur vertikalisht, d.m.th. blloqet ngjitur nuk shfaqen më pranë njëri-tjetrit në gjerësi, por poshtë njëri-tjetrit (në lartësi).

Rezulton se një rrjet i madh, në mungesë të ndonjë ndikimi të jashtëm, sillet pikërisht në këtë mënyrë - paloset vertikalisht në të gjitha pajisjet, madhësia e ekranit të të cilave është më pak se 1200 piksele në gjerësi. Megjithatë, të gjitha rrjetet e tjera të përdorura në rrjetën e shembullit shfaqen horizontalisht. Rreshti i parë përdor një kombinim rrjetesh, kështu që tani kontrollohet nga sistemi i rrjetit të mesëm (sistemi i madh nuk ka më efekt).

Le të zvogëlojmë edhe një herë gjerësinë e dritares së shfletuesit në mënyrë që të bëhet. Një tjetër avari do të ndodhë:

Tani (bazuar në madhësinë e ekranit) ne po punojmë me një rrjet të vogël. Prandaj, jo vetëm rrjeti i madh, por edhe ai i mesëm është palosur vertikalisht. Epo, në rreshtin e parë, ku përdoret një kombinim i rrjetave, gjithçka tani kontrollohet nga sistemi i rrjetit të vogël të Bootstrap. Në të njëjtën kohë, në skedarin setka.html ndryshon edhe shpërndarja e kolonave në këtë rresht të parë, gjë që nuk është aspak e nevojshme, por kjo mund të bëhet për të kënaqur disa nga nevojat tuaja për sa i përket paraqitjes (dhe "një- dy”, pa asnjë problem ).

Ne vazhdojmë të zvogëlojmë gjerësinë e dritares së shfletuesit në vlera. Ndodh një defekt tjetër:

Si rezultat, jo vetëm rrjetet e mëdha dhe të mesme kalojnë vertikalisht përgjatë faqes, por edhe rrjeti i vogël i ka bashkuar ato. I vetmi një rrjet shumë i vogël mbetet horizontal, e cila mbetet e tillë (siç e kemi parë) në çdo rrethanë. Edhe nëse e ngushtoni faqen në një gjerësi super të vogël, rrjeti super i vogël nuk do të kthehet në një rrjet vertikal (edhe kur përmbajtja nuk do të futet në qeliza).

Ky shembull (skedar setka.html) është bërë saktësisht. Ne do të flasim në detaje se si funksionon gjithçka atje. Por tani për tani dua të tërheq vëmendjen tuaj vetëm për disa nuanca që mund t'i vini re në kodin burimor të skedarit setka.html.

Shpjegimet e shembullit tonë të kodit burimor

Në krye duke përdorur stile të shtuara për dizajn vizual faqosjet (vajtjet, ngjyrat e rrjetës etj.) që nuk kanë ndonjë kuptim të veçantë. Nëse lëvizni burimi poshtë, do të vini re këtë bllok:

lg Një rrjet i madh përdoret për ekranet më të gjera se 1200 px.

md Përdor rrjetin e mesëm për ekranet më të vogla se 1200 px por më të mëdha se 992 px.

sm Përdor një rrjet të vogël për ekranet më të vogla se 992 px por më të mëdha se 768 px.

xs Përdor një rrjet jashtëzakonisht të vogël për përmasat e ekranit më të vogla se 768 px, i cili mbetet gjithmonë horizontal.

Ka katër kontejnerë këtu që janë caktuar klasa të ndryshme(lexo rreth). Ato ju lejojnë të shfaqni përmbajtje specifike në varësi të pyetjeve të medias që përputhen madhësive të ndryshme rrjete Si punon? Të katër titujt ngarkohen në shfletues (nëse shikoni kodin burimor), por vetëm një kokë shfaqet në varësi të rezolucionit aktual të ekranit ose madhësisë së dritares së shfletuesit.

Kjo rrjeti kryesor, ku të katër sistemet e rrjetit janë të kombinuara (mund ta shihni këtë nga atributet e qelizave si class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , të cilat listojnë prefikset e klasave të të katërve rrjete) . Vetë rreshti, siç u përmend më lart, përcaktohet duke vendosur të gjithë elementët e tij përbërës në një enë me klasë = "rresht" (në shembullin tonë, ky është një kontejner i bazuar në div).

Ju lutemi vini re se rrjeti ynë kryesor përbëhet nga tre qeliza (kolona) dhe nëse shtoni të gjithë numrat që i caktohen secilës prej kolonave, për shembull, për prefikset e rrjetit shumë të vogël Bootstrap (col-xs), ju do të marrë gjithsej 12. Atëherë e njëjta gjë do të jetë e vërtetë për numrat pas parashtesave të të gjitha sistemeve të tjera. Kjo është e kuptueshme, sepse kjo kornizë, siç u përmend më lart, ka një strukturë me 12 kolona, ​​d.m.th. horizontalisht, e gjithë hapësira e disponueshme për paraqitjen është e ndarë në dymbëdhjetë kolona me gjerësi të barabartë(të padukshme në faqe - ato janë si qelizat në fletoret e shkollës).

Epo, duke përdorur numrat pas parashtesave të klasës, thjesht vendosni përmasat për secilën nga qelizat (kolonat reale) të paraqitjes tuaj. Ato. proporcionet mund të jenë, për shembull, si kjo:

fare, ju mund të përdorni një, dy, tre ose të katër sistemet e rrjetit në një plan urbanistik (rresht). E gjitha varet nga preferencat tuaja të dizajnit dhe nga ajo që po përpiqeni të arrini nga faqja juaj e internetit (si duhet të duket ajo në rezolucione të ndryshme të ekranit). Faqja zyrtare ofron një shembull:

Krijimi i rreshtave dhe qelizave duke përdorur klasat e bootstrap

Le të krijojmë tani për të kuptuar më mirë Faqe HTML, disi të kujton ueb faqe reale(me një titull, tekst dhe përmbajtje grafike, si dhe një fund) dhe vendoseni duke përdorur sistemin e rrjetit Bootstrap 3.

Më saktësisht, unë do ta krijoj vetë shabllonin dhe do t'ju ofroj vetëm, në analogji me shembullin e mëparshëm, të shkarkoni skedarin sait.html(për këtë, zgjidhni artikullin "Ruaj si..." nga menyja e kontekstit) në mënyrë që të mund të shtoni në këtë "peshk" së bashku më vonë klasat e nevojshme bootstrap. Do të duhet gjithashtu të vendoset në dosjen Bootstrap në të njëjtin nivel me skedarin index.html që krijuam në artikullin e parë (dhe setka.html, me të cilin punuam pak më lart).

Nëse shikoni kodin burimor të skedarit sait.html, do të shihni se ai tashmë përfshin Bootstrap dhe jquery, dhe gjithashtu shton përmbajtje për simulim pamjen faqja mesatare e internetit. Po, do t'ju duhet gjithashtu një dosje me imazhet e përdorura në këtë faqe. Mund ta shkarkoni nga këtu - img.zip. Thjesht hapni arkivin dhe vendosni dosjen img (sigurohuni që të përmbajë skedarë imazhi dhe jo një dosje tjetër img) në dosjen tuaj Bootstrap në të njëjtin nivel me skedarin sait.html. Struktura do të duket si kjo:

Tani, (nga dosja Bootstrap) në shfletues, do të shihni faqen e internetit që përdora si shembull. Ajo që bie në sy është se të gjitha blloqet në faqe janë të vendosura njëri poshtë tjetrit dhe kjo ndërhyn shumë në perceptimin e saktë vizual të informacionit. Do të ishte logjike t'i vendosni ato në kolona dhe në mënyrë që kur madhësia e ekranit të zvogëlohet, dizajni "i përgjigjet" kësaj, duke ndryshuar numrin e kolonave për të krijuar lehtësi shikimi në pajisjet me gjerësi të ndryshme të zonës së shikimit.

Në origjinal Kodi HTML Kam përdorur skedarin sait.html për të treguar kufijtë e rreshtave të mi të propozuar (rreshtave), për të cilat ne do të konfigurojmë shfaqjen e kolonave duke përdorur një lloj sistemi të rrjetit Bootstrap. Ekzistojnë vetëm katër rreshta (ato janë të numëruara në pamjen e mësipërme të ekranit) - titulli (titulli me emrin dhe logon e faqes), titulli dhe përshkrimi i faqes, pjesa e përmbajtjes (përmbajtja kryesore që përbëhet nga njoftimet e katër artikujve) dhe fundi.

Tani do të na duhet të shtojmë shënimin e Bootstrap në skedarin sait.html, i cili. Për të krijuar rreshta, siç e mbani mend, do të jetë e mjaftueshme të mbyllni të gjithë përmbajtjen e tij në një enë (më shpesh këto janë etiketa Div, megjithëse mund të ketë të tjera) dhe të shkruani një klasë në të class = "rresht". Për rreshtin e parë do të duket kështu:

E njëjta gjë duhet bërë për të gjitha rreshtat (rreshtat) e tjerë - vendosni një etiketë hapëse

- në fund të saj. Nuk do të tregoj të gjithë kodin e skedarit sait.html me ndryshimet e bëra, sepse është shumë voluminoz.

Përdorimi i rrjeteve të ndryshme për të krijuar kolona të përmbajtjes në gjerësi të ndryshme të ekranit

Tani le të le të fillojmë të formojmë qeliza në ato rreshta (rreshta) ku ka kuptim të bëhet kjo. Do të ishte mjaft logjike që njoftimet e artikujve (nga rreshti i tretë) të vendoseshin në katër kolona, ​​dhe kur zvogëloni gjerësinë e ekranit, le të konvertohen këto katër kolona në dy. Si ta bëjmë atë? Le të hedhim një vështrim.

Pra, në Bootstrap 3 ekziston një rrjet me 12 kolona, ​​për të cilin folëm më lart. Meqenëse vendosëm të bënim katër kolona me njoftime, do të ishte logjike t'i bënim ato të barabarta në gjerësi, që do të thotë se secila prej kolonave do të jetë tre qeliza (qeliza) të gjera në sistemin tonë të rrjetit të padukshëm (pavarësisht se çfarë madhësie rrjeti zgjedhim - ultra - e vogël, e vogël, e mesme ose e madhe).

Cilën rrjetë duhet të zgjedh për punën? Le të marrim fillimisht mesataren, si një opsion kompromisi. Në këtë rast, do t'ju duhet të shtoni klasën "col-md-3" në kontejnerët e të katër qelizave -

Artikujt më të mirë mbi këtë temë