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.
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.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </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.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Gyda'r system grid statig (di-hylif) yn Bootstrap, mae'n hawdd nythu. I nythu'ch cynnwys, ychwanegwch set newydd .row
o .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. Er enghraifft, .span3
dylid gosod dwy golofn nythu o fewn .span6
.
- <div class = "row" >
- <div class = "span12" >
- Lefel 1 y golofn
- <div class = "row" >
- <div class = "span6" > Lefel 2 </div>
- <div class = "span6" > Lefel 2 </div>
- </div>
- </div>
- </div>
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.
Gwnewch unrhyw hylif rhes yn syml trwy newid .row
i .row-fluid
. Mae'r colofnau'n aros yr un peth, gan ei gwneud hi'n hawdd iawn troi rhwng gosodiadau sefydlog a hylif.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div class = "row-fluid" >
- <div class = "span12" >
- Lefel 1 y golofn
- <div class = "row-fluid" >
- <div class = "span6" > Lefel 2 </div>
- <div class = "span6" > Lefel 2 </div>
- </div>
- </div>
- </div>
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 |
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.
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.
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.
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">
.
- <corff>
- <div class = "cynhwysydd" >
- ...
- </div>
- </corff>
<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.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Cynnwys y bar ochr-->
- </div>
- <div class = "span10" >
- <!--Cynnwys y corff-->
- </div>
- </div>
- </div>
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 | |
Tabledi portreadau | 480px i 768px | Colofnau hylif, dim lled sefydlog | |
Tabledi tirwedd | 768px i 979px | 42px | 20px |
Diofyn | 980px ac i fyny | 60px | 20px |
Arddangosfa fawr | 1210px ac i fyny | 70px | 30px |
Er mwyn sicrhau bod dyfeisiau'n arddangos tudalennau ymatebol yn gywir, cynhwyswch y tag meta viewport.
- <meta name = "viewport" content = "lled=lled-dyfais, cychwynnol-graddfa=1.0" >
Mae ymholiadau gan y cyfryngau yn caniatáu ar gyfer CSS personol yn seiliedig ar nifer o amodau - cymarebau, lled, math arddangos, ac ati - ond fel arfer yn canolbwyntio o gwmpas min-width
a max-width
.
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:
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.
- // Ffonau tirwedd ac i lawr
- @media ( lled - mwyaf : 480px ) { ... }
- // Ffôn tirwedd i dabled portread
- @media ( lled - mwyaf : 768px ) { ... }
- // Portread tabled i dirwedd a bwrdd gwaith
- @media ( lleiaf - lled : 768px ) a ( lled - mwyaf : 980px ) { ... }
- // Bwrdd gwaith mawr
- @media ( lleiaf - lled : 1200px ) { .. }