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. Manokana, izahay:

  • Esory marginamin'ny vatana
  • Apetraka background-color: white;amin'nybody
  • Ampiasao ny @baseFontFamily, @baseFontSize, ary @baseLineHeightny toetra ho fototry ny typografika
  • 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 sy Jonathan Neal 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

Mampiasa tsanganana 12 ny rafitra rindrankajy Bootstrap default , manamboatra fitoeran-javatra malalaka 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 .span4sy .span8, manao tsanganana 12 manontolo sy andalana feno.

tsanganana offset

Alefaso miankavanana 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.

Andry 1
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

Tsy mitovy ny fampiasana ny akany ny grids fluide: tokony hiampy tsanganana 12 ny haavon'ny tsanganana tsirairay. Izany dia satria ny grid fluid dia mampiasa isan-jato, fa tsy pixel, amin'ny fametrahana ny sakany.

Fluida 12
rano 6
rano 6
rano 6
rano 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluida 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         rano 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>

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.       <!--Sidebar votoaty-->
  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 misy 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.

  • 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
Fampisehoana lehibe 1200px ary ambony 70px 30px
toerana misy anao 980px sy ambony 60px 20px
Takela-bato misy sary 768px sy ambony 42px 20px
Telefaonina mankany amin'ny takelaka 767px sy ambany Andry ranon-javatra, tsy misy sakany raikitra
finday 480px ary ambany Andry ranon-javatra, tsy misy sakany raikitra 
  1. /* Desktop lehibe */
  2. @media ( min - sakany : 1200px ) { ... }     
  3.  
  4. /* Sarintany amin'ny lanezy sy desktop */
  5. @media ( min - sakany : 768px ) ary ( max - sakany : 979px ) { ... }        
  6.  
  7. /* telefaonina eran-tany mankany amin'ny takelaka misy sary */
  8. @media ( max - sakany : 767px ) { ... }     
  9.  
  10. /* telefaonina sy midina */
  11. @media ( max - sakany : 480px ) { ... }

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 fangataham-baovao nomena (voamarika amin'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. Tsy tokony hampiasaina miaraka amin'ny latabatra ny fitaovana mandray andraikitra, ary tsy tohanana izany.

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