扩展Bootstrap

通过扩展Bootstrap,能够充分利用它所包含的样式、组件,还有LESS变量、函数。

LESS CSS

Bootstrap使用LESS构造核心,LESS是由我们的好友 Alexis Sellier 创造的一种动态样本表语言。 它让系统底层的CSS开发变得更快捷高效,更有生趣。

Why LESS?

One of Bootstrap's creators wrote a quick blog post about this, summarized here:

  • Bootstrap compiles faster ~6x faster with Less compared to Sass
  • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
  • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.

包括什么?

做为CSS的扩展,LESS包括变量,可重用代码段的混合,简单的数学操作,内嵌,以及颜色方法等等。

了解更多

详见LESS官网 http://lesscss.org

详见LESS中国官网 http://lesscss.net

Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

注意: 如果您向Github pull修改后的代码,您必须通过下列方式重新编译CSS。

编译的工具

命令行工具

Follow the instructions in the project readme on GitHub for compiling via command line.

Javascript

下载最新的 Less.js 并在 <head> 中包含Bootstrap中的less路径和less.js文件路径。

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

要重编译.less文件,只要在保存文件后刷新页面。Less.js会重新编译.less文件并进行本地存储。

非官方的Mac应用

非官方Mac应用 监视.less文件所在的目录,每次观察到.less文件发生改动都会自动将.less编译成本地文件。

如果您喜欢,您可以在应用的首选项设置自动最小化代码,以及编译后的文件目录。

更多的应用

Crunch

Crunch是一个用Abode Air构造的界面优美的LESS编辑器和编译器。

CodeKit

CodeKit同样是非官方的Mac应用,可以编译LESS,SASS,Stylus和CoffeeScript。

Simpless

跨Mac, Linux, 和PC平台的应用,可以拖拽LESS文件进行编译,而且其代码开源, 代码托管在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>