Bootstrap

Scaffolding

Bootstrap yog tsim los ntawm teb 12-kab kab sib chaws, layouts, thiab cov khoom.

Kev teeb tsa thoob ntiaj teb

Yuav tsum tau HTML5 doctype

Bootstrap ua rau siv qee cov ntsiab lus HTML thiab CSS cov khoom uas yuav tsum tau siv HTML5 doctype. suav nrog nws thaum pib ntawm tag nrho koj cov haujlwm.

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

Typography thiab txuas

Bootstrap teeb tsa lub ntiaj teb cov zaub, typography, thiab txuas cov qauv. Tshwj xeeb, peb:

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

Cov qauv no tuaj yeem pom hauv scaffolding.less .

Rov pib dua ntawm Normalize

Nrog Bootstrap 2, qhov qub reset thaiv tau poob rau hauv kev pom zoo ntawm Normalize.css , ib qhov project los ntawm Nicolas Gallagher thiab Jonathan Neal uas tseem ua haujlwm rau HTML5 Boilerplate . Thaum peb siv ntau ntawm Normalize hauv peb qhov reset.less , peb tau tshem qee cov ntsiab lus tshwj xeeb rau Bootstrap.

Default daim phiaj system

Nyob daim phiaj piv txwv

Lub neej ntawd Bootstrap grid system siv 12 kab , ua rau lub thawv 940px dav yam tsis muaj cov yam ntxwv ua haujlwm tau. Nrog cov lus teb CSS cov ntaub ntawv ntxiv, daim phiaj hloov mus ua 724px thiab 1170px dav nyob ntawm koj qhov chaw saib. Hauv qab 767px viewports, cov kab ua kua thiab pawg vertically.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Basic daim phiaj HTML

Rau ib qho yooj yim ob kab layout, tsim ib qho .rowthiab ntxiv cov kab tsim nyog .span*. Raws li qhov no yog 12-kab kab sib chaws, txhua qhov .span*nthuav dav ntau ntawm 12 kab, thiab yuav tsum tau ntxiv txog 12 rau txhua kab (lossis tus naj npawb ntawm kab hauv niam txiv).

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

Muab piv txwv li no, peb muaj .span4thiab .span8, ua rau 12 tag nrho kab thiab ib kab ua tiav.

Offsetting kab

Txav cov kab mus rau sab xis siv .offset*cov chav kawm. Txhua chav kawm nce sab laug ntawm ib kab los ntawm ib kab tag nrho. Piv txwv li, .offset4txav .span4dhau plaub kab.

4
3 offset 2
3 kev 1
3 offset 2
6 ua 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Zes kab

Txhawm rau zes koj cov ntsiab lus nrog daim phiaj xwm txheej, ntxiv ib qho tshiab .rowthiab cov .span*kab hauv kab uas twb muaj lawm .span*. Nested kab yuav tsum suav nrog ib pawg kab uas ntxiv rau cov kab ntawm nws niam nws txiv.

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

Fluid grid system

Nyob ua kua dej piv txwv

Cov kab sib chaws dej siv feem pua ​​​​tsis yog pixels rau kab dav dav. Nws muaj tib lub peev xwm teb raws 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.

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

Basic fluid grid HTML

Ua ib kab "kua" los ntawm kev hloov .rowmus rau .row-fluid. Cov chav kawm kem nyob twj ywm tib yam, ua kom yooj yim hloov ntawm cov kab sib txuas ruaj khov thiab cov kua dej.

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

Kua dej offsetting

Ua haujlwm tib yam li cov kab sib chaws ruaj khov offsetting: ntxiv .offset*rau txhua kem kom offset los ntawm ntau kab.

4
4 offset 4
3 offset 3
3 offset 3
6 kev 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Kua nesting

Cov kab hluav taws xob siv ua zes sib txawv: txhua qib nested ntawm txhua kab yuav tsum ntxiv txog 12 kab. Qhov no yog vim cov kua dej siv feem pua, tsis yog pixels, rau qhov dav dav.

Kua dej 12
Kua dej 6
Kua dej 6
Kua dej 6
Kua dej 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Kua dej 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Kua dej 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Dej 6 </div> 
  9.           <div class = "span6" > Dej 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Dej 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

layouts

Tsau layout

Muab ib qho kev ruaj khov-dav (thiab xaiv tau teb) layout nrog tsuas yog <div class="container">xav tau.

  1. <lub cev>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Cov dej layout

Tsim cov kua dej, ob-kab nplooj ntawv nrog <div class="container-fluid">-zoo rau cov ntawv thov thiab cov ntaub ntawv.

  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

Enabling teb cov yam ntxwv

Qhib cov lus teb CSS hauv koj qhov project los ntawm kev suav nrog cov meta tag thiab cov ntawv sau ntxiv hauv <head>koj daim ntawv. Yog tias koj tau suav nrog Bootstrap los ntawm Customize nplooj ntawv, koj tsuas yog xav tau suav nrog meta tag.

  1. <meta name = "viewport" cov ntsiab lus = "width=device-width, pib-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Tau taub hau!Bootstrap tsis suav nrog cov yam ntxwv ua haujlwm raws li lub sijhawm no vim 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 plaws los pab nws raws li qhov xav tau.

Hais txog teb Bootstrap

Cov khoom siv teb

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 kab lus 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
Loj zaub 1200px thiab siab dua 70px ib 30px ib
Default 9 80px 60 px 20px ib
Portrait ntsiav tshuaj 7 68px ,ua 4 2px 20px ib
Xov tooj rau ntsiav tshuaj 767px ,ua Cov kab dej ntws, tsis muaj qhov dav ruaj khov
Xov tooj 480px e ua Cov kab dej ntws, tsis muaj qhov dav ruaj khov 
  1. /* Loj desktop */
  2. @media ( min - dav : 1200px ) { ... }     
  3.  
  4. /* Portrait ntsiav tshuaj rau toj roob hauv pes thiab desktop */
  5. @media ( min - dav : 768px ) thiab ( max - dav : 979px ) { ... }        
  6.  
  7. /* Toj roob hauv pes xov tooj rau portrait ntsiav tshuaj */
  8. @media ( max - dav : 767px ) { ... }     
  9.  
  10. /* Toj roob hauv pes xov tooj thiab down */
  11. @media ( max - dav : 480px ) { ... }

Responsive utility classes

Rau kev txhim kho mobile-phooj ywg sai dua, siv cov chav kawm siv hluav taws xob no los qhia thiab zais cov ntsiab lus los ntawm lub cuab yeej. Hauv qab no yog ib lub rooj ntawm cov chav kawm muaj thiab lawv cov txiaj ntsig ntawm cov lus nug xov xwm layout (labeled los ntawm cov cuab yeej). Lawv tuaj yeem pom hauv responsive.less.

Chav kawm Xov tooj767px ,ua Cov ntsiav tshuaj979 px 7 68 DesktopsDefault
.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

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. Cov khoom siv hluav taws xob teb yuav tsum tsis txhob siv nrog cov ntxhuav, thiab yog li tsis muaj kev txhawb nqa.

Cov ntaub ntawv siv hluav taws xob teb ua haujlwm

Resize koj tus browser lossis thauj khoom ntawm cov khoom siv sib txawv los sim 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