Bootstrap

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.

Cov qauv thoob ntiaj teb rau CSS rov pib dua, typography, thiab txuas

Yuav tsum tau HTML5 doctype

Bootstrap ua rau siv cov ntsiab lus HTML thiab CSS cov khoom uas yuav tsum tau siv cov HTML5 doctype. Nco ntsoov suav nrog nws thaum pib ntawm txhua nplooj ntawv Bootstrapped hauv koj qhov project.

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

Typography thiab txuas

Nyob rau hauv cov ntaub ntawv scaffolding.less , peb teeb tsa lub ntiaj teb cov zaub yooj yim, typography, thiab txuas cov qauv. Tshwj xeeb, peb:

  • Tshem tawm cov npoo ntawm lub cev
  • Teem background-color: white;rau ntawmbody
  • Siv cov @baseFontFamily, @baseFontSize, thiab @baseLineHeightcov cwj pwm ua peb lub hauv paus typography
  • Teem lub ntiaj teb txuas xim ntawm @linkColorthiab siv qhov txuas hauv qab tsuas yog rau:hover

Rov pib dua ntawm Normalize

Raws li ntawm Bootstrap 2, ib txwm CSS rov pib dua tau hloov zuj zus los ua kom siv cov ntsiab lus los ntawm Normalize.css , ib txoj haujlwm los ntawm Nicolas Gallagher uas tseem ua haujlwm rau HTML5 Boilerplate .

Qhov kev rov pib dua tshiab tseem tuaj yeem pom hauv reset.less , tab sis nrog ntau lub ntsiab lus tshem tawm rau brevity thiab raug.

Default grid system 12 kab nrog lub teb twist

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

Lub default grid system muab hauv Bootstrap siv 12 kab uas ua tawm ntawm qhov dav ntawm 724px, 940px (default tsis teb CSS suav nrog), thiab 1170px. Hauv qab 767px viewports, cov kab ua kua thiab pawg vertically.

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

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


Offsetting kab

4
4 offset 4
3 offset 3
3 offset 3
8 ua 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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

Nested kab yuav tsum suav nrog ib pawg kab uas ntxiv mus rau cov kab ntawm nws niam nws txiv. Piv txwv li, ob kab nested .span3yuav tsum muab tso rau hauv ib lub .span6.

Qib 1 ntawm kab
Qib 2
Qib 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Qib 1 kab
  4.     <div class = "row" > 
  5.       <div class = "span3" > Qib 2 </div> 
  6.       <div class = "span3" > Qib 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid system 12 teb, feem pua-raws kab

Cov kab dej

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

Feem pua, tsis pixels

Cov kab sib chaws dej siv feem pua ​​​​rau kab dav dav tsis yog cov pixels ruaj khov. Nws kuj tseem muaj cov kev hloov pauv zoo ib yam li peb cov kab sib txuas ruaj khov, ua kom muaj qhov sib luag zoo rau cov kev daws teeb meem tseem ceeb thiab cov khoom siv.

Kua kab

Ua tej kab dej yooj yim los ntawm kev hloov .rowmus rau .row-fluid. Cov kab ntawv nyob twj ywm tib yam nkaus, ua rau nws yooj yim heev kom tig ntawm qhov chaw ruaj khov thiab cov kua dej.

Markup

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

Kua nesting

Kev ua zes nrog cov kua dej sib txawv me ntsis: tus naj npawb ntawm cov kab nested tsis tas yuav phim tus niam txiv. Hloov chaw, koj cov kab rov pib dua ntawm txhua qib vim tias txhua kab yuav siv 100% ntawm niam txiv kab.

Kua dej 12
Kua dej 6
Kua dej 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Qib 1 ntawm kab
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Qib 2 </div> 
  6.       <div class = "span6" > Qib 2 </div> 
  7.     </div>
  8.   </div>
  9. </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

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.

Layouts Basic templates los tsim webpages

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

  1. <lub cev>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar cov ntsiab lus-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!-- Lub cev ntsiab lus-->
  8.     </div>
  9.   </div>
  10. </div>

Teb tsim Media queries rau ntau yam khoom siv thiab kev daws teeb meem

