Bootstrap

Gukubita

Bootstrap yubatswe kumurongo 12 winkingi ya gride, imiterere, nibigize.

Igenamiterere ryisi yose

Irasaba inyandiko ya HTML5

Bootstrap ikoresha ibintu bimwe na bimwe bya HTML hamwe na CSS isaba gukoresha inyandiko ya HTML5. Shyiramo intangiriro yimishinga yawe yose.

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

Imyandikire hamwe

Bootstrap ishyiraho ibanze kwisi yose, imyandikire, hamwe nuburyo bwo guhuza. By'umwihariko, twe:

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

Ubu buryo bushobora kuboneka muri scafolding.less .

Ongera usubire muri Normalize

Hamwe na Bootstrap 2, guhagarika gusubiramo bishaje byavanyweho kugirango Normalize.css , umushinga wa Nicolas Gallagher na Jonathan Neal nawo uha ingufu Boilerplate ya HTML5 . Mugihe dukoresha byinshi Mubisanzwe muri reset.less , twakuyeho ibintu bimwe na bimwe kuri Bootstrap.

Sisitemu isanzwe ya sisitemu

Urugero rwa gride

Ubusanzwe Bootstrap grid sisitemu ikoresha inkingi 12 , ikora kubintu 940px yagutse idafite ibintu byitabiriwe byashobotse. Hamwe na dosiye ya CSS yitabiriwe yongeyeho, gride ihuza kuba 724px na 1170px mugari ukurikije uko ubona. Munsi ya 767px yo kureba, inkingi zihinduka amazi kandi zigahagarara neza.

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

Urubuga rwibanze HTML

Kuburyo bworoshye bubiri inkingi, kora a .rowhanyuma wongere umubare ukwiye .span*winkingi. Nkuko iyi ari 12-inkingi ya gride, buriwese .span*uzenguruka umubare wizo nkingi 12, kandi ugomba guhora wongeyeho 12 kuri buri murongo (cyangwa umubare winkingi mubabyeyi).

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

Urebye uru rugero, dufite .span4kandi .span8, dukora inkingi 12 zose hamwe numurongo wuzuye.

Kureka inkingi

Himura inkingi iburyo ukoresheje .offset*amasomo. Buri cyiciro cyongera ibumoso bwinkingi yinkingi yose. Kurugero, .offset4yimuka .span4hejuru yinkingi enye.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "umurongo" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Inkingi

Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .rowkandi ushireho .span*inkingi muburyo buriho .span*. Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kumubare winkingi zababyeyi.

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

Sisitemu ya gride

Urugero rwamazi ya gride urugero

Sisitemu ya grid sisitemu ikoresha ijanisha aho kuba pigiseli kubugari bwinkingi. Ifite ubushobozi bumwe bwo gusubiza nka sisitemu ya gride ya sisitemu ihamye, yemeza ibipimo bikwiye bya ecran ya ecran n'ibikoresho.

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

Urubuga rwibanze rwamazi HTML

Kora umurongo uwo ariwo wose "fluid" uhindura .rowkuri .row-fluid. Inkingi ibyiciro bigumaho kimwe, byoroshye guhinduranya hagati ya gride itunganijwe kandi itemba.

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

Kuzimya amazi

Ikora kimwe na grid sisitemu ihamye yo guhagarika: ongeraho .offset*inkingi iyo ari yo yose kugirango uhagarike nizo nkingi nyinshi.

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

Icyari cyamazi

Imiyoboro ya fluide ikoresha ibyari bitandukanye: buri cyiciro cyateganijwe cyinkingi kigomba kongerwaho inkingi 12. Ibi ni ukubera ko gride ya fluid ikoresha ijanisha, ntabwo ari pigiseli, mugushiraho ubugari.

Amazi 12
Amazi 6
Amazi 6
Amazi 6
Amazi 6 
  1. <div class = "umurongo-utemba" > 
  2.   <div class = "span12" > 
  3.     Amazi 12
  4.     <div class = "umurongo-utemba" > 
  5.       <div class = "span6" > 
  6.         Amazi 6
  7.         <div class = "umurongo-utemba" > 
  8.           <div class = "span6" > Amazi 6 </div> 
  9.           <div class = "span6" > Amazi 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Amazi 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Imiterere

