Armar

Jeħtieġ HTML5 doctype

Bootstrap jagħmel użu minn ċerti elementi HTML u proprjetajiet CSS li jeħtieġu l-użu tad-doctype HTML5. Inkludiha fil-bidu tal-proġetti kollha tiegħek.

<!DOCTYPE html>
<html lang = "mt" > 
  ...
</html>

Tipografija u links

Bootstrap jistabbilixxi stili ta' wiri, tipografija u link globali bażiċi. Speċifikament, aħna:

Neħħi marginfuq 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

Dawn l-istili jistgħu jinstabu fi scaffolding.less .

Irrisettja permezz Normalizza

Bil-Bootstrap 2, il-blokka reset l-antika twaqqfet favur Normalize.css , proġett minn Nicolas Gallagher u Jonathan Neal li jħaddem ukoll il- Boilerplate HTML5 . Filwaqt li nużaw ħafna minn Normalize fi ħdan reset.less tagħna , neħħejna xi elementi speċifikament għal Bootstrap.

Eżempju ta' grilja ħaj

Is-sistema awtomatika tal-grilja Bootstrap tutilizza 12-il kolonna , u b'hekk ikun hemm kontenitur wiesa' ta' 940px mingħajr karatteristiċi li jirrispondu attivati. Bil-fajl CSS li jirrispondu miżjud, il-grilja tadatta biex tkun 724px u 1170px wiesgħa skond il-viewport tiegħek. Taħt il-viewports ta' 767px, il-kolonni jsiru fluwidi u jinstammu vertikalment.

HTML bażiku tal-grilja

Għal tqassim sempliċi ta 'żewġ kolonni, oħloq .rowu żid in-numru xieraq ta' .span*kolonni. Peress li din hija grilja ta '12-il kolonna, kull waħda .span*tifrex fuq numru ta' dawk it-12-il kolonna, u dejjem għandha żżid sa 12 għal kull ringiela (jew in-numru ta 'kolonni fil-ġenitur).

<div class = "ringiela" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Minħabba dan l-eżempju, għandna .span4u .span8, li nagħmlu għal 12-il kolonna totali u ringiela kompluta.

Kolonni ta' tpaċija

Mexxi l-kolonni lejn il-lemin billi tuża .offset*klassijiet. Kull klassi żżid il-marġni tax-xellug ta' kolonna b'kolonna sħiħa. Per eżempju, .offset4jiċċaqlaq .span4fuq erba 'kolonni.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "ringiela" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Kolonni li jbejtu

Biex tbejta l-kontenut tiegħek mal-grilja default, żid kolonni ġodda .rowu sett ta .span*' kolonna eżistenti .span*. Ringieli mdaħħla għandhom jinkludu sett ta 'kolonni li jammontaw għan-numru ta' kolonni tal-ġenitur tiegħu.

Livell 1 kolonna

Livell 2

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

Eżempju ta 'grilja ta' fluwidu ħaj

Is-sistema tal-grilja tal-fluwidu tuża perċentwali minflok pixels għall-wisa 'tal-kolonni. Għandha l-istess kapaċitajiet ta 'rispons bħas-sistema ta' grilja fissa tagħna, li tiżgura proporzjonijiet xierqa għar-riżoluzzjonijiet u l-apparati ewlenin tal-iskrin.

HTML bażiku tal-grilja tal-fluwidu

Agħmel kwalunkwe ringiela "fluwidu" billi tibdel .rowgħal .row-fluid. Il-klassijiet tal-kolonna jibqgħu eżattament l-istess, li jagħmilha faċli li taqleb bejn grilji fissi u fluwidi.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Tpaċija tal-fluwidu

Jopera bl-istess mod bħall-ikkumpensar tas-sistema tal-grilja fissa: żid .offset*ma 'kwalunkwe kolonna biex tpaċi b'dak il-ħafna kolonni.

4 offset 4

3 offset 3

6 offset 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Nesting fluwidu

Il-grilji tal-fluwidu jutilizzaw it-tbejjit b'mod differenti: kull livell ta 'kolonni ibejjet għandu jżid sa 12-il kolonna. Dan għaliex il-grilja tal-fluwidu tuża perċentwali, mhux pixels, għall-issettjar tal-wisgħat.

Fluwidu 12

Fluwidu 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Fluwidu 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Fluwidu 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluwidu 6 </div> 
          <div class = "span6" > Fluwidu 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluwidu 6 </div> 
    </div>
  </div>
</div>

Tqassim fiss

Tipprovdi tqassim komuni ta 'wisa' fiss (u b'għażla li jirrispondu) b'mod <div class="container">meħtieġ biss.

<korp>
  <div class = "kontenitur" > 
    ...
  </div>
</body>

It-tqassim tal-fluwidu

Oħloq paġna fluwida b'żewġ kolonni <div class="container-fluid">b'—kbir għall-applikazzjonijiet u d-dokumenti.

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

Jippermettu karatteristiċi li jirrispondu

Ixgħel is-CSS li jirrispondu fil-proġett tiegħek billi tinkludi l-meta tag xierqa u l-stylesheet addizzjonali fid- <head>dokument tiegħek. Jekk ikkumpilajt Bootstrap mill-paġna Customize, trid tinkludi biss il-meta tag.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Irjus up!Bootstrap ma jinkludix karatteristiċi li jirrispondu awtomatikament f'dan il-ħin peress li mhux kollox jeħtieġ li jirrispondu. Minflok ma nħeġġu lill-iżviluppaturi biex ineħħu din il-karatteristika, aħna nifhmu li l-aħjar li nippermettuha kif meħtieġ.

Dwar Bootstrap li jirrispondu

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

/* Desktop kbir */
@media ( wisa ' min : 1200px ) { ... }     
 
/* Pillola ritratt għall-pajsaġġ u d-desktop */
@media ( wisa ' minn : 768px ) u ( wisa ' massimu : 979px ) { ... }        
 
/* Telefon tal-pajsaġġ għal tableta ritratt */
@media ( wisa ' mass : 767px ) { ... }     
 
/* Telefowns tal-pajsaġġ u isfel */
@media ( wisa ' mass : 480px ) { ... }

Klassijiet ta' utilità li jirrispondu

Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża dawn il-klassijiet ta’ utilità biex turi u taħbi l-kontenut skont it-tagħmir. Hawn taħt hawn tabella tal-klassijiet disponibbli u l-effett tagħhom fuq tqassim partikolari ta' query tal-midja (ittikkettati skont l-apparat). Jistgħu jinstabu fi responsive.less.

Klassi	Telefowns767px u taħt	Pilloli979px sa 768px	DesktopsDefault
`.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

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. L-utilitajiet li jirrispondu m'għandhomx jintużaw mat-tabelli, u bħala tali mhumiex appoġġjati.

Każ tat-test ta' utilitajiet li jirrispondu

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

Settings globali