Cov khoom siv teb

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 muaj lub luag haujlwm thiab tsuas yog pib rau koj cov neeg tuaj saib hauv xov tooj. Rau cov haujlwm loj dua, xav txog cov txheej txheem tshwj xeeb thiab tsis yog txheej txheej ntawm cov lus nug xov xwm.

Cov khoom siv txhawb nqa

Bootstrap txhawb nqa ib txhais tes ntawm cov lus nug xov xwm hauv ib cov ntaub ntawv los pab ua kom koj cov haujlwm tsim nyog ntawm cov khoom siv sib txawv thiab kev tshuaj ntsuam. 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
Smartphones rau ntsiav tshuaj 767px ,ua Cov kab dej ntws, tsis muaj qhov dav ruaj khov
Portrait ntsiav tshuaj 7 68px ,ua 4 2px 20px ib
Default 9 80px 60 px 20px ib
Loj zaub 1200px thiab siab dua 70px ib 30px ib

Yuav tsum tau meta tag

Txhawm rau kom cov cuab yeej tso saib cov nplooj ntawv teb kom raug, suav nrog cov cim npe pom.

  1. <meta name = "viewport" cov ntsiab lus = "width=device-width, pib-scale=1.0" >

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:

  1. Siv cov ntaub ntawv sau ua ke, bootstrap-responsive.css
  2. Ntxiv @import "responsive.less" thiab rov ua dua Bootstrap
  3. Hloov kho thiab rov ua dua responsive.less ua ib cov ntaub ntawv 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.

  1.   /* Toj roob hauv pes xov tooj thiab nqes */
  2.   @media ( max - dav : 480px ) { ... }     
  3.  
  4.   /* Toj roob hauv pes xov tooj rau portrait ntsiav tshuaj */
  5.   @media ( max - dav : 767px ) { ... }     
  6.  
  7.   /* Portrait ntsiav tshuaj rau toj roob hauv pes thiab desktop */
  8.   @media ( min - dav : 768px ) thiab ( max - dav : 979px ) { ... }        
  9.  
  10.   /* Loj desktop */
  11.   @media ( min - dav : 1200px ) { ... }

Responsive utility classes

Lawv yog dab tsi

Rau kev txhim kho mobile-phooj ywg sai dua, siv cov chav kawm siv hluav taws xob yooj yim no los qhia thiab zais cov ntsiab lus los ntawm lub cuab yeej.

Thaum siv

Siv raws li kev txwv thiab zam kev tsim cov qauv sib txawv ntawm tib lub xaib. Hloov chaw, siv lawv los ntxiv rau txhua lub cuab yeej kev nthuav qhia.

Piv txwv li, tej zaum koj yuav qhia ib lub <select>ntsiab rau nav ntawm mobile layouts, tab sis tsis nyob rau hauv cov ntsiav tshuaj los yog desktops.

Txhawb cov chav kawm

Qhia ntawm no yog lub rooj ntawm cov chav kawm uas peb txhawb nqa thiab lawv cov txiaj ntsig ntawm cov lus nug xov xwm layout (labeled los ntawm ntaus ntawv). Lawv tuaj yeem pom hauv responsive.less.

Chav kawm Xov tooj480px e ua Cov ntsiav tshuaj767px ,ua Desktops7 68px ,ua
.visible-phone Pom tau
.visible-tablet Pom tau
.visible-desktop Pom tau
.hidden-phone Pom tau Pom tau
.hidden-tablet Pom tau Pom tau
.hidden-desktop Pom tau Pom tau

Kuaj li cas

Resize koj tus browser lossis thauj khoom ntawm cov khoom siv sib txawv los kuaj cov chav kawm saum toj no.

Pom tau ntawm ...

Green checkmarks qhia tias chav kawm pom hauv koj qhov chaw saib tam sim no.

  • Xov tooj✔ Xov tooj
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden rau...

Ntawm no, ntsuab checkmarks qhia tias chav kawm tau muab zais rau hauv koj qhov chaw saib tam sim no.

  • Xov tooj✔ Xov tooj
  • Tablet✔ Tablet
  • Desktop✔ Desktop