Bootstrap

Kumanga

Bootstrap imamangidwa pa gridi yomvera yamagulu 12. Taphatikizanso masanjidwe okhazikika komanso amadzimadzi-width motengera dongosololi.

Masitayilo apadziko lonse lapansi a CSS reset, typography, ndi maulalo

Imafunika HTML5 doctype

Bootstrap imagwiritsa ntchito zinthu za HTML ndi CSS zomwe zimafuna kugwiritsa ntchito HTML5 doctype. Onetsetsani kuti mwayiphatikiza kumayambiriro kwa tsamba lililonse la Bootstrapped mu polojekiti yanu.

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

Kujambula ndi maulalo

Mkati mwa fayilo ya scaffolding.less , timayika mawonedwe ofunikira padziko lonse lapansi, kalembedwe, ndi masitaelo a maulalo. Makamaka, ife:

  • Chotsani malire pathupi
  • Khalani background-color: white;pabody
  • Gwiritsani ntchito @baseFontFamily, @baseFontSize, ndi mawonekedwe @baseLineHeightngati maziko athu a kalembedwe
  • Khazikitsani mtundu wa ulalo wapadziko lonse kudzera @linkColorndikugwiritsa ntchito mizere ya ulalo pokha:hover

Bwezerani kudzera mwa Normalize

Pofika pa Bootstrap 2, kukonzanso kwachikhalidwe kwa CSS kwasintha kugwiritsa ntchito zinthu zochokera ku Normalize.css , pulojekiti ya Nicolas Gallagher yomwe imapatsanso mphamvu HTML5 Boilerplate .

Kukonzanso kwatsopano kumatha kupezekabe mu reset.less , koma ndi zinthu zambiri zomwe zachotsedwa chifukwa chakufupikitsa komanso kulondola.

Makina osasinthika a gridi 12 mizati yokhala ndi kupindika komvera

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

Makina osasinthika a gridi omwe amaperekedwa ku Bootstrap amagwiritsa ntchito mizati 12 yomwe imapereka m'lifupi mwake 724px, 940px (zosasinthika popanda CSS yomvera ikuphatikizidwa), ndi 1170px. Pansi pa mawonedwe a 767px, mizatiyo imakhala yamadzimadzi ndipo imasunthidwa molunjika.

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

Monga tawonera apa, masanjidwe oyambira atha kupangidwa ndi "mizere" iwiri, iliyonse imakhala ndi magawo 12 oyambira omwe tafotokoza kuti ndi gawo la gridi yathu.


Kuchepetsa mizati

4
4 sintha 4
3 kutsitsa 3
3 kutsitsa 3
8 gawo 4 
  1. <div class = "mzere" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Mizati ya zisa

Ndi static (non-fluid) grid system ku Bootstrap, kumanga zisa ndikosavuta. Kuti muwononge zomwe muli nazo, ingowonjezerani zatsopano .rowndi magulu omwe ali .span*muzambiri zomwe zilipo kale .span*.

Chitsanzo

Mizere yoyikidwa mu zisa iyenera kukhala ndi zigawo zomwe zimawonjezera kuchuluka kwa mizere ya kholo lawo. Mwachitsanzo, .span3mizati iwiri yokhala ndi zisa iyenera kuyikidwa mkati mwa .span6.

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

Fluid grid system 12 yoyankha, magawo otengera peresenti

Mizati yamadzimadzi

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

Maperesenti, osati ma pixel

Dongosolo la gridi yamadzimadzi limagwiritsa ntchito maperesenti pamagawo apakati m'malo mwa ma pixel okhazikika. Ilinso ndi kusinthika kofanana ndi kachitidwe kathu ka gridi yokhazikika, kuwonetsetsa kuchuluka koyenera pazosankha zazikulu zazithunzi ndi zida.

Mizere yamadzimadzi

Pangani mzere uliwonse wamadzimadzi posintha .rowkukhala .row-fluid. Mipingo imakhala yofanana ndendende, zomwe zimapangitsa kuti zikhale zowongoka kwambiri kuti zisinthe pakati pa masanjidwe okhazikika ndi amadzimadzi.

Markup

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

Madzi amadzimadzi

Kuyika zisa ndi ma gridi amadzimadzi ndikosiyana pang'ono: kuchuluka kwa zisa zomwe zili ndi zisa sizifunikira kufanana ndi kholo. M'malo mwake, magawo anu amakonzedwanso pamlingo uliwonse chifukwa mzere uliwonse umatenga 100% ya gawo la makolo.

Madzi 12
Madzi 6
Madzi 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Gawo 1 la gawo
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Kusintha kwa gridi

Zosintha Mtengo wofikira Kufotokozera
@gridColumns 12 Chiwerengero cha mizati
@gridColumnWidth 60px pa Kukula kwa ndime iliyonse
@gridGutterWidth 20px pa Malo opanda pake pakati pa mizati

