Bootstrap

Sgaffaldiau

Mae Bootstrap wedi'i adeiladu ar grid 12 colofn ymatebol. Rydym hefyd wedi cynnwys cynlluniau lled sefydlog a hylif yn seiliedig ar y system honno.

Arddulliau byd-eang ar gyfer ailosod CSS, teipograffeg, a dolenni

Angen doctype HTML5

Mae Bootstrap yn defnyddio elfennau HTML a phriodweddau CSS sy'n gofyn am ddefnyddio'r doctype HTML5. Gwnewch yn siŵr ei gynnwys ar ddechrau pob tudalen Bootstrapped yn eich prosiect.

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

Teipograffeg a chysylltiadau....

O fewn y ffeil scaffolding.less , rydym yn gosod arddangos byd-eang sylfaenol, teipograffeg, ac arddulliau cyswllt. Yn benodol, rydym yn:

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

Ailosod trwy Normalize

O Bootstrap 2, mae'r ailosodiad CSS traddodiadol wedi esblygu i wneud defnydd o elfennau o Normalize.css , prosiect gan Nicolas Gallagher sydd hefyd yn pweru'r Boilerplate HTML5 .

Gellir dod o hyd i'r ailosodiad newydd o hyd yn reset.less , ond gyda llawer o elfennau wedi'u tynnu er mwyn bod yn gryno a chywir.

System grid ddiofyn 12 colofn gyda thro ymatebol

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

Y system grid ddiofyn a ddarperir fel rhan o Bootstrap yw grid 940px o led, 12 colofn .

Mae ganddo hefyd bedwar amrywiad ymatebol ar gyfer dyfeisiau a phenderfyniadau amrywiol: ffôn, portread llechen, tirwedd bwrdd a byrddau gwaith bach, a byrddau gwaith sgrin lydan fawr.

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

Fel y dangosir yma, gellir creu cynllun sylfaenol gyda dwy "golofn," pob un yn rhychwantu nifer o'r 12 colofn sylfaenol a ddiffiniwyd gennym fel rhan o'n system grid.


Colofnau gwrthbwyso

4
4 gwrthbwyso 4
3 gwrthbwyso 3
3 gwrthbwyso 3
8 gwrthbwyso 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Colofnau nythu

Gyda'r system grid statig (di-hylif) yn Bootstrap, mae'n hawdd nythu. I nythu'ch cynnwys, ychwanegwch set newydd .rowo .span*golofnau o fewn .span*colofn sy'n bodoli eisoes.

Enghraifft

Dylai rhesi nythu gynnwys set o golofnau sy'n adio i nifer colofnau ei riant. Er enghraifft, .span3dylid gosod dwy golofn nythu o fewn .span6.

Lefel 1 y golofn
Lefel 2
Lefel 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Lefel 1 y golofn
  4.     <div class = "row" > 
  5.       <div class = "span6" > Lefel 2 </div> 
  6.       <div class = "span6" > Lefel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

System grid hylif 12 colofn ymatebol, yn seiliedig ar y cant

Colofnau hylif

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

Canrannau, nid picseli

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

Rhesi hylif

Gwnewch unrhyw hylif rhes yn syml trwy newid .rowi .row-fluid. Mae'r colofnau'n aros yr un peth, gan ei gwneud hi'n hynod syml troi rhwng gosodiadau sefydlog a hylif.

Marcio

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

Hylif nythu

Mae nythu gyda gridiau hylif ychydig yn wahanol: nid oes angen i nifer y colofnau nythu gyfateb i'r rhiant. Yn lle hynny, caiff eich colofnau eu hailosod ar bob lefel oherwydd bod pob rhes yn cymryd 100% o'r golofn rhiant.

Hylif 12
Hylif 6
Hylif 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Lefel 1 y golofn
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Lefel 2 </div> 
  6.       <div class = "span6" > Lefel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Addasu grid

Amrywiol Gwerth diofyn Disgrifiad
@gridColumns 12 Nifer y colofnau
@gridColumnWidth 60px Lled pob colofn
@gridGutterWidth 20px Gofod negyddol rhwng colofnau
@siteWidth Swm cyfrifedig yr holl golofnau a chwteri Yn cyfrif nifer y colofnau a'r cwteri i led gosod y .container-fixed()mixin

Newidynnau mewn LLAI

Wedi'u hymgorffori yn Bootstrap mae llond llaw o newidynnau ar gyfer addasu'r system grid 940px rhagosodedig, a ddogfennwyd uchod. Mae'r holl newidynnau ar gyfer y grid yn cael eu storio mewn variables.less.

Sut i addasu

