Bootstrap

Gukubita

Bootstrap yubatswe kumurongo wa 12 winkingi. Twashizemo kandi imiterere- na fluid-ubugari imiterere ishingiye kuri sisitemu.

Imiterere yisi yose kuri CSS gusubiramo, kwandika, hamwe

Irasaba inyandiko ya HTML5

Bootstrap ikoresha ibintu bya HTML nibintu bya CSS bisaba gukoresha inyandiko ya HTML5. Wemeze kubishyira mu ntangiriro ya page yose ya Bootstrapped mumushinga wawe.

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

Imyandikire hamwe

Muri scafolding.idafite dosiye, dushiraho ibyingenzi byerekanwa kwisi, imyandikire, hamwe nuburyo bwo guhuza. By'umwihariko, twe:

  • Kuraho margin kumubiri
  • Shyira background-color: white;kuribody
  • Koresha i @baseFontFamily,, @baseFontSizena @baseLineHeightIbiranga nkimyandikire yacu
  • Shiraho ibara ryisi yose unyuze @linkColorkandi ushyire kumurongo uhuza gusa:hover

Ongera usubire muri Normalize

Kuva kuri Bootstrap 2, gusubiramo gakondo kwa CSS byahindutse kugirango bikoreshe ibintu biva muri Normalize.css , umushinga wa Nicolas Gallagher nawo uha ingufu Boilerplate ya HTML5 .

Gusubiramo gushya birashobora kuboneka muri reset.less , ariko hamwe nibintu byinshi byavanyweho kubugufi nukuri.

Sisitemu isanzwe ya sisitemu 12 inkingi hamwe no gusubiza neza

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

Sisitemu isanzwe ya grid yatanzwe nkigice cya Bootstrap ni 940px-ubugari, 12-inkingi .

Ifite kandi uburyo bune bwitondewe bwibikoresho bitandukanye nibyemezo: terefone, ibishushanyo mbonera bya tablet, imiterere yimeza hamwe na desktop ntoya, hamwe na desktop nini yagutse.

  1. <div class = "umurongo" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Nkuko bigaragara hano, imiterere shingiro irashobora gushirwaho hamwe n "" inkingi "ebyiri, buri kimwekimwe cyose cyumubare winkingi 12 zifatizo twasobanuye nkigice cya sisitemu ya gride.


Kureka inkingi

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

Inkingi

Hamwe na sisitemu ya static (idafite amazi) muri sisitemu ya Bootstrap, guterana biroroshye. Kugirango ushire ibikubiyemo, gusa ongeraho ibishya .rowkandi ushireho .span*inkingi murwego ruriho .span*.

Urugero

Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kumubare winkingi zababyeyi. Kurugero, .span3inkingi ebyiri zegeranye zigomba gushyirwa muri a .span6.

Urwego 1 rwinkingi
Urwego 2
Urwego 2 
  1. <div class = "umurongo" > 
  2.   <div class = "span12" > 
  3.     Urwego 1 rwinkingi
  4.     <div class = "umurongo" > 
  5.       <div class = "span6" > Urwego 2 </div> 
  6.       <div class = "span6" > Urwego 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sisitemu ya grid sisitemu 12 yitabira, ijanisha rishingiye ku nkingi

Inkingi

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

Ijanisha, ntabwo ari pigiseli

Sisitemu ya grid sisitemu ikoresha ijanisha ryubugari bwinkingi aho kuba pigiseli ihamye. Ifite kandi ibisubizo bitandukanye nkibisubizo bya gride sisitemu ihamye, byemeza neza ibipimo byingenzi bya ecran n'ibikoresho.

Imirongo y'amazi

Kora umurongo uwo ariwo wose utemba uhinduye .rowkuri .row-fluid. Inkingi zigumaho neza, bigatuma zoroha cyane guhindagurika hagati yimiterere ihamye kandi itemba.

Markup

  1. <div class = "umurongo-utemba" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Icyari cyamazi

Gutera hamwe na gride ya fluid iratandukanye gato: umubare winkingi zometse ntukeneye guhuza nababyeyi. Ahubwo, inkingi zawe zisubirwamo kuri buri rwego kuko buri murongo ufata 100% yinkingi yababyeyi.

Amazi 12
Amazi 6
Amazi 6 
  1. <div class = "umurongo-utemba" > 
  2.   <div class = "span12" > 
  3.     Urwego 1 rwinkingi
  4.     <div class = "umurongo-utemba" > 
  5.       <div class = "span6" > Urwego 2 </div> 
  6.       <div class = "span6" > Urwego 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Urusobekerane

Birahinduka Agaciro gasanzwe Ibisobanuro
@gridColumns 12 Umubare winkingi
@gridColumnWidth 60px Ubugari bwa buri nkingi
@gridGutterWidth 20px Umwanya mubi hagati yinkingi
@siteWidth Kubara igiteranyo cyinkingi zose Kubara umubare winkingi nigituba kugirango ushireho ubugari bwa .container-fixed()mixin

Ibihinduka muri BIKE

Yubatswe muri Bootstrap nintoki zimpinduka zo guhitamo sisitemu ya gride ya 940px isanzwe, yanditse hejuru. Ibihinduka byose kuri gride bibitswe mubihinduka.less.

Uburyo bwo guhitamo

Guhindura gride bisobanura guhindura ibintu bitatu @grid*bihinduka no gusubiramo Bootstrap. Hindura grid ihindagurika mubihinduka.nta kandi ukoreshe bumwe muburyo bune bwanditse kugirango usubiremo . Niba wongeyeho inkingi nyinshi, menya neza ko wongera CSS kubari muri grid.less.

Gukomeza kwitabira

