Armar

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.

Jeħtieġ HTML5 doctype

Bootstrap jagħmel użu minn elementi HTML u proprjetajiet CSS li jeħtieġu l-użu tad-doctype HTML5. Kun żgur li tinkludiha fil-bidu ta' kull paġna Bootstrapped fil-proġett tiegħek.

  1. <!DOCTYPE html>
  2. <html lang = "mt" >
  3. ...
  4. </html>

Tipografija u links

Fi ħdan il- fajl scaffolding.less , aħna waqqafna stili bażiċi ta 'wiri globali, tipografija, u link. Speċifikament, aħna:

  • Neħħi l-marġni fuq il-ġisem
  • Issettja background-color: white;fuq ilbody
  • Uża l- @baseFontFamily, @baseFontSize, u l- @baseLineHeightattributi bħala l-bażi tipografika tagħna
  • Issettja l-kulur tal-link globali permezz @linkColoru applika s-sottolinja tal-link fuq biss:hover

Irrisettja permezz Normalizza

Minn Bootstrap 2, ir-reset tas-CSS tradizzjonali evolviet biex jagħmel użu minn elementi minn Normalize.css , proġett minn Nicolas Gallagher li jħaddem ukoll il- Boilerplate HTML5 .

Ir-reset il-ġdid xorta jista 'jinstab f'reset.less , iżda b'ħafna elementi mneħħija għall-qosor u l-eżattezza.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Is-sistema ta 'grilja awtomatika pprovduta f'Bootstrap tutilizza 12-il kolonna li tirrendi f'wisgħat ta' 724px, 940px (default mingħajr CSS li jirrispondu inkluż), u 1170px. Taħt il-viewports ta' 767px, il-kolonni jsiru fluwidi u jinstammu vertikalment.

  1. <div class = "ringiela" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </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.


Kolonni ta' tpaċija

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
  1. <div class = "ringiela" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 offset4" > ... </div>
  4. </div>

Kolonni li jbejtu

Bis-sistema tal-grilja statika (mhux fluwida) f'Bootstrap, it-tbejjit huwa faċli. Biex tbejta l-kontenut tiegħek, żid biss kolonni ġodda .rowu sett ta' .span*kolonni f'kolonna eżistenti .span*.

Eżempju

Ringieli mdaħħla għandhom jinkludu sett ta 'kolonni li jammontaw għan-numru ta' kolonni tal-ġenitur tiegħu. Pereżempju, żewġ .span3kolonni mnaqqsa għandhom jitqiegħdu fi ħdan .span6.

Livell 1 tal-kolonna
Livell 2
Livell 2
  1. <div class = "ringiela" >
  2. <div class = "span6" >
  3. Livell 1 kolonna
  4. <div class = "ringiela" >
  5. <div class = "span3" > Livell 2 </div>
  6. <div class = "span3" > Livell 2 </div>
  7. </div>
  8. </div>
  9. </div>

Kolonni tal-fluwidu

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Perċentwali, mhux pixels

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.

Ringieli fluwidi

Agħmel kwalunkwe fluwidu ringiela sempliċement billi tbiddel .rowgħal .row-fluid. Il-kolonni jibqgħu l-istess eżatt, u jagħmluha super sempliċi biex taqleb bejn layouts fissi u fluwidi.

Markup

  1. <div class = "row-fluid" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

Nesting fluwidu

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.

Fluwidu 12
Fluwidu 6
Fluwidu 6
  1. <div class = "row-fluid" >
  2. <div class = "span12" >
  3. Livell 1 tal-kolonna
  4. <div class = "row-fluid" >
  5. <div class = "span6" > Livell 2 </div>
  6. <div class = "span6" > Livell 2 </div>
  7. </div>
  8. </div>
  9. </div>
Varjabbli Valur default Deskrizzjoni
@gridColumns 12 Numru ta' kolonni
@gridColumnWidth 60px Wisa' ta' kull kolonna
@gridGutterWidth 20px Spazju negattiv bejn il-kolonni

Varjabbli f'INQAS

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.

Kif tippersonalizza

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.

Nibqgħu reattivi

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-grilji f'responsive.less.

Tqassim fiss

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">.

  1. <korp>
  2. <div class = "kontenitur" >
  3. ...
  4. </div>
  5. </body>

It-tqassim tal-fluwidu

