从零开始Bootstrap3

从开发人员的角色编写 bootstrap3 的基础教程，初学者可以按此教程一步一步操作一遍，就可以掌握bootstrap3的基础用法。

目录

一、框架搭建

1.1 引入文件

1.2 布局容器

1.3 栅格系统

1.4 关于颜色

二、常用样式

2.1 文本操作

2.2 表格操作

2.3 按钮

三、 常用组件

3.1 字体图标

3.2 下拉菜单

3.3 按钮组

3.4 标签页

3.5 警告框

3.6 模态窗口

3.7 工具提示条

四、 Hello World

一、框架搭建：

1.1 引入文件

使用Bootstrap前需要先引入对应的CSS文件和JS文件

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 javaScript 文件 -->

<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

1.2 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类(.container 和 .container-fluid)。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">

...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

...

</div>

1.3 栅格系统

1.3.1 栅格系统介绍

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

1.3.2 col类的区别

下表展示了.col-xs、.col-sm、.col-md、.col-lg区别

1.3.3 代码示例

示例1：

<div class="row">

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4">.col-md-4</div>

</div>

代码实现效果如下图(把一行2比1分隔出来):

示例2：

<div class="row">

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

代码实现效果如下图(代码实现了宽度>=992px的时候三等分一行，宽度<992px时候二等分一行【说明：bootstrap多余的列将另起一行排列】)：

1.4 关于颜色

Bootstrap内置了多种颜色类：

.success .warning .danger .info

二、常用样式：

2.1 文本操作

2.1.1 标题操作

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

代码示例：

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

代码实现效果如下图：

2.1.2 段落突出显示

通过添加 .lead 类可以让段落突出显示。

代码示例：

<