Is e an siostam clèithe bunaiteach a tha air a thoirt seachad mar phàirt de Bootstrap cliath 940px de leud, 12-colbh .

Tha ceithir atharrachaidhean freagairteach ann cuideachd airson diofar innealan agus rùintean: fòn, dealbh clàr, cruth-tìre bùird agus deasg bheag, agus deasg sgrion mòr.

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

Mar a chithear an seo, faodar cruth bunaiteach a chruthachadh le dà “cholbh,” gach fear a’ spangachadh grunn de na 12 colbhan bunaiteach a mhìnich sinn mar phàirt den t-siostam clèithe againn.

Leis an t-siostam clèithe statach (neo-fhliuch) ann am Bootstrap, tha e furasta neadachadh. Gus do shusbaint a neadachadh, dìreach cuir colbhan ùra .rowagus seata de .span*cholbhan taobh a-staigh .span*colbh a tha ann mu thràth.

eisimpleir

Bu chòir seata de cholbhan a bhith ann an sreathan neadachaidh a tha a’ cur ris an àireamh de cholbhan de a phàrant. Mar eisimpleir, .span3bu chòir dà cholbh neadachaidh a chuir taobh a-staigh faidhle .span6.

<div class = "sreath" > 
  <div class = "span12" > 
    Ìre 1 den cholbh
    <div class = "sreath" > 
      <div class = "span6" > Ìre 2 </div> 
      <div class = "span6" > Ìre 2 </div> 
    </div>
  </div>
</div>

Ceudadan, chan e piogsail

Bidh an siostam clèithe siùbhlach a’ cleachdadh ceudadan airson leud colbhan an àite piogsail stèidhichte. Tha na h-aon atharrachaidhean freagairteach aige ris an t-siostam clèithe stèidhichte againn, a’ dèanamh cinnteach à cuibhreannan ceart airson prìomh rùintean sgrion agus innealan.

Sreathan fluid

Dèan sreath sam bith fluid dìreach le bhith ag atharrachadh .rowgu .row-fluid. Bidh na colbhan a’ fuireach mar a tha iad, ga dhèanamh gu math furasta gluasad eadar dealbhadh stèidhichte agus siùbhlach.

Marcaich

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Tha neadachadh le cliathan siùbhlach beagan eadar-dhealaichte: chan fheum an àireamh de cholbhan neadachaidh a bhith co-ionnan ris a’ phàrant. An àite sin, thèid na colbhan agad ath-shuidheachadh aig gach ìre leis gu bheil gach sreath a’ toirt suas 100% den cholbh phàrant.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Ìre 1 den cholbh
    <div class = "row-fluid" > 
      <div class = "span6" > Ìre 2 </div> 
      <div class = "span6" > Ìre 2 </div> 
    </div>
  </div>
</div>

Caochlaidhean ann an LÌON

Air an togail a-steach do Bootstrap tha dòrlach de chaochladairean airson an siostam clèithe 940px bunaiteach a ghnàthachadh, air a chlàradh gu h-àrd. Tha na caochladairean uile airson a’ ghriod air an stòradh ann an caochladairean.less.

Ciamar a ghnàthachadh

Tha atharrachadh a’ ghriod a’ ciallachadh na trì @grid*caochladairean atharrachadh agus Bootstrap ath-chruinneachadh. Atharraich na caochladairean clèithe ann an caochladairean.less agus cleachd aon de na ceithir dòighean a chaidh a chlàradh airson ath-chruinneachadh . Ma tha thu a’ cur barrachd cholbhan ris, dèan cinnteach gun cuir thu CSS ris airson an fheadhainn ann an grid.less.

A 'fuireach freagairteach

Chan eil gnàthachadh a’ ghriod ag obair ach aig an ìre àbhaisteach, a’ ghriod 940px. Gus na taobhan freagairteach de Bootstrap a chumail suas, feumaidh tu cuideachd na cliathan a ghnàthachadh ann an freagairteach.less.

Cruth stèidhichte

An cruth bunaiteach agus sìmplidh 940px-leathann, sa mheadhan airson dìreach làrach-lìn no duilleag sam bith air a thoirt seachad le aon fhaidhle <div class="container">.

<corp>
  <div class = "container" > 
    ...
  </div>
</corp>

Cruth fluid

<div class="container-fluid">a’ toirt structar duilleag sùbailte, mion-leud is leud as motha, agus bàr-taoibh chlì. Tha e math airson aplacaidean agus docs.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Susbaint bàr-taoibh-->
    </div>
    <div class = "span10" > 
      <!-- Susbaint a’ chuirp-->
    </div>
  </div>
</div>

Innealan le taic

Bidh Bootstrap a’ toirt taic do ghrunn cheistean meadhanan ann an aon fhaidhle gus do phròiseactan a dhèanamh nas freagarraiche air diofar innealan agus fuasglaidhean sgrion. Seo na tha air a ghabhail a-steach:

Tha feum air meta tag

Gus dèanamh cinnteach gu bheil innealan a’ taisbeanadh duilleagan freagairteach gu ceart, cuir a-steach an taga meta viewport.

<meta name = "viewport" content = "width=leud-inneal, tùs-sgèile=1.0" >  

Dè nì iad

Bidh ceistean meadhanan a’ ceadachadh CSS àbhaisteach stèidhichte air grunn chumhachan - co-mheasan, leud, seòrsa taisbeanaidh, msaa - ach mar as trice bidh fòcas timcheall min-widthagus max-width.

• Atharraich leud a’ cholbh sa chliath againn
• Stack eileamaidean an àite fleòdradh far a bheil sin riatanach
• Atharraich meud cinn agus teacsa gus a bhith nas freagarraiche airson innealan

Cha bhith Bootstrap a’ toirt a-steach na ceistean meadhanan sin gu fèin-ghluasadach, ach tha e glè fhurasta an tuigsinn agus an cur ris agus feumar glè bheag de shuidheachadh. Tha beagan roghainnean agad airson feartan freagairteach Bootstrap a thoirt a-steach:

1. Cleachd an dreach freagairteach cruinnichte, bootstrap-responsive.css
2. Cuir ris @import “responsive.less” agus ath-chruinnich Bootstrap
3. Atharraich agus ath-chruinnich freagairteach.less mar fhaidhle air leth

Carson nach cuir thu a-steach e? Leis an fhìrinn innse, chan fheum a h-uile dad a bhith freagairteach. An àite a bhith a’ brosnachadh luchd-leasachaidh am feart seo a thoirt air falbh, tha sinn den bheachd gu bheil e nas fheàrr a chomasachadh.

  // Fònaichean cruth-tìre agus sìos
  @media ( leud as motha : 480px ) { ... }     
 
  // Fòn cruth-tìre gu clàr dhealbhan
  @media ( leud as motha : 768px ) { ... }     
 
  // Clàr dhealbhan gu cruth-tìre agus deasg
  @media ( min - leud : 768px ) agus ( leud as motha : 980px ) { ... }        
 
  // Deasg mhòr
  @media ( mion - leud : 1200px ) { .. }