Sgafaill · Bootstrap ann an Gàidhlig na h-Alba

Tha feum air doctype HTML5

Bidh Bootstrap a’ cleachdadh cuid de eileamaidean HTML agus feartan CSS a dh’ fheumas an doctype HTML5 a chleachdadh. Cuir a-steach e aig toiseach do phròiseactan gu lèir.

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

Clò-sgrìobhaidh agus ceanglaichean

Bidh Bootstrap a’ suidheachadh taisbeanadh cruinneil bunaiteach, clò-sgrìobhadh, agus stoidhlichean ceangail. Gu sònraichte, tha sinn:

Thoir marginair falbh 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

Gheibhear na stoidhlichean sin taobh a-staigh scaffolding.less .

Ath-shuidheachadh tro Normalize

Le Bootstrap 2, chaidh an seann bhloc ath-shuidheachadh a leigeil sìos airson fàbhar Normalize.css , pròiseact le Nicolas Gallagher a tha cuideachd a’ toirt cumhachd don HTML5 Boilerplate . Fhad ‘s a bhios sinn a’ cleachdadh mòran de Normalize taobh a-staigh ar reset.less , tha sinn air cuid de na h-eileamaidean a thoirt air falbh gu sònraichte airson Bootstrap.

Eisimpleir grid beò

Bidh an siostam clèithe bunaiteach Bootstrap a’ cleachdadh 12 colbhan , a’ dèanamh airson soitheach farsaing 940px às aonais feartan freagairteach air an comasachadh. Leis an fhaidhle CSS freagairteach air a chur ris, bidh a’ ghriod ag atharrachadh gus a bhith 724px agus 1170px de leud a rèir do shealladh. Fo phuirt-seallaidh 767px, bidh na colbhan a’ fàs siùbhlach agus a’ cruachadh gu dìreach.

Clèithe HTML bunaiteach

Airson cruth sìmplidh dà cholbh, cruthaich a .rowagus cuir ris an àireamh iomchaidh de .span*cholbhan. Leis gur e cliath 12-colbh a tha seo, tha gach fear .span*a’ spangachadh grunn de na 12 colbhan sin, agus bu chòir an-còmhnaidh suas ri 12 a chur ris airson gach sreath (no an àireamh de cholbhan sa phàrant).

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

Leis an eisimpleir seo, tha .span4agus .span8, a’ dèanamh airson 12 colbhan iomlan agus sreath iomlan.

Colbhan dheth

Gluais colbhan air an taobh cheart a’ cleachdadh .offset*chlasaichean. Bidh gach clas ag àrdachadh iomall colbh le colbh slàn. Mar eisimpleir, .offset4gluais .span4thairis air ceithir colbhan.

3 dheth 2

3 cuir dheth 1

3 dheth 2

6 seacharan 3

<div class = "sreath" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Colbhan neadachaidh

Gus do shusbaint a neadachadh leis a’ ghriod àbhaisteach, cuir colbhan ùra .rowagus seata de .span*cholbhan taobh a-staigh .span*colbh a tha ann mu thràth. Bu chòir seata de cholbhan a bhith ann an sreathan neadachaidh a tha a’ cur ri àireamh cholbhan a phàrant.

Colbh ìre 1 a-nuas

Ìre 2

<div class = "sreath" > 
  <div class = "span9" > 
    Colbh ìre 1 a-nuas
    <div class = "sreath" > 
      <div class = "span6" > Ìre 2 </div> 
      <div class = "span3" > Ìre 2 </div> 
    </div>
  </div>
</div>

Eisimpleir grid fluid beò

Bidh an siostam clèithe siùbhlach a’ cleachdadh ceudadan an àite piogsail airson leud colbhan. Tha na h-aon chomasan 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.

Grid fluid bunaiteach HTML

Dèan sreath sam bith "fluid" le bhith ag atharrachadh .rowgu .row-fluid. Bidh na clasaichean colbh a’ fuireach mar a tha iad, ga dhèanamh furasta gluasad eadar cliathan stèidhichte agus lionntan.

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

Co-chothromachadh fluid

Ag obair san aon dòigh ris an t-siostam clèithe stèidhichte: cuir .offset*ri colbh sam bith gus a chothromachadh leis an iomadh colbh sin.

4 cuir dheth 4

3 dheth 3

6 dheth 6

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

A 'neadachadh fluid

Tha neadachadh le cliathan siùbhlach beagan eadar-dhealaichte: cha bu chòir an àireamh de cholbhan neadachaidh a bhith a rèir àireamh nan colbhan aig a’ phàrant. An àite sin, thèid gach ìre de cholbhan neadachaidh ath-shuidheachadh leis gu bheil gach sreath a’ toirt suas 100% den cholbh phàrant.

Fliuch 12

Fliuch 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Fliuch 12
    <div class = "row-fluid" > 
      <div class = "span6" > Fluid 6 </div> 
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

Cruth stèidhichte

A’ toirt seachad cruth leud stèidhichte cumanta (agus freagairteach gu roghnach) le dìreach <div class="container">feum.

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

Cruth fluid

Cruthaich duilleag siùbhlach, dà-cholbh le <div class="container-fluid">- sgoinneil airson tagraidhean agus docaichean.

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

A’ comasachadh feartan freagairteach

Tionndaidh air CSS freagairteach sa phròiseact agad le bhith a’ toirt a-steach an meta tag ceart agus an duilleag stoidhle a bharrachd taobh a-staigh na <head>sgrìobhainn agad. Ma tha thu air Bootstrap a chuir ri chèile bhon duilleag Customize, chan fheum thu ach an taga meta a thoirt a-steach.

<meta name = "viewport" content = "width=leud-inneal, tùs-sgèile=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "duilleag stoidhle" >

Cinn suas!Chan eil Bootstrap a’ toirt a-steach feartan freagairteach gu bunaiteach aig an àm seo oir 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 mar a dh’ fheumar.

Mu dheidhinn Bootstrap freagairteach

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
Taisbeanadh mòr	1200px agus suas	70px	30px
Deònach	980px agus suas	60px	20px
Clàran dhealbhan	768px agus gu h-àrd	42px	20px
Fònaichean gu tablaidean a	767px agus gu h-ìosal	Colbhan fluid, gun leud stèidhichte
Fònaichean	480px agus gu h-ìosal	Colbhan fluid, gun leud stèidhichte

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

Clasaichean goireasach freagairteach

Airson leasachadh gluasadach nas luaithe, cleachd na clasaichean goireis sin airson a bhith a’ sealltainn agus a’ falach susbaint le inneal. Gu h-ìosal tha clàr de na clasaichean a tha rim faighinn agus a’ bhuaidh aca air cruth ceist mheadhanan sònraichte (le bileagan le inneal). Gheibhear iad ann an responsive.less.

Clas	Fònaichean767px agus gu h-ìosal	Clàran979px gu 768px	DeasgDeònach
`.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

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. Cha bu chòir goireasan freagairteach a bhith air an cleachdadh le bùird, agus mar sin chan eil iad a’ faighinn taic.

Cùis deuchainn goireasan freagairteach

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 uaine a’ nochdadh gu bheil an clas falaichte anns a’ phort-seallaidh gnàthach agad.

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

Sgafall

Suidhichidhean cruinne