Sistemi i rrjetit të Bootstrap lejon deri në 12 kolona në të gjithë faqen.
Nëse nuk dëshironi të përdorni të 12 kolonat individualisht, mund t'i gruponi kolonat së bashku për të krijuar kolona më të gjera:
| hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 | hapësirë 1 |
| hapësirë 4 | hapësirë 4 | hapësirë 4 | |||||||||
| hapësirë 4 | hapësirë 8 | ||||||||||
| hapësirë 6 | hapësirë 6 | ||||||||||
| hapësirë 12 | |||||||||||
Sistemi i rrjetit të Bootstrap është reagues dhe kolonat do të rirenditen në bazë të madhësisë së ekranit: në një ekran të madh mund të duket më mirë me përmbajtje të organizuar në tre kolona, por në një ekran të vogël do të ishte më mirë nëse elementët e përmbajtjes do të vendoseshin në majë të e. të tjerët.
Këshillë: Mos harroni se kolonat e rrjetës duhet të shtojnë deri në dymbëdhjetë rreshta. Për më tepër, kolonat do të grumbullohen pavarësisht nga porta e shikimit.
Klasat e rrjetitSistemi Grid Bootstrap ka katër klasa:
Klasat e mësipërme mund të kombinohen për të krijuar paraqitje më dinamike dhe fleksibël.
Këshillë: Çdo klasë rritet, kështu që nëse dëshironi të vendosni të njëjtën gjerësi për XS dhe SM, duhet vetëm të specifikoni XS.
Rregullat e Sistemit të RrjetitDisa rregulla të rrjetit Bootstrap:
Më poshtë është struktura bazë e rrjetit Bootstrap:
...
Kështu, për të krijuar një plan urbanistik, duhet të krijoni një enë (). Më pas krijoni string(). Pastaj shtoni sa më shumë kolona që ju nevojiten (etiketat me klasat e duhura .col-*-*). Vini re se numrat në .col-*-* duhet të mblidhen gjithmonë deri në 12 për çdo rresht.
Opsionet e rrjetitTabela e mëposhtme përmbledh mënyrën se si funksionon sistemi Grid i Bootstrap në shumë pajisje.
| parashtesa e klasës | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| të përshtatshme për | Telefonat | tableta | Laptopë të vegjël | Laptopë & Desktop |
| Sjellja e rrjetit | Horizontal në çdo kohë | U rrëzua për të filluar, horizontale mbi pikat e ndërprerjes | U rrëzua për të filluar, horizontale mbi pikat e ndërprerjes | |
| Gjerësia e kontejnerit | Asnjë (auto) | 750 px | 970 px | 1170 px |
| # e kolonave | 12 | 12 | 12 | 12 |
| Gjerësia e kolonës | Auto | ~ 62 px | ~ 81 px | ~ 97 px |
| Gjerësia e ulluqit | 30 px (15 px në secilën anë të një kolone) | 30 px (15 px në secilën anë të një kolone) | 30 px (15 px në secilën anë të një kolone) | |
| Nestable | po | po | po | po |
| kompensimet | po | po | po | po |
| renditja e kolonave | po | po | po | po |
Kapitujt e mëposhtëm tregojnë shembuj të sistemeve të rrjetit për pajisje të ndryshme.
01.06.2016
Pershendetje te gjitheve!
Ne vazhdojmë të mësojmë bazat e "bootstrap 3". Është koha për t'u njohur në "bootstrap 3" me një koncept të tillë si një rrjet.
Me ndihmën e rrjetit, ju do të jeni në gjendje të krijoni kornizën e parë të përshtatjes së faqes suaj të internetit (faqen e internetit).
Pra, rrjeti Bootstrap përbëhet nga rreshta dhe kolona.
Para se të krijoni kolona, duhet të shkruani një rresht. Për ta bërë këtë, thjesht shkruani etiketën div me klasën "row".
...do të ketë kolona...
Pra, së pari shkruhet një rresht dhe kolonat janë ndërtuar tashmë në rresht.
1. Krijo një varg:
...do të ketë kolona... ...do të ketë kolona...
2. Krijo kolona (rrjet):
Rrjeti Bootstrap përbëhet nga 12 kolona me gjerësi të barabartë.
Nëse është e nevojshme, kolonat mund të kombinohen dhe vendosen në pozicionin e dëshiruar.
Për të krijuar kolona, duhet të shkruani një klasë brenda "rreshtit"
"col-(*1)-(*2)".
Ku (*1) ne tregojmë për cilat grupe pajisjesh duhet të ekzekutoni ( shih tabelën 1
).
Ku (*2) tregojmë numrin (numrin e kolonave)
(shih tabelën 2
).
(skedën. 1) Tabela e shënjimit të bootstrap për grupe të ndryshme pajisjesh
Le të shohim deri në këtë pikë me një shembull.
Duke parë tabelën, ne mund të krijojmë kolona (të ndërtojmë një rrjet) për grupe të ndryshme pajisjesh (telefonë celularë, tableta, PC, etj.).
Për shembull:
faqja e blogut
Kjo është mënyra se si ne specifikojmë për cilat pajisje duam të krijojmë altoparlantë.
Tani le të kuptojmë se çfarë është (*2). Meqenëse e përmenda më lart, ky është një numër që tregon numrin e kolonave
(shih tabelën 2
).
(skedën. 2) Paraqitja e rrjetit Bootstrap3
Në tabelë, mund të shihni se rrjeti Bootstrap përbëhet nga 12 kolona me gjerësi të barabartë.
Për të specifikuar 12 kolona identike për të gjitha pajisjet, në vend të ( * 2 ), duhet të specifikoni një numër që përshtatet. Por mbani mend se totali duhet të jetë 12.
Le të shohim një shembull:
Tabela e shënjimit të faqes së blogut Bootstrap
Për të kuptuar atë që thashë për faktin se shuma totale duhet të jetë e barabartë me 12, ne do të bëjmë një llogaritje aritmetike.
Shikoni rreshtat #2 dhe #3.
○ col-lg-12 dhe col-lg-12 . (madhësia e ekranit ≥1200px).
Rezultati:
○ col-md-8 dhe col-md-4 . (madhësia e ekranit ≥992px).
Do të ketë dy kolona në ekran, pasi 8 + 4 = 12 (vetëm e njëjta sasi që përbëhet nga rrjeti).
Ana e majtë do të kombinojë 8 kolona, dhe ana e djathtë 4.
Rezultati:
○ col-sm-6 dhe col-sm-6 (madhësia e ekranit ≥768px ).
Do të ketë dy kolona në ekran, pasi 6 + 6 = 12 (vetëm e njëjta sasi që përbëhet nga rrjeti).
Ana e majtë do të kombinojë 6 kolona dhe ana e djathtë 6.
Rezultati:
○ col-xs-12 dhe col-xs-12 (madhësia e ekranit .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( kufiri: 1px solid #cccc; lartësia:60px; ) Blloku 1 blloku 2 blloku 3 blloku 4 Përmbajtja e menysë
Mund ta shihni rezultatin dhe në të njëjtën kohë të kontrolloni nga telefoni, tableti ose PC-ja juaj se si do të hapet faqosja e krijuar.
Përshëndetje, të dashur lexues të faqes së blogut. Në pjesën e parë të artikullit, ne u njohëm me aftësitë e kësaj kornize, mësuam se çfarë është dizajni i përgjegjshëm dhe pse është kaq i rëndësishëm në epokën tonë të rritjes së shfrenuar të popullaritetit të pajisjeve të ndryshme celulare. Aty kemi shqyrtuar në detaje edhe çështjet e lidhjes së Bootstrap me një faqe Html (lidhja e skedarëve të stilit, skriptet dhe biblioteka jQuery).
Artikulli i sotëm ka të bëjë me sistemin e rrjetit të përdorur në Bootstrap 3. Do të mësoni se cilat madhësi rrjete mund të përdoren, si do të sillen në pajisjet me madhësi të ndryshme ekrani dhe si të krijoni vetë rreshta dhe qeliza bazuar në një ose më shumë rrjete. E gjithë kjo do të shpjegohet me shembuj, të cilët, shpresoj, do të përmirësojnë perceptimin.
Si funksionon sistemi i rrjetit në Bootstrap 3Bootstrap 3 vjen me një sistem rrjeti me 12 kolona që është krijuar kryesisht për pajisjet mobile. Ato. është projektuar me një sy, para së gjithash, në ekrane të vogla, në radhë të dytë - në ekrane të gjera. Versioni i ri i kësaj kornize ka katër madhësi rrjeti. I gjithë ky informacion mund të studiohet në detaje në faqen zyrtare të internetit GetBootstrap.com duke shkuar te skedari "CSS" nga menyja e sipërme dhe duke zgjedhur artikullin "Sistemi i rrjetit" në të djathtën.
Aty do të merrni një shpjegim të plotë se si funksionon sistemi, pyetjet e lidhura me median, e kështu me radhë. Rreshti i elementeve HTML (për shembull, njoftimet e artikujve në faqen kryesore) që dëshironi të poziciononi në rrjet do të duhet të rrethohet nga një kontejner (për shembull, i mbyllur në etiketat Div) dhe klasa .row duhet të caktohet për të (në këtë rast, etiketa hapëse do të duket si ) .
Epo, ju mund t'i shpërndani elementet brenda rreshtit mbi një ose disa lloje rrjetesh menjëherë duke vendosur atributin e klasës me një vlerë, për shembull, .col-xs-number (në këtë rast, përdoret vetëm një rrjet ekstra i vogël ).
Për shembull, nëse doni të merrni tre kolona me madhësi të barabartë si rezultat, atëherë duhet të ndani 12 (dimensioni i rrjetit në Bootstrap 3) me 3 (numri i kërkuar i kolonave). Kjo do të thotë që për çdo element Html brenda rreshtit (përsëri, këto mund të jenë kontejnerë Div), do t'ju duhet të regjistroni të njëjtat klasa - . Nëse keni nevojë për kolona me gjerësi të pabarabartë, atëherë thjesht 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 të katër madhësive të rrjetit modern Bootstrap të përmendur më sipër.
Tre rrjetat e fundit do të jenë horizontale vetëm nëse madhë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ë bëhet vertikal. Në faqen e faqes zyrtare GetBootstrap.com, të cilën ne po shqyrtojmë aktualisht, ka shembuj dhe shpjegime për këtë. Sidoqoftë, për mendimin tim, gjithçka është disi e ngatërruar dhe e ndërlikuar.
Shembull i sistemit të rrjetit Bootstrap 3 për gjerësi të ndryshme të ekranitDo të përpiqem t'i shpjegoj të gjitha këto me një shembull të gatshëm. Do t'ju duhet vetëm të kopjoni skedarin setka.html (për ta bërë këtë, zgjidhni artikullin "Ruaj lidhjen si ..." nga menyja e kontekstit). 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. Duhet të jetë në të njëjtin nivel me skedarin index.html që kemi krijuar më parë.
Tani hapni këtë skedar setka.html në çdo shfletues që zgjidhni dhe eksperimentoni 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.
Rezolucioni i ekranit tim të monitorit është 1280 piksel i gjerë, që është më shumë se pika e ndërprerjes prej 1200 pikselësh e vendosur për rrjetin e madh. Çfarë shohim si rezultat? Diçka si kjo foto:
Këtu janë pesë shembuj të paraqitjes së faqeve të internetit të ndërtuara në lloje të ndryshme rrjetash:
Në këtë mënyrë ne mund të shohim dhe krahasojmë se si këto rrjeta nga arsenali Bootstrap 3 funksionojnë së bashku dhe si funksionojnë veçmas (kur përdoret vetëm një lloj). Sepse Meqenëse shfletuesi im u zgjerua në ekran të plotë (gjerësia më e madhe se 1200 piksele) kur bëra pamjen e mëparshme të ekranit, këta pesë shembuj të paraqitjes së faqes janë zgjeruar të gjithë 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ë shohim kolapsin.
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 i poshtëm (i cili ilustron përdorimin e vetëm një rrjeti të trashë) i palosur vertikalisht, d.m.th. blloqet fqinje tani shfaqen jo pranë njëri-tjetrit në gjerësi, por nën njëri-tjetrin (në lartësi).
Rezulton se një rrjet i madh në mungesë të ndonjë ndikimi të jashtëm sillet 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. Në këtë rast, të gjitha të tjerat e përdorura në shembullin e rrjetit shfaqen horizontalisht. Rreshti i parë përdor një kombinim të rrjetave, kështu që tani ai kontrollohet nga sistemi i rrjetit të mesëm (sistemi i madh nuk ka më efekt).
Le të zvogëlojmë madhësinë e dritares së shfletuesit edhe një herë në gjerësi në mënyrë që të bëhet. Do të ketë një tjetër përplasje:
Tani (bazuar në madhësinë e ekranit) po punojmë me një rrjet të vogël. Prandaj, jo vetëm rrjeti i madh, por edhe ai i mesëm është zhvilluar 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 është mjaft e mundur ta bëni këtë për të përmbushur disa nga nevojat tuaja për sa i përket paraqitjes (për më tepër , me “një apo dy”, pa asnjë problem ).
Ne vazhdojmë të zvogëlojmë gjerësinë e dritares së shfletuesit në vlera. Një tjetër përplasje ndodh:
Si rezultat, jo vetëm rrjetet e mëdha dhe të mesme kalojnë vertikalisht nëpër faqe, por edhe ato të vogla janë bashkuar me to. E vetmja rrjetë horizontale e mbetur është një rrjet shumë i vogël, i cili mbetet i tillë (siç e kemi parë) në të gjitha rrethanat. Edhe nëse e ngushtoni faqen në një gjerësi jashtëzakonisht të vogël, rrjeti ultra 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. Për mënyrën se si është rregulluar gjithçka atje, ne do të flasim në detaje më vonë. Por tani për tani, unë dua të tërheq vëmendjen tuaj vetëm për disa nga nuancat që mund të vini re në kodin burimor të skedarit setka.html.
Shpjegime për kodin burimor të shembullit tonëMe ndihmën e sipërme shtohen stile për dizajnin vizual të paraqitjeve (vrima, ngjyra rrjeti, etj.), të cilat nuk mbajnë një ngarkesë të veçantë semantike. Nëse lëvizni poshtë kodit burimor, do të vini re këtë bllok:
lg Një rrjetë e trashë përdoret për ekranet me gjerësi më të madhe se 1200 px. md Përdor një rrjet mesatar për ekranet më pak se 1200 por më të mëdha se 992 px. sm Përdor një rrjetë të vogël për ekrane më të vogla se 992 por më të mëdha se 768 px. xs Përdor një rrjet ekstra të vogël për përmasat e ekranit më të vogla se 768 px, i cili qëndron gjithmonë horizontal.
Janë katër kontejnerë për të cilët janë caktuar klasa të ndryshme (lexo rreth). Ato ju lejojnë të shfaqni përmbajtje specifike bazuar në pyetjet e medias që korrespondojnë me madhësi të ndryshme të rrjetit. Si punon? Të katër titujt ngarkohen në shfletues (nëse shikoni kodin burimor), por vetëm një titull shfaqet në varësi të rezolucionit aktual të ekranit ose madhësisë së dritares së shfletuesit.
.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col -lg-4 .col-md-6 .col-sm-6 .col-xs-1
Ky është rrjeti kryesor, ku të katër sistemet e rrjetit janë të kombinuara (ju mund ta shihni këtë nga atributet e qelizave si class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , e cila liston klasën parashtesa të katër rrjetat). 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 class="row" (në shembullin tonë, një enë me bazë 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 janë caktuar secilës prej kolonave, për shembull, për parashtesat e rrjetit ultra të vogla të Bootstrap (col-xs), do të merrni një gjithsej 12. Atëherë e njëjta gjë do të jetë edhe për numrat pas parashtesave të të gjitha sistemeve të tjera. Është e kuptueshme, sepse kjo kornizë, siç u përmend më lart, ka një strukturë 12 kolonash, 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ë vend - ato janë si qelizat në fletoret e shkollës).
Epo, me ndihmën e numrave 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:
Në përgjithësi, mund të përdorni një ose dy, tre ose të katër sistemet e rrjetit në një plan urbanistik (linje). Gjithçka varet nga preferencat tuaja të dizajnit dhe nga ajo që po përpiqeni të arrini nga faqja juaj e internetit (si duhet të duket në madhësi të ndryshme të ekranit). Faqja zyrtare jep një shembull:
Krijimi i rreshtave (rreshtave) dhe qelizave me klasat e bootstrap
Le të krijojmë tani, për një kuptim më të mirë, një faqe Html që të kujton disi një faqe interneti të vërtetë (me një titull, tekst dhe përmbajtje grafike dhe një fund) dhe ta shtrojmë duke përdorur sistemin e rrjetit Bootstrap 3.
Më saktësisht, unë do të krijoj vetë boshllëkun, dhe vetëm do t'ju sugjeroj që, për 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ë më vonë të mund të shtoni klasat e nevojshme të 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 skedarin setka.html me të cilin punuam pak më lart).
Nëse shikoni kodin burimor të skedarit sait.html, do të shihni se Bootstrap dhe jquery tashmë janë përfshirë në të dhe përmbajtja është shtuar për të imituar pamjen dhe ndjesinë e një faqeje mesatare të 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) brenda dosjes 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. Është e habitshme që të gjitha blloqet në faqe janë të vendosura njëri nën tjetrin, 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ë dukshme.
Në kodin burimor Html të skedarit sait.html, kam përdorur për të treguar kufijtë e rreshtave (linjave) që kam ndërmend, për të cilat do të personalizojmë shfaqjen e kolonave duke përdorur një lloj sistemesh rrjeti Bootstrap. Ka vetëm katër rreshta (ato janë të numëruara në pamjen e mësipërme të ekranit) - një kokë (një titull me emrin dhe logon e faqes), një titull dhe përshkrim i faqes, një pjesë e përmbajtjes (përmbajtja kryesore që përbëhet nga njoftimet e katër artikujve) dhe një footer.
Tani do të na duhet të shtojmë shënimin Bootstrap në skedarin sait.html, i cili. Për të krijuar rreshta, siç e mbani mend, do të mjaftojë 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 klasën class="row" në të. Për rreshtin e parë do të duket kështu:
faqe interneti 
E njëjta gjë duhet bërë për të gjitha rreshtat (linjat) e tjera - vendosni etiketën hapëse në fillim të rreshtit të ardhshëm dhe etiketën 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 me përmbajtje në gjerësi të ndryshme të ekranitTani le të fillojmë të formojmë qeliza në ato rreshta (rreshta) ku ka kuptim ta bëjmë këtë. Do të ishte mjaft logjike që njoftimet e artikujve (nga rreshti i tretë) të vendoseshin në katër kolona, dhe kur të zvogëlohet gjerësia e ekranit, le të shndërrohen 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ëjmë 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 të sistemit tonë të rrjetit të padukshëm (pavarësisht se cilin rrjet zgjedhim - ultra - e vogël, e vogël, e mesme ose e madhe).
Çfarë rrjeti të zgjidhni për punë? Le të marrim për fillim mesataren, si kompromis. Në këtë rast, në kontejnerët e të katër qelizave, do t'ju duhet të shtoni klasën "col-md-3" - . Unë do t'ju tregoj shembullin e kodit të një qelize, në mënyrë që të mos ngatërroni artikullin:
Pas ruajtjes së ndryshimeve të bëra, do të shihni se faqja jonë e internetit tashmë ka fituar një pamje shumë më të përdorshme:
Vërtetë, kur dritarja e shfletuesit zvogëlohet në gjerësinë e një pikë ndërprerjeje më të vogël (në rastin e rrjetit mesatar që përdorim, kjo do të jetë 992 piksel), të gjitha njoftimet do të rreshtohen përsëri në një kolonë, gjë që nuk është e mirë, sepse përdorshmëria në këtë rast zvogëlohet (një rezolucion prej gati 1000 pikselësh lejon rregullimin më të dendur të informacionit). Për të rregulluar këtë situatë, mund të shtoni një rrjet tjetër nga arsenali i Bootstrap për të njëjtat qeliza me njoftime. Si ta bëjmë atë? Le të hedhim një vështrim.
Le të përdorim prefikset "col-xs-6" për emrin e klasës në secilën qelizë me njoftimin (rezultati do të jetë një klasë e përbërë class="col-md-3 col-sm-6"). Do të duket kështu (duke përdorur një qelizë si shembull):
Teksti i njoftimit.
Siç mund ta shihni, këtu kemi shkelur rregullin e shpallur së fundmi se numrat pas parashtesave të një rrjeti në të gjitha qelizat duhet të mblidhen deri në 12. Ne morëm 24 (katër herë gjashtë). Por ne e bëmë atë me qëllim për të arritur rezultatin e dëshiruar - në vend të katër, marrim dy kolona kur kalojmë pikën e ndërprerjes për sistemin mesatar të rrjetit Bootstrap (është 992 piksele). Ato. qelizat do të vendosen në dy rreshta, dy në secilën:
Sepse Nëse zgjedhim një sistem rrjeti ultra të vogël, atëherë me një ulje të mëtejshme të gjerësisë së dritares së shfletuesit, rregullimi vertikal i blloqeve me njoftime nën njëri-tjetrin (vendosja në një kolonë) nuk do të ndodhë, sepse ky sistem mbetet gjithmonë horizontal.
Nëse dëshironi që katër kolona të kthehen në dy kolona kur gjerësia e ekranit zvogëlohet, dhe më pas në një kolonë, atëherë duhet të përdorni një sistem të vogël rrjeti në vend të "col-xs-6" duke përdorur "col-sm-6" :
Pastaj, kur gjerësia e dritares së shfletuesit zvogëlohet nën 768 pikselë, do të shihni një skrap, në të cilin dy kolona me njoftime shndërrohen në një. Thjesht eksperimentoni dhe ndjeni ndryshimin.
Përshtatja e kokës së një faqeje në internet duke përdorur Bootstrap 3Le të eksperimentojmë dhe provojmë përsëri, në të cilat ka në thelb dy qeliza të mundshme - emri i faqes me një përshkrim, si dhe një logo. Në fakt, ne do t'i pozicionojmë ato. Le të përdorim një rrjet më të madh këtë herë me "col-lg-6" për të bërë dy kolona të barabarta.
faqe interneti
Gjithçka rreth krijimit të faqeve të internetit, blogjeve, forumeve, dyqaneve online, promovimit të tyre në motorët e kërkimit dhe fitimit të parave në faqe
Vërtetë, kur përdorni një rrjet të madh, heqja ndodh në rezolucione mjaft të mëdha të ekranit (dritaret e shfletuesit, në rastin tonë, sepse ne simulojmë pajisje me gjerësi të ndryshme ekrani atje). Pas kësaj, qelizat palosen vertikalisht. Për të shmangur këtë, ne do të shtojmë një rrjet tjetër Bootstrap 3 për rreshtin e parë. Unë mendoj se një sistem i vogël rrjeti (prefiksi i klasës col-sm) do të funksionojë. Atëherë kodi do të duket diçka si kjo:
faqe interneti
Gjithçka rreth krijimit të faqeve të internetit, blogjeve, forumeve, dyqaneve online, promovimit të tyre në motorët e kërkimit dhe fitimit të parave në faqe
Megjithatë, unë nuk i bëra qelizat me emrin e faqes dhe logon të njëjta për rrjetin e vogël, sepse logoja është në thelb më e ngushtë (në kuptimin, e ngushtë) e emrit me përshkrimin. Me një gjerësi më të vogël të ekranit, nuk do të ishte logjike të ndaheshin qeliza të barabarta për to. Kjo është arsyeja pse bëra kolonën e parë me emrin dhe përshkrimin e faqes kur sistemi i rrjetit të vogël Bootstrap aktivizohet dyfishi i madhësisë së kolonës së logos.
Si rezultat, kur dritarja e shfletuesit zvogëlohet, këto qeliza do të konvergojnë deri në momentin e ndërprerjes për sistemin e vogël të rrjetit Bootstrap, i cili ndodh në një gjerësi prej më pak se 768 piksele, dhe më pas të dyja qelizat do të vendosen nën njëra-tjetrën.
Ju mund të keni vënë re se teksti në faqe përplaset në skajin e majtë të ekranit, gjë që shkakton . Ju mund të shtoni për të rregulluar këtë situatë në etiketën e trupit, gjë që do të lejojë. Dhe mund të zgjidhni gjithçka me mjetet standarde të Bootstrap 3.
Për ta bërë këtë, do t'ju duhet të mbështillni të gjithë përmbajtjen e faqes së internetit (gjithçka që është e mbyllur në etiketat Body) në një kontejner Div me klasën me të njëjtin emër - . Ato. vendoseni këtë etiketë menjëherë pas etiketës Body hapëse dhe mbylleni përpara se të thërrisni skriptet që ndodhen menjëherë përpara etiketës Body mbyllëse. Pas kësaj, teksti nuk do të qëndrojë më në dritaren e shfletuesit.
Ju gjithashtu mund të shihni se imazhet paraprake mbivendosen me njëra-tjetrën ndërsa gjerësia e ekranit zvogëlohet. Fakti është se ata janë ende "të pareagueshëm", por ne do t'i bëjmë të tillë në artikujt e ardhshëm të kësaj rubrike. Dhe gjithashtu ne do të vazhdojmë të analizojmë punën me sistemin e rrjetit Bootstrap 3, të mësojmë se si të dizenjojmë butona, tabela, forma Html, të krijojmë menu drop-down, navigim dhe shumë më tepër. Prandaj, mos ndërroni dhe qëndroni të sintonizuar për botime të reja.
Për të vazhduar >>> (Mund të regjistroheni në buletinin që të mos e humbisni)
Dhe këtu është vazhdimi: (por ju ende abonoheni - do të ketë shumë gjëra më interesante dhe të dobishme).
Në këtë artikull, ne do të njihemi me klasat e kornizës Bootstrap 3, të krijuara për të krijuar një "skelet" (paraqitje) adaptive të faqes.
"Ndërtimi" i elementeve të rrjetit Bootstrap 3Rrjeti Bootstrap përbëhet nga elementë "ndërtimi". Ato kryesore janë mbështjellësit, rreshtat, blloqet adaptive dhe klasat e shërbimeve të përgjegjshme.
Në thelb, një rrjet është vetëm një listë e klasave të paracaktuara me të cilat mund të vendosni sjelljen e nevojshme për blloqet (elementet HTML) dhe të ndërtoni një plan urbanistik të caktuar përshtatës të faqes me ndihmën e tyre.
MbështjellësNjë kontejner mbështjellës është një element "ndërtimi" i rrjetit, nga i cili fillon faqosja për të gjithë faqen ose një pjesë të saj (për shembull, titulli, menyja kryesore, zona kryesore, futeri), në varësi të strategjisë së zhvillimit.
Një kontejner në Bootstrap mund të jetë i fiksuar ose i përgjegjshëm.
E para (kontejneri i fiksuar me përshtatje) karakterizohet nga fakti se ka një gjerësi konstante brenda një diapazoni të gjerësisë së portit të shikimit (zona e shikimit).
Tabela e mëposhtme tregon se sa i gjerë është një kontejner i fiksuar me përgjigje në një gjerësi të caktuar të pamjes së shfletuesit:
= 768px dhe = 992px dhe ...  Kur dizajnoni një plan urbanistik, zakonisht nuk përdoret foleja e një ene mbështjellësi Bootstrap në një tjetër. Pra, elementi i parë "ndërtues" i rrjetit Bootstrap është një enë mbështjellëse. Përcakton gjerësinë e paraqitjes në portat e ndryshme të pamjes, dhe gjithashtu e përqendron atë (vetëm kontejneri i fiksuar me përshtatje) në lidhje me skajet e majtë dhe të djathtë të zonës së klientit të skedës ose dritares së shfletuesit. Elementi tjetër i ndërtimit është një rresht (një bllok div me një klasë rreshti). Një rresht është një bllok i veçantë që përdoret vetëm për të mbështjellë elementë të tjerë ndërtimi (blloqe përshtatëse). Qëllimi i tij kryesor është të neutralizojë mbushjen pozitive (15 px majtas dhe djathtas) të një ene mbështjellësi ose blloku të përgjegjshëm.  Një shembull i formimit të indenteve: Kontejneri (+15px) -> rreshti (-15px) -> col (+15px) -> kontejneri i përmbajtjes (+15px) -> rreshti (-15px) -> col (+15px) -> rreshti (-15px) -> col (+15px) -> përmbajtje *col është një bllok reagues Shembulli tregon se pa marrë parasysh se në cilin bllok të përgjegjshëm ndodhet përmbajtja, ajo gjithmonë do të ketë diferencën e duhur (d.m.th. 15 px majtas dhe djathtas). Elementi tjetër "ndërtues" i rrjetit Bootstrap është një bllok reagues (div me klasën col-?-?).  Kutitë e përgjegjshme janë elementë të rrjetit Bootstrap që kanë një ose më shumë col-?-? . Këto blloqe janë tullat kryesore "ndërtuese", ato formojnë strukturën e nevojshme. Gjerësia e bllokut adaptiv vendoset në lidhje me llojin e pajisjes. Kjo do të thotë që blloku i përgjegjshëm mund të ketë gjerësi të ndryshme në pajisje të ndryshme. Për shkak të kësaj, ky bllok quhet adaptiv. Si vendoset gjerësia e bllokut të përgjegjshëm? Cilësimi i gjerësisë për një kuti reaguese që duhet të ketë në një pajisje të caktuar është vendosur si parazgjedhje në një numër midis 1 dhe 12 (numri i kolonave Bootstrap). Ky numër tregohet në vend të karakterit të dytë? ne klase kol-?-? . Ky numër (parazgjedhja 1 deri në 12) përcakton se çfarë përqindje të gjerësisë së elementit prind duhet të ketë blloku reagues. Për shembull, numri 1 vendos gjerësinë e kutisë së përgjegjshme në 8.3% (1/12) të gjerësisë së kutisë mëmë. Numri 12 është një gjerësi e barabartë me 100% (12/12) të gjerësisë së bllokut prind.  Përveç specifikimit të gjerësisë së bllokut adaptiv, duhet të specifikoni edhe llojin e pajisjes (në vend të 1 pyetjes). Klasa e pajisjes do të përcaktojë se në cilin port shikimi do të zbatohet kjo gjerësi. Bootstrap 3 dallon 4 klasa kryesore. Ato janë xs (gjerësia e portës së shikimit >0), sm (gjerësia e portës së pamjes >= 768 px), md (gjerësia e portës së shikimit >= 992 px) dhe lg (gjerësia e portës së pamjes së shfletuesit >=1200 px). Për shembull, një bllok adaptiv me klasën col-xs-12 col-sm-6 col-md-4 col-lg-3 do të ketë një gjerësi prej 100% (12/12) në xs dhe 50% (6/12 ) në sm , në md - 33.3% (4/12), në lg - 25% (3/12). Për më tepër, duhet t'i kushtoni vëmendje faktit që blloqet adaptive nuk kufizojnë gamën e tyre. Ato. nëse specifikoni xs në atributin e klasës së një blloku adaptiv, por nuk specifikoni sm, atëherë efekti i tij do të shtrihet në shtrirjen e këtij diapazoni. Për shembull, një bllok adaptiv me klasën col-xs-6 col-lg-3 do të ketë një gjerësi prej 50% (6/12) në pajisjet xs, sm dhe md dhe 25% (3/12) në lg. Një bllok adaptiv, si një kontejner, vendos margjina pozitive prej 15 px majtas dhe djathtas për përmbajtjen që do të vendoset në të. Në një plan urbanistik të duhur të rrjetit Bootstrap, një bllok i përgjegjshëm duhet të ketë gjithmonë një rresht si prind. Për shembull, le ta ndajmë bllokun në 3 kolona të barabarta, të cilat do të shfaqen vertikalisht në xs dhe horizontalisht në sm dhe më lart: ... ... ... Për shembull, le të llogarisim gjerësinë e disponueshme për përmbajtjen për blloqet e parë dhe të dytë: 1 bllok... 2 blloqe...
Blloqet reaguese vendosen në elementin prind njëri pas tjetrit në rreshta. Një rresht përmban blloqe adaptive me një numër total kolonash jo më shumë se 12 (si parazgjedhje). Ato. blloqet që nuk përshtaten në rreshtin e parë vendosen në rreshtin tjetër, e kështu me radhë. Si janë rregulluar blloqet adaptive? Në Bootstrap 3, blloqet reaguese janë lundruese (float:majtas). Kjo duhet të merret parasysh kur krijoni paraqitjen e faqes në internet. Përpara bllokut, i cili duhet të fillojë në një linjë të re, është e nevojshme të vendosni një element bosh div me class clearfix . Ju gjithashtu duhet ta fshehni atë për pajisjet në të cilat ky veprim nuk ka nevojë të kryhet. Blloku fshihet duke përdorur klasat përkatëse të dhëna më poshtë. Blloqet lundruese kanë gjithashtu një veçori. Për shembull, nëse në shembullin e mësipërm, lartësia e 1 bllokut do të jetë më e lartë se 2 blloqe. Atëherë blloku 3 nuk do të vendoset në një linjë të re, por do të "ngjitet" në anën e djathtë të bllokut 1.  Për ta parandaluar këtë, duhet të shtoni një bllok me klasën clearfix dhe ta bëni atë të dukshëm për pajisjet e nevojshme (për shembull, në md dhe lg): 1 bllok... 2 bllok... 3 bllok... Parimi themelor i krijimit të një plan urbanistikParimi bazë i krijimit të një plan urbanistik është futja e disa blloqeve adaptive në të tjera. Në të njëjtën kohë, gjerësia e tyre është gjithmonë një parametër relativ, i cili vendoset si përqindje (nga numri i kolonave) të gjerësisë së bllokut prind. Ato. në çdo nivel të foleve, për shembull, një bllok i përgjegjshëm me 6 kolona është gjithmonë 50% (6/12*100%) e gjerësisë së elementit mëmë. Për shembull, le të ndajmë një bllok (kryesor) në 4 blloqe (2 në rreshtin e parë dhe 2 në të dytin). Për thjeshtësi, ne do të krijojmë një plan urbanistik që nuk është përshtatës: 1 bllok... 2 bllok... 3 bllok... 4 bllok... Le të krijojmë një plan urbanistik me 3 blloqe (3 x 2): 1 bllok... 2 blloqe... 3-1 blloqe... 3-2 blloqe... 3-3 blloqe... 3-4 blloqe... 3-5 blloqe... 3-6 blloqe. .. 4 bllok... Është e lehtë të shihet se paraqitja e bllokut adaptiv të mbivendosur kryhet në të njëjtën mënyrë si ai kryesor. Kjo do të thotë që nuk ka rëndësi se çfarë niveli foleje ka një bllok, faqosja e tij krijohet sipas të njëjtave rregulla. Klasat për kompensimin e bllokut adaptivBootstrap ka klasa reaguese (col-?-offset-?) që mund t'i përdorni për të zhvendosur një bllok një numër të caktuar kolonash në të djathtë. E para? duhet të zëvendësohet me llojin e pajisjes (xs, sm, md ose lg). E dyta? për numrin e kolonave. Për shembull, le ta vendosim bllokun në pajisjet md në 8 kolona të gjera dhe ta vendosim në rreshtin në qendër (d.m.th. ta zhvendosim 2 kolona në të djathtë): 1 bllok... Përveç mjeteve për kompensimin e bllokut adaptiv, Bootstrap 3 ka gjithashtu klasa të veçanta që mund të përdoren për të ndryshuar rendin e elementeve brenda një rreshti të vetëm. Klasat e shërbimeve të përgjegjshme të Bootstrap 3Bootstrap 3 përmban klasa adaptive (të dobishme) që ju lejojnë të kontrolloni dukshmërinë e shfaqjes së elementeve në varësi të llojit të pajisjes. Përveç specifikimit të pajisjes (xs, sm, md, lg) në të cilën blloku do të jetë i dukshëm, duhet të specifikoni gjithashtu se si duhet të shfaqet në këtë pajisje. Opsionet janë inline , block dhe inline-block .
Në vend të një shenje? bllok , inline , ose inline-block duhet të specifikohet. Ato. specifikoni se si duhet të shfaqet elementi. Për shembull, shtimi i klasës visual-md-block në një element do të nënkuptojë se ai do të shfaqet vetëm në pajisjet që kanë një pamje md (width viewport >=992px dhe .col-md-1, .col-md-2, .col- md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, . col-md -10, .col-md-11, .col-md-12 ( kufiri:1px solid #cccc; margjina-fund:30px; lartësia:60px; ) Përshëndetje, botë! .col-md-1 .col -md- 1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md -1 . col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col- md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12 Nëse ende nuk kuptoni asgjë, atëherë do të përpiqem ta shpjegoj në këtë mënyrë. Pra, për përmbajtjen, klasa "col-md-" do të duket kështu: "col-md-8" përmbajtje në një bllok përmbajtje në një bllok Bootstrap ka aftësinë të shkruajë stile të ndryshme CSS ose të ndajë qelizat ndryshe për grupet e pajisjeve. Për shembull, unë dua që titulli i faqes sime në monitorët e mëdhenj të ndahet në një qelizë, por për telefonat, vendosa të bëj dy qeliza dhe të aplikoj një stil të ndryshëm CSS për to. E keni idenë? Tabela e paraqitjes së bootstrap për grupe të ndryshme pajisjesh
|
