Hanitatra · Bootstrap amin'ny teny malagasy

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 , voafintina 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.

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

Fibaikoana

Araho ny torolàlana ao amin'ny tetikasa readme amin'ny GitHub amin'ny fanangonana amin'ny alàlan'ny baiko.

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 .

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/
      fandaharana/
      modely/
  ampahibemaso/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Mampiasà modely fanombohana

Adikao ity HTML fototra manaraka ity mba hanombohana.

<html>
  <loha>
    <title> Template Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <vatana>
    <h1> Miarahaba, izao tontolo izao! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</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.

<html>
  <loha>
    <title> Template Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Tetikasa -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <vatana>
    <h1> Miarahaba, izao tontolo izao! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Tetikasa -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Manitatra ny Bootstrap

Namboarina tamin'ny LESS