Scaffolding

Bootstrap yog tsim los ntawm kev teb 12-kab kab sib chaws. Peb kuj tau suav nrog cov txheej txheem ruaj khov- thiab cov dej dav dav raws li qhov system ntawd.

Default 940px daim phiaj

Lub default grid system muab raws li ib feem ntawm Bootstrap yog 940px-dav, 12-kab kab sib chaws .

Nws kuj tseem muaj plaub qhov kev hloov pauv rau ntau yam khoom siv thiab kev daws teeb meem: xov tooj, ntsiav tshuaj portrait, cov lus toj roob hauv pes thiab cov duab me me, thiab cov duab loj loj.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Raws li tau pom ntawm no, ib qho kev teeb tsa yooj yim tuaj yeem tsim nrog ob "kab", txhua qhov txuas ntxiv ntawm 12 kab hauv paus peb tau txhais ua ib feem ntawm peb cov kab sib chaws.

Offsetting kab

4 offset 4

3 offset 3

8 ua 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Zes kab

Nrog rau qhov zoo li qub (tsis yog kua) kab sib chaws hauv Bootstrap, nesting yog ib qho yooj yim. Txhawm rau zes koj cov ntsiab lus, tsuas yog ntxiv ib qho tshiab .rowthiab cov .span*kab ke hauv ib .span*kab uas twb muaj lawm.

Piv txwv

Qib 1 ntawm kab

Qib 2

<div class = "row" > 
  <div class = "span12" > 
    Qib 1 ntawm kab
    <div class = "row" > 
      <div class = "span6" > Qib 2 </div> 
      <div class = "span6" > Qib 2 </div> 
    </div>
  </div>
</div>

Daim phiaj customization

Hloov pauv	Default tus nqi	Kev piav qhia
`@gridColumns`	12	Tus naj npawb ntawm kab
`@gridColumnWidth`	60 px	Dav ntawm txhua kab
`@gridGutterWidth`	20px ib	Qhov chaw tsis zoo ntawm kab
`@siteWidth`	Muab xam los ntawm tag nrho cov kab thiab gutters	Suav tus naj npawb ntawm kab thiab gutters los teeb qhov dav ntawm `.container-fixed()`mixin

Variables hauv LESS

Ua rau hauv Bootstrap yog ib txhais tes ntawm qhov sib txawv rau kev kho lub neej ntawd 940px kab sib chaws, sau tseg saum toj no. Txhua qhov hloov pauv rau daim phiaj yog khaws cia hauv variables.less.

Yuav ua li cas kho

Hloov kho daim phiaj txhais tau tias hloov peb @grid*qhov sib txawv thiab rov ua dua Bootstrap. Hloov cov kab sib chaws sib txawv hauv variables.less thiab siv ib qho ntawm plaub txoj hauv kev sau tseg los ua kom rov ua dua . Yog tias koj ntxiv cov kab ntau ntxiv, nco ntsoov ntxiv CSS rau cov hauv grid.less.

Nyob teb

Customization ntawm daim phiaj tsuas yog ua haujlwm ntawm theem pib, 940px daim phiaj. Txhawm rau tuav cov lus teb ntawm Bootstrap, koj tseem yuav tau kho cov phiaj xwm hauv responsive.less.

Tsau layout

Lub neej ntawd thiab yooj yim 940px-dav, nruab nrab layout rau ib lub vev xaib lossis nplooj ntawv muab los ntawm ib leeg <div class="container">.

<lub cev>
  <div class = "container" > 
    ...
  </div>
</body>

Cov dej layout

<div class="container-fluid">muab cov nplooj ntawv hloov tau yooj yim, min- thiab max-widths, thiab sab laug-tes sab. Nws yog qhov zoo rau apps thiab docs.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebar cov ntsiab lus-->
    </div>
    <div class = "span10" > 
      <!-- Lub cev ntsiab lus-->
    </div>
  </div>
</div>

Cov khoom siv txhawb nqa

Bootstrap txhawb nqa ib txhais tes ntawm cov lus nug xov xwm los pab ua kom koj cov haujlwm tsim nyog ntawm cov khoom siv sib txawv thiab cov kev daws teeb meem ntawm lub vijtsam. Nov yog yam uas suav nrog:

Daim ntawv lo	Layout dav	Kab dav	Gutter dav
Smartphones	480px e ua	Cov kab dej ntws, tsis muaj qhov dav ruaj khov
Portrait ntsiav tshuaj	480 px 768 ib	Cov kab dej ntws, tsis muaj qhov dav ruaj khov
Cov ntsiav tshuaj toj roob hauv pes	768 px 9 40	4 4px	20px ib
Default	9 40px	60 px	20px ib
Loj zaub	12 10px e	70px ib	30px ib

Lawv ua dab tsi

Media queries tso cai rau kev cai CSS raws li ib tug xov tooj ntawm tej yam kev mob - piv txwv, dav, hom zaub, thiab lwm yam - tab sis feem ntau tsom ib ncig min-widththiab max-width.

Hloov qhov dav ntawm kab hauv peb daim phiaj
Muab cov khoom es tsis txhob ntab qhov twg los tau
Hloov cov npe thiab cov ntawv nyeem kom tsim nyog rau cov khoom siv

Siv cov lus nug xov xwm

Bootstrap tsis cia li suav nrog cov lus nug xov xwm no, tab sis kev nkag siab thiab ntxiv lawv yog qhov yooj yim heev thiab yuav tsum tau teeb tsa tsawg. Koj muaj ob peb txoj kev xaiv rau suav nrog cov lus teb ntawm Bootstrap:

Siv cov ntaub ntawv sau ua ke, bootstrap-responsive.css
Ntxiv @import "responsive.less" thiab rov ua dua Bootstrap
Hloov kho thiab rov ua dua responsive.less raws li qhov sib cais

Vim li cas ho tsis suav nrog nws? Qhia tseeb, tsis yog txhua yam yuav tsum tau teb. Es tsis txhob txhawb cov neeg tsim tawm kom tshem tawm cov yam ntxwv no, peb xav tias nws zoo tshaj los pab nws.

  // Toj roob hauv pes xov tooj thiab nqes
  @media ( max - dav : 480px ) { ... }     
 
  // Toj roob hauv pes xov tooj rau portrait ntsiav tshuaj
  @media ( max - dav : 768px ) { ... }     
 
  // Portrait ntsiav tshuaj rau toj roob hauv pes thiab desktop
  @media ( min - dav : 768px ) thiab ( max - dav : 940px ) { ... }        
 
  // Loj desktop
  @media ( min - dav : 1200px ) { .. }