Bootstrap është ndërtuar në një rrjet të përgjegjshëm me 12 kolona. Ne kemi përfshirë gjithashtu paraqitje me gjerësi fikse dhe fluide bazuar në atë sistem.
Sistemi i paracaktuar i rrjetit i ofruar si pjesë e Bootstrap është një rrjet me 12 kolona me gjerësi 940 px .
Ai gjithashtu ka katër variacione të përgjegjshme për pajisje dhe rezolucione të ndryshme: telefon, portret tabletë, tavolinë peizazhi dhe desktop të vegjël dhe desktopë të mëdhenj me ekran të gjerë.
- <div class = "rresht" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 12 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit.
- <div class = "rresht" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Me sistemin e rrjetit statik (jo të lëngshëm) në Bootstrap, foleja është e lehtë. Për të futur përmbajtjen tuaj, thjesht shtoni një të re .row
dhe grup kolonash brenda një kolone .span*
ekzistuese ..span*
Rreshtat e mbivendosur duhet të përfshijnë një grup kolonash që shtohen me numrin e kolonave të saj mëmë. Për shembull, dy kolona të mbivendosura .span3
duhet të vendosen brenda një .span6
.
- <div class = "rresht" >
- <div class = "span12" >
- Niveli 1 i kolonës
- <div class = "rresht" >
- <div class = "span6" > Niveli 2 </div>
- <div class = "span6" > Niveli 2 </div>
- </div>
- </div>
- </div>
Sistemi i rrjetit fluid përdor përqindjet për gjerësinë e kolonave në vend të pikselëve fiks. Ai gjithashtu ka të njëjtat ndryshime reaguese si sistemi ynë i rrjetit fiks, duke siguruar proporcione të duhura për rezolucionet dhe pajisjet kryesore të ekranit.
Bëni çdo rresht fluid thjesht duke ndryshuar .row
në .row-fluid
. Kolonat qëndrojnë ekzaktësisht të njëjta, duke e bërë shumë të thjeshtë kalimin midis paraqitjeve fikse dhe të lëngshme.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Folezimi me rrjete fluide është paksa i ndryshëm: numri i kolonave të mbivendosur nuk duhet të përputhet me prindin. Në vend të kësaj, kolonat tuaja rivendosen në çdo nivel sepse çdo rresht zë 100% të kolonës mëmë.
- <div class = "row-fluid" >
- <div class = "span12" >
- Niveli 1 i kolonës
- <div class = "row-fluid" >
- <div class = "span6" > Niveli 2 </div>
- <div class = "span6" > Niveli 2 </div>
- </div>
- </div>
- </div>
E ndryshueshme | Vlera e paracaktuar | Përshkrim |
---|---|---|
@gridColumns |
12 | Numri i kolonave |
@gridColumnWidth |
60 px | Gjerësia e secilës kolonë |
@gridGutterWidth |
20 px | Hapësira negative midis kolonave |
@siteWidth |
Shuma e llogaritur e të gjitha kolonave dhe ulluqeve | Numëron numrin e kolonave dhe ulluqeve për të vendosur gjerësinë e .container-fixed() përzierjes |
Të integruara në Bootstrap janë një pjesë e vogël e variablave për personalizimin e sistemit të paracaktuar të rrjetit 940px, të dokumentuara më sipër. Të gjitha variablat për rrjetin ruhen në variabla.më pak.
Modifikimi i rrjetit nënkupton ndryshimin e tre @grid*
variablave dhe rikompilimin e Bootstrap. Ndryshoni variablat e rrjetit në variablat.less dhe përdorni një nga katër mënyrat e dokumentuara për të ripërpiluar . Nëse po shtoni më shumë kolona, sigurohuni që të shtoni CSS për ato në grid.less.
Përshtatja e rrjetit funksionon vetëm në nivelin e paracaktuar, rrjetin 940px. Për të ruajtur aspektet reaguese të Bootstrap, do t'ju duhet gjithashtu të personalizoni rrjetet në responsive.less.
Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div class="container">
.
- <trupi>
- <div class = "enë" >
- ...
- </div>
- </body>
<div class="container-fluid">
jep strukturë fleksibël të faqes, gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. Është i shkëlqyeshëm për aplikacionet dhe dokumentet.
- <div class = "kontenier-lëng" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Përmbajtja e shiritit anësor-->
- </div>
- <div class = "span10" >
- <!--Përmbajtja e trupit-->
- </div>
- </div>
- </div>
Bootstrap mbështet një sërë pyetjesh mediatike në një skedar të vetëm për të ndihmuar që projektet tuaja t'i bëjnë më të përshtatshme në pajisje të ndryshme dhe rezolucione të ekranit. Ja çfarë përfshihet:
Etiketa | Gjerësia e paraqitjes | Gjerësia e kolonës | Gjerësia e ulluqit |
---|---|---|---|
Telefonat inteligjentë | 480px dhe më poshtë | Kolona të lëngshme, pa gjerësi fikse | |
Tableta portrete | 480px deri në 768px | Kolona të lëngshme, pa gjerësi fikse | |
Pllakat e peizazhit | 768 px në 979 px | 42 px | 20 px |
E paracaktuar | 980px e lart | 60 px | 20 px |
Ekran i madh | 1210px e lart | 70 px | 30 px |
Për të siguruar që pajisjet të shfaqin faqet e përgjegjshme siç duhet, përfshini meta etiketën e portit të pamjes.
- <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >
Pyetjet e medias lejojnë CSS të personalizuar bazuar në një numër kushtesh - raportet, gjerësia, lloji i ekranit, etj. - por zakonisht fokusohet rreth min-width
dhe max-width
.
Bootstrap nuk i përfshin automatikisht këto pyetje mediatike, por kuptimi dhe shtimi i tyre është shumë i lehtë dhe kërkon konfigurim minimal. Ju keni disa opsione për të përfshirë veçoritë e përgjegjshme të Bootstrap:
Pse të mos e përfshini vetëm atë? Të themi të vërtetën, jo gjithçka duhet të jetë e përgjegjshme. Në vend që të inkurajojmë zhvilluesit të heqin këtë veçori, mendojmë se është më mirë ta aktivizojmë atë.
- // Telefonat e peizazhit dhe poshtë
- @media ( gjerësia maksimale : 480 px ) { ... }
- // Telefon peizazh në tablet portret
- @media ( gjerësia maksimale : 768 px ) { ... }
- // Portret i tabletës në peizazh dhe desktop
- @media ( gjerësia minimale : 768 px ) dhe ( gjerësia maksimale : 980 px ) { ... }
- // Desktop i madh
- @media ( min - gjerësia : 1200 px ) { .. }