Ihe mkpuchi

Chọrọ HTML5 doctype

Bootstrap na-eji ụfọdụ ihe HTML yana akụrụngwa CSS chọrọ iji HTML5 doctype. Tinye ya na mmalite nke ọrụ gị niile.

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

Ederede na njikọ

Bootstrap na-esetịpụ ihe ngosi zuru ụwa ọnụ, akwụkwọ edemede na ụdị njikọ. Kpọmkwem, anyị:

Wepu marginna ahu
Tọọ background-color: white;nabody
Jiri @baseFontFamily, @baseFontSize, na @baseLineHeightnjirimara dị ka ntọala ederede anyị
Tọọ ụcha njikọ zuru ụwa ọnụ site @linkColorna ma tinye akara njikọ naanị na:hover

Enwere ike ịchọta ụdị ndị a n'ime scaffolding.less .

Tọgharịa site na Normalize

Site na Bootstrap 2, ahapụla ngọngọ nrụpụta ochie ahụ maka Normalize.css , ọrụ Nicolas Gallagher na Jonathan Neal nke na-ejikwa HTML5 Boilerplate . Mgbe anyị na-eji ọtụtụ nke Normalize n'ime anyị reset.less , anyị ewepụwo ụfọdụ ọcha kpọmkwem maka Bootstrap.

Ihe atụ grid dị ndụ

Sistemụ grid Bootstrap ndabara na-eji kọlụm iri na abụọ , na-eme maka akpa obosara 940px na-enweghị njiri nzaghachi . Site na faịlụ CSS na-anabata agbakwunyere, grid na-agbanwe ka ọ bụrụ 724px na 1170px n'obosara dabere na nleba anya gị. N'okpuru ebe nlele 767px, ogidi ndị ahụ na-aghọ mmiri ma kpokọta na kwụ ọtọ.

HTML grid bụ isi

Maka nhazi kọlụm abụọ dị mfe, mepụta .rowma tinye ọnụ ọgụgụ .span*ogidi kwesịrị ekwesị. Dị ka nke a bụ grid 12-ogidi, nke ọ bụla .span*na-agbatị ọnụ ọgụgụ nke kọlụm iri na abụọ ahụ, ma na-agbakwụnye mgbe niile ruo 12 maka ahịrị ọ bụla (ma ọ bụ ọnụ ọgụgụ nke ogidi na nne na nna).

<div klas = "ahịrị" > 
  <div klas = "span4" > ... </div> 
  <div klas = "span8" > ... </div> 
</div>

Nyere ihe atụ a, anyị nwere .span4na .span8, na-eme maka 12 ngụkọta ogidi na a ahịrị zuru ezu.

Kọlụm na-emezigharị

Bugharịa ogidi gaa n'aka nri site na iji .offset*klaasị. Klas ọ bụla na-abawanye akụkụ aka ekpe nke kọlụm site na otu kọlụm dum. Dịka ọmụmaatụ, .offset4na-ebugharị .span4n'elu ogidi anọ.

3 nke 2

3 nke 1

3 nke 2

6 nke 3

<div klas = "ahịrị" > 
  <div klas = "span4" > ... </div> 
  <div klas = "span3 offset2" > ... </div> 
</div>

Ogidi akwụ

Iji grid ndabara tinye akwu ọdịnaya gị, tinye nke ọhụrụ .rowna nhazi .span*kọlụm n'ime .span*kọlụm dị adị. Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm nke gbakwụnye na ọnụọgụ ogidi nne na nna ya.

Ọkwa 1 kọlụm

Ọkwa 2

<div klas = "ahịrị" > 
  <div klas = "span9" > 
    Ọkwa 1 kọlụm
    <div klas = "ahịrị" > 
      <div class = "span6" > Ọkwa 2 </div> 
      <div class = "span3" > Ọkwa 2 </div> 
    </div>
  </div>
</div>

Ihe atụ grid mmiri dị ndụ

Sistemụ grid mmiri na-eji pasentị karịa pikselụ maka obosara kọlụm. Ọ nwere otu ikike nzaghachi dị ka sistemu grid anyị, na-agba mbọ hụ na oke nha maka mkpebi na ngwaọrụ ihuenyo isi.

