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.

Grid 940px diofyn

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.

Colofnau gwrthbwyso

4 gwrthbwyso 4

3 gwrthbwyso 3

8 gwrthbwyso 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</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

Lefel 1 y golofn

Lefel 2

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

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.

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

<corff>
  <div class = "cynhwysydd" > 
    ...
  </div>
</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.

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

Dyfeisiau a gefnogir

Mae Bootstrap yn cefnogi llond llaw o ymholiadau cyfryngau 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 940px	44px	20px
Diofyn	940px ac i fyny	60px	20px
Arddangosfa fawr	1210px ac i fyny	70px	30px

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

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:

Defnyddiwch y fersiwn ymatebol a luniwyd, bootstrap-responsive.css
Ychwanegu @import "responsive.less" ac ail-grynhoi Bootstrap
Addasu ac ail-grynhoi ymatebol.less fel 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.

  // 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 : 940px ) { ... }        
 
  // Bwrdd gwaith mawr
  @media ( lleiaf - lled : 1200px ) { .. }