Sgafall

Tha Bootstrap air a thogail air cliath freagairteach 12-colbh. Tha sinn cuideachd air dealbhadh leud stèidhichte agus siùbhlach a thoirt a-steach stèidhichte air an t-siostam sin.

Tha feum air doctype HTML5

Bidh Bootstrap a’ cleachdadh eileamaidean HTML agus feartan CSS a dh’ fheumas an doctype HTML5 a chleachdadh. Dèan cinnteach gun cuir thu a-steach e aig toiseach gach duilleag Bootstrapped sa phròiseact agad.

<!DOCTYPE html>
<html lang = "ga" > 
  ...
</html>

Clò-sgrìobhaidh agus ceanglaichean

Taobh a-staigh an fhaidhle scaffolding.less , shuidhich sinn taisbeanadh cruinne bunaiteach, clò-sgrìobhaidh, agus stoidhlichean ceangail. Gu sònraichte, tha sinn:

Thoir air falbh iomall air a 'chorp
Suidhich background-color: white;air anbody
Cleachd na @baseFontFamily, @baseFontSize, agus @baseLineHeightbuadhan mar ar bunait clò-sgrìobhaidh
Suidhich dath a’ cheangail chruinneil tro @linkColoragus cuir an gnìomh fo-cheanglaichean ceangail a-mhàin air:hover

Ath-shuidheachadh tro Normalize

Mar Bootstrap 2, tha an ath-shuidheachadh CSS traidiseanta air a thighinn air adhart gus feum a dhèanamh de eileamaidean bho Normalize.css , pròiseact le Nicolas Gallagher a tha cuideachd a’ toirt cumhachd don HTML5 Boilerplate .

Faodar an ath-shuidheachadh ùr a lorg fhathast ann an reset.less , ach le mòran eileamaidean air an toirt air falbh airson giorrad agus mionaideachd.

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 clàr agus deasg beag, 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.

Colbhan dheth

4 cuir dheth 4

3 dheth 3

8 dheth 4

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

Colbhan neadachaidh

Leis an t-siostam clèithe statach (neo-siùbhlach) 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 chuireas suas ris an àireamh de cholbhan de a phàrant. Mar eisimpleir, .span3bu chòir dà cholbh neadachaidh a chuir taobh a-staigh faidhle .span6.

Ìre 1 den cholbh

Ìre 2

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

Colbhan fluid

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>

A 'neadachadh fluid

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.

Fliuch 12

Fliuch 6

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

Caochlaideach	Luach bunaiteach	Tuairisgeul
`@gridColumns`	12	Àireamh de cholbhan
`@gridColumnWidth`	60px	Leud gach colbh
`@gridGutterWidth`	20px	Àite àicheil eadar colbhan

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 freagairteach

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

Cleachd ceistean meadhanan gu ciallach agus dìreach mar thoiseach tòiseachaidh don luchd-èisteachd gluasadach agad. Airson pròiseactan nas motha, smaoinich air bunaitean còd sònraichte agus chan e sreathan de cheistean meadhanan.

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:

Label	Leud an t-suidheachaidh	Leud colbh	Leud an cutair
Fònaichean sgairteil	480px agus gu h-ìosal	Colbhan fluid, gun leud stèidhichte
Fònaichean sgairteil gu tablaidean	767px agus gu h-ìosal	Colbhan fluid, gun leud stèidhichte
Clàran dhealbhan	768px agus gu h-àrd	42px	20px
Deònach	980px agus suas	60px	20px
Taisbeanadh mòr	1200px agus suas	70px	30px

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

A’ cleachdadh cheistean nam meadhanan

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:

Cleachd an dreach freagairteach cruinnichte, bootstrap-responsive.css
Cuir ris @import “responsive.less” agus ath-chruinnich Bootstrap
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 : 767px ) { ... }     
 
  // Clàr dhealbhan gu cruth-tìre agus deasg
  @media ( min - leud : 768px ) agus ( leud as motha : 979px ) { ... }        
 
  // Deasg mhòr
  @media ( mion - leud : 1200px ) { ... }

Clasaichean goireasach freagairteach

Dè th 'annta

Airson leasachadh gluasadach nas luaithe, cleachd na clasaichean goireis bunaiteach sin airson a bhith a’ sealltainn agus a’ falach susbaint le inneal.

Nuair a chleachdadh

Cleachd air stèidh chuingealaichte agus seachain dreachan gu tur eadar-dhealaichte den aon làrach a chruthachadh. An àite sin, cleachd iad gus cur ri taisbeanadh gach inneal.

Mar eisimpleir, is dòcha gu bheil thu a’ sealltainn <select>eileamaid airson nav air cruth gluasadach, ach chan ann air clàran no deasg.

Clasaichean taic

Chithear an seo clàr de na clasaichean ris a bheil sinn a’ toirt taic agus a’ bhuaidh a th’ aca air cruth ceist mheadhanan sònraichte (le bileagan le inneal). Gheibhear iad ann an responsive.less.

Clas	Fònaichean480px agus gu h-ìosal	Clàran767px agus gu h-ìosal	Deasg768px agus gu h-àrd
`.visible-phone`	faicsinneach	Falaichte	Falaichte
`.visible-tablet`	Falaichte	faicsinneach	Falaichte
`.visible-desktop`	Falaichte	Falaichte	faicsinneach
`.hidden-phone`	Falaichte	faicsinneach	faicsinneach
`.hidden-tablet`	faicsinneach	Falaichte	faicsinneach
`.hidden-desktop`	faicsinneach	faicsinneach	Falaichte

Cùis deuchainn

Ath-mheudaich do bhrobhsair no luchdaich air diofar innealan gus na clasaichean gu h-àrd a dhearbhadh.

Ri fhaicinn air...

Tha comharran uaine a’ nochdadh gu bheil clas ri fhaicinn anns a’ phort-seallaidh gnàthach agad.

Fòn✔ Fòn
Clàr✔ Clàr
Deasg✔ Deasg

Falaichte air...

An seo, tha comharran-seic uaine a’ nochdadh gu bheil clas falaichte anns a’ phort-seallaidh gnàthach agad.

Fòn✔ Fòn
Clàr✔ Clàr
Deasg✔ Deasg