Txuas ntxiv · Twitter 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 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 rau nws 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

Node nrog makefile

Nruab LESS command line compiler, JSHint, Recess, thiab uglify-js thoob ntiaj teb nrog npm los ntawm kev khiav cov lus txib hauv qab no:

$ npm nruab -g tsawg jshint recess uglify-js

Ib zaug ntsia cia li khiav makelos ntawm lub hauv paus ntawm koj bootstrap directory thiab koj nyob nraum tag nrho.

Tsis tas li ntawd, yog tias koj muaj watchr ntsia, koj tuaj yeem khiav make watchkom muaj bootstrap rov tsim dua txhua zaus koj hloov cov ntaub ntawv hauv bootstrap lib (qhov no tsis tas yuav tsum tau, tsuas yog txoj kev yooj yim xwb).

kab hais kom ua

Nruab qhov LESS command line tool ntawm Node thiab khiav cov lus txib hauv qab no:

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

Nco ntsoov suav nrog --compresshauv cov lus txib yog tias koj tab tom sim txuag qee cov bytes!

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 tug 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 / └── templates / public / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - dawb . 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>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

<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>
  <body>
    <h1>Hello, world!</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