Twitter Bootstrap 技术文档

1. 安装指南

1.1 使用预编译的 CSS 文件

如果你希望快速开始使用 Twitter Bootstrap，可以直接使用预编译的 CSS 文件。你只需要将 bootstrap.css 文件引入到你的项目中即可。

<link rel="stylesheet" type="text/css" href="bootstrap.css">

1.2 使用 LESS 编译

如果你希望使用 LESS 编译 Bootstrap，你需要在你的项目中引入 bootstrap.less 文件，并使用 less.js 进行实时编译。

<link rel="stylesheet/less" type="text/css" href="lib/bootstrap.less">
<script src="less.js" type="text/javascript"></script>

1.3 使用 Makefile 进行编译

如果你是开发者，并且希望手动编译 Bootstrap，可以使用项目提供的 Makefile。首先，确保你已经安装了 lessc 编译器。

make build

这个命令会生成 bootstrap.css 和 bootstrap.min.css 文件。

如果你希望自动监视 LESS 文件的变化并自动编译，可以使用以下命令：

make watch

这个命令需要 watchr 工具的支持。

2. 项目的使用说明

2.1 基本使用

Twitter Bootstrap 提供了丰富的 CSS 样式，包括排版、表单、按钮、表格、网格系统、导航、警告等。你可以直接在 HTML 中使用这些样式。

例如，使用 Bootstrap 的按钮样式：

<button class="btn btn-primary">点击我</button>

2.2 自定义样式

如果你使用 LESS 版本，可以通过修改 bootstrap.less 文件中的变量来自定义 Bootstrap 的样式。例如，修改主题颜色：

@brand-primary: #ff0000;

3. 项目 API 使用文档

3.1 网格系统

Bootstrap 提供了强大的网格系统，用于布局页面。网格系统基于 12 列布局，你可以通过 row 和 col 类来创建网格。

<div class="row">
  <div class="col-md-6">左侧内容</div>
  <div class="col-md-6">右侧内容</div>
</div>

3.2 表单

Bootstrap 提供了多种表单样式，包括水平表单、内联表单等。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
</form>

3.3 导航栏

Bootstrap 提供了多种导航栏样式，可以轻松创建响应式导航栏。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">网站名称</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
</nav>

4. 项目安装方式

4.1 下载预编译的 CSS 文件

你可以直接从项目官网下载预编译的 CSS 文件，并将其引入到你的项目中。

4.2 使用包管理器安装

如果你使用包管理器（如 npm 或 Bower），可以通过以下命令安装 Bootstrap：

npm install bootstrap

或

bower install bootstrap

4.3 手动编译

如果你希望手动编译 Bootstrap，可以克隆项目仓库并使用 Makefile 进行编译。

git clone https://github.com/twitter/bootstrap.git
cd bootstrap
make build

通过以上步骤，你可以成功安装并使用 Twitter Bootstrap 来构建现代化的网页。