Imiterere ihamye

Itanga imiterere-yubugari rusange (kandi birashoboka ko isubiza) imiterere <div class="container">ikenewe gusa.

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

Imiterere y'amazi

Kora amazi, urupapuro rwinkingi ebyiri hamwe <div class="container-fluid">-gukoresha 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

Gushoboza ibintu bisubiza

Fungura CSS yitabira mumushinga wawe ushizemo meta ikwiye hamwe nurupapuro rwinyongera murwego <head>rwinyandiko yawe. Niba warateguye Bootstrap kuva kurupapuro rwa Customize, ukeneye gushyiramo meta gusa.

  1. <meta izina = "kureba" ibirimo = "ubugari = igikoresho-ubugari, intangiriro-igipimo = 1.0" >  
  2. <ihuza href = "umutungo / css / bootstrap-yitabira.css" rel = "urupapuro rwerekana "

Umutwe!Bootstrap ntabwo ikubiyemo ibintu byitondewe kubisanzwe muriki gihe kuko ntabwo byose bigomba kuba byitabirwa. Aho gushishikariza abitezimbere gukuraho iyi miterere, dusanga ari byiza kuyishoboza nkuko bikenewe.

Kubijyanye na Bootstrap

Ibikoresho byitabira

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

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
Kugaragaza binini 1200px no hejuru 70px 30px
Mburabuzi 980px no hejuru 60px 20px
Ibishushanyo mbonera 768px no hejuru 42px 20px
Terefone kuri tableti 767px no hepfo Inkingi zamazi, nta bugari bwagenwe
Terefone 480px no hepfo Inkingi zamazi, nta bugari bwagenwe 
  1. / * Ibiro binini * /
  2. @media ( min - ubugari : 1200px ) { ... }     
  3.  
  4. / * Igishushanyo cyerekana ibishushanyo mbonera na desktop * /
  5. @media ( min - ubugari : 768px ) na ( max - ubugari : 979px ) { ... }        
  6.  
  7. / * Terefone igendanwa kugirango igaragaze tablet * /
  8. @media ( max - ubugari : 767px ) { ... }     
  9.  
  10. / * Amaterefone yimiterere no hepfo * /
  11. @media ( max - ubugari : 480px ) { ... }

Ibyiciro byingirakamaro byamasomo

Kugirango iterambere ryihuta-ryimikorere, koresha aya masomo yingirakamaro kugirango werekane kandi uhishe ibiri kubikoresho. Hasi nimbonerahamwe yamasomo aboneka ningaruka zabyo kubibazo byatanzwe mubitangazamakuru (byashyizweho nigikoresho). Bashobora kuboneka muri responsive.less.

Icyiciro Terefone767px no hepfo Ibinini979px kugeza 768px IbiroMburabuzi
.visible-phone Biboneka
.visible-tablet Biboneka
.visible-desktop Biboneka
.hidden-phone Biboneka Biboneka
.hidden-tablet Biboneka Biboneka
.hidden-desktop Biboneka Biboneka

Igihe cyo gukoresha

Koresha muburyo buke kandi wirinde gukora verisiyo zitandukanye zurubuga rumwe. Ahubwo, koresha kugirango wuzuze buri gikoresho cyerekana. Ibikorwa byingirakamaro ntibigomba gukoreshwa hamwe nameza, kandi nkibyo ntibishyigikiwe.

Ikibazo cyibikorwa byingirakamaro

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

Biboneka ku ...

Icyatsi kibisi cyerekana ko icyiciro kigaragara muburyo bwawe bwo kureba.

  • TerefoneOne Terefone
  • TabletTablet
  • IbiroIbiro

Hihishe ku ...

Hano, icyatsi kibisi cyerekana ko urwego rwihishe muburyo bwawe bwo kureba.

  • TerefoneOne Terefone
  • TabletTablet
  • IbiroIbiro