Ko te punaha matiti taunoa e whakaratohia ana hei waahanga o Bootstrap he matiti 940px-whanui, 12-tīwae .

E wha ano hoki nga rereketanga urupare mo nga momo taputapu me nga whakataunga: waea, whakaahua papa, papa whenua papamahi me nga papamahi iti, me nga papamahi mata whanui.

<div class = "rarangi" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Ka rite ki te whakaatu i konei, ka taea te hanga i tetahi tahora taketake me nga "tīwae" e rua, kei ia waahanga te maha o nga pou turanga 12 i tautuhia e matou hei waahanga o to maatau punaha tukutuku.

Na te punaha matiti (kore-wai) kei Bootstrap, he ngawari te kohanga. Hei whakakohanga i to ihirangi, taapiri noa he huinga pou hou .rowme te huinga o .span*roto i te tīwae tīariari .span*.

Tauira

<div class = "rarangi" > 
  <div class = "span12" > 
    Taumata 1 o te tīwae
    <div class = "rarangi" > 
      <div class = "span6" > Taumata 2 </div> 
      <div class = "span6" > Taumata 2 </div> 
    </div>
  </div>
</div>

Taurangi kei te TIKI

I hangaia ki Bootstrap he maha nga taurangi hei whakarite i te punaha matiti 940px taunoa, kua tuhia ki runga ake nei. Ko nga taurangi katoa mo te matiti ka penapena ki nga taurangi.less.

Me pehea te whakarite

Ko te whakarereke i te matiti ko te huri i nga @grid*taurangi e toru me te whakahiato ano i a Bootstrap. Hurihia nga taurangi matiti ki te taurangi.less me te whakamahi i tetahi o nga huarahi e wha kua tuhia hei whakahiato ano . Mena kei te taapirihia e koe etahi atu pou, me taapiri te CSS mo era kei roto i te grid.less.

Te noho urupare

Ko te whakaritenga o te matiti ka mahi anake i te taumata taunoa, te matiti 940px. Hei pupuri i nga ahuatanga urupare o Bootstrap, me whakarite ano e koe nga matiti ki te whakautu.less.

Te whakatakotoranga pumau

Ko te taunoa me te ngawari 940px-whanui, te whakatakotoranga i waenganui mo tetahi paetukutuku, wharangi ranei e whakaratohia ana e te kotahi <div class="container">.

<tinana>
  <div class = "putea" > 
    ...
  </div>
</tinana>

Te whakatakotoranga wai

<div class="container-fluid">homai te hanganga wharangi ngawari, te iti me te whanui-nui, me te paetaha maui. He pai mo nga taupānga me nga tuhinga.

<div class = "ipu-wai" > 
  <div class = "rarangi-wai" > 
    <div class = "span2" > 
      <!--Ihirangi Paetaha-->
    </div>
    <div class = "span10" > 
      <!--Ihirangi tinana-->
    </div>
  </div>
</div>

Nga taputapu tautoko

E tautoko ana a Bootstrap i te maha o nga patai pāpāho kia pai ake ai o kaupapa ki runga i nga taputapu rereke me nga whakataunga mata. Anei nga mea kei roto:

He aha ta ratou mahi

Ka taea e nga patai pāpāho te CSS ritenga i runga i te maha o nga tikanga—owehenga, whanui, momo whakaatu, aha atu—engari ko te nuinga o te waa ka aro ki te taha min-widthme te max-width.

• Whakarerekēhia te whanui o te pou i roto i ta maatau matiti
• Tāpae huānga hei utu mānu i ngā wāhi e tika ana
• Whakarahihia nga pane me te kuputuhi kia pai ake mo nga taputapu

Kare a Bootstrap e whakauru aunoa i enei patai pāpāho, engari he tino ngawari te maarama me te taapiri, me te iti o te tatūnga. He iti noa nga whiringa hei whakauru i nga ahuatanga urupare o Bootstrap:

1. Whakamahia te putanga whakautu whakahiato, bootstrap-responsive.css
2. Tāpirihia te @import "responsive.less" ka whakahiatohia a Bootstrap
3. Whakarerekē me te whakahiato urupare.less hei wehe

He aha te kore e whakauru noa? Ko te korero pono, ehara i te mea me whakautu nga mea katoa. Engari ki te whakatenatena i nga kaiwhakawhanake ki te tango i tenei ahuatanga, ki ta maatau he pai ake kia taea.

  // Waea whenua me raro
  @media ( max - whanui : 480px ) { ... }     
 
  // Waea whenua ki te papa whakaahua
  @media ( max - whanui : 768px ) { ... }     
 
  // Papa whakaahua ki te whenua me te papamahi
  @media ( min - whanui : 768px ) me ( max - whanui : 940px ) { ... }        
 
  // Papamahi nui
  @media ( min - whanui : 1200px ) { .. }