Guhindura gride ikora gusa kurwego rusanzwe, gride ya 940px. Kugirango ugumane ibintu bisubiza muri Bootstrap, ugomba kandi guhitamo gride mubisubizo.less.

Imiterere Inyandikorugero Yibanze yo gukora Urubuga

Imiterere ihamye

Mburabuzi kandi yoroshye 940px-ubugari, imiterere igizwe nurubuga rwose cyangwa page yatanzwe numwe <div class="container">.

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

Imiterere y'amazi

<div class="container-fluid">itanga urupapuro rworoshye, min- na max-ubugari, hamwe nibumoso. Nibyiza kuri porogaramu na doc.

  1. <div class = "kontineri-fluid" > 
  2.   <div class = "umurongo-utemba" > 
  3.     <div class = "span2" > 
  4.       <! - Ibirimo kuruhande ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - Ibiri mu mubiri ->
  8.     </div>
  9.   </div>
  10. </div>

Igishushanyo mbonera cyitangazamakuru kubibazo byibikoresho bitandukanye

Ibikoresho byitabira

Ibyo bakora

Ibibazo byibitangazamakuru byemerera CSS yihariye ishingiye kubintu byinshi - ibipimo, ubugari, ubwoko bwerekana, nibindi - ariko mubisanzwe byibanda hafi min-widthna max-width.

  • Hindura ubugari bwinkingi muri gride yacu
  • Shyira ibintu aho kureremba aho bikenewe hose
  • Hindura imitwe hamwe ninyandiko kugirango bibe byiza kubikoresho

Koresha ibibazo byitangazamakuru ushishoze kandi gusa nkintangiriro kubakurikirana mobile. Kubikorwa binini, tekereza kode yabigenewe ntabwo ari ibice byibibazo byibitangazamakuru.

Ibikoresho bishyigikiwe

Bootstrap ishyigikira urutonde rwibibazo byitangazamakuru muri dosiye imwe kugirango ifashe gukora imishinga yawe neza kubikoresho bitandukanye no gukemura ibyemezo. Dore ibirimo:

Ikirango Ubugari bw'imiterere Ubugari bw'inkingi Ubugari
Amaterefone 480px no hepfo Inkingi zamazi, nta bugari bwagenwe
Terefone igendanwa 767px no hepfo Inkingi zamazi, nta bugari bwagenwe
Ibishushanyo mbonera 768px no hejuru 42px 20px
Mburabuzi 980px no hejuru 60px 20px
Kugaragaza binini 1200px no hejuru 70px 30px

Irasaba meta tag

Kugirango ibikoresho byerekana impapuro zishubije neza, shyiramo icyerekezo cya meta tag.

  1. <meta izina = "kureba" ibirimo = "ubugari = igikoresho-ubugari, intangiriro-igipimo = 1.0" >

Gukoresha ibibazo by'itangazamakuru

Bootstrap ntabwo ihita ikubiyemo ibyo bibazo byitangazamakuru, ariko kubyumva no kubyongera biroroshye cyane kandi bisaba gushiraho bike. Ufite amahitamo make yo gushiramo ibiranga ibisubizo bya Bootstrap:

  1. Koresha verisiyo yakusanyirijwe hamwe, bootstrap-yitabira.css
  2. Ongeraho @import "yishura.less" hanyuma usubiremo Bootstrap
  3. Hindura kandi usubize ibisubizo.nkindi nka dosiye itandukanye

Ubona gute ushizemo gusa? Ukuri kuvugwe, ntabwo ibintu byose bigomba kwitabwaho. Aho gushishikariza abitezimbere gukuraho iyi miterere, dusanga ari byiza kuyishoboza.

  1.   // Amaterefone yimiterere no hepfo
  2.   @media ( max - ubugari : 480px ) { ... }     
  3.  
  4.   // Terefone nyaburanga kugirango igaragaze tablet
  5.   @media ( max - ubugari : 768px ) { ... }     
  6.  
  7.   // Igishushanyo cyerekana ibishushanyo mbonera hamwe na desktop
  8.   @media ( min - ubugari : 768px ) na ( max - ubugari : 980px ) { ... }        
  9.  
  10.   // Ibiro binini
  11.   @media ( min - ubugari : 1200px ) { .. }

Ibyiciro byingirakamaro byamasomo

Niki

Kugirango iterambere ryihuta-rigendanwa, koresha aya masomo yingirakamaro yo kwerekana no guhisha ibintu ukoresheje ibikoresho.

Igihe cyo gukoresha

Koresha muburyo buke kandi wirinde gukora verisiyo zitandukanye zurubuga rumwe. Ahubwo, koresha kugirango wuzuze buri gikoresho cyerekana.

Kurugero, urashobora kwerekana ikintu <select>cya nav kumiterere ya mobile, ariko ntabwo iri kuri tablet cyangwa desktop.

Shigikira amasomo

Hano herekanwa imbonerahamwe yamasomo dushyigikiye ningaruka zabyo kubibazo byatanzwe mubitangazamakuru (byashyizweho nigikoresho). Bashobora kuboneka muri responsive.less.

Icyiciro Terefone480px no hepfo Ibinini767px no hepfo Ibiro768px no hejuru
.visible-phone Biboneka
.visible-tablet Biboneka
.visible-desktop Biboneka
.hidden-phone Biboneka Biboneka
.hidden-tablet Biboneka Biboneka
.hidden-desktop Biboneka Biboneka

Urubanza

Hindura amashusho yawe cyangwa umutwaro kubikoresho bitandukanye kugirango ugerageze ibice byavuzwe haruguru.

Biboneka ku ...

  • TerefoneOne Terefone
  • TabletTablet
  • IbiroIbiro

Hihishe ku ...

  • TerefoneOne Terefone
  • TabletTablet
  • IbiroIbiro