Skip to main content

起步

简要介绍 Bootstrap,以及如何下载、使用,还有基本模版和案例,等等。

--本章内容翻译由:樊潇洁友情提供

生成工具

Bootstrap 在 CSS 方面采用 Grunt,用 JavaScript 构建系统,用 Jekyll 做记录。Gruntfile 在使用框架方面有许多便利的特点,包括编译代码、运行测试等等。

工具安装

为了使用Gruntfile以及本地运行我们的文档,你需要拷贝一份Bootstrap的源文件,还有Node.js以及Grunt。参照下面的步骤,你应该已经准备好开始动手了:

  1. 下载并安装 Node,我们用它来管理我们的依赖关系。
  2. 安装 Grunt 命令行工具,grunt-cli,通过 npm install -g grunt-cli
  3. 导航到 /bootstrap 根目录,然后运行 npm install 来安装我们列在package.json 中的本地的相依性。
  4. 安装 Ruby,通过 gem install bundler 安装 Bundler,最后运行bundle。这样就安装了所有的 Ruby 依赖关系,比如 Jekyll 和 Sass linter。

完成后,你就可以通过命令行来运行丰富的Grunt命令了。

使用Grunt

我们的Gruntfile包括了下面的命令和任务:

事务 描述
grunt 运行 grun 在本地运行测试并且将 CSS 和 JavaScript 编译进 /dist。使用 Sass 和UglifyJS
grunt dist grunt dist 产生 /dist 路径和编译文件。使用Sass 和 UglifyJS
grunt test 在 PhantomJS 中运行 scss-lintESLint 和 QUnit测试(用于 CI)。
grunt docs 通过 jekyll serve 运行本地文件的资源,创建并测试 CSS、JavaScript 和其他。
grunt watch 这是一个非常方便的方法,能够监视 Sass 文件,并且在你保存的时候自动编译他们。

切换Sass编译器

Bootstrap 默认用 libsass 编译,但是你可以选择传统的 Ruby Sass,通过设置 TWBS_SASS 环境变量。下面两个选择都支持:

比如,运行TWBS_SASS=sass grunt进行测试,用Ruby Sass搭建 Bootstrap。

本地文件

在本地运行我们的文档需要用到Jekyll,Jekyll是一个灵活的静态网站生成器,提供了基本的包含、基于Markdown-based的文件、模板等等。下面介绍了如何开动它:

  1. 利用上面提到的 tooling setup来安装 Jekyll(站点生成器)和 Rouge(实现语法高亮显示)
    Windows 用户:阅读这份非官方引导来启动和无障碍运行 Jekyll。
  2. 从 /bootstrap 根目录运行,在命令行运行 jekyll serve
  3. 在你的浏览器和 voilà 中打开 http://localhost:9001/

阅读这份文档以了解更多有关使用Jekyll的信息。

故障排除

如果你在安装依赖关系或者运行 Grunt 命令时遇到了麻烦,请卸载所有之前的依赖关系版本(服务器中的和本地的)。然后,运行 npm install