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.

<div klas = "ahịrị" > 
  <div klas = "span4" > ... </div> 
  <div klas = "span8" > ... </div> 
</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ị.

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ụ

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

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

<ahụ>
  <div klas = "container" > 
    ...
  </div>
</ 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.

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

Ngwaọrụ akwadoro

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

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ụ

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. na-enweghị dị ka 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.

  // Okirikiri ekwentị na ala
  @media ( max - obosara : 480px ) { ... }     
 
  // Okirikiri ekwentị ka mbadamba ihe osise
  @media ( max - obosara : 768px ) { ... }     
 
  // Mbadamba ihe osise na odida obodo na desktọpụ
  @media ( min - obosara : 768px ) na ( max - obosara : 940px ) { ... }        
 
  // Desktọpụ buru ibu
  @media ( nkeji - obosara : 1200px ) { .. }