HTML mmiri grid bụ isi

Mee ahịrị ọ bụla "mmiri" site na ịgbanwe .rowgaa .row-fluid. Klas kọlụm na-anọ otu ahụ, na-eme ka ọ dị mfe ịtụgharị n'etiti grids edoziri na mmiri.

<div klas = "ahịhịa-mmiri mmiri" > 
  <div klas = "span4" > ... </div> 
  <div klas = "span8" > ... </div> 
</div>

Mwepu mmiri

Na-arụ ọrụ n'otu ụzọ ahụ dị ka nkwụsị nke sistemu grid a kapịrị ọnụ: gbakwunye .offset*na kọlụm ọ bụla iji mebie site na ọtụtụ kọlụm ahụ.

4 nke 4

3 nke 3

6 nke 6

<div klas = "ahịhịa-mmiri mmiri" > 
  <div klas = "span4" > ... </div> 
  <div klas = "span4 offset2" > ... </div> 
</div>

Ntọ mmiri mmiri

Igwe mmiri mmiri na-eji nesting dị iche iche: ọkwa nke kọlụm ọ bụla etinyere kwesịrị ịgbakwụnye ihe ruru ogidi iri na abụọ. Nke a bụ n'ihi na grid mmiri na-eji pasentị, ọ bụghị pikselụ, maka ịtọ obosara.

Mmiri 12

Mmiri mmiri 6

<div klas = "ahịhịa-mmiri mmiri" > 
  <div klas = "span12" > 
    Mmiri 12
    <div klas = "ahịhịa-mmiri mmiri" > 
      <div klas = "span6" > 
        Mmiri mmiri 6
        <div klas = "ahịhịa-mmiri mmiri" > 
          <div class = "span6" > Mmiri mmiri 6 </ div> 
          <div class = "span6" > Mmiri mmiri 6 </ div> 
        </div>
      </div>
      <div class = "span6" > Mmiri mmiri 6 </ div> 
    </div>
  </div>
</div>

Nhazi edoziri

Na-enye okirikiri nhọrọ ukwuu obosara (na nhọrọ na-anabata) naanị <div class="container">achọrọ.

<ahụ>
  <div klas = "container" > 
    ...
  </div>
</ ahu>

Nhazi mmiri mmiri

Mepụta mmiri mmiri, ibe kọlụm abụọ - nke dị mma <div class="container-fluid">maka ngwa na akwụkwọ.

<div class = "container-fluid" > 
  <div klas = "ahịhịa-mmiri mmiri" > 
    <div klas = "span2" > 
      <!--Ọdịnaya dị n'akụkụ-->
    </div>
    <div klas = "span10" > 
      <!--Ọdịnaya nke ahụ-->
    </div>
  </div>
</div>

Na-eme atụmatụ nzaghachi

Gbanwuo CSS na-anabata ọrụ n'ime ọrụ gị site na itinye mkpado meta kwesịrị ekwesị yana ụdị ụdị agbakwunyere n'ime akwụkwọ <head>gị. Ọ bụrụ na ị chịkọtala Bootstrap site na ibe hazie, naanị mkpado meta ka ị ga-achọ.

<meta aha = ọdịnaya "viewport" = "obosara = obosara ngwaọrụ, mbido-ọnụahịa = 1.0" >  
<njikọ href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Welie isi elu!Bootstrap anaghị agụnye njirimara na-anabata na ndabara n'oge a n'ihi na ọ bụghị ihe niile kwesịrị anabata. Kama ịgba ndị mmepe ume ka ha wepụ njirimara a, anyị na-eche na ọ kacha mma iji mee ya ka ọ dị mkpa.

Banyere Bootstrap na-anabata

Ajụjụ mgbasa ozi na-enye ohere maka CSS omenala dabere n'ọtụtụ ọnọdụ-oke, obosara, ụdị ngosi, wdg-mana na-elekwasịkarị anya gburugburu min-widthyana max-width.

Gbanwee obosara nke kọlụm na grid anyị
Kpọkọta ihe kama ịse n'elu ebe ọ bụla dị mkpa
Hazie isi na ederede ka ọ dabara adaba maka ngwaọrụ

