Scafolding · Bootstrap ya Twitter mu Rwanda

Irasaba inyandiko ya HTML5

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

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

Imyandikire hamwe

Bootstrap ishyiraho ibyingenzi byerekanwe kwisi, 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 ihuza ibara unyuze @linkColorhanyuma ushyire kumurongo kumurongo gusa:hover

Ubu buryo bushobora kuboneka muri scafolding.less .

Ongera usubire muri Normalize

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

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

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

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

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

Kureka inkingi

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

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "umurongo" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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.

Urugero

Hano .span4inkingi ebyiri zashyizwe zashyizwe muri a .span8.

Urwego 1 rwinkingi

Urwego 2

<div class = "umurongo" > 
  <div class = "span9" > 
    Urwego 1
    <div class = "umurongo" > 
      <div class = "span6" > Urwego 2 </div> 
      <div class = "span3" > Urwego 2 </div> 
    </div>
  </div>
</div>

Urugero rwamazi ya gride urugero

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

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.

<div class = "umurongo-utemba" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Kuzimya amazi

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

4 offset 4

3 offset 3

6 offset 6

<div class = "umurongo-utemba" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Icyari cyamazi

Gutera hamwe na gride ya fluid iratandukanye gato: umubare winkingi zashyizwe ntugomba guhura numubare wababyeyi. Ahubwo, buri rwego rwinkingi zometseho zisubirwamo kuko buri murongo ufata 100% byababyeyi.

Amazi 12

Amazi 6

<div class = "umurongo-utemba" > 
  <div class = "span12" > 
    Urwego 1 rwinkingi
    <div class = "umurongo-utemba" > 
      <div class = "span6" > Urwego 2 </div> 
      <div class = "span6" > Urwego 2 </div> 
    </div>
  </div>
</div>

Imiterere ihamye

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

<body>
  <div class = "kontineri" > 
    ...
  </div>
</body>

Imiterere y'amazi

Kora amazi, urupapuro rwinkingi ebyiri hamwe <div class="container-fluid">-gukoresha porogaramu na doc.

<div class = "kontineri-fluid" > 
  <div class = "umurongo-utemba" > 
    <div class = "span2" > 
      <! - Ibirimo kuruhande ->
    </div>
    <div class = "span10" > 
      <! - Ibiri mu mubiri ->
    </div>
  </div>
</div>

Gushoboza ibintu bisubiza

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

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

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

Kubijyanye na Bootstrap

Ibibazo byitangazamakuru 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 byibitangazamakuru muri dosiye imwe kugirango ifashe gukora imishinga yawe neza kubikoresho bitandukanye no gukemura ecran. Dore ibirimo:

Ikirango	Ubugari bw'imiterere	Ubugari bw'inkingi	Ubugari
Terefone	480px no hepfo	Inkingi zamazi, nta bugari bwagenwe
Terefone kuri tableti	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

/ * Amaterefone yimiterere no hepfo * /
@media ( max - ubugari : 480px ) { ... }     
 
/ * Terefone igendanwa kugirango igaragaze tablet * /
@media ( max - ubugari : 767px ) { ... }     
 
/ * Igishushanyo mbonera cyerekana ibishushanyo na desktop * /
@media ( min - ubugari : 768px ) na ( max - ubugari : 979px ) { ... }        
 
/ * Ibiro binini * /
@media ( min - ubugari : 1200px ) { ... }

Ibyiciro byingirakamaro byamasomo

Kugirango iterambere ryihuta-ryimikorere, koresha aya masomo yingirakamaro kugirango werekane kandi uhishe ibirimo 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	Hihishe	Hihishe
`.visible-tablet`	Hihishe	Biboneka	Hihishe
`.visible-desktop`	Hihishe	Hihishe	Biboneka
`.hidden-phone`	Hihishe	Biboneka	Biboneka
`.hidden-tablet`	Biboneka	Hihishe	Biboneka
`.hidden-desktop`	Biboneka	Biboneka	Hihishe

Igihe cyo gukoresha

Koresha muburyo buke kandi wirinde gukora verisiyo zitandukanye zurubuga rumwe. Ahubwo, ubikoreshe kugirango wuzuze igikoresho cyose.

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

Gukubita

Igenamiterere ryisi yose