Bootstrap

torolalana

Bootstrap dia miorina amin'ny tsanganana tsanganana 12 mandray andraikitra. Nampidirinay ihany koa ny fisehon'ny sakan'ny ranon-javatra miorina amin'io rafitra io.

Fomba manerantany ho an'ny famerenana CSS, typography ary rohy

Mila doctype HTML5

Bootstrap dia mampiasa singa HTML sy fananana CSS izay mitaky ny fampiasana ny HTML5 doctype. Ataovy azo antoka ny hampiditra azy io any am-piandohan'ny pejy Bootstrapped rehetra ao amin'ny tetikasanao.

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

Typography sy rohy

Ao anatin'ny fisie scaffolding.less , dia nametraka endrika fototra manerantany, typography ary rohy izahay. Indrindra indrindra, izahay:

  • Esory ny sisiny amin'ny vatana
  • Apetraka background-color: white;amin'nybody
  • Ampiasao ny @baseFontFamily, @baseFontSize, ary @baseLineHeightny toetra ho fototry ny typography
  • Mametraha lokon'ny rohy maneran-tany amin'ny alalan'ny @linkColorary ampiharo amin'ny tsipika mitsipitsipika rohy ihany:hover

Avereno amin'ny alàlan'ny Normalize

Tamin'ny Bootstrap 2, ny famerenana CSS nentim-paharazana dia nivoatra mba hampiasana ireo singa avy amin'ny Normalize.css , tetikasa iray nataon'i Nicolas Gallagher izay manome hery ny HTML5 Boilerplate ihany koa .

Ny famerenana vaovao dia mbola hita ao amin'ny reset.less , saingy misy singa maro nesorina noho ny fahafoizan-tena sy ny fahamarinany.

Rafitra grid default tsanganana 12 miaraka amin'ny fihodinana mamaly

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

Ny rafitra grid default nomena ho ampahany amin'ny Bootstrap dia grid 940px-wide, tsanganana 12 .

Manana karazany efatra ihany koa izy io ho an'ny fitaovana sy fanapahan-kevitra isan-karazany: telefaona, sarin'ny tablette, tontolon'ny latabatra sy birao kely, ary birao lehibe mivelatra.

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

Araka ny aseho eto, dia azo amboarina miaraka amin'ny "tsanganana" roa ny lamina fototra iray, izay samy mamakivaky ny tsanganana fototra 12 izay nofaritanay ho ampahany amin'ny rafitry ny grid.


tsanganana offset

4
4 ofy 4
3 ofy 3
3 ofy 3
8 ofy 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Andry fanatobiana

Miaraka amin'ny rafitra static (tsy misy rano) ao amin'ny Bootstrap, dia mora ny manao akany. Mba hanafenana ny atiny dia ampio tsanganana vaovao .rowsy andiana .span*tsanganana ao anaty .span*tsanganana efa misy.

OHATRA

Ny andalana voatokana dia tokony ahitana andiana tsanganana izay manampy ny isan'ny tsanganan'ny ray aman-dreniny. Ohatra, .span3tsanganana roa misy akany dia tokony hapetraka ao anatin'ny .span6.

Ambaratonga 1 amin'ny tsanganana
Ambaratonga 2
Ambaratonga 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Ambaratonga 1 amin'ny tsanganana
  4.     <div class = "row" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Rafitra ranon-javatra 12 mamaly, tsanganana mifototra amin'ny isan-jato

Andry ranon-javatra

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

Isan-jato, fa tsy pixel

Mampiasa isan-jato ho an'ny sakan'ny tsanganana fa tsy piksela raikitra ny rafitry ny ranomandry. Izy io koa dia manana fiovaovan'ny famaliana mitovy amin'ny rafi-pandaminana raikitra, miantoka ny taham-pahamendrehana ho an'ny fanapahan-kevitry ny efijery lehibe sy ny fitaovana.

andalana ranon-javatra

