Bootstrap

Kumanga

Bootstrap imamangidwa pama gridi amitundu 12, masanjidwe, ndi zida.

Zokonda padziko lonse lapansi

Imafunika HTML5 doctype

Bootstrap imagwiritsa ntchito zinthu zina za HTML ndi CSS zomwe zimafuna kugwiritsa ntchito HTML5 doctype. Phatikizanipo kumayambiriro kwa ntchito zanu zonse.

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

Kujambula ndi maulalo

Bootstrap imayika mawonedwe oyambira padziko lonse lapansi, typography, ndi masitayilo a ulalo. Makamaka, ife:

  • Chotsani marginpa thupi
  • Khalani background-color: white;pabody
  • Gwiritsani ntchito @baseFontFamily, @baseFontSize, ndi mawonekedwe @baseLineHeightmonga typographic maziko athu
  • Khazikitsani mtundu wa ulalo wapadziko lonse kudzera @linkColorndikugwiritsa ntchito mizere ya ulalo pokha:hover

Masitayilo awa atha kupezeka mkati mwa scaffolding.less .

Bwezerani kudzera mwa Normalize

Ndi Bootstrap 2, chipika chakale chokhazikitsanso chatsitsidwa mokomera Normalize.css , pulojekiti ya Nicolas Gallagher ndi Jonathan Neal yomwe imapatsanso mphamvu HTML5 Boilerplate . Ngakhale timagwiritsa ntchito zambiri za Normalize mkati mwa reset.less , tachotsa zinthu zina za Bootstrap.

Njira yofikira pa gridi

Live grid chitsanzo

Makina osasinthika a gridi ya Bootstrap amagwiritsa ntchito mizati 12 , kupanga chidebe chachikulu cha 940px popanda kuyankha . Ndi fayilo yomvera ya CSS yowonjezeredwa, gululiyo imasintha kukhala 724px ndi 1170px m'lifupi kutengera malo anu owonera. Pansi pa mawonedwe a 767px, mizatiyo imakhala yamadzimadzi ndipo imasunthidwa molunjika.

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

HTML yoyambira grid

Kuti mupange magawo awiri osavuta, pangani a .rowndikuwonjezera nambala yoyenera .span*yamizere. Popeza iyi ndi gridi ya mizere 12, iliyonse .span*imatambasula zingapo mwa magawo 12, ndipo nthawi zonse imayenera kuwonjezera mpaka 12 pamzere uliwonse (kapena kuchuluka kwa magawo a kholo).

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

Potengera chitsanzo ichi, tili .span4ndi .span8, kupanga mizati 12 ndi mzere wathunthu.

Kuchepetsa mizati

Sunthani mizati kumanja pogwiritsa ntchito .offset*makalasi. Kalasi iliyonse imawonjezera malire akumanzere kwa ndime ndi gawo lonse. Mwachitsanzo, .offset4amasuntha .span4mizati inayi.

4
3 sintha 2
3 kutsitsa 1
3 sintha 2
6 zotsati 3 
  1. <div class = "mzere" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Mizati ya zisa

Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .rowndi magulu omwe ali .span*mgulu lomwe lilipo .span*. Mizere yoyikidwa mu zisa iyenera kukhala ndi zigawo zomwe zimawonjezera kuchuluka kwa mizere ya kholo lawo.

Gawo 1 gawo
Gawo 2
Gawo 2 
  1. <div class = "mzere" > 
  2.   <div class = "span9" > 
  3.     Gawo 1 gawo
  4.     <div class = "mzere" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid system

Chitsanzo cha grid madzi amoyo

Dongosolo la gridi yamadzimadzi limagwiritsa ntchito maperesenti m'malo mwa ma pixels pazambiri. Ili ndi mphamvu zoyankhira zomwezo monga dongosolo lathu lokhazikika la gridi, kuwonetsetsa kuchuluka koyenera pazosankha zazikulu zazithunzi ndi zida.

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

Basic fluid grid HTML

Pangani mzere uliwonse "madzimadzi" posintha .rowkukhala .row-fluid. Makalasi a magawo amakhala chimodzimodzi, zomwe zimapangitsa kuti zikhale zosavuta kusuntha pakati pa gridi yokhazikika ndi yamadzimadzi.

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

Fluid offsetting

Imagwira ntchito mofanana ndi ndondomeko yokhazikika ya grid system: onjezani pamndandanda .offset*uliwonse kuti muthetse ndi mizere yambiri.

4
4 sintha 4
3 kutsitsa 3
3 kutsitsa 3
6 chita 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Madzi amadzimadzi

Ma gridi amadzimadzi amagwiritsa ntchito zisa mosiyanasiyana: mulingo uliwonse wa zisa uyenera kuwonjezera mpaka mizati 12. Izi ndichifukwa choti gululi lamadzimadzi limagwiritsa ntchito maperesenti, osati ma pixel, pokhazikitsa m'lifupi.

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

Mapangidwe

Masanjidwe okhazikika

Amapereka mawonekedwe amtundu wokhazikika (ndipo omvera) omwe <div class="container">amafunikira okha.

  1. <thupi>
  2.   <div class = "chotengera" > 
  3.     ...
  4.   </div>
  5. </ thupi>

