Bootstrap

Sgaffaldiau

Mae Bootstrap wedi'i adeiladu ar gridiau 12-colofn ymatebol, cynlluniau a chydrannau.

Gosodiadau byd-eang

Angen doctype HTML5

Mae Bootstrap yn defnyddio rhai elfennau HTML ac eiddo CSS sy'n gofyn am ddefnyddio'r doctype HTML5. Cynhwyswch ef ar ddechrau eich holl brosiectau.

  1. <!DOCTYPE html>
  2. <html lang = " cy " > 
  3.   ...
  4. </html>

Teipograffeg a chysylltiadau....

Mae Bootstrap yn gosod arddangosiad byd-eang sylfaenol, teipograffeg, ac arddulliau cyswllt. Yn benodol, rydym yn:

  • Tynnwch marginar y corff
  • Gosod background-color: white;ar ybody
  • Defnyddiwch y @baseFontFamily, @baseFontSize, a'r @baseLineHeightpriodoleddau fel ein sylfaen deipograffig
  • Gosodwch y lliw cyswllt byd-eang trwy @linkColora chymhwyso tanlinelliadau cyswllt yn unig ymlaen:hover

Gellir dod o hyd i'r arddulliau hyn o fewn scaffolding.less .

Ailosod trwy Normalize

Gyda Bootstrap 2, mae'r hen floc ailosod wedi'i ollwng o blaid Normalize.css , prosiect gan Nicolas Gallagher a Jonathan Neal sydd hefyd yn pweru Boilerplate HTML5 . Er ein bod yn defnyddio llawer o Normalize o fewn ein reset.less , rydym wedi dileu rhai elfennau yn benodol ar gyfer Bootstrap.

System grid ddiofyn

Enghraifft grid byw

Mae'r system grid Bootstrap ddiofyn yn defnyddio 12 colofn , gan wneud cynhwysydd 940px o led heb nodweddion ymatebol wedi'u galluogi. Gyda'r ffeil CSS ymatebol wedi'i hychwanegu, mae'r grid yn addasu i fod yn 724px a 1170px o led yn dibynnu ar eich man gwylio. O dan fannau gwylio 767px, mae'r colofnau'n dod yn hylif ac yn stacio'n fertigol.

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

HTML grid sylfaenol

Ar gyfer cynllun dwy golofn syml, crëwch .rowac ychwanegwch y nifer priodol o .span*golofnau. Gan mai grid 12 colofn yw hwn, mae pob un .span*yn rhychwantu nifer o'r 12 colofn hynny, a dylent bob amser adio hyd at 12 ar gyfer pob rhes (neu nifer y colofnau yn y rhiant).

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

O ystyried yr enghraifft hon, mae gennym .span4a .span8, gan wneud cyfanswm o 12 colofn a rhes gyflawn.

Colofnau gwrthbwyso

Symudwch y colofnau i'r dde gan ddefnyddio .offset*dosbarthiadau. Mae pob dosbarth yn cynyddu ymyl chwith colofn fesul colofn gyfan. Er enghraifft, .offset4yn symud .span4dros bedair colofn.

4
3 gwrthbwyso 2
3 gwrthbwyso 1
3 gwrthbwyso 2
6 gwrthbwyso 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Colofnau nythu

I nythu'ch cynnwys gyda'r grid rhagosodedig, ychwanegwch set newydd .rowo .span*golofnau o fewn .span*colofn sy'n bodoli eisoes. Dylai rhesi nythu gynnwys set o golofnau sy'n adio i fyny at nifer colofnau ei riant.

Colofn Lefel 1
Lefel 2
Lefel 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Colofn Lefel 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > Lefel 2 </div> 
  6.       <div class = "span3" > Lefel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

System grid hylif

Enghraifft grid hylif byw

Mae'r system grid hylif yn defnyddio canrannau yn lle picsel ar gyfer lled colofnau. Mae ganddo'r un galluoedd ymatebol â'n system grid sefydlog, gan sicrhau cyfrannau priodol ar gyfer datrysiadau sgrin allweddol a dyfeisiau.

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

Grid hylif sylfaenol HTML

Gwnewch unrhyw res yn "hylif" trwy newid .rowi .row-fluid. Mae'r dosbarthiadau colofn yn aros yr un fath, gan ei gwneud hi'n hawdd troi rhwng gridiau sefydlog a hylif.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Gwrthbwyso hylif

Yn gweithredu yn yr un modd â gwrthbwyso'r system grid sefydlog: ychwanegu .offset*at unrhyw golofn i'w wrthbwyso gan y colofnau lawer hynny.

4
4 gwrthbwyso 4
3 gwrthbwyso 3
3 gwrthbwyso 3
6 gwrthbwyso 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Hylif nythu

Mae gridiau hylif yn defnyddio nythu yn wahanol: dylai pob lefel nythu o golofnau adio hyd at 12 colofn. Mae hyn oherwydd bod y grid hylif yn defnyddio canrannau, nid picsel, ar gyfer gosod lled.

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

Cynlluniau

Gosodiad sefydlog

Yn darparu cynllun lled sefydlog cyffredin (ac ymatebol yn ddewisol) gyda dim ond ei <div class="container">angen.

  1. <corff>
  2.   <div class = "cynhwysydd" > 
  3.     ...
  4.   </div>
  5. </corff>

