Bootstrap 入门教程

下载之前先去准备一个代码编辑器，比如像 notepad ++，并且最好能了解点 HTML 与 CSS 的知识。我们不会去说明源代码，不过你可以下载它们。我们主要是介绍编译之后的 Bootstrap 文件的使用。

下载编译

获得编译后和最小化的 CSS，JS还有图像文件是最快速的启动方法。不包含文档和原始代码文件。

下载 Bootstrap

下载源代码

获得所有 CSS 和 JavaScript 原始文件，另外还包含一个说明文档的本地版本，可以直接在 GitHub 中下载最新的版本。

下载 Bootstrap 源文件

在下载里你可以找到下面这些文件和内容，按类型分了组，提供了编译之后和最小化两个版本。

下载编译之后的压缩包，解压以后你会得到下面这些文件：

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

这是 Bootstrap 最基础的东西：编译后的这些文件可以快速地用在所有 Web 项目上。我们提供了编译后的 CSS 和 JS (bootstrap.*)，另外还有编译后并最小化的 CSS 和 JS (bootstrap.min.*)。图像使用了 ImageOptim 进化压缩。这是用在 Mac 上的压缩 PNG 图像的软件。

要注意的是，所有 JavaScript 插件都需要用到 jQuery。

Bootstrap 有很多东西，了解它们可以参阅 Bootstrap 使用说明。

组件列表

组件和 JavaScript 插件 提供了下面这些界面元素：

按钮组
带下拉菜单的按钮
选项卡
导航栏
标签
徽章
页头与 hero 单元。
缩略图
警示
进度条
对话框
下拉菜单
工具提示
Popovers
手风琴
旋转木马
Typeahead

在以后的说明文档里，我们会详细的逐个介绍。在此之前，你可以查看这个文档来学习如何使用和定制它们。

想要使用 Bootstrap，可以基于这个简单的 HTML 模板，这里面包含了我们在文件结构里提到的所有东西。

下面是一个典型的 html 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

把它变成 Bootstrap 模板，只需要包含合适的 CSS 和 JS 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

哈，成功！ 用这两个添加的文件，你就可以开发基于 Bootstrap 的应用了。

来看几个示范布局，最好别直接就用，可以加上点自己的想法。