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

Mae'r system grid rhagosodedig a ddarperir yn Bootstrap yn defnyddio 12 colofn sy'n gwneud lled o 724px, 940px (diofyn heb CSS ymatebol wedi'i gynnwys), a 1170px. O dan fannau gwylio 767px, mae'r colofnau'n dod yn hylif ac yn stacio'n fertigol.

  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 nythu'n hawdd. 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 = "span6" > 
  3.     Colofn Lefel 1
  4.     <div class = "row" > 
  5.       <div class = "span3" > Lefel 2 </div> 
  6.       <div class = "span3" > 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

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

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 tirlunio i dabled portread */
  5.   @media ( lled - mwyaf : 767px ) { ... }     
  6.  
  7.   /* Llechen portread i dirwedd a bwrdd gwaith */
  8.   @media ( lleiaf - lled : 768px ) a ( lled - mwyaf : 979px ) { ... }        
  9.  
  10.   /* Bwrdd gwaith mawr */
  11.   @media ( lleiaf - lled : 1200px ) { ... }

Dosbarthiadau cyfleustodau ymatebol

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Ffôn
  • Tablet✔ Tabled
  • Desktop✔ 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