Bootstrap

Manitatra ny Bootstrap

Ampitomboy ny Bootstrap mba hanararaotra ireo fomba sy singa tafiditra, ary koa ireo fari-pitsipika LESS sy mixins.

Namboarina tamin'ny LESS

KELY CSS

Ny Bootstrap dia vita amin'ny LESS amin'ny fotony, fiteny dynamic stylesheet noforonin'ny namantsika akaiky, Alexis Sellier . Izany dia mahatonga ny fampivoarana CSS mifototra amin'ny rafitra haingana kokoa, mora kokoa ary mahafinaritra kokoa.

Nahoana no KELY?

Ny iray amin'ireo mpamorona ny Bootstrap dia nanoratra lahatsoratra bilaogy haingana momba an'io , fintinina eto:

  • Bootstrap dia manangona haingana kokoa ~ 6x haingana kokoa miaraka amin'ny Kely raha oharina amin'ny Sass
  • Kely dia nosoratana amin'ny JavaScript, izay mahatonga antsika ho mora kokoa ny mitsoraka sy mametaka raha oharina amin'i Ruby miaraka amin'i Sass.
  • Kely no betsaka; tianay ny hahatsapa ho toy ny manoratra CSS ary manao ny Bootstrap ho mora hatonin'ny rehetra.

Inona no tafiditra?

Amin'ny maha fanitarana ny CSS, ny LESS dia ahitana fari-pahalalana, mixins ho an'ny sombin-kaody azo ampiasaina indray, fampandehanana ho an'ny matematika tsotra, fanatobiana, ary na ny loko.

Hamantatra bebe kokoa

Tsidiho ny tranokala ofisialy ao amin'ny http://lesscss.org/ raha te hahalala bebe kokoa.

Manangona Bootstrap miaraka amin'ny Less

Koa satria ny CSS-ntsika dia nosoratana tamin'ny Less ary mampiasa varimbazaha sy mixins, dia mila angonina ho amin'ny fanatanterahana ny famokarana farany. Toy izao ny fomba.

Fanamarihana: Raha mandefa fangatahana misintona amin'ny GitHub ianao miaraka amin'ny CSS novaina, dia tsy maintsy mamerina ny CSS amin'ny alalan'ireo fomba ireo ianao.

Fitaovana fanangonana

Node miaraka amin'ny makefile

Mametraka ny LESS command line compiler, JSHint, Recess, ary uglify-js maneran-tany miaraka amin'ny npm amin'ny alàlan'ny fampandehanana ity baiko manaraka ity:

$ npm install -g less jshint recess uglify-js

Rehefa tafapetraka dia mandehana fotsiny makeavy amin'ny fakan'ny lahatahiry bootstrap anao ary efa vonona ianao.

Fanampin'izany, raha toa ka nametraka watchr ianao, dia mety hihazakazaka make watchhanangana bootstrap ho azy isaky ny manova rakitra ao amin'ny bootstrap lib ianao (tsy ilaina izany, fomba tsotra fotsiny).

Fibaikoana

Ampidiro ny fitaovana tsipika LESS amin'ny alàlan'ny Node ary araho ity baiko manaraka ity:

$ lessc ./less/bootstrap.less > bootstrap.css

Ataovy azo antoka fa ampidirina --compressao amin'io baiko io ianao raha manandrana mamonjy bytes!

Javascript

Ampidino ny Less.js farany ary ampidiro ny lalana mankany aminy (sy Bootstrap) ao amin'ny <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Raha te hanangona indray ireo rakitra .less dia tehirizo fotsiny izy ireo ary avereno avereno ny pejinao. Less.js dia manangona azy ireo ary mitahiry azy ireo amin'ny fitahirizana eo an-toerana.

Fampiharana Mac tsy ofisialy

Ny fampiharana Mac tsy ofisialy dia mijery lahatahiry misy rakitra .less ary manangona ny kaody ho any amin'ny rakitra eo an-toerana isaky ny mitahiry rakitra .less nojerena. Raha tianao dia azonao atao ny manova ny safidinao ao amin'ny fampiharana ho an'ny fampihenana mandeha ho azy ary ny lahatahiry misy ny rakitra natambatra.

Fampiharana bebe kokoa

Crunch

Crunch dia tonian-dahatsoratra LESS tsara tarehy sy mpamoron-kira namboarina tamin'ny Adobe Air.

CodeKit

Noforonin'ilay lehilahy mitovy amin'ny fampiharana Mac tsy ofisialy, CodeKit dia rindranasa Mac izay manangona LESS, SASS, Stylus, ary CoffeeScript.

Simple

Fampiharana Mac, Linux, ary Windows ho an'ny fisintonana sy fanalana ny rakitra LESS. Ankoatra izany, ny kaody loharano dia ao amin'ny GitHub .

Ampiasao ho toy ny fananana static

Atombohy haingana izay tetikasa tranonkala amin'ny alàlan'ny fametrahana ny CSS sy JS natambatra na nohavaozina. Soso-kevitra misaraka amin'ny fomba fanao mahazatra ho an'ny fanavaozana mora sy fikojakojana mandroso.

Amboary ny firafitry ny rakitra

Ampidino ny Bootstrap natambatra farany ary apetraho amin'ny tetikasanao. Ohatra, mety manana zavatra toy izao ianao:

  app / ├── layouts / └── templates / public / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - fotsy . png

Mampiasà modely fanombohana

Adikao ity HTML fototra manaraka ity mba hanombohana.

  1. <html>
  2.   <loha>
  3.     <title> Template Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <vatana>
  8.     <h1> Miarahaba, izao tontolo izao! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Layer amin'ny code custom

Miasa amin'ny CSS mahazatra anao, JS, sy ny maro hafa raha ilaina mba hahatonga ny Bootstrap ho anao manokana miaraka amin'ny rakitra CSS sy JS manokana.

  1. <html>
  2.   <loha>
  3.     <title> Template Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.     <!-- Tetikasa -->
  7.     <link href = "public/css/application.css" rel = "stylesheet" >  
  8.   </head>
  9.   <vatana>
  10.     <h1> Miarahaba, izao tontolo izao! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Tetikasa -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>