Mae addasu'r grid yn golygu newid y tri @grid*newidyn ac ail-grynhoi Bootstrap. Newidiwch y newidynnau grid mewn newidynnau.less a defnyddiwch un o'r pedair ffordd sydd wedi'u dogfennu i ail-grynhoi . Os ydych chi'n ychwanegu mwy o golofnau, gwnewch yn siŵr eich bod chi'n ychwanegu'r CSS ar gyfer y rhai yn grid.less.

Aros yn ymatebol

Mae addasu'r grid yn gweithio ar y lefel ddiofyn yn unig, sef y grid 940px. Er mwyn cynnal agweddau ymatebol Bootstrap, bydd yn rhaid i chi hefyd addasu'r gridiau yn ymatebol.less.

Cynlluniau Templedi sylfaenol i greu tudalennau gwe

Gosodiad sefydlog

Y gosodiad diofyn a syml 940px-eang, wedi'i ganoli ar gyfer bron unrhyw wefan neu dudalen a ddarperir gan un ffeil <div class="container">.

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

Gosodiad hylif

<div class="container-fluid">yn rhoi strwythur tudalen hyblyg, lled isaf ac uchaf, a bar ochr chwith. Mae'n wych ar gyfer apps 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>

Dylunio ymatebol Ymholiadau cyfryngau ar gyfer dyfeisiau a datrysiadau amrywiol

Dyfeisiau ymatebol

Beth maen nhw'n ei wneud

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
Ffonau clyfar 480px ac yn is Colofnau hylif, dim lled sefydlog
Ffonau clyfar i dabledi 767px ac is Colofnau hylif, dim lled sefydlog
Tabledi portreadau 768px ac uwch 42px 20px
Diofyn 980px ac i fyny 60px 20px
Arddangosfa fawr 1200px ac i fyny 70px 30px

Angen tag meta

Er mwyn sicrhau bod dyfeisiau'n arddangos tudalennau ymatebol yn gywir, cynhwyswch y tag meta viewport.

  1. <meta name = "viewport" content = "lled=lled-dyfais, cychwynnol-graddfa=1.0" >

Defnyddio ymholiadau'r cyfryngau

Nid yw Bootstrap yn cynnwys yr ymholiadau cyfryngau hyn yn awtomatig, ond mae eu deall a'u hychwanegu yn hawdd iawn ac nid oes angen llawer o osodiadau arnynt. Mae gennych ychydig o opsiynau ar gyfer cynnwys nodweddion ymatebol Bootstrap:

  1. Defnyddiwch y fersiwn ymatebol a luniwyd, bootstrap-responsive.css
  2. Ychwanegu @import "responsive.less" ac ail-grynhoi Bootstrap
  3. Addasu ac ail-grynhoi ymatebol.less fel ffeil ar wahân

Beth am ei gynnwys yn unig? Dweud y gwir, nid oes angen i bopeth fod yn ymatebol. Yn lle annog datblygwyr i gael gwared ar y nodwedd hon, rydyn ni'n ei chyfrifo orau i'w galluogi.

  1.   // Ffonau tirwedd ac i lawr
  2.   @media ( lled - mwyaf : 480px ) { ... }     
  3.  
  4.   // Ffôn tirwedd i dabled portread
  5.   @media ( lled - mwyaf : 768px ) { ... }     
  6.  
  7.   // Portread tabled i dirwedd a bwrdd gwaith
  8.   @media ( lleiaf - lled : 768px ) a ( lled - mwyaf : 980px ) { ... }        
  9.  
  10.   // Bwrdd gwaith mawr
  11.   @media ( lleiaf - lled : 1200px ) { .. }

Dosbarthiadau cyfleustodau ymatebol

Beth ydyn nhw

Ar gyfer datblygiad cyflymach sy'n gyfeillgar i ffonau symudol, defnyddiwch y dosbarthiadau cyfleustodau sylfaenol hyn i ddangos a chuddio cynnwys fesul dyfais.

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.

Er enghraifft, efallai y byddwch chi'n dangos <select>elfen ar gyfer llywio ar gynlluniau symudol, ond nid ar dabledi na byrddau gwaith.

Dosbarthiadau cefnogi

Dyma dabl o'r dosbarthiadau rydyn ni'n eu cefnogi a'u heffaith ar gynllun ymholiad cyfryngau penodol (wedi'i labelu gan ddyfais). Gellir dod o hyd iddynt yn responsive.less.

Dosbarth Ffonau480px ac yn is Tabledi767px ac is Penbyrddau768px ac uwch
.visible-phone Gweladwy
.visible-tablet Gweladwy
.visible-desktop Gweladwy
.hidden-phone Gweladwy Gweladwy
.hidden-tablet Gweladwy Gweladwy
.hidden-desktop Gweladwy Gweladwy

Achos prawf

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

I'w weld ar...

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

Wedi'i guddio ar...

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