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.

<!DOCTYPE html>
<html lang = "mt" > 
  ...
</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.

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.

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

Kolonni ta' tpaċija

4 offset 4

3 offset 3

8 offset 4

<div class = "ringiela" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</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

<div class = "ringiela" > 
  <div class = "span6" > 
    Livell 1 kolonna
    <div class = "ringiela" > 
      <div class = "span3" > Livell 2 </div> 
      <div class = "span3" > Livell 2 </div> 
    </div>
  </div>
</div>

Kolonni tal-fluwidu

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

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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

<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

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

<korp>
  <div class = "kontenitur" > 
    ...
  </div>
</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.

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

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.

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

Uża l-verżjoni responsive kkumpilata, bootstrap-responsive.css
Żid @import "responsive.less" u rikompila Bootstrap
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.

  /* Telefowns tal-pajsaġġ u isfel */
  @media ( wisa ' mass : 480px ) { ... }     
 
  /* Telefon tal-pajsaġġ għal tableta ritratt */
  @media ( wisa ' mass : 767px ) { ... }     
 
  /* Pillola ritratt għall-pajsaġġ u d-desktop */
  @media ( wisa ' minn : 768px ) u ( wisa ' massimu : 979px ) { ... }        
 
  /* Desktop kbir */
  @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	Moħbija	Moħbija
`.visible-tablet`	Moħbija	Viżibbli	Moħbija
`.visible-desktop`	Moħbija	Moħbija	Viżibbli
`.hidden-phone`	Moħbija	Viżibbli	Viżibbli
`.hidden-tablet`	Viżibbli	Moħbija	Viżibbli
`.hidden-desktop`	Viżibbli	Viżibbli	Moħbija

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