Extend · Twitter-ah a rawn lang leh ta in Mizo tawng a ni

Bootstrap hi a bulpui berah LESS hmanga siam a ni a, kan thian tha tak, Alexis Sellier -a siam stylesheet language dynamic tak a ni. Systems-based CSS siam chu a rang zawk a, a awlsam zawk a, a nuam zawk bawk.

Engvangin nge LESS?

Bootstrap siamtu pakhat chuan he thil chungchangah hian blog post rang tak a ziak a , hetah hian a tawi zawngin:

Bootstrap hian Sass nena khaikhin chuan Less hmangin a compile chak zawk ~6x a chak zawk
JavaScript-ah hian tlem zawk ziah a ni a, Ruby with Sass nen khaikhin chuan dive in leh patch kan awlsam zawk.
Tlem chu a tam zawk a; CSS ziak ang maia inhriat kan duh a, Bootstrap hi mi zawng zawng hnaih theih turin kan siam duh a ni.

Eng nge a tel?

CSS extension angin LESS hian variable te, code snippet hman nawn theih tur mixins te, math awlsam tak tak te tan operation te, nesting te, leh color function thlengin a huam a ni.

Hriat belh rawh

Hrechiang duh tan official website http://lesscss.org/ ah hian lut la .

Kan CSS hi Less hmanga ziah a nih avangin variable leh mixins a hman avangin final production implementation atan compile a ngai a ni. Hetah hian engtin nge.

Note: CSS siam danglam hmanga GitHub-a pull request i submit a nih chuan heng method zinga pakhat hmang hian CSS chu i recompile leh tur a ni.

Compiling na tur hmanrua te

Node ah chuan makefile a awm

A hnuaia command hi run la, LESS command line compiler, JSHint, Recess, leh uglify-js te chu npm hmangin global-in install rawh:

$ npm install -g tlem zawk jshint recess uglify-js

Install zawh chuan makei bootstrap directory root atang khan run mai la, i set vek tawh ang.

Tin, watchr install i neih make watchchuan bootstrap lib-a file i edit apiangin bootstrap automatic-a rebuilt tir turin i run thei bawk (hei hi a ngai lo, convenience method chauh a ni).

Command line a awm

Node hmangin LESS command line tool chu install la, a hnuaia command hi run rawh:

$ lessc ./less/bootstrap.less > bootstrap.css tih hi a awmzia a awm lo

--compressByte thenkhat save i tum a nih chuan chu command-ah chuan telh ngei ang che!

Javascript hmangin a ziak a ni

Less.js thar ber download la, a kalna tur kawng (leh Bootstrap) chu <head>.

| _ _ _ _ _ _ _ _ _ _ _ _

.less files te chu recompile tur chuan save la, i page chu reload mai rawh. Less.js hian a compile a, local storage ah a dah chhuak thin.

Mac app hi official lo tak a ni

Unofficial Mac app hian .less file directory a en a, .less file en tawh save apiangin local file-ah code chu a compile thin. I duh chuan app chhunga preferences te chu automatic minifying atan i toggle thei a, compiled files te chu eng directory ah nge a tawp ang.

Apps tam zawk a awm

Crunch a ni

Crunch hi Adobe Air hmanga siam LESS editor leh compiler hmeltha tak a ni.

CodeKit a ni

Unofficial Mac app ang chiah hian a siam a, CodeKit hi Mac app a ni a, LESS, SASS, Stylus, leh CoffeeScript te a compile a ni.

Simpless lo tak a ni

Mac, Linux, leh Windows app hmangin LESS file te drag leh drop hmangin compiling theih a ni. Plus, source code chu GitHub ah a awm bawk .

Web project eng pawh compiled emaw minified emaw CSS leh JS te drop in rang takin tan rawh . Layer on custom styles a hranin upgrade awlsam leh maintenance hmalam pan theih nan.

File structure siam dan tur

Bootstrap compiled thar ber download la, i project ah dah rawh. Entirnan, hetiang hi i nei thei ang:

  app / ├── layouts / └── templates / public / ├── css / │ ├── bootstrap a ni. min . css
   ├── js / │ ├── bootstrap a ni. min . js
   └── img / ├── glyphicons - halflings te chu a hnuaia mi ang hian a ni. png
       └── glyphicons - a chanve - a var . png a ni

Starter template hmang tangkai rawh

A hnuaia base HTML hi copy la, i tan ang.

<html> tih a ni
  <lu> tih a ni
    <title> Bootstrap 101 Template </title> tih hi a awmzia a awm lo
    <!-- Bootstrap chu --> a ni
    <link href = "mipui/css/bootstrap.min.css" rel = "stylesheet" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle  
  </head> tih a ni
  <taksa> tih a ni
    <h1> Hello, khawvel! </h1> tih a ni
    <!-- Bootstrap chu --> a ni
    <script src = "mipui/js/bootstrap.min.js" ></script> tih hi a ni 
  </body> tih a ni
</html> tih a ni

Custom code ah layer a awm

I custom CSS, JS leh a dangteah a tul angin hna thawk la, Bootstrap chu nangmah ngeiin CSS leh JS file hrang hrang hmangin nangmah ngeiin i siam thei ang.

<html> tih a ni
  <lu> tih a ni
    <title> Bootstrap 101 Template </title> tih hi a awmzia a awm lo
    <!-- Bootstrap chu --> a ni
    <link href = "mipui/css/bootstrap.min.css" rel = "stylesheet" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle  
    <!-- Project --> tih a ni
    <link href = "mipui/css/application.css" rel = "stylesheet" >  
  </head> tih a ni
  <taksa> tih a ni
    <h1> Hello, khawvel! </h1> tih a ni
    <!-- Bootstrap chu --> a ni
    <script src = "mipui/js/bootstrap.min.js" ></script> tih hi a ni 
    <!-- Project --> tih a ni
    <script src = "mipui/js/application.js" ></script> tih a ni 
  </body> tih a ni
</html> tih a ni

Bootstrap tihzauh dan

LESS hmanga sak a ni