<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.

  1. <div class = "kontenitur-fluwidu" >
  2. <div class = "row-fluid" >
  3. <div class = "span2" >
  4. <!--Kontenut tal-Istrixxa tal-ġenb-->
  5. </div>
  6. <div class = "span10" >
  7. <!--Kontenut tal-ġisem-->
  8. </div>
  9. </div>
  10. </div>

Apparati li jirrispondu

Dak li jagħmlu

Mistoqsijiet tal-midja jippermettu CSS personalizzat ibbażat fuq numru ta 'kundizzjonijiet—proporzjonijiet, wisgħat, tip ta' wiri, eċċ—iżda normalment jiffoka madwar min-widthu max-width.

  • Immodifika l-wisa 'tal-kolonna fil-grilja tagħna
  • Stack elementi minflok float kull fejn meħtieġ
  • Id-daqs tal-intestaturi u t-test mill-ġdid biex ikunu aktar xierqa għall-apparati

Uża l-mistoqsijiet tal-midja b'mod responsabbli u biss bħala bidu għall-udjenzi mobbli tiegħek. Għal proġetti akbar, ikkunsidra bażijiet ta 'kodiċi ddedikati u mhux saffi ta' mistoqsijiet tal-midja.

Apparati appoġġjati

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
Smartphones għal pilloli 767px u taħt Kolonni fluwidi, l-ebda wisgħat fissi
Pilloli tar-ritratti 768px u aktar 42px 20px
Default 980px u aktar 60px 20px
Wirja kbira 1200px u aktar 70px 30px

Jeħtieġ meta tag

Biex tiżgura li l-apparati juru paġni li jirrispondu sew, inkludi l-meta tag tal-viewport.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Uża l-mistoqsijiet tal-midja

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:

  1. Uża l-verżjoni responsive kkumpilata, bootstrap-responsive.css
  2. Żid @import "responsive.less" u rikompila Bootstrap
  3. Immodifika u kkompila mill-ġdid responsive.less bħala fajl separat

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.

  1. /* Telefowns tal-pajsaġġ u isfel */
  2. @media ( wisa ' mass : 480px ) { ... }
  3.  
  4. /* Telefon tal-pajsaġġ għal tableta ritratt */
  5. @media ( wisa ' mass : 767px ) { ... }
  6.  
  7. /* Pillola ritratt għall-pajsaġġ u d-desktop */
  8. @media ( wisa ' minn : 768px ) u ( wisa ' massimu : 979px ) { ... }
  9.  
  10. /* Desktop kbir */
  11. @media ( wisa ' min : 1200px ) { ... }

Klassijiet ta' utilità li jirrispondu

X'inhuma

Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża dawn il-klassijiet bażiċi ta’ utilità biex turi u taħbi l-kontenut skont it-tagħmir.

Meta tuża

Uża fuq bażi limitata u evita li toħloq verżjonijiet kompletament differenti tal-istess sit. Minflok, użahom biex tikkumplimenta l-preżentazzjoni ta 'kull apparat.

Pereżempju, tista' turi <select>element għan-nav fuq layouts mobbli, iżda mhux fuq tablets jew desktops.

Klassijiet ta' appoġġ

Hawn tidher tabella tal-klassijiet li nappoġġjaw u l-effett tagħhom fuq tqassim partikolari ta' query tal-midja (ittikkettati skont l-apparat). Jistgħu jinstabu fi responsive.less.

Klassi Telefowns480px u taħt Pilloli767px u taħt Desktops768px u aktar
.visible-phone Viżibbli
.visible-tablet Viżibbli
.visible-desktop Viżibbli
.hidden-phone Viżibbli Viżibbli
.hidden-tablet Viżibbli Viżibbli
.hidden-desktop Viżibbli Viżibbli

Każ tat-test

Id-daqs tal-browser tiegħek jew tagħbija fuq apparati differenti biex tittestja l-klassijiet ta 'hawn fuq.

Viżibbli fuq...

Marki ta' kontroll ħodor jindikaw li l-klassi hija viżibbli fil-viewport attwali tiegħek.

  • Telefon✔ Telefon
  • Pillola✔ Pillola
  • Desktop✔ Desktop

Moħbi fuq...

Hawnhekk, marki ħodor jindikaw li l-klassi hija moħbija fil-vetrina attwali tiegħek.

  • Telefon✔ Telefon
  • Pillola✔ Pillola
  • Desktop✔ Desktop