Bootstrap tihzauh dan

Bootstrap hi extend la, a chhunga style leh component te bakah LESS variable leh mixins te pawh a hmang tangkai thei ang.

LESS CSS 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

Command line a awm

Command line hmanga compiling tur chuan GitHub- a project readme-a instruction awmte zawm rawh .

JavaScript hmangin a rawn lang ang

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 thil hi i nei thei ang:

  app/ tih a ni.
      layout hrang hrang/ .
      template hrang hrang/ .
  vantlang/
      css/ tih a ni.
          bootstrap.min.css tih a ni
      js/ tih a ni.
          bootstrap.min.js tih a ni
      img/ tih a ni.
          glyphicons-a chanve vel te.png
          glyphicons-a chanve-a var.png

Starter template hmang tangkai rawh

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

  1. <html> tih a ni
  2. <lu> tih a ni
  3. <title> Bootstrap 101 Template </title> tih hi a awmzia a awm lo
  4. <!-- Bootstrap chu --> a ni
  5. <link href = "mipui/css/bootstrap.min.css" rel = "stylesheet" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle
  6. </head> tih a ni
  7. <taksa> tih a ni
  8. <h1> Hello, khawvel! </h1> tih a ni
  9. <!-- Bootstrap chu --> a ni
  10. <script src = "mipui/js/bootstrap.min.js" ></script> tih hi a ni
  11. </body> tih a ni
  12. </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.

  1. <html> tih a ni
  2. <lu> tih a ni
  3. <title> Bootstrap 101 Template </title> tih hi a awmzia a awm lo
  4. <!-- Bootstrap chu --> a ni
  5. <link href = "mipui/css/bootstrap.min.css" rel = "stylesheet" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle
  6. <!-- Project --> tih a ni
  7. <link href = "mipui/css/application.css" rel = "stylesheet" >
  8. </head> tih a ni
  9. <taksa> tih a ni
  10. <h1> Hello, khawvel! </h1> tih a ni
  11. <!-- Bootstrap chu --> a ni
  12. <script src = "mipui/js/bootstrap.min.js" ></script> tih hi a ni
  13. <!-- Project --> tih a ni
  14. <script src = "mipui/js/application.js" ></script> tih a ni
  15. </body> tih a ni
  16. </html> tih a ni