Bootstrap

Sgafall

Tha Bootstrap air a thogail air cliathan freagairteach 12-colbh, cruth agus co-phàirtean.

Cinn suas! Tha na docaichean sin airson v2.3.2, nach eil a’ faighinn taic oifigeil tuilleadh. Thoir sùil air an tionndadh as ùire de Bootstrap!

Suidhichidhean cruinne

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.

  1. <!DOCTYPE html>
  2. <html lang = "ga" > 
  3.   ...
  4. </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 agus Jonathan Neal 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.

Siostam clèithe bunaiteach

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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

  1. <div class = "sreath" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.

4
3 dheth 2
3 cuir dheth 1
3 dheth 2
6 seacharan 3 
  1. <div class = "sreath" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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
Ìre 2 
  1. <div class = "sreath" > 
  2.   <div class = "span9" > 
  3.     Colbh ìre 1 a-nuas
  4.     <div class = "sreath" > 
  5.       <div class = "span6" > Ìre 2 </div> 
  6.       <div class = "span3" > Ìre 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Siostam clèithe fluid

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 gu bheil cuibhreannan ceart ann airson prìomh rùintean sgrion agus innealan.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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 grids stèidhichte agus siùbhlach.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 cuir dheth 4
3 dheth 3
3 dheth 3
6 cuir dheth 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

A 'neadachadh fluid

Bidh grids fluid a’ cleachdadh neadachadh ann an dòigh eadar-dhealaichte: bu chòir suas ri 12 colbhan a bhith aig gach ìre neadachaidh de cholbhan. Tha seo air sgàth gu bheil a’ ghriod siùbhlach a’ cleachdadh ceudadan, chan e piogsail, airson leudan a shuidheachadh.

Fliuch 12
Fliuch 6
Fliuch 6
Fliuch 6
Fliuch 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fliuch 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Fliuch 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Cruthan

Cruth stèidhichte

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

  1. <corp>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </corp>

Cruth fluid

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Susbaint bàr-taoibh-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!-- Susbaint a’ chuirp-->
  8.     </div>
  9.   </div>
  10. </div>

Dealbhadh freagairteach

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.

  1. <meta name = "viewport" content = "width=leud-inneal, tùs-sgèile=1.0" >  
  2. <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

Innealan 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 
  1. /* Deasg mòr */
  2. @media ( mion - leud : 1200px ) { ... }     
  3.  
  4. /* Clàr dhealbhan gu cruth-tìre agus deasg */
  5. @media ( min - leud : 768px ) agus ( leud as motha : 979px ) { ... }        
  6.  
  7. /* Fòn cruth-tìre gu clàr dhealbhan */
  8. @media ( leud as motha : 767px ) { ... }     
  9.  
  10. /* Fònaichean cruth-tìre agus sìos */
  11. @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
.visible-tablet faicsinneach
.visible-desktop faicsinneach
.hidden-phone faicsinneach faicsinneach
.hidden-tablet faicsinneach faicsinneach
.hidden-desktop faicsinneach faicsinneach

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