Bootstrap

Armar

Bootstrap huwa mibni fuq grilji, layouts u komponenti ta' 12-il kolonna li jirrispondu.

Settings globali

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.

  1. <!DOCTYPE html>
  2. <html lang = "mt" > 
  3.   ...
  4. </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 jsaħħaħ 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.

Sistema ta 'grilja default

Eżempju tal-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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "ringiela" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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
Livell 2 
  1. <div class = "ringiela" > 
  2.   <div class = "span9" > 
  3.     Livell 1 kolonna
  4.     <div class = "ringiela" > 
  5.       <div class = "span6" > Livell 2 </div> 
  6.       <div class = "span3" > Livell 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema ta 'grilja tal-fluwidu

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.

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

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.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </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
Fluwidu 6
Fluwidu 6
Fluwidu 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluwidu 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Fluwidu 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluwidu 6 </div> 
  9.           <div class = "span6" > Fluwidu 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluwidu 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layouts

Tqassim fiss

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

  1. <korp>
  2.   <div class = "kontenitur" > 
  3.     ...
  4.   </div>
  5. </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.

  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>

Disinn li jirreaġixxi

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.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <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

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

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