Manaova fluide andalana rehetra amin'ny alàlan'ny fanovana fotsiny .rowamin'ny .row-fluid. Mitovy tanteraka ny tsanganana, ka mahatonga azy ho tena mahitsy ny mifamadika eo anelanelan'ny fisehon'ny raikitra sy ny fluid.

fanamarihana

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

Fikarakarana ranon-javatra

Hafa kely ny fanatobiana miaraka amin'ny grids fluid: tsy mila mifanandrify amin'ny ray aman-dreny ny isan'ny tsanganana misy akany. Fa kosa, averina isaky ny ambaratonga ny tsangananao satria ny andalana tsirairay dia mandray 100% amin'ny tsanganana ray aman-dreny.

Fluida 12
rano 6
rano 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ambaratonga 1 amin'ny tsanganana
  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>

Fanamboarana Grid

Miovaova Sanda default Description
@gridColumns 12 Isan'ny tsanganana
@gridColumnWidth 60px Sakan'ny tsanganana tsirairay
@gridGutterWidth 20px Espace ratsy eo anelanelan'ny tsanganana
@siteWidth Ny fitambaran'ny tsanganana sy tatatra rehetra Manisa ny isan'ny tsanganana sy tatatra mba hametrahana ny sakan'ny .container-fixed()mixin

Variables amin'ny LESS

Namboarina tao amin'ny Bootstrap dia variana vitsivitsy ho an'ny fanamboarana ny rafitra grid 940px default, voarakitra etsy ambony. Ny variables rehetra ho an'ny grid dia voatahiry ao amin'ny variables.less.

Ahoana ny fanamboarana

Ny fanovana ny grid dia midika hoe manova ireo @grid*variables telo ary mamerina indray ny Bootstrap. Ovay ao anaty variables.less ny variables grids ary ampiasao ny iray amin'ireo fomba efatra voarakitra an-tsoratra hamerenana . Raha manampy tsanganana bebe kokoa ianao dia ampio ny CSS ho an'ireo ao amin'ny grid.less.

Mijanona mamaly

Ny fanamboarana ny grid dia tsy miasa afa-tsy amin'ny ambaratonga default, ny grid 940px. Mba hihazonana ny lafiny mamaly amin'ny Bootstrap dia tsy maintsy amboarinao amin'ny responsive.less ihany koa ny grids.

Layouts Modely fototra hamoronana pejin-tranonkala

Filaminana raikitra

Ny fandrindrana 940px mirefy 940px mivelatra, mivondrona ho an'ny tranokala na pejy rehetra omen'ny <div class="container">.

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

Fametrahana ranon-javatra

<div class="container-fluid">manome firafitry ny pejy mora azo, ny sakan'ny min- sy max, ary ny sisiny havia. Tena tsara ho an'ny fampiharana sy doka.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar votoaty-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Votoantin'ny vatana-->
  8.     </div>
  9.   </div>
  10. </div>

Fanontaniana momba ny haino aman- jery ho an'ny fitaovana sy fanapahan-kevitra isan-karazany

Fitaovana mamaly

Ny ataony

Ny fangatahan'ny haino aman-jery dia mamela ny CSS manokana mifototra amin'ny fepetra maromaro — ny tahan'ny, ny sakany, ny karazana fampisehoana, sns — fa matetika mifantoka amin'ny manodidina min-widthsy max-width.

  • Ovao ny sakan'ny tsanganana ao amin'ny grid-tsika
  • Asio singa fa tsy mitsingevana na aiza na aiza ilaina
  • Hanova ny haben'ny lohateny sy lahatsoratra mba ho mety kokoa amin'ny fitaovana

Mampiasà fanontaniana amin'ny haino aman-jery am-pahamendrehana ary ho fanombohana fotsiny ny mpihaino anao amin'ny finday. Ho an'ny tetikasa lehibe kokoa, diniho ny fototry ny kaody voatokana fa tsy ny sosona fanontaniana media.

Fitaovana tohanana