Zosintha mu LESS

Omangidwa mu Bootstrap ndi mitundu ingapo yosinthira makonda a 940px grid system, zolembedwa pamwambapa. Zosintha zonse za gridi zimasungidwa mu variables.less.

Momwe mungasinthire mwamakonda anu

Kusintha gululi kumatanthauza kusintha zosintha zitatu @grid*ndikubwezeretsanso Bootstrap. Sinthani zosintha za gululi mu zosintha.less ndikugwiritsa ntchito imodzi mwa njira zinayi zolembedwa kuti muwonjezere . Ngati mukuwonjezera mizati yambiri, onetsetsani kuti mwawonjezera CSS kwa omwe ali mu grid.less.

Kukhala omvera

Kusintha kwa gridi kumangogwira ntchito mosakhazikika, gridi ya 940px. Kuti mukhalebe ndi mawonekedwe a Bootstrap, muyeneranso kusintha ma grids mu responsive.less.

Ma templates Basic kuti mupange masamba

Masanjidwe okhazikika

Zosasintha komanso zosavuta 940px-wide, masanjidwe apakati pafupifupi patsamba lililonse kapena tsamba loperekedwa ndi <div class="container">.

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

Kapangidwe kamadzimadzi

<div class="container-fluid">imapereka mawonekedwe osinthika amasamba, min- ndi max-widths, ndi chotchinga chakumanzere. Ndi yabwino kwa mapulogalamu 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>

Mayankho kapangidwe Media mafunso kwa zipangizo zosiyanasiyana ndi zisankho

Zipangizo zomvera

Zomwe amachita

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 zigawo za 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
Mafoni am'manja 480px ndi pansipa Zigawo zamadzimadzi, palibe makulidwe okhazikika
Ma Smartphones ku mapiritsi 767px ndi pansipa Zigawo zamadzimadzi, palibe makulidwe okhazikika
Mapiritsi a zithunzi 768px ndi pamwamba 42px pa 20px pa
Zosasintha 980px ndi mmwamba 60px pa 20px pa
Chiwonetsero chachikulu 1200px ndi mmwamba 70px pa 30px pa

Imafunika meta tag

Kuti muwonetsetse kuti zida zikuwonetsa masamba omvera bwino, phatikizani tag yowonera.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Kugwiritsa ntchito mafunso pa media

Bootstrap sichimangophatikiza mafunso awa, koma kumvetsetsa ndikuwonjezera ndikosavuta ndipo kumafuna kukhazikitsidwa kochepa. Muli ndi zosankha zingapo zophatikizira zomvera za Bootstrap:

  1. Gwiritsani ntchito mtundu womvera wophatikizidwa, bootstrap-responsive.css
  2. Onjezani @import "responsive.less" ndikubwezeretsani Bootstrap
  3. Sinthani ndi kubwereza responsive.less ngati fayilo yosiyana

Bwanji osangophatikizamo? Kunena zoona, sikuti zonse zimafunika kulabadira. M'malo molimbikitsa okonza mapulogalamu kuti achotse izi, timawona kuti ndibwino kuti tithe.

  1.   /* Mafoni amtundu ndi pansi */
  2.   @media ( max - wide : 480px ) { ... }     
  3.  
  4.   /* Mawonekedwe a foni kuti azijambula piritsi */
  5.   @media ( max - wide : 767px ) { ... }     
  6.  
  7.   /* Chithunzi piritsi ku malo ndi desktop */
  8.   @media ( min - wide : 768px ) ndi ( max - wide : 979px ) { ... }        
  9.  
  10.   /* Desktop yayikulu */
  11.   @media ( min - wide : 1200px ) { ... }

Makalasi othandizira omvera

Ndiziyani

Kuti mukhale ofulumira kugwiritsa ntchito mafoni, gwiritsani ntchito makalasi ofunikirawa kuti muwonetse ndi kubisa zomwe zili pazida.

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.

Mwachitsanzo, mutha kuwonetsa <select>chinthu cha nav pamapangidwe am'manja, koma osati pamapiritsi kapena pakompyuta.

Maphunziro othandizira

Chowonetsedwa apa ndi tebulo la makalasi omwe timathandizira ndi momwe amakhudzira pamafunso amtundu wina (olembedwa ndi chipangizo). Amapezeka mu responsive.less.

Kalasi Mafoni480px ndi pansipa Mapiritsi767px ndi pansipa Makompyuta apakompyuta768px ndi pamwamba
.visible-phone Zowoneka
.visible-tablet Zowoneka
.visible-desktop Zowoneka
.hidden-phone Zowoneka Zowoneka
.hidden-tablet Zowoneka Zowoneka
.hidden-desktop Zowoneka Zowoneka

Mlandu woyesera

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