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

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 is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

Utilize starter template

Copy the following base HTML to get started.

<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