扩展·引导简体中文

Bootstrap 以 LESS 为核心，这是一种由我们的好朋友Alexis Sellier创建的动态样式表语言。它使开发基于系统的 CSS 更快、更容易、更有趣。

为什么少？

Bootstrap 的一位创建者写了一篇关于此的快速博客文章，总结如下：

与 Sass 相比，使用 Less 的 Bootstrap 编译速度快 6 倍
Less 是用 JavaScript 编写的，与使用 Sass 的 Ruby 相比，我们更容易深入研究和修补。
少即是多; 我们想要感觉就像我们正在编写 CSS 并使 Bootstrap 对所有人都平易近人。

包括什么？

作为 CSS 的扩展，LESS 包括变量、用于可重用代码片段的 mixin、用于简单数学的操作、嵌套，甚至颜色函数。

学到更多

访问官方网站http://lesscss.org/了解更多信息。

由于我们的 CSS 是用 Less 编写的，并且使用了变量和 mixin，因此需要对其进行编译以用于最终的生产实现。就是这样。

注意：如果您使用修改后的 CSS 向 GitHub 提交拉取请求，则必须通过这些方法中的任何一种重新编译 CSS。

编译工具

带有 makefile 的节点

通过运行以下命令，使用 npm 全局安装 LESS 命令行编译器、JSHint、Recess 和 uglify-js：

$ npm install -g less jshint 凹槽 uglify-js

安装后，只需make从引导目录的根目录运行即可，一切就绪。

此外，如果您安装了watchr，您可能会在make watch每次编辑 bootstrap 库中的文件时自动重建 bootstrap（这不是必需的，只是一种方便的方法）。

命令行

通过 Node 安装 LESS 命令行工具并运行以下命令：

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

--compress如果您要保存一些字节，请务必包含在该命令中！

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 文件后将代码编译为本地文件。如果您愿意，您可以在应用程序中切换首选项以自动缩小以及编译文件最终位于哪个目录。

设置文件结构

下载最新编译的 Bootstrap 并放入您的项目中。例如，您可能有这样的事情：

  应用程序/
      布局/
      模板/
  上市/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      图片/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

使用入门模板

复制以下基本 HTML 以开始使用。

<html>
  <头部>
    <title> Bootstrap 101 模板</title>
    <!-- 引导程序 -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <正文>
    <h1>你好，世界！</h1>
    <!-- 引导程序 -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </正文>
</html>

自定义代码层

根据需要使用您的自定义 CSS、JS 等，以使用您自己的单独 CSS 和 JS 文件制作您自己的 Bootstrap。

<html>
  <头部>
    <title> Bootstrap 101 模板</title>
    <!-- 引导程序 -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- 项目 -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <正文>
    <h1>你好，世界！</h1>
    <!-- 引导程序 -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- 项目 -->
    <script src = "public/js/application.js" ></script> 
  </正文>
</html>

扩展引导程序

用 LESS 构建