Extend · Bootstrap hauv lus Hmoob

Bootstrap yog tsim nrog LESS ntawm nws cov tub ntxhais, ib hom lus dynamic stylesheet tsim los ntawm peb tus phooj ywg zoo, Alexis Sellier . Nws ua rau kev tsim cov txheej txheem raws li CSS sai dua, yooj yim dua, thiab lom zem dua.

Vim li cas LESS?

Ib tug ntawm Bootstrap tus creators tau sau ib tug ceev blog ncej txog qhov no , summarized ntawm no:

Bootstrap compiles sai ~ 6x sai dua nrog Less piv rau Sass
Tsawg yog sau rau hauv JavaScript, ua kom yooj yim rau peb dhia hauv thiab thaj piv rau Ruby nrog Sass.
Tsawg yog ntau; peb xav zoo li peb tab tom sau CSS thiab ua Bootstrap tuaj yeem ua tau rau txhua tus.

Dab tsi suav nrog?

Raws li kev txuas ntxiv ntawm CSS, LESS suav nrog cov hloov pauv, cov khoom sib xyaw rau cov khoom siv rov qab siv tau ntawm cov lej, kev ua haujlwm rau lej yooj yim, zes, thiab txawm tias xim ua haujlwm.

Kawm ntxiv

Mus saib lub vev xaib official ntawm http://lesscss.org/ kom paub ntau ntxiv.

Txij li thaum peb CSS tau sau nrog Less thiab siv qhov sib txawv thiab cov mixins, nws yuav tsum tau muab tso ua ke rau kev ua tiav tiav. Nov yog li cas.

Nco tseg: Yog tias koj tab tom xa daim ntawv thov rub mus rau GitHub nrog hloov kho CSS, koj yuav tsum rov ua dua CSS ntawm ib qho ntawm cov txheej txheem no.

Cov cuab yeej rau kev sau

kab hais kom ua

Ua raws li cov lus qhia hauv qhov project readme ntawm GitHub rau kev sau los ntawm kab hais kom ua.

JavaScript

Download tau qhov tseeb Less.js thiab suav nrog txoj hauv kev rau nws (thiab Bootstrap) hauv <head>.

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

Txhawm rau rov ua dua cov ntaub ntawv .less, tsuas yog txuag lawv thiab rov rub koj nplooj ntawv. Less.js suav nrog lawv thiab khaws cia rau hauv qhov chaw cia.

Unofficial Mac app

Lub Mac app tsis raug cai saib cov npe ntawm .less cov ntaub ntawv thiab sau cov cai rau cov ntaub ntawv hauv zos tom qab txhua qhov khaws cia ntawm cov ntaub ntawv .less. Yog tias koj nyiam, koj tuaj yeem hloov qhov kev nyiam hauv app rau kev rho tawm tsis siv neeg thiab cov npe twg cov ntaub ntawv sau ua ke xaus rau hauv.

Ntau cov apps

Crunch

Crunch yog qhov zoo saib LESS editor thiab compiler ua rau Adobe Air.

CodeKit

Tsim los ntawm tib tus txiv leej tub uas tsis yog Mac app, CodeKit yog Mac app uas suav nrog LESS, SASS, Stylus, thiab CoffeeScript.

Yooj yim

Mac, Linux, thiab Windows app rau luag thiab tso ua ke ntawm LESS cov ntaub ntawv. Ntxiv rau, lub hauv paus code yog nyob ntawm GitHub .

Pib sai sai rau txhua qhov haujlwm hauv lub vev xaib los ntawm kev xa rov qab rau hauv cov ntawv sau los yog minified CSS thiab JS. Txheej ntawm cov qauv kev cai sib cais kom yooj yim hloov khoom dua tshiab thiab kev saib xyuas mus tom ntej.

Teeb tsa cov ntaub ntawv

Download tau qhov tseeb tso ua ke Bootstrap thiab tso rau hauv koj qhov project. Piv txwv li, koj yuav muaj qee yam zoo li no:

  app/
      layouts/
      cov qauv /
  pej xeem/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Siv tus qauv pib

Luam cov HTML hauv qab no los pib.

<html>
  <head>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <lub cev>
    <h1> Nyob zoo, ntiaj teb no! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Txheej ntawm kev cai code

Ua haujlwm hauv koj li kev cai CSS, JS, thiab ntau dua li tsim nyog los ua Bootstrap koj tus kheej nrog koj tus kheej cov ntaub ntawv CSS thiab JS cais.

<html>
  <head>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Project -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <lub cev>
    <h1> Nyob zoo, ntiaj teb no! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Project -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Extending Bootstrap

Ua nrog LESS