Bootstrap LESS

Bootstrap LESS

簡介

獲取 Bootstrap 和 Less CSS

Bootstrap 官網(wǎng)：http://getbootstrap.com/

Less 官網(wǎng)：http://lesscss.org/

包含哪些內(nèi)容

下載 Bootstrap，解壓縮文件。Bootstrap 的 Less 組件位于 'lib' 目錄下。自 Bootstrap v1.4.0 版本起，就包含有九個 less 文件。下面我們一起來看看這九個文件分別包含什么。

bootstrap.less

這是主要的 Less 文件。該文件中導(dǎo)入了一些其他的 less 文件。該文件中沒有任何代碼。

forms.less

這個 Less 文件包含了表單布局、輸入框類型的樣式。

mixins.less

這個 Less 文件讓 CSS 代碼可重復(fù)使用。

patterns.less

這個 Less 文件包含了重復(fù)的用戶界面元素的 CSS 代碼，不會被位于 scaffolding Less 文件中的基本樣式覆蓋。

reset.less

這個 Less 文件包含了 CSS 重置。這是 Eric Meyer 的 CSS 重置的一個更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。

scaffolding.less

這個 Less 文件保存了創(chuàng)建網(wǎng)格系統(tǒng)、結(jié)構(gòu)化布局、頁面模板所需的基本樣式。

tables.less

這個 Less 文件包含了創(chuàng)建表格的樣式。

type.less

這個 Less 文件下可找到排版相關(guān)的樣式。標(biāo)題、段落、列表、代碼等的樣式位于這個文件里邊。

variables.less

這個 Less 文件包含了要定制 Bootstrap 外觀和感觀的變量。

如何使用

如果要使用它，請在您的 HTML 頁面包含下面代碼：

請注意，less-1.1.5.min.js 不在 js 文件夾內(nèi)，您需要下載并把它放置在指定的文件夾下。

LESS變量和變量值，以及用法指南

超鏈接

灰度色

強(qiáng)調(diào)色

按鈕

表單

導(dǎo)航欄

表單狀態(tài)和通知

Bootstrap 混合

基本的混合

基本的混合從本質(zhì)上來說，就是包括整個或是部分代碼片段。寫法類似一個CSS類，可以隨處調(diào)用。

.element {
  .clearfix();
}

帶參數(shù)的混合

帶參數(shù)的混合和基本混合很像，不同之處是前者可以接收參數(shù)(根據(jù)名稱)，參數(shù)可以有默認(rèn)值。

.element {
  .border-radius(4px);
}

易于定制

基本上Bootstrap所有的混合都保存在mixins.less， 這是一個出色的工具類.less文件，我們可以在任何一個.less文件中使用其中的混合。

因此，直接使用已有的混合或是自定義一個新混合皆可。

包含混合

實用工具

表單

排版

柵格系統(tǒng)

CSS3屬性

背景和漸變

如何編譯

帶有makefile的Node.js

運行下列命令，利用npm在全局環(huán)境下安裝LESS命令行編譯器和uglify-js：

$ npm install -g less uglify-js

安裝成功后，在您的Bootstrap的根目錄下運行 make 即可編譯CSS。

此外，如果您已經(jīng)安裝了 watchr ，您可以運行 make watch ， 這樣您每次修改Bootstrap后，就會自動重編譯Bootstrap。（不是必須運行，這樣做僅僅是出于方便。）

使用 JavaScript

只需要簡單的引用 less.js 文件(下載最新的 Less.js )并重新加載頁面。

js 文件就會編譯 less。

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

命令行

如果您已經(jīng)安裝了 Less 命令行（Command Line），原型下面要編譯的命令：

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

如果您想要一個壓縮的編譯，可以使用 --compress 命令。

Less Mac app

雖然是非官方的，但是這里有一個可用的 Less Mac 應(yīng)用程序可用于編譯。

點擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。