Ny Bootstrap dia manohana fanontaniana media vitsivitsy amin'ny rakitra tokana mba hanampiana ny tetikasanao ho mety kokoa amin'ny fitaovana samihafa sy ny famahana ny efijery. Ireto ny tafiditra ao:

Label Sakan'ny layout Sakan'ny tsanganana Sakan'ny tatatra
finday avo lenta 480px ary ambany Andry ranon-javatra, tsy misy sakany raikitra
Smartphone amin'ny takelaka 767px sy ambany Andry ranon-javatra, tsy misy sakany raikitra
Takela-bato misy sary 768px sy ambony 42px 20px
toerana misy anao 980px sy ambony 60px 20px
Fampisehoana lehibe 1200px ary ambony 70px 30px

Mitaky meta tag

Mba hahazoana antoka fa ny fitaovana dia mampiseho pejy mandray tsara, ampidiro ny meta tag viewport.

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

Mampiasa ny fanontaniam-baovao

Ny Bootstrap dia tsy mampiditra ho azy ireo fanontaniana amin'ny haino aman-jery, fa ny fahazoana sy ny fampidirana azy ireo dia tena mora ary mitaky fanamboarana kely. Manana safidy vitsivitsy ianao hampidirana ireo endri-javatra mamaly an'i Bootstrap:

  1. Ampiasao ny dikan-teny mitambatra, bootstrap-responsive.css
  2. Ampio @import "responsive.less" ary amboary indray ny Bootstrap
  3. Ovao sy amboary indray ny responsive.less ho rakitra misaraka

Maninona raha ampidirina fotsiny? Raha ny marina, tsy ny zava-drehetra no mila mamaly. Raha tokony hamporisika ny mpamorona hanala an'io endri-javatra io izahay, dia heverinay fa tsara kokoa ny mamela azy io.

  1.   // telefaonina sy midina
  2.   @media ( max - sakany : 480px ) { ... }     
  3.  
  4.   // telefaonina mitsivalana mankany amin'ny takelaka sarintany
  5.   @media ( max - sakany : 768px ) { ... }     
  6.  
  7.   // Sarintany takelaka amin'ny lanezy sy desktop
  8.   @media ( min - sakany : 768px ) ary ( max - sakany : 980px ) { ... }        
  9.  
  10.   // Desktop lehibe
  11.   @media ( min - sakany : 1200px ) { .. }

Kilasy fampiasa mandray andraikitra

F'inona izy ireo

Mba hampivoarana haingana kokoa ho an'ny finday, ampiasao ireto kilasy fampiasa fototra ireto mba hampisehoana sy hanafenana votoaty araka ny fitaovana.

Rahoviana no hampiasaina

Ampiasao amin'ny fototra voafetra ary ialao ny famoronana dikan-teny hafa tanteraka amin'ny tranokala iray ihany. Ampiasao kosa izy ireo mba hamenoana ny famelabelaran'ny fitaovana tsirairay.

Ohatra, azonao atao ny mampiseho <select>singa ho an'ny nav amin'ny fisehon'ny finday, fa tsy amin'ny takelaka na birao.

Fanohanana kilasy

Aseho eto ny tabilao misy ny kilasy tohananay sy ny fiantraikan'izany amin'ny fisehon'ny fangataham-baovao nomena (voamarika amin'ny fitaovana). Hita ao amin'ny responsive.less.

KILASY finday480px ary ambany takela-bato767px sy ambany Desktops768px sy ambony
.visible-phone hita maso
.visible-tablet hita maso
.visible-desktop hita maso
.hidden-phone hita maso hita maso
.hidden-tablet hita maso hita maso
.hidden-desktop hita maso hita maso

Tranga fitsapana

Hanova ny haben'ny navigateur na enta-mavesatra amin'ny fitaovana samihafa mba hitsapana ireo kilasy etsy ambony.

Hita amin'ny...

  • Phone✔ telefaonina
  • Tablety✔ Tablety
  • biraonao✔ Desktop

Miafina amin'ny...

  • Phone✔ telefaonina
  • Tablety✔ Tablety
  • biraonao✔ Desktop