Bootstrap huwa mibni fuq grilja ta '12-il kolonna li tirreaġixxi. Inkludejna wkoll layouts ta 'wisa' fissi u fluwidi bbażati fuq dik is-sistema.
Is-sistema ta' grilja awtomatika pprovduta bħala parti minn Bootstrap hija grilja ta' 12-il kolonna ta' 940px wiesgħa .
Għandu wkoll erba' varjazzjonijiet li jirrispondu għal diversi apparati u riżoluzzjonijiet: telefon, ritratt tat-tablet, pajsaġġ tal-mejda u desktops żgħar, u desktops kbar bi skrin wiesa'.
- <div class = "ringiela" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Kif muri hawn, jista 'jinħoloq tqassim bażiku b'żewġ "kolonni," kull wieħed ikopri numru ta' 12-il kolonna fundamentali li ddefinijna bħala parti mis-sistema tal-grilja tagħna.
- <div class = "ringiela" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Bis-sistema tal-grilja statika (mhux fluwida) f'Bootstrap, it-tbejjit huwa faċli. Biex tbejta l-kontenut tiegħek, żid biss kolonni ġodda .row
u sett ta' .span*
kolonni f'kolonna eżistenti .span*
.
Ringieli mdaħħla għandhom jinkludu sett ta 'kolonni li jammontaw għan-numru ta' kolonni tal-ġenitur tiegħu. Pereżempju, żewġ .span3
kolonni mnaqqsa għandhom jitqiegħdu fi ħdan .span6
.
- <div class = "ringiela" >
- <div class = "span12" >
- Livell 1 tal-kolonna
- <div class = "ringiela" >
- <div class = "span6" > Livell 2 </div>
- <div class = "span6" > Livell 2 </div>
- </div>
- </div>
- </div>
Is-sistema tal-grilja tal-fluwidu tuża perċentwali għall-wisa 'tal-kolonni minflok pixels fissi. Għandha wkoll l-istess varjazzjonijiet li jirrispondu bħas-sistema tal-grilja fissa tagħna, li tiżgura proporzjonijiet xierqa għar-riżoluzzjonijiet u l-apparati ewlenin tal-iskrin.
Agħmel kwalunkwe fluwidu ringiela sempliċement billi tbiddel .row
għal .row-fluid
. Il-kolonni jibqgħu l-istess eżatt, u jagħmluha super sempliċi biex taqleb bejn layouts fissi u fluwidi.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Nesting bi gradilji fluwidu huwa daqsxejn differenti: in-numru ta 'kolonni nested m'għandux għalfejn jaqbel mal-ġenitur. Minflok, il-kolonni tiegħek huma reset f'kull livell minħabba li kull ringiela tieħu 100% tal-kolonna prinċipali.
- <div class = "row-fluid" >
- <div class = "span12" >
- Livell 1 tal-kolonna
- <div class = "row-fluid" >
- <div class = "span6" > Livell 2 </div>
- <div class = "span6" > Livell 2 </div>
- </div>
- </div>
- </div>
Varjabbli | Valur default | Deskrizzjoni |
---|---|---|
@gridColumns |
12 | Numru ta' kolonni |
@gridColumnWidth |
60px | Wisa' ta' kull kolonna |
@gridGutterWidth |
20px | Spazju negattiv bejn il-kolonni |
@siteWidth |
Somma kkalkulata tal-kolonni u l-kanali kollha | Jgħodd in-numru ta 'kolonni u kanali biex tissettja l-wisa' tal- .container-fixed() mixin |
Mibnija f'Bootstrap hemm numru żgħir ta 'varjabbli għall-personalizzazzjoni tas-sistema ta' grilja ta '940px default, dokumentata hawn fuq. Il-varjabbli kollha għall-grilja huma maħżuna f'variables.less.
Li timmodifika l-grilja tfisser li tbiddel it-tliet @grid*
varjabbli u terġa 'tikkompila Bootstrap. Ibdel il-varjabbli tal-grilja f'variables.less u uża wieħed mill- erba' modi dokumentati biex tikkompila mill-ġdid . Jekk qed iżżid aktar kolonni, kun żgur li żżid is-CSS għal dawk f'grid.less.
Il-personalizzazzjoni tal-grilja taħdem biss fil-livell default, il-grilja ta '940px. Biex iżżomm l-aspetti responsivi ta 'Bootstrap, ikollok ukoll tippersonalizza l-grids f'responsive.less.
It-tqassim default u sempliċi ta' 940px wiesgħa, iċċentrat għal kważi kull websajt jew paġna pprovduta minn <div class="container">
.
- <korp>
- <div class = "kontenitur" >
- ...
- </div>
- </body>
<div class="container-fluid">
jagħti struttura flessibbli tal-paġna, wisgħat min u max, u sidebar tax-xellug. Huwa tajjeb ħafna għall-apps u d-doks.
- <div class = "kontenitur-fluwidu" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Kontenut tal-Istrixxa tal-ġenb-->
- </div>
- <div class = "span10" >
- <!--Kontenut tal-ġisem-->
- </div>
- </div>
- </div>
Bootstrap jappoġġja numru żgħir ta 'mistoqsijiet tal-midja f'fajl wieħed biex jgħin biex il-proġetti tiegħek isiru aktar xierqa fuq apparati u riżoluzzjonijiet tal-iskrin differenti. Hawn x'inhu inkluż:
Tikketta | Wisa 'taqsim | Wisa' tal-kolonna | Wisa' tal-kanal |
---|---|---|---|
Smartphones | 480px u taħt | Kolonni fluwidi, l-ebda wisgħat fissi | |
Pilloli tar-ritratti | 480px sa 768px | Kolonni fluwidi, l-ebda wisgħat fissi | |
Pilloli tal-pajsaġġ | 768px sa 979px | 42px | 20px |
Default | 980px u aktar | 60px | 20px |
Wirja kbira | 1210px u aktar | 70px | 30px |
Biex tiżgura li l-apparati juru paġni li jirrispondu sew, inkludi l-meta tag tal-viewport.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Mistoqsijiet tal-midja jippermettu CSS personalizzat ibbażat fuq numru ta 'kundizzjonijiet—proporzjonijiet, wisgħat, tip ta' wiri, eċċ—iżda ġeneralment jiffoka madwar min-width
u max-width
.
Bootstrap ma jinkludix awtomatikament dawn il-mistoqsijiet tal-midja, iżda li tifhem u żżidhom hija faċli ħafna u teħtieġ setup minimu. Għandek ftit għażliet biex tinkludi l-karatteristiċi li jirrispondu ta' Bootstrap:
Għaliex ma tinkludihx biss? Il-verità, mhux kollox jeħtieġ li jirrispondi. Minflok ma nħeġġu lill-iżviluppaturi biex ineħħu din il-karatteristika, aħna nifhmu li l-aħjar li nippermettuha.
- // Telefowns tal-pajsaġġ u isfel
- @media ( wisa ' mass : 480px ) { ... }
- // Telefon tal-pajsaġġ għal tableta tar-ritratti
- @media ( wisa ' mass : 768px ) { ... }
- // Pillola tar-ritratti għall-pajsaġġ u d-desktop
- @media ( wisa ' minn : 768px ) u ( wisa ' massimu : 980px ) { ... }
- // Desktop kbir
- @media ( wisa ' min : 1200px ) { .. }