Bootstrap

torolalana

Bootstrap dia naorina amin'ny tsanganana tsanganana 12, fandrafetana ary singa.

Fikirana manerantany

Mila doctype HTML5

Bootstrap dia mampiasa singa HTML sy fananana CSS sasany izay mitaky ny fampiasana ny HTML5 doctype. Ampidiro any am-piandohan'ny tetikasanao rehetra izany.

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

Typography sy rohy

Ny Bootstrap dia mametraka ny seho eran-tany fototra, ny typography ary ny fomba rohy. Indrindra indrindra, izahay:

  • Esory marginamin'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

Ireo fomba ireo dia hita ao anatin'ny scaffolding.less .

Avereno amin'ny alàlan'ny Normalize

Miaraka amin'ny Bootstrap 2, ny fanakanana famerenana taloha dia najanona ho an'ny Normalize.css , tetikasa iray nataon'i Nicolas Gallagher izay manome hery ny HTML5 Boilerplate ihany koa . Na dia mampiasa ny ankamaroan'ny Normalize ao anatin'ny reset.less izahay, dia nesorinay ny singa sasany manokana ho an'ny Bootstrap.

Default grid system

Ohatra amin'ny Live Grid

Ny rafitry ny grid Bootstrap default dia mampiasa tsanganana 12 , manao kaontenera lehibe 940px tsy misy endri-javatra mandray andraikitra . Miaraka amin'ny fisie CSS mandray andraikitra, ny grid dia miompana amin'ny 724px sy 1170px ny sakany arakaraka ny fijerinao. Eo ambanin'ny habaka fijerena 767px, lasa mivaingana ny tsanganana ary mitsangana mitsangana.

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

Grid HTML fototra

Ho an'ny fametrahana tsanganana roa tsotra, mamorona a .rowary ampio ny isan'ny .span*tsanganana mety. Satria tsanganana 12 tsanganana ity, ny tsirairay .span*dia mirefy 12 amin'ireo tsanganana ireo, ary tokony hanampy hatrany amin'ny 12 isaky ny andalana (na ny isan'ny tsanganana ao amin'ny ray aman-dreny).

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

Raha jerena ity ohatra ity dia manana .span4ary.span8 , manao tsanganana 12 manontolo sy andalana feno.

tsanganana offset

Alefaso miankavia ny tsanganana amin'ny fampiasana .offset*kilasy. Ny kilasy tsirairay dia mampitombo ny sisiny havia amin'ny tsanganana iray manontolo. Ohatra, .offset4mihetsika .span4mihoatra ny tsanganana efatra.

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

Andry fanatobiana

Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .rowsy andiana .span*tsanganana iray ao anatin'ny .span*tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana izay manampy ny isan'ny tsanganan'ny ray aman-dreniny.

OHATRA

Eto dia misy andry roa misy akany .span4apetraka ao anaty .span8.

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

Rafitra ranon-javatra

Ohatra amin'ny grid fluid mivantana

Mampiasa isan-jato fa tsy pixel ho an'ny sakan'ny tsanganana ny rafi-pitantanana rano. Izy io dia manana fahaiza-manao mitovy amin'ny rafi-pandaminana raikitra, miantoka ny ampahany mety amin'ny fanapahan-kevitry ny efijery lehibe sy ny fitaovana.

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

Grid ranoka fototra HTML

Ataovy "fluid" ny andalana rehetra amin'ny fanovana .rowny .row-fluid. Ny kilasin'ny tsanganana dia tsy miova, ka mahatonga azy ho mora ny mivadika eo anelanelan'ny grids raikitra sy fluid.

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

Fanodinana ranon-javatra

Miasa mitovy amin'ny fanonerana ny rafitra rindrankajy raikitra: ampio .offset*amin'ny tsanganana rehetra mba hanonerana ireo tsanganana maro ireo.

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

Fikarakarana ranon-javatra

Hafa kely ny fanatobiana miaraka amin'ny rindran-damina: tsy tokony hifanaraka amin'ny isan'ny tsanganana ny isan'ny tsanganana. Averina kosa ny ambaratonga tsirairay amin'ny tsanganana misy akany 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>

fandrindran-takila

Filaminana raikitra

Manome lamina mitovy amin'ny sakany raikitra (ary azo atao ny mamaly) miaraka amin'ny <div class="container">fepetra takiana ihany.

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

Fametrahana ranon-javatra

Mamorona pejy misy tsanganana roa misy — tsara <div class="container-fluid">ho an'ny fampiharana sy doka.

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

Famolavolana mamaly

Mandeha ny endri-javatra mandray andraikitra

Alefaso ny CSS mamaly ao amin'ny tetikasanao amin'ny fampidirana ny meta tag mety sy ny stylesheet fanampiny ao anatin'ny <head>antontan-taratasinao. Raha nanangona Bootstrap avy amin'ny pejy Customize ianao dia ny meta tag ihany no ilainao.

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

Fampitandremana! Ny Bootstrap dia tsy ahitana endri-javatra mamaly amin'ny alàlan'ny default amin'izao fotoana izao satria 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 araka izay ilaina.

Momba ny Bootstrap responsive

Fitaovana mamaly

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.

  • Ovay 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 480px ary ambany Andry ranon-javatra, tsy misy sakany raikitra
Phone ho tablette 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 
  1. /* telefaonina sy midina */
  2. @media ( max - sakany : 480px ) { ... }     
  3.  
  4. /* telefaonina mitsivalana mankany amin'ny takelaka sariitatra */
  5. @media ( max - sakany : 767px ) { ... }     
  6.  
  7. /* Sarintany amin'ny lanezy sy desktop */
  8. @media ( min - sakany : 768px ) ary ( max - sakany : 979px ) { ... }        
  9.  
  10. /* Desktop lehibe */
  11. @media ( min - sakany : 1200px ) { ... }

Kilasy fampiasa mandray andraikitra

Mba hampivoarana haingana kokoa ho an'ny finday, ampiasao ireto kilasy fampiasa ireto mba hampisehoana sy hanafenana votoaty araka ny fitaovana. Ity ambany ity ny tabilao misy ny kilasy misy sy ny fiantraikan'izany amin'ny fisehon'ny fangatahan'ny haino aman-jery (voamariky ny fitaovana). Hita ao amin'ny responsive.less.

KILASY finday767px sy ambany takela-bato979 ka hatramin'ny 768 px Desktopstoerana misy anao
.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

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.

Toeram-panadinana Utiliti responsive

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

Hita amin'ny...

Ny mari-pamantarana maitso dia manondro fa ny kilasy dia hita ao amin'ny seranan-tsambonao ankehitriny.

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

Miafina amin'ny...

Eto, ny mari-pamantarana maitso dia manondro fa ny kilasy dia miafina ao amin'ny seranan-tsambonao ankehitriny.

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