eriri akpụkpọ ụkwụ

Ihe mkpuchi

Ewubere bootstrap na grid kọlụm iri na abụọ na-anabata, nhazi, na akụrụngwa.

Welie isi elu! Dọkịta ndị a bụ maka v2.3.2, nke anaghịzi akwado ọchịchị. Lelee ụdị Bootstrap kachasị ọhụrụ!

Ntọala zuru ụwa ọnụ

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.

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

Sistemụ grid akpaghị aka

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

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

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

  1. <div klas = "ahịrị" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span8" > ... </div> 
  4. </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ọ.

4
3 nke 2
3 nke 1
3 nke 2
6 nke 3 
  1. <div klas = "ahịrị" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span3 offset2" > ... </div> 
  4. </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
Ọkwa 2 
  1. <div klas = "ahịrị" > 
  2.   <div klas = "span9" > 
  3.     Ọkwa 1 kọlụm
  4.     <div klas = "ahịrị" > 
  5.       <div class = "span6" > Ọkwa 2 </div> 
  6.       <div class = "span3" > Ọkwa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistemụ grid mmiri

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.

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

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.

  1. <div klas = "ahịhịa-mmiri mmiri" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span8" > ... </div> 
  4. </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
4 nke 4
3 nke 3
3 nke 3
6 nke 6 
  1. <div klas = "ahịhịa-mmiri mmiri" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span4 offset2" > ... </div> 
  4. </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
Mmiri mmiri 6
Mmiri mmiri 6
Mmiri mmiri 6 
  1. <div klas = "ahịhịa-mmiri mmiri" > 
  2.   <div klas = "span12" > 
  3.     Mmiri 12
  4.     <div klas = "ahịhịa-mmiri mmiri" > 
  5.       <div klas = "span6" > 
  6.         Mmiri mmiri 6
  7.         <div klas = "ahịhịa-mmiri mmiri" > 
  8.           <div class = "span6" > Mmiri mmiri 6 </ div> 
  9.           <div class = "span6" > Mmiri mmiri 6 </ div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Mmiri mmiri 6 </ div> 
  13.     </div>
  14.   </div>
  15. </div>

Nhazi

Nhazi edoziri

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

  1. <ahụ>
  2.   <div klas = "container" > 
  3.     ...
  4.   </div>
  5. </ 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ọ.

  1. <div class = "container-fluid" > 
  2.   <div klas = "ahịhịa-mmiri mmiri" > 
  3.     <div klas = "span2" > 
  4.       <!--Ọdịnaya dị n'akụkụ-->
  5.     </div>
  6.     <div klas = "span10" > 
  7.       <!--Ọdịnaya nke ahụ-->
  8.     </div>
  9.   </div>
  10. </div>

Nhazi na-anabata

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

  1. <meta aha = ọdịnaya "viewport" = "obosara = obosara ngwaọrụ, mbido-ọnụahịa = 1.0" >  
  2. <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

Ngwaọrụ 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 
  1. /* Nnukwu desktọpụ */
  2. @media ( nkeji - obosara : 1200px ) { ... }     
  3.  
  4. /* Mbadamba ụrọ eserese na odida obodo na desktọpụ */
  5. @media ( min - obosara : 768px ) na ( max - obosara : 979px ) { ... }        
  6.  
  7. /* Ekwentị ọdịdị ala ka ọ bụrụ mbadamba ihe osise */
  8. @media ( max - obosara : 767px ) { ... }     
  9.  
  10. /* Ekwentị ala na ala */
  11. @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
.visible-tablet Na-ahụ anya
.visible-desktop Na-ahụ anya
.hidden-phone Na-ahụ anya Na-ahụ anya
.hidden-tablet Na-ahụ anya Na-ahụ anya
.hidden-desktop Na-ahụ anya Na-ahụ anya

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ụ