Bootstrap

Kumanga

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

Makina osasinthika a grid mizati 12 yokhala ndi kupindika komvera

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

Dongosolo lokhazikika la gridi loperekedwa ngati gawo la Bootstrap ndi 940px-wide, 12-column grid .

Ilinso ndi mitundu inayi yomvera pazida zosiyanasiyana ndi malingaliro: foni, chithunzi cha piritsi, mawonekedwe a tebulo ndi ma desktops ang'onoang'ono, ndi ma desktops akulu akulu.

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

Monga momwe tawonetsera pano, mawonekedwe oyambira amatha kupangidwa ndi "mizere" iwiri, iliyonse imakhala ndi magawo 12 oyambira omwe tafotokoza ngati 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 magawo omwe amawonjezera 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 = "span12" > 
  3.     Gawo 1 la gawo
  4.     <div class = "mzere" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > 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

Kumanga zisa ndi ma gridi amadzimadzi ndikosiyana pang'ono: kuchuluka kwa zipilala zokhazikitsidwa sikuyenera 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
@siteWidth Kuwerengera kuchuluka kwa zipilala zonse ndi ma gutters Kuwerengera kuchuluka kwa mizati ndi ngalande kuti muyike m'lifupi mwa .container-fixed()mixin

Zosintha mu LESS

Omangidwa mu Bootstrap ndi mitundu ingapo yosinthira makonda a grid 940px, 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 ndipo gwiritsani 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

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
Mapiritsi a zithunzi 480px mpaka 768px Zigawo zamadzimadzi, palibe makulidwe okhazikika
Mapale mapiritsi 768px mpaka 979px 42px pa 20px pa
Zosasintha 980px ndi mmwamba 60px pa 20px pa
Chiwonetsero chachikulu 1210px ndi mmwamba 70px pa 30px pa

Imafunika meta tag

Kuonetsetsa kuti zida zikuwonetsa masamba omvera moyenera, phatikizani chizindikiro cha meta tag.

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

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

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 kubwezeretsanso 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.   // Mafoni amtundu kuti azijambula piritsi
  5.   @media ( max - wide : 768px ) { ... }     
  6.  
  7.   // Chithunzi piritsi ku malo ndi desktop
  8.   @media ( min - wide : 768px ) ndi ( max - wide : 980px ) { ... }        
  9.  
  10.   // Desktop yayikulu
  11.   @media ( min - wide : 1200px ) { .. }