Kapangidwe kamadzimadzi

Pangani tsamba lamadzi, la magawo awiri ndi <div class="container-fluid">-labwino pamapulogalamu ndi zolemba.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Zam'mbali mwa mbali-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Zokhudza thupi-->
  8.     </div>
  9.   </div>
  10. </div>

Mapangidwe omvera

Kuthandizira mawonekedwe omvera

Yatsani CSS yomvera mu projekiti yanu pophatikiza meta tag yoyenera ndi masitayelo owonjezera mkati <head>mwa chikalata chanu. Ngati mwapanga Bootstrap kuchokera patsamba la Sinthani Mwamakonda Anu, muyenera kungophatikiza meta tag.

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

Mungodziwiratu!Bootstrap sichimaphatikizapo zomvera mwachisawawa panthawiyi chifukwa sizinthu zonse zomwe zimayenera kuyankha. M'malo molimbikitsa omanga kuti achotse izi, timawona kuti ndibwino kuti tithandizire momwe zingafunikire.

Za Bootstrap yomvera

Zipangizo zomvera

Mafunso azama media amalola CSS yokhazikika kutengera momwe zinthu ziliri, kuchuluka, kutalika, mtundu wowonetsera, ndi zina zambiri, koma nthawi zambiri zimayang'ana mozungulira min-widthndi max-width.

  • Sinthani kukula kwa gawo mu gridi yathu
  • Sakanizani zinthu m'malo moyandama ngati kuli kofunikira
  • Sinthani kukula kwa mitu ndi mawu kuti zikhale zoyenera pazida

Gwiritsani ntchito mafunso atolankhani moyenera komanso ngati poyambira kwa omvera anu am'manja. Pama projekiti akuluakulu, lingalirani zoyambira zodzipatulira osati magawo a mafunso azama TV.

Zida zothandizira

Bootstrap imathandizira mafunso angapo atolankhani mufayilo imodzi kuti ikuthandizeni kupanga mapulojekiti anu kukhala oyenera pazida zosiyanasiyana komanso zowonera. Nazi zomwe zikuphatikizidwa:

Label Kamangidwe m'lifupi M'lifupi mwake Kuchuluka kwa ngalande
Chiwonetsero chachikulu 1200px ndi mmwamba 70px pa 30px pa
Zosasintha 980px ndi mmwamba 60px pa 20px pa
Mapiritsi a zithunzi 768px ndi pamwamba 42px pa 20px pa
Mafoni ku mapiritsi 767px ndi pansipa Zigawo zamadzimadzi, palibe makulidwe okhazikika
Mafoni 480px ndi pansipa Zigawo zamadzimadzi, palibe makulidwe okhazikika 
  1. /* Desktop yayikulu */
  2. @media ( min - wide : 1200px ) { ... }     
  3.  
  4. /* Chithunzi piritsi ku malo ndi desktop */
  5. @media ( min - wide : 768px ) ndi ( max - wide : 979px ) { ... }        
  6.  
  7. /* Mawonekedwe a foni kuti azijambula piritsi */
  8. @media ( max - wide : 767px ) { ... }     
  9.  
  10. /* Mafoni amtundu ndi pansi */
  11. @media ( max - wide : 480px ) { ... }

Makalasi othandizira omvera

Kuti mupange chitukuko chosavuta kugwiritsa ntchito mafoni, gwiritsani ntchito makalasi othandizirawa kuti muwonetse ndikubisa zomwe zili pazida. M'munsimu muli tebulo la makalasi omwe alipo ndi zotsatira zake pamafunso amtundu woperekedwa (olembedwa ndi chipangizo). Amapezeka mu responsive.less.

Kalasi Mafoni767px ndi pansipa Mapiritsi979px mpaka 768px Makompyuta apakompyutaZosasintha
.visible-phone Zowoneka
.visible-tablet Zowoneka
.visible-desktop Zowoneka
.hidden-phone Zowoneka Zowoneka
.hidden-tablet Zowoneka Zowoneka
.hidden-desktop Zowoneka Zowoneka

Nthawi yoti mugwiritse ntchito

Gwiritsani ntchito pang'ono ndikupewa kupanga mitundu yosiyana ya tsamba lomwelo. M'malo mwake, zigwiritseni ntchito kuti zigwirizane ndi mawonekedwe a chipangizo chilichonse. Zida zoyankhira siziyenera kugwiritsidwa ntchito ndi matebulo, ndipo motero sizimathandizidwa.

Chiyeso choyeserera cha zida zoyankhira

Sinthani kukula kwa msakatuli wanu kapena tsegulani pazida zosiyanasiyana kuti muyese makalasi omwe ali pamwambapa.

Zowoneka pa...

Zizindikiro zobiriwira zikuwonetsa kuti kalasi ikuwoneka pamalo omwe mumawonera.

  • Foni✔ Foni
  • Piritsi✔ Tablet
  • Pakompyuta✔ Pakompyuta

Zobisika pa...

Apa, zolembera zobiriwira zikuwonetsa kuti kalasi yabisika pamalo omwe mukuwona.

  • Foni✔ Foni
  • Piritsi✔ Tablet
  • Pakompyuta✔ Pakompyuta