Gosodiad hylif

Creu tudalen hylif, dwy golofn gyda <div class="container-fluid">—gwych ar gyfer cymwysiadau a dogfennau.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Cynnwys y bar ochr-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Cynnwys y corff-->
  8.     </div>
  9.   </div>
  10. </div>

Dyluniad ymatebol

Galluogi nodweddion ymatebol

Trowch CSS ymatebol ymlaen yn eich prosiect trwy gynnwys y tag meta cywir a'r daflen arddull ychwanegol yn <head>eich dogfen. Os ydych chi wedi llunio Bootstrap o'r dudalen Customize, dim ond y tag meta sydd angen i chi ei gynnwys.

  1. <meta name = "viewport" content = "lled=lled-dyfais, cychwynnol-graddfa=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "ddalen arddull" >

Pennau i fyny!Nid yw Bootstrap yn cynnwys nodweddion ymatebol yn ddiofyn ar hyn o bryd gan nad oes angen i bopeth fod yn ymatebol. Yn lle annog datblygwyr i gael gwared ar y nodwedd hon, rydym yn ei gwneud yn well i'w galluogi yn ôl yr angen.

Ynglŷn â Bootstrap ymatebol

Dyfeisiau ymatebol

Mae ymholiadau gan y cyfryngau yn caniatáu ar gyfer CSS personol yn seiliedig ar nifer o amodau - cymarebau, lled, math o arddangos, ac ati - ond fel arfer yn canolbwyntio o gwmpas min-widtha max-width.

  • Addasu lled y golofn yn ein grid
  • Stacio elfennau yn lle arnofio lle bo angen
  • Newid maint penawdau a thestun i fod yn fwy priodol ar gyfer dyfeisiau

Defnyddiwch ymholiadau'r cyfryngau yn gyfrifol a dim ond fel man cychwyn i'ch cynulleidfaoedd symudol. Ar gyfer prosiectau mwy, ystyriwch seiliau cod pwrpasol ac nid haenau o ymholiadau gan y cyfryngau.

Dyfeisiau a gefnogir

Mae Bootstrap yn cefnogi llond llaw o ymholiadau cyfryngau mewn un ffeil i helpu i wneud eich prosiectau yn fwy priodol ar wahanol ddyfeisiau a datrysiadau sgrin. Dyma beth sydd wedi'i gynnwys:

Label Lled y gosodiad Lled y golofn Lled gwter
Arddangosfa fawr 1200px ac i fyny 70px 30px
Diofyn 980px ac i fyny 60px 20px
Tabledi portreadau 768px ac uwch 42px 20px
Ffonau i dabledi 767px ac is Colofnau hylif, dim lled sefydlog
Ffonau 480px ac yn is Colofnau hylif, dim lled sefydlog 
  1. /* Bwrdd gwaith mawr */
  2. @media ( lleiaf - lled : 1200px ) { ... }     
  3.  
  4. /* Llechen portread i dirwedd a bwrdd gwaith */
  5. @media ( lleiaf - lled : 768px ) a ( lled - mwyaf : 979px ) { ... }        
  6.  
  7. /* Ffôn tirlunio i dabled portread */
  8. @media ( lled - mwyaf : 767px ) { ... }     
  9.  
  10. /* Ffonau tirwedd ac i lawr */
  11. @media ( lled - mwyaf : 480px ) { ... }

Dosbarthiadau cyfleustodau ymatebol

Ar gyfer datblygiad cyflymach sy'n gyfeillgar i ffonau symudol, defnyddiwch y dosbarthiadau cyfleustodau hyn i ddangos a chuddio cynnwys fesul dyfais. Isod mae tabl o'r dosbarthiadau sydd ar gael a'u heffaith ar gynllun ymholiad cyfryngau penodol (wedi'i labelu yn ôl dyfais). Gellir dod o hyd iddynt yn responsive.less.

Dosbarth Ffonau767px ac is Tabledi979px i 768px PenbyrddauDiofyn
.visible-phone Gweladwy
.visible-tablet Gweladwy
.visible-desktop Gweladwy
.hidden-phone Gweladwy Gweladwy
.hidden-tablet Gweladwy Gweladwy
.hidden-desktop Gweladwy Gweladwy

Pryd i ddefnyddio

Defnyddiwch ar sail gyfyngedig ac osgoi creu fersiynau hollol wahanol o'r un safle. Yn lle hynny, defnyddiwch nhw i ategu cyflwyniad pob dyfais. Ni ddylid defnyddio cyfleustodau ymatebol gyda thablau, ac felly nid ydynt yn cael eu cefnogi.

Achos prawf cyfleustodau ymatebol

Newid maint eich porwr neu lwytho ar wahanol ddyfeisiau i brofi'r dosbarthiadau uchod.

I'w weld ar...

Mae nodau gwirio gwyrdd yn dangos bod dosbarth yn weladwy yn eich porth gwylio cyfredol.

  • Ffonio✔ Ffôn
  • Tabled✔ Tabled
  • Penbwrdd✔ Bwrdd gwaith

Wedi'i guddio ar...

Yma, mae nodau gwirio gwyrdd yn nodi bod dosbarth wedi'i guddio yn eich porth gwylio cyfredol.

  • Ffonio✔ Ffôn
  • Tabled✔ Tabled
  • Penbwrdd✔ Bwrdd gwaith