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ụ, akwụkwọ 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 dị ka akụkụ nke Bootstrap bụ grid 12 n'obosara 940px .

Ọ nwekwara mgbanwe anọ na-anabata maka ngwaọrụ na mkpebi dị iche iche: ekwentị, eserese mbadamba, okpokoro okpokoro na obere desktọpụ, yana nnukwu desktọpụ ihuenyo sara mbara.

  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 ntọala iri na abụọ 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 sistemụ 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 a .span6.

Ọkwa 1 nke kọlụm
Ọkwa 2
Ọkwa 2 
  1. <div klas = "ahịrị" > 
  2.   <div klas = "span12" > 
  3.     Ọkwa 1 nke kọlụm
  4.     <div klas = "ahịrị" > 
  5.       <div class = "span6" > Ọkwa 2 </div> 
  6.       <div class = "span6" > Ọ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
@siteWidth Nchikota nke kọlụm na gọta niile Ọ na-agụ ọnụ ọgụgụ ogidi na gọta iji tọọ obosara nke .container-fixed()mixin

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ị
  • 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
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.   // Okirikiri ekwentị na ala
  2.   @media ( max - obosara : 480px ) { ... }     
  3.  
  4.   // Okirikiri ekwentị ka mbadamba ihe osise
  5.   @media ( max - obosara : 768px ) { ... }     
  6.  
  7.   // Mbadamba ihe osise na odida obodo na desktọpụ
  8.   @media ( min - obosara : 768px ) na ( max - obosara : 980px ) { ... }        
  9.  
  10.   // Desktọpụ buru ibu
  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 klaasị dị n'elu.

A na-ahụ anya na...

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

Ezoro na...

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