Bootstrap

扩展 Bootstrap

扩展的内容让样式和组件更好的利用, 以及包含了LESS.

通过LESS构建

LESS CSS

Bootstrap是以LESS为核心, LESS动态样式语言由我们一个好朋友创建, Alexis Sellier. 这让基于CSS系统的开发更快, 更容易, 更有趣.

为什么是LESS?

Bootstrap创作者之一写了一篇 博客, 下面是一些概括:

  • 使用LESS编译Bootstrap, 比Sass快6倍
  • Less是写在JavaScript中, 比Ruby下的Sass，这让我们更容易融入其中和修改.
  • Less拥有更多(少即是多); 我们想要的感觉就是我们在编写CSS和制作Bootstrap的时候是平易近人的.

包含些什么?

LESS包含了一些变量, 可重复使用的代码, 一些简单的数学操作, 嵌套, 甚至包含颜色功能.

了解更多

查看官方网站 http://lesscss.org 了解更多.

编译Bootstrap

由于我们的CSS是通过LESS, 并使用了其变量和mixins, 所以这是需要编译才能最终使用. 下面是说明如何编译.

注意: 如果你提交一些改进的CSS到GitHub的pull request, 你必须通过这些任意一种方法来重新编译你的CSS.

编译工具

命令行

可根据GitHub的项目readme指示通过命令行完成编译.

JavaScript

下载最新的Less.js并在<head>里引用它.

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

只需保存它们并刷新页面, 就可以重编译.less文件. Less.js会编译它们并存储在本地.

非官方的Mac应用程序

非官方的Mac应用程序监视.less文件目录并编译本地每次保存后的.less文件. 假如你喜欢, 你可以在应用程序设置编好来自动缩减和结束某个目录文件的编译.

更多应用程序

Crunch

Crunch是由Adobe Air构建的一个非常好看的LESS编辑器和编译器.

CodeKit

CodeKit是一个Mac应用程序, 可编译LESS, SASS, Stylus, 和 CoffeeScript.

Simpless

Mac, Linux, 和 Windows 应用程序, 通过拖放来编译LESS文件. 另外, 该应用程序的源代码放在了GitHub.

使用静态assets

通过已经编译好或压缩好的CSS和JS, 快速入门任何网站. 把自定义样式单独分开便于未来的升级和维护.

设置文件结构

下载最新已编译好的Bootstrap并放置在你的项目中. 比如, 你可以像下面这样:

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

使用初学者的模板

复制下面的HTML, 保存并开始预览.

<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>

自定义的代码层

自定义的CSS, JS和更多需要Bootstrap的地方, 都需要把文件单独出来.

<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>