Jiri ajụjụ mgbasa ozi mee ihe n'ụzọ ziri ezi yana naanị ka mmalite nye ndị na-ege ekwentị gị. Maka nnukwu ọrụ, tụlee ntọala koodu raara onwe ya nye ọ bụghị n'ọkwa nke ajụjụ mgbasa ozi.

Ngwaọrụ akwadoro

Bootstrap na-akwado ọtụtụ ajụjụ mgbasa ozi n'otu faịlụ iji nyere aka mee ka ọrụ gị dabara adaba na ngwaọrụ dị iche iche yana mkpebi ihuenyo. Nke a bụ ihe gụnyere:

Labelụ	Obosara okirikiri	Obosara kọlụm	Obosara gutter
Nnukwu ngosi	1200px na elu	70px	30px
Ọdabara	980px na elu	60px	20px
Mbadamba nkume eserese	768px na n'elu	42px	20px
Ekwentị na mbadamba	767px na n'okpuru	Ogidi mmiri mmiri, enweghị obosara edoziri
Ekwentị	480px na n'okpuru	Ogidi mmiri mmiri, enweghị obosara edoziri

/* Nnukwu desktọpụ */
@media ( nkeji - obosara : 1200px ) { ... }     
 
/* Mbadamba ụrọ eserese na odida obodo na desktọpụ */
@media ( min - obosara : 768px ) na ( max - obosara : 979px ) { ... }        
 
/* Ekwentị ọdịdị ala ka ọ bụrụ mbadamba ihe osise */
@media ( max - obosara : 767px ) { ... }     
 
/* Ekwentị ala na ala */
@media ( max - obosara : 480px ) { ... }

Klas mkpa na-anabata

Maka mmepe enyi na enyi mkpanaka ngwa ngwa, jiri klaasị mmekọ ndị a maka igosi na zoo ọdịnaya site na ngwaọrụ. N'okpuru ebe a bụ tebụl nke klaasị dị yana mmetụta ha na nhazi ajụjụ mgbasa ozi enyere (nke eji akpọ ya). Enwere ike ịchọta ha na responsive.less.

Klas	Ekwentị767px na n'okpuru	Mbadamba ụrọ979px ruo 768px	DesktọpụỌdabara
`.visible-phone`	Na-ahụ anya	Zoro ezo	Zoro ezo
`.visible-tablet`	Zoro ezo	Na-ahụ anya	Zoro ezo
`.visible-desktop`	Zoro ezo	Zoro ezo	Na-ahụ anya
`.hidden-phone`	Zoro ezo	Na-ahụ anya	Na-ahụ anya
`.hidden-tablet`	Na-ahụ anya	Zoro ezo	Na-ahụ anya
`.hidden-desktop`	Na-ahụ anya	Na-ahụ anya	Zoro ezo

Mgbe iji

Jiri na obere ndabere ma zere ịmepụta ụdị dị iche iche nke otu saịtị ahụ. Kama, jiri ha meju ihe ngosi ngwaọrụ ọ bụla. E kwesịghị iji ihe ndị na-anabata ihe mee ihe na tebụl, ya mere, anaghị akwado ya.

Nleba anya ule ngwa ngwa

Hagharịa nha ihe nchọgharị gị ma ọ bụ buo ya na ngwaọrụ dị iche iche iji nwalee klas ndị dị n'elu.

A na-ahụ anya na...

Akara akwụkwọ ndụ akwụkwọ ndụ na-egosi na a na-ahụ klaasị na nleba anya gị ugbu a.

Ekwentị✔ Ekwentị
Mbadamba ụrọ✔ Mbadamba ụrọ
Desktọpụ✔ Desktọpụ

Ezoro na...

N'ebe a, akara akwụkwọ ndụ akwụkwọ ndụ na-egosi na klaasị zoro ezo na nlegharị anya gị ugbu a.

Ekwentị✔ Ekwentị
Mbadamba ụrọ✔ Mbadamba ụrọ
Desktọpụ✔ Desktọpụ

Ntọala zuru ụwa ọnụ