eriri akpụkpọ ụkwụ

Ihe mkpuchi

Ewubere bootstrap na grid kọlụm iri na abụọ na-anabata ya. Anyị gụnyekwara nhazi obosara nke edoziri na mmiri dabere na sistemụ ahụ.

Ụdị zuru ụwa ọnụ maka nrụpụta CSS, typography, na njikọ

Chọrọ HTML5 doctype

Bootstrap na-eji ihe HTML na akụrụngwa CSS nke chọrọ iji HTML5 doctype. Jide n'aka na itinye ya na mmalite nke ibe Bootstrapped ọ bụla na ọrụ gị.

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

Ederede na njikọ

N'ime faịlụ scaffolding.less , anyị na-edobe ihe ngosi zuru ụwa ọnụ, edemede na ụdị njikọ. Kpọmkwem, anyị:

  • Wepu oke na ahụ
  • 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

Tọgharịa site na Normalize

Dị ka nke Bootstrap 2, nrụpụta omenala CSS amalitela iji ihe sitere na Normalize.css , ọrụ Nicolas Gallagher nke na-enyekwa ike HTML5 Boilerplate .

Enwere ike ịhụ nrụpụta ọhụrụ ahụ na reset.less , mana enwere ọtụtụ ihe wepụrụ maka nkenke na izi ezi.

Sistemụ grid akpaghị aka 12 kọlụm nwere ntụgharị na-anabata

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

Sistemụ grid ndabara enyere na Bootstrap na-eji kọlụm iri na abụọ na-ewepụta na obosara nke 724px, 940px (ndabara na-enweghị CSS na-anabata gụnyere), yana 1170px. N'okpuru ebe nlele 767px, ogidi ndị ahụ na-aghọ mmiri ma kpokọta na kwụ ọtọ.

  1. <div klas = "ahịrị" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span8" > ... </div> 
  4. </div>

Dịka egosiri n'ebe a, enwere ike ịmepụta okirikiri nhọrọ ukwuu yana "ogidi" abụọ, nke ọ bụla na-agbakọ ọnụ ọgụgụ nke kọlụm 12 ntọala anyị kọwara dịka akụkụ nke usoro grid anyị.


Kọlụm na-emezigharị

4
4 nke 4
3 nke 3
3 nke 3
8 nke 4 
  1. <div klas = "ahịrị" > 
  2.   <div klas = "span4" > ... </div> 
  3.   <div klas = "span4 offset4" > ... </div> 
  4. </div>

Ogidi akwụ

Site na sistemu grid static (na-abụghị mmiri mmiri) na Bootstrap, akwu dị mfe. Ka akwu ọdịnaya gị, dị nnọọ tinye ọhụrụ .rowna set nke .span*ogidi n'ime otu .span*kọlụm dị.

Ọmụmaatụ

Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm nke gbakwụnye na ọnụọgụ ogidi nne na nna ya. Dịka ọmụmaatụ, .span3ekwesịrị idowe ogidi abụọ akwụsịrị n'ime .span6.

Ọkwa 1 nke kọlụm
Ọkwa 2
Ọkwa 2 
  1. <div klas = "ahịrị" > 
  2.   <div klas = "span6" > 
  3.     Ọkwa 1 kọlụm
  4.     <div klas = "ahịrị" > 
  5.       <div class = "span3" > Ọkwa 2 </div> 
  6.       <div class = "span3" > Ọkwa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistemụ grid mmiri 12 na-anabata, kọlụm dabere na pasentị

Ogidi mmiri mmiri

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

Pasent, ọ bụghị pikselụ

Sistemụ grid mmiri na-eji pasentị maka obosara kọlụm kama ịbụ pikselụ edobere. Ọ nwekwara ụdị nzaghachi dị iche iche dị ka sistemụ grid anyị, na-agba mbọ hụ na nha nha kwesịrị ekwesị maka mkpebi ihuenyo na ngwaọrụ.

Ahịrị mmiri mmiri

Mee ka ahịrị ọ bụla nwee mmiri mmiri naanị site na ịgbanwe .rowgaa .row-fluid. Ogidi ndị ahụ na-adị otu, na-eme ka ọ dị oke nfe ka ọ tụgharịa n'etiti nhazi nke edoziri na nke mmiri.

Akara akara

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

Ntọ mmiri mmiri

Ịgba ọnụ na grid mmiri dịtụ iche: ọnụ ọgụgụ nke kọlụm akwụghị ụgwọ ka ọ dabara na nne na nna. Kama, a na-emegharị kọlụm gị na ọkwa ọ bụla n'ihi na ahịrị ọ bụla na-ewe 100% nke kọlụm nne na nna.

Mmiri 12
Mmiri mmiri 6
Mmiri mmiri 6 
  1. <div klas = "ahịhịa-mmiri mmiri" > 
  2.   <div klas = "span12" > 
  3.     Ọkwa 1 nke kọlụm
  4.     <div klas = "ahịhịa-mmiri mmiri" > 
  5.       <div class = "span6" > Ọkwa 2 </div> 
  6.       <div class = "span6" > Ọkwa 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Nhazi grid

Na-agbanwe agbanwe Uru ndabara Nkọwa
@gridColumns 12 Ọnụọgụ nke ogidi
@gridColumnWidth 60px Obosara nke kọlụm ọ bụla
@gridGutterWidth 20px Oghere adịghị mma n'etiti kọlụm

Mgbanwe na LESS

Ewubere n'ime Bootstrap bụ ọnụ ọgụgụ dị nta nke mgbanwe maka ịhazi sistemu grid 940px ndabara, edepụtara n'elu. A na-echekwa mgbanwe niile maka grid na variables.less.

Otu esi hazie

Ịgbanwe grid pụtara ịgbanwe mgbanwe atọ @grid*na ịchịkọta Bootstrap. Gbanwee mgbanwe grid na variables.less ma jiri otu n'ime ụzọ anọ edekọtara iji chịkọta . Ọ bụrụ na ị na-agbakwunye kọlụm ndị ọzọ, jide n'aka na ịtinye CSS maka ndị nọ na grid.less.

Ịnọgide na-anabata

Nhazi nke grid na-arụ ọrụ naanị na ọkwa ndabara, grid 940px. Iji jikwaa akụkụ na-anabata nke Bootstrap, ị ga-ahazikwa grid na nzaghachi.less.

Nhazi ndebiri iji mepụta ibe weebụ

Nhazi edoziri

Ihe ndabara na dị mfe 940px-obosara, okirikiri nhọrọ ukwuu maka naanị webụsaịtị ma ọ bụ ibe ọ bụla nke otu faịlụ nyere <div class="container">.

  1. <ahụ>
  2.   <div klas = "container" > 
  3.     ...
  4.   </div>
  5. </ ahu>

Nhazi mmiri mmiri

<div class="container-fluid">na-enye nhazi ihu akwụkwọ na-agbanwe agbanwe, min- na max-obosara, yana akụkụ aka ekpe. Ọ dị mma maka ngwa na docs.

  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>

Nzaghachi imewe Ajụjụ mgbasa ozi maka ngwaọrụ dị iche iche na mkpebi

Ngwaọrụ anabata

Ihe ha na-eme

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ị
  • Kwakọba 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 nke ọma na 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
Smartphones 480px na n'okpuru Ogidi mmiri mmiri, enweghị obosara edoziri
Smartphones na mbadamba 767px na n'okpuru Ogidi mmiri mmiri, enweghị obosara edoziri
Mbadamba nkume eserese 768px na n'elu 42px 20px
Ọdabara 980px na elu 60px 20px
Nnukwu ngosi 1200px na elu 70px 30px

Chọrọ mkpado meta

Iji hụ na ngwaọrụ gosipụtara ibe na-anabata nke ọma, tinye mkpado meta nlele.

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

Iji ajụjụ mgbasa ozi

Bootstrap anaghị agụnye ajụjụ mgbasa ozi ndị a na-akpaghị aka, mana ịghọta na ịgbakwunye ha dị nnọọ mfe ma chọọ nhazi ntakịrị. Ị nwere nhọrọ ole na ole maka ịgụnye atụmatụ na-anabata nke Bootstrap:

  1. Jiri ụdị nnabata achịkọtara, bootstrap-responsive.css
  2. Tinye @import "responsive.less" wee chịkọta Bootstrap
  3. Gbanwee ma chịkọta anabataghachi.less dị ka faịlụ dị iche

Gịnị kpatara na ị gaghị etinye ya naanị? N'ikwu eziokwu, ọ bụghị ihe niile kwesịrị ịzaghachi. Kama ịgba ndị mmepe ume ka ha wepụ njirimara a, anyị na-eche na ọ kacha mma ime ya.

  1.   /* Ekwentị ala na ala */
  2.   @media ( max - obosara : 480px ) { ... }     
  3.  
  4.   /* Ekwentị ọdịdị ala ka ọ bụrụ mbadamba ihe osise */
  5.   @media ( max - obosara : 767px ) { ... }     
  6.  
  7.   /* Mbadamba ụrọ eserese na odida obodo na desktọpụ */
  8.   @media ( min - obosara : 768px ) na ( max - obosara : 979px ) { ... }        
  9.  
  10.   /* Nnukwu desktọpụ */
  11.   @media ( nkeji - obosara : 1200px ) { ... }

Klas mkpa na-anabata

Kedu ihe ha bụ

Maka mmepe enyi na enyi mkpanaka ngwa ngwa, jiri klaasị mmekọ ndị a maka igosi na zoo ọdịnaya site na ngwaọrụ.

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.

Dịka ọmụmaatụ, ịnwere ike igosi <select>mmewere maka ụgbọ mmiri na nyiwe mkpanaka, mana ọ bụghị na mbadamba ma ọ bụ desktọpụ.

Klas nkwado

Egosiri ebe a bụ tebụl klaasị anyị na-akwado 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ị480px na n'okpuru Mbadamba ụrọ767px na n'okpuru Desktọpụ768px na n'elu
.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

Nyocha ikpe

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ụ