Bootstrap3基础教程

最新推荐文章于 2025-07-01 22:31:04 发布

thinking_fioa

最新推荐文章于 2025-07-01 22:31:04 发布

阅读量1.6w

点赞数 11

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html bootstrap bootstrap3

本文链接：https://blog.youkuaiyun.com/thinking_fioa/article/details/79630962

前端专栏收录该内容

11 篇文章

订阅专栏

本教程介绍了Bootstrap3的基础知识，包括安装、文件结构、CSS样式、网格系统、排版、表单、按钮、导航栏等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Bootstrap3基础教程

@author 鲁伟林
Bootstrap3是目前最受欢迎的前端框架，非常重要。本教材不包括: Bootstrap插件，有关插件知识，请看另一篇博客
参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/bootstrap3/

特别说明

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

1.col-xs- 超小屏幕手机(<768px)
2.col-sm- 小屏幕平板(>=768px)
3.col-md- 中等屏幕桌面显示器(>=992px)
4.col-lg- 大屏幕大桌面显示器(>=1200px)

1. Bootstrap简介

Bootstrap是一个快速开发Web应用程序和网站的前端框架。Bootstrap的学习需要先初步了解Html、Css、Javascript基础知识。

1.1 Bootstrap 包含的内容

1.基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
2.CSS：Bootstrap提供多种基本的CSS的常用组件
3.组件：Bootstrap包含了十几个可重用的组件
4.JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件

2. Bootstrap环境安装

Bootstrap安装有两种方法:

1.下载Bootstrap，具体地址：地址
2.使用CDN服务。国内推荐使用：https://www.staticfile.org/ ;国外推荐使用：https://cdnjs.com/

2.1 文件结构

如果下载的是Bootstrap已经编译的版本，解压ZIP文件，将看到下面的文件/目录结构:

如果下载了Bootstrap源代码,那么文件结构如下:

2.2 HTML中使用Bootstrap模版

需要包含jquery.js、bootstrap.min.js、bootstrap.min.css文件，用于让常规的HTML变为使用Bootstrap模版

代码:

<head>
    <meta charset="UTF-8">
    <title>Bootstrap模版</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery/jquery-3.2.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

二、 Bootstrap CSS

3. Bootstrap CSS概览

本章将学习Bootstrap底层结构的关键部分和一些最佳实践

3.1 HTML5文档类型(Doctype)

Bootstrap中使用了HTML5元素和CSS属性，所以必须使用HTML5文档类型(Doctype)，通常的Bootstrap项目请用以下代码开头

代码:

<!DOCTYPE html>
<html>
.....
</html>

3.2 移动设备优先

1.Bootstrap3的设计目标是移动设备优先，然后才是桌面设备
2.Bootstrap3开发的网站兼容移动设备，确保适当的绘制和触屏缩放
3.width=device-width属性控制设备宽度，即使不同的设备带有不同的屏幕分辨率，也能保证完美的呈现
4.initial-scale=1.0确保页面加载时，以1:1的比例呈现，不会有任何缩放
5.user-scalable=no禁用其缩放功能
6.maximum-scale=1.0与user-scalable=no同时使用时，用户可以滑动屏幕

代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. Bootstrap 网格系统

Bootstrap提供一套响应式、移动设备优先的流式网格系统，随着不同设备屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，以自动适配屏幕变化

4.1 Bootstrap网格系统(Grid System)工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统如果工作的:

1.行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)
2.使用行来创建列的水平组
3.内容应该放置在列内，且唯有列可以是行的直接子元素
4.预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多的语义布局
5.列通过内边距(padding)来创建内容间的间隙
6.网格系统是通过指定想要横跨的十二个可用的列来创建的。例如：要创建三个相等的列，则使用三个.col-xs-4

特别说明:

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

1.col-xs- 超小屏幕手机(<768px)
2.col-sm- 小屏幕平板(>=768px)
3.col-md- 中等屏幕桌面显示器(>=992px)
4.col-lg- 大屏幕大桌面显示器(>=1200px)

5. Bootstrap 排版

使用Bootstrap的排版特性，可以创建标题、段落、列表及其他内联元素

5.1 标题(h1-h6)

Bootstrap定义了所有的HTML标题(h1到h6)的样式。提醒：使用Bootstrap模版时，需要使用3个文件:bootstrap.min.css、bootstrap.min.js、jquery.min.js。后面的代码样例将省略<head>头

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery/jquery-3.2.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>我是标题1 h1</h1>
    <h2>我是标题2 h2</h2>
    <h3>我是标题3 h3</h3>
    <h4>我是标题4 h4</h4>
    <h5>我是标题5 h5</h5>
    <h6>我是标题6 h6</h6>
</body>
</html>

5.2 内联子标题(small)

如果需要向任何标题添加一个内联子标题，需要在元素两旁添加或者添加.small class。将得到一个字号更小、颜色更浅的文本。

代码:

<body>
    <h1>我是标题1 h1 <small>副标题h1.1</small></h1>
    <h2>我是标题2 h2</h2>
    <h3>我是标题3 h3 <small>副标题h3.1</small></h3>
    <h4>我是标题4 h4</h4>
</body>

5.3 引导主体副本(lead)

使用class="lead"来给段落添加强调文本，得到更大更粗、更高的文本。

代码:

<body>
    <h2>引导主体副本</h2>
    <p class="lead">
        这是一个演示引导主体副本用法的实例。
        这是一个演示引导主体副本用法的实例。
    </p>
</body>

5.4 强调

Bootstrap提供了一些用于强调文本的类

1.small: 文本为父文本大小的85%
2.strong: 设置文本变粗体
3.em: 文本斜体
4.class="text-left": 向左对齐
5.class="text-center": 居中对齐
6.class="text-right": 向右对齐
7.class="text-muted": 文本内容减弱
8.class="text-primary": primary class效果
9.class="text-success": success class效果
10.class="text-info": info class效果
11.class="text-warning": warning class效果
12.class="text-danger": danger class效果

代码:


<body>
    <small>本行内容-small</small><br>
    <strong>本行内容-strong</strong><br>
    <em>本行内容-em</em><br>
    <p class="text-left">本行内容-left</p>
    <p class="text-center">本行内容-center</p>
    <p class="text-right">本行内容-right</p>
    <p class="text-muted">本行内容-muted</p>
    <p class="text-primary">本行内容-primary</p>
    <p class="text-success">本行内容-success</p>
    <p class="text-info">本行内容-info</p>
    <p class="text-warning">本行内容-warning</p>
    <p class="text-danger">本行内容-danger</p>
</body>

5.5 缩写（abbr)

1.Bootstrap利用<abbr>元素样式，定义缩写效果：底部有一条虚线边框+鼠标悬停提示完整文本
2.利用class=".initialism"来得到更小字体的文本

代码:

<body>
    <abbr title="World Wide Web">WWW</abbr><br/>
    <abbr title="thinking_fioa" class=".initialism">TF</abbr>
</body>

5.6 地址(Address)

使用<address>标签，可以用来在网页上显示联系信息。

代码:

<body>
    <address>
        <strong>Some Company, Inc.</strong>
        007 street<br>
        Some City, State XXXXX<br>
        <abbr title="Phone">P:</abbr>1373814XXXX<br>
    </address>
    <address>
        <Strong>Email: </Strong>
        <a href="mailto:#">thiking_fioa@163.com</a>
    </address>
</body>

5.7 引用(Blockquote)

1.使用默认的<blockquote>来显示引用
2.默认的<blockquote>是左对齐
3.class="pull-right"是定义右对齐

代码:

<body>
    <blockquote>
        一个带有源标题的引用
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    <blockquote class="pull-right">
        一个向右对齐的标题引用
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
</body>

5.8 列表

Bootstrap 支持有序列表、无序列表和定义列表

1.class="list-unstyled": 未定义样式列表
2.class="list-inline":将所有列表项放置同一行

代码:

<body>
    <h4>有序列表</h4>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h4>无序列表</h4>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h4>未定义样式列表</h4>
    <ul class="list-unstyled">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h4>内联列表</h4>
        <ul class="list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h4>定义列表</h4>
    <dl>
        <dt>Description 1</dt>
        <dd>Item 1</dd>
        <dt>Description 2</dt>
        <dd>Item 2</dd>
    </dl>
    <h4>水平的定义列表</h4>
    <dl class="dl-horizontal">
        <dt>Description 1</dt>
        <dd>Item 1</dd>
        <dt>Description 2</dt>
        <dd>Item 2</dd>
    </dl>
</body>

6. Bootstrap 代码

Bootstrap允许使用两种方式显示代码:

1.第一种是<code>标签。如果想要内联显示代码，就应该使用<code>标签
2.第二种是<pre>标签。如果想要用独立的块元素显示代码，则使用<pre>标签
3.开始和结束标签，请使用unicode变体: &lt(<);和&gt(>)

代码:

<body>
    <p><code>&lt;header&gt;</code>作为内联元素被包围</p>
    <div>
        <span>如果需要将代码作为一个独立的块元素，需要使用标签:pre</span>
    </div>
    <pre>
        &lt;article&gt;
            &lt;h1&gt;Article Heading&lt;/h1&gt;
        &lt;/article&gt;
    </pre>
</body>

7. Bootstrap 表格

Bootstrap提供了一个清晰的创建表格的布局。Bootstrap支持的一些表格元素如下表:

标签	描述
<table>	为表格添加基础样式
<thead>	表格标题行的容器元素，用来标识表格列
<tbody>	表格主体中的表格行的容器元素
<tr>	一组出现在单行上的表格单元格的容器元素
<td>	默认的表格单元格
<th>	特殊的表格单元格，用来标识列或行。必须在<thea>内使用
<caption>	关于表格存储内容的描述或总结

7.1 表格类

下列样式可用于表格:

1.(.table): 为任意<table>添加基本样式(只有横向分割线)
2.(.table-striped): 为<tbody>内添加斑马线形式条纹
3.(.table-bordered): 为所有表格的单元格添加边框
4.(.table-hover): 在<tbody>内的任一行启用鼠标悬停状态
5.(.table-condensed): 让表格更加紧凑

代码:

<table class="table table-striped table-bordered table-hover table-condensed">
    <caption>姓名表格</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>luweilin</td>
        </tr>
        <tr>
            <td>2</td>
            <td>thinking_fioa</td>
        </tr>
        <tr>
            <td>3</td>
            <td>pppp</td>
        </tr>
    </tbody>
</table>

7.2 <tr>、<th>、<td>类

下列类可用于表格的行或单元格

1.(.active): 将悬停的颜色应用于行或单元格
2.(.success): 表示成功的操作
3.(.info): 表示信息变化的操作
4.(.warning): 表示一个警告的操作
5.(.danger): 表示一个危险的操作

代码:

<body>
    <div class="container">
        <h1>表格</h1>
        <div>
            所有属性都用上来:
        </div>
        <table class="table">
            <caption>编号表格:</caption>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>1</td>
                    <td>luweilin-active</td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>thinking_fioa-success</td>
                </tr>
                <tr class="info">
                    <td>3</td>
                    <td>pppp-info</td>
                </tr>
                <tr class="warning">
                    <td>4</td>
                    <td>tzj-warning</td>
                </tr>
                <tr class="danger">
                    <td>5</td>
                    <td>lbf-danger</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

7.3 响应式表格

通过将任意的.table包在.table-responsive内，可以让表格滚动，以适应小型设备和大型设备

代码:

<body>
    <div class="table-responsive">
        <table class="table">
            <caption>表格</caption>
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>

8. Bootstrap表单

Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单

8.1 表单布局

Bootstrap提供了下列类型的表单布局：

1.垂直表单(默认)
2.内联表单
3.水平表单

8.2 垂直或基本表单

基本的表单结构是Bootstrap自带的，下面列出创建一个基本表单的步骤：

1.向父<form>元素添加role="form"
2.把标签和控件放在一个带有class .form-group的<div>中。这是获取最佳间距所必需的
3.向所有的文本元素<input>、<textarea>和<select>添加class="from-control"

代码:

 <form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助本文的实例</p>
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

8.3 内联表单

1.创建一个表单，希望它的所有元素都是内联的，向左对齐的，标签是并排的。请在<form>标签中添加 class .form-inline
2.默认情况下，Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时，需要在表单控件上设置一个宽度

代码:

<body>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputfile">文件输入</label>
            <input type="file" id="inputfile">
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox">请打勾
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>

8.4 水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。具体按下面几个步骤

1.向父<form>元素添加class .form-horizontal
2.把标签和控件放在一个带有class .form-group的<div>中
3.向标签添加class .control-label

代码:

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
            <input type="text" id="firstname" class="form-control" placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <lable for="lastname" class="col-sm-2 control-label">姓</lable>
        <div class="col-sm-10">
            <input type="text" id="lastname" class="form-control" placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox">请记住我
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

8.5 支持的表单控件

Bootstrap支持最常见的表单控件，主要是：input、textarea、checkbox、radio和select

8.6 输入框(input)

Bootstrap提供所有原生的HTML5的input类型的支持，包括:text、password、detetime、detetime-local、date、month、time、week、number、email、url、search、tel和color

下面代码中:for="text"表示点击<label>标签后，焦点会聚焦到id="text"的输入框

代码：

<form role="form">
    <div class="form-group">
        <label for="test">试试看</label>
        <input type="text" id="test" class="form-control" placeholder="试试看">
    </div>
</form>

8.7 文本框(Textarea)

文本框(Textarea)提供多行输入。属性rows规定显示行数

代码:

<form role="form">
    <div class="form-group">
        <lable for="name">文本框</lable>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

8.8 复选框(Checkbox)和单选框(Radio)

1.checkbox提供用于从列表中选择若干个选项，而radio限制用户只能选择一个选项
2.使用class .checkbox-inline或.radio-inline，控制它们显示在同一行

代码:

<label for="name">复选框和单选按钮</label>
<div class="checkbox">
    <label><input type="checkbox" value="choose1">选项一</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="choose2">选项二</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" id="optionsRadios1" vlaue="radio1" checked>选项1</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="radio2">选项2</label>
</div>

<label for="name">内联的复选框和单选框</label><br>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox1" value="option1">选项1</label>
</div>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox2" value="option2">选项2</label>
</div>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox3" value="option3">选项3</>
</div>
<div class="radio-inline">
    <label><input type="radio" name="optionsRadiosinline" id="optionsRadio3" value="option1" checked>选项一</label>
</div>
<div class="radio-inline">
    <label><input type="radio" name="optionsRadiosinline" id="optionsRadio4" value="option2">选项二</label>
</div>

8.9 选择框(Select)

选择框允许用户从多个选项中进行选择，默认情况下只能选择一个选项

1.使用<select>展示列表选项，通常是用户熟悉的选择列表
2.使用multiple="multiple"允许用户选择多个选项

代码：

<form role="form">
    <div class="form-group">
        <label for="name">选择列表</label>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
    <div class="form-group">
        <label for="name">可多选的选择列表</label>
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
</form>

8.10 静态控件

当需要在一个水平表单内的表单标签后放置纯文本时，需要在<p>上使用class .form-control-static

代码:

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="emailAddress" class="col-sm-2 control-label">Email</label>
        <p class="form-control-static" id="emailAddress">thinking_fioa@163.com</p>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" id="inputPassword" class="c" name="pwd" placeholder="请输入密码">
        </div>
    </div>
</form>

8.11 表单控件状态

1.输入框焦点：当输入框(input)接收到focus时，输入框的轮廓会被移除，同时应用box-shadow
2.禁用的输入框input：使用属性disabled禁用输入框
3.禁用的字段集fieldset：对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件
4.验证状态：对父元素简单的添加适当的class(.has-warning、has-error或.has-success)即可验证

代码:

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">聚焦</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入框获得焦点...">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">禁用</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="该输入框禁止输入..." disabled>
        </div>
    </div>
    <fieldset disabled>
        <div class="form-group">
            <label class="col-sm-2 control-label">禁止选择菜单</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>禁止选择</option>
                </select>
            </div>
        </div>
    </fieldset>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputWarning">输入告警</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputWarning">
        </div>
    </div>
</form>

8.12 表单控件大小

使用class .input-lg和.col-lg-* 来设置表单的高度和宽度

1.input-lg: 放大表单高度
2.input-sm: 缩小表单高度
3.col-lg-*: 表示在大屏幕上占用几个格子。如: col-sm-10表示在小屏幕该div占用10个列的宽度

8.13 表单帮助文本(help-block)

表单控件可以在输入框input上有一个块级帮助文本，使用.help-block来占用整个宽度的内容块

代码：

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">说明文档</span>
</form>

9. Bootstrap 按钮

任何带有class .btn的元素都会继承圆角灰色按钮。下列样式同样适用于<a>、<button>和<input>

1.btn：为按钮添加基本样式
2.btn-default：默认／标准按钮
3.btn-success(primary/info/warning/danger)：表示成功等的动作
4.btn-link：让按钮看起来像链接(仍然保留按钮行为)
5.btn-lg(btn-sm/xs)：制作一个大按钮等
6.btn-block：块级按钮
7.active：按钮被点击
8.disabled：禁用按钮

代码:

<button type="button" class="btn btn-info">警告按钮</button>

9.1 按钮状态

Bootstrap提供了激活、禁用等按钮状态的class

1.激活状态(active)：激活状态呈现被压的外观(深色的背景、深色的边框、阴影)
2.禁用状态(disabled)：禁用一个按钮时，它的颜色会变淡50%，并失去渐变

代码:

<p>
    <button type="button" class="btn btn-default">默认按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default active">激活按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default disabled">禁用按钮</button>
</p>

10. Bootstrap 图片

Bootstrap提供了三个对图片应用的简单样式的class：

1.img-rounded：将图片变成圆角，通过添加border-radius:6px来实现
2.img-circle：将图片变成圆形，通过添加border-radius：50%来实现
3.img-thumbnail：添加内边框效果，通过内边距(padding)和一个灰色的边框来实现
4.img-responsive：让图片支持响应式设计。图片可以很好的扩展到父元素。使用max-width:100%和height:auto来实现

11. Bootstrap 辅助类

Bootstrap定义了诸多辅助类

11.1 文本

不同的类展示不同的文本颜色。包括链接标签<a>文本也起同样的效果

1.text-muted：文字变弱的样式
2.text-primary
3.text-success
4.text-info
5.text-warning
6.text-danger

代码：

<div class="container">
    <p class="text-danger">使用text-danger样式文本</p>
    <a class="text-danger" href="http://write.blog.youkuaiyun.com/postlist">链接文本使用text-danger</a>
</div>

11.2 背景

不同的类展示不同的背景颜色。如果是链接，鼠标移上去文本会变暗

1.bg-primary
2.bg-success
3.bg-info
4.bg-warning
5.bg-danger

代码:

<div class="container">
    <p class="bg-danger">使用bg-danger样式文本</p>
    <a class="bg-danger" href="http://write.blog.youkuaiyun.com/postlist">链接文本使用bg-danger</a>
</div>

11.3 其他

1.pull-left：元素浮动在左边
2.pull-right：元素浮动在右边
3.center-block：设置元素为display:block并居中显示
4.clearfix：清除浮动
5.show：强制元素显示
6.hidden：强制元素隐藏
7.sr-only：除了屏幕阅读器外，其他设备上隐藏元素
8.sr-only-focusable：与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
9.text-hide：将页面元素所包含的文本内容替换为背景图
10.close：显示关闭按钮
11.caret：显示下拉式功能

11.4 关闭标签

使用class close得到关闭标签。

代码:

<button type="button" class="close" aria-hidden="true">&times;</button>

二、Bootstrap 布局组件

12. Bootstrap 字体图标(Glyphicons)

字体图标是在Web项目中使用的图标字体。可以在fonts文件夹内找到字体图标。字体图标列表：字体图标

12.1 用法

如需要使用图标，只需使用下列代码即可。

代码:

<span class="glyphicon glyphicon-user"></span>

12.2 带有字体图标的导航栏

代码:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span>Shop</a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span>Support</a></li>
            </ul>
        </div>
    </div>
</div>

12.3 定制字体图标和尺寸

代码:

<button type="button" class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-user"></span>User
</button>

13. Bootstrap 下拉菜单(Dropdowns)

Bootstrap下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

代码:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">编译原理</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">计算机操作系统</a>
        </li>
    </ul>
</div>

13.1 选项

1.pull-right(对齐)：通过向dropdown-menu中添加class .pull-right来向右对齐下拉菜单
2.dropdown-header(标题)：使用dropdown-header向下拉菜单的标签区域添加标题
3.dropup：指定向上弹出的下拉菜单
4.disabled：下拉菜单中的禁用项
5.divider：下拉菜单中的分割线

14. Bootstrap 按钮组

按钮组允许多个按钮被折叠在同一行

1.btn-group：用于形成基本的按钮组，在btn-group中放置一系列带有class .btn按钮
2.btn-tooler：用于将几组<div class="btn-group">结合在一起
3.btn-group-lg(btn-group-sm,btn-group-xs)：整个按钮组的大小控制
4.btn-group-vertical：让一组按钮垂直堆叠显示

14.1 基本按钮组(btn-group)

btn-group用于形成按钮组，位于同一行中。

代码：

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-danger">按钮2</button>
    <button type="button" class="btn btn-info">按钮3</button>
</div>

14.2 按钮工具栏(btn-toolbar)

btn-toolbar用于将几个按钮组合并在一起

代码:

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮1</button>
        <button type="button" class="btn btn-default">按钮2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮3</button>
        <button type="button" class="btn btn-default">按钮4</button>
    </div>
</div>

14.3 按钮的大小(btn-gruop-sm)

btn-group-sm用于控制按钮大小，如：<div class="btn-group btn-group-sm">

14.4 嵌套

可以在一个按钮组内嵌套另一个按钮组，如果下拉菜单和一系列的按钮组使用时，则用到

代码:

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <span>下拉</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
    </div>
</div>

14.5 垂直的按钮组(btn-group-vertical)

使用btn-group-vertical来让按钮垂直显示

15. Bootstrap 按钮下拉菜单

Bootstrap支持向按钮添加下拉菜单，具体代码可参考14.4中的

15.1 分割的按钮下拉菜单(divider)

使用class .divider来实现分割下拉。代码: <li class="divider"></li>

15.2 按钮下拉菜单的大小(btn-lg)

使用class .btn-lg、btn-sm和btn-xs来指定按钮大小

代码：

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
        <span>默认下拉菜单</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能1</a></li>
        <li><a href="#">功能2</a></li>
        <li class="divider"></li>
        <li><a href="#">分割线后的功能1</a></li>
    </ul>
</div>

15.3 按钮上拉菜单(dropup)

菜单也可以往上拉，只需要在class .btn-group中添加class .dropup

16. Bootstrap 输入框组(form-control)

使用输入框组，可以很容易向基于文本的输入框添加作为前缀和后缀的文本或按钮。向form-control添加前缀或后缀元素的基本步骤如下:

1.把前缀或后缀元素放在一个带有class .input-group中的<div>中
2.添加class .input-group-addon的<span>中添加前缀内容
3.补充input元素输入框

代码：

<div class="input-group">
    <span class="input-group-addon">前缀内容</span>
    <input type="text" class="form-control" placeholder="缺省提示内容">
</div>

16.1 输入框组的大小

添加表单大小(input-group-lg、input-group-sm)来改变输入框组的大小

代码：

 <div style="padding: 100px 100px 10px;" >
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group input-group-lg">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="请输入邮箱">
            </div>
        </form>
    </div>

16.2 复选框和单选框插件

可以将复选框和单选框作为输入框的前缀或后缀元素

代码:

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><input type="radio"></span>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>

16.3 按钮插件

可以将按钮作为输入框组的前缀或后缀元素。此时，不需要使用class .input-group-addon，而使用class .input-group-btn来包裹按钮

代码:

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-from" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-info">Stop!</button>
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>

17. Bootstrap 导航元素

Bootstrap提供用于定义导航元素的一些选项。使用相同的标记和基类.nav

17.1 表格导航或标签(nav-tabs)

创建一个标签式的导航菜单：

1.以一个带有class .nav的无序列表开始
2.添加class .nav-tabs

代码:

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">Mac</a></li>
</ul>

17.2 胶囊式的导航菜单(nav-pills)

如果需要将标签改成胶囊式，只需要将class .nav-pills替换class .nav-tabs即可

代码:

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone></a></li>
    <li><a href="#">Mac</a></li>
</ul>

17.3 垂直的胶囊式导航菜单(nav-stacked)

在使用calss .nav和class .nav-pills的同时使用class .nav-stacked，让胶囊垂直堆叠

代码:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone</a></li>
</ul>

17.4 两端对齐的导航(nav-justified)

当屏幕宽度大于768px时，在使用表格式导航(nav nav-tabs)和胶囊式导航(nav nav-pills)时，请同时使用class .nav-justified。以让导航的长度和父元素等宽。

17.5 禁用链接(disabled)

对每个class .nav添加class .disabled，则会创建一个灰色的链接

代码:

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li>
    <li class="disabled"><a href="#">iMac(禁用链接)</a></li>
    <li><a href="#">iWatch</a></li>
</ul>

17.6 带有下拉菜单的标签

向一个标签添加下拉菜单的步骤如下:

1.以一个带有class .nav的无序列表开始
2.添加class nav-tabs
3.添加带有.dropdown-menu的无序列表

代码：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPad</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span>iPhone</span>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">iPhone-5</a></li>
            <li><a href="#">iPhone-6</a></li>
            <li><a href="#">iPhone-6s</a></li>
            <li class="divider"></li>
            <li><a href="#">iPhone-X</a></li>
        </ul>
    </li>
    <li><a href="#">iWatch</a></li>
</ul>

17.7 动态标签

与tab-pane和data-toggle="tab"(或data-toggle="pill")一同使用，设置标签页对应的内容随标签切换而更改

代码：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#home" >Home</a></li>
    <li><a data-toggle="tab" href="#iMac">iMac</a></li>
    <li><a data-toggle="tab" href="#iPhone">iPhone</a></li>
    <li><a data-toggle="tab" href="#iWatch">iWatch</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <span>首页，欢迎你</span>
    </div>
    <div id="iMac" class="tab-pane fade">
        <span>iMac页面</span>
    </div>
    <div id="iPhone" class="tab-pane fade">
        <span>iPhone页面</span>
    </div>
    <div id="iWatch" class="tab-pane fade">
        <span>iWatch页面</span>
    </div>
</div>

18. Bootstrap 导航栏

Bootstrap导航栏包含了站点名称和基本导航定义样式

18.1 默认的导航栏

创建一个默认导航栏的基本步骤:

1.向<nav>标签添加class .navbar和class .navbar-default
2.向上面的元素添加role="navigation"，有助于增加可访问性
3.向<div>元素添加一个标题class .navbar-header，内部包含了带有class .navbar-brand的元素<a>
4.向导航栏添加链接，添加class .nav和class .navbar-nav的无序列表

代码:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Apple公司</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iMac</a></li>
            <li><a href="#">iPad</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                    <span>iPhone</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">iPhone-5s</a></li>
                    <li><a href="#">iPhone-6s</a></li>
                    <li><a href="#">iPhone-7</a></li>
                    <li><a href="#">iPhone-X</a></li>
                </ul>
            </li>
            <li><a href="#">iWatch</a></li>
        </ul>
    </div>
</nav>

18.2 响应式的导航栏

响应式的导航栏是指点击某按钮后，展开菜单。

代码:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Apple公司</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">iMac</a></li>
                <li><a href="#">iPad</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span>iPhone</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">iPhone-5</a></li>
                        <li><a href="#">iPhone-6s</a></li>
                        <li><a href="#">iPhone-7</a></li>
                        <li><a href="#">iPhone-8</a></li>
                        <li class="divider"></li>
                        <li><a href="#">iPhone-X</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

18.3 导航栏中的表单(navbar-form)

导航栏中的表单使用class .navbar-form，其确保了表单适当的垂直对齐和在较窄的窗口中折叠行为。

代码:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="输入手机型号">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
</nav>

18.4 导航栏中的按钮(navbar-btn)

可以使用class .navbar-btn向不在<form>元素中添加<button>按钮

代码:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="输入手机型号">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">表单外的Button</button>
    </div>
</nav>

18.5 导航栏中的文本(navbar-text)

使用class .navbar-text向导航栏中添加文本字符串。通常与<p>标签一起使用，确保适当的前导和颜色

代码:

<nav role="navigation" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <div class="navbar-text">
            <p>我是thinking_fioa.</p>
        </div>
    </div>
</nav>

18.6 结合图标的导航链接

在常规的导航栏中使用常用的图标，更多图标请参见图标地址

代码：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Apple 公司</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
        </ul>
    </div>
</nav>

18.7 组件对齐方式

1.navbar-left：向左对齐导航栏中的元素
2.navbar-right：向右对齐导航栏中的元素

18.8 固定到顶部(navbar-fixed-top)

Bootstrap导航栏可以动态定位。导航栏固定在顶部，让它成为随着页面一起滚动的静态导航栏。使用class .navbar-fixed-top。如：<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

18.9 固定到底部(navbar-fixed-bottom)

使用class .navbar-fixed-bottom来让导航栏固定在页面底部

18.10 静态的顶部(navbar-static-top)

使用class .navbar-static-top，创建随着页面一起滚动的导航栏

18.11 反色的导航栏(navbar-inverse)

使用class .navbar-inverse创建一个带有黑色背景白色文本的反色导航栏

19. Bootstrap 面包屑导航(Breadcrumbs)

Bootstrap面包屑导航是一个简单的带有.breadcrumb class无序列表

代码:

<ul class="breadcrumb">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">2018</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">17</a></li>
</ul>

20. Bootstrap 分页

Bootstrap提供多个处理分页的class

1.pagination: 添加该class来在页面上显示分页
2.disabled: 定义当前链接不可点
3.active: 定义当前链接激活
4.pagination-lg(pagination-sm): 获取不同的大小项

20.1 默认的分页(pagination)

使用pagination来实现分页

代码:

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

20.2 分页的状态(disabled、active)

disabled禁用当前链接，active激活当前链接。代码如上

20.3 分页的大小(pagination-lg)

使用pagination-lg将会放大当前链接。使用代码:<ul class="pagination pagination-lg">

20.4 翻页(pager)

如果只想提供上一页／下一页，使用翻页就能满足。

1.pager: 添加该class来获得翻页链接
2.previous：把链接向左对齐
3.next：把链接向右对齐
4.disabled: 禁用当前链接

代码：

<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

21. Bootstrap 标签(label)

使用class .label来显示标签。标签可用于计数、提示和页面上其他的标记显示

1.label label-default: 默认的灰色按钮
2.label label-primary: 蓝色按钮
3.label label-success: 绿色按钮

代码:

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

22. Bootstrap 徽章(Badges)

徽章和标签相似，主要区别是徽章的边角更加圆滑。徽章常被用于突出显示新的或未读的项

代码：

<div class="container">
    <h2>徽章</h2>
    <p>
        <a href="#">收件箱<span class="badge">3</span></a>
    </p>
</div>

22.1 激活导航状态

可以将徽章放置在导航表中

代码：

<ul class="nav nav-pills">
    <li class="active"><a href="#">好友数目<span class="badge">3</span></a></li>
    <li><a href="#">请求加您为好友<span class="badge">10</span></a></li>
</ul>

23. Bootstrap 超大屏幕(jumbotron)

超大屏幕可以增加标题的大小，并为登陆页面内容添加更多的外边距。使用步骤如下:

1.创建一个带有class .jumbotron的容器<div>
2.除了更大的<h1>，字体粗细font-weight被减为200

代码:

<div class="container">
    <div class="jumbotron">
        <h1>欢迎登陆页面</h1>
        <p>这是一个超大屏幕(jumbotron)的实例</p>
        <p><a class="btn btn-info btn-lg" role="button">学习更多</a></p>
    </div>
</div>

23.1 非圆角页面

为了占用全部宽度且不带圆角的超大屏幕，请在class .container外使用class .jumbotron

代码:

<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面</h1>
        <p>这是一个超大屏幕(jumbotron)的实例</p>
        <p><a class="btn btn-info btn-lg" role="button">学习更多</a></p>
    </div>
</div>

24. Bootstrap 页面标题(page-header)

当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就特别有用。

代码：

<div class="page-header">
    <h1>
        页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>内容部分</p>

25. Bootstrap 缩略图(thumbnail)

Bootstrap使用缩略图可为大多数站点中布局图像、视频、文本等。具体步骤如下:

1.在图像周围添加带有class .thumbnail的<a>标签
2.这会添加四个像素的内边距(padding)和一个灰色按钮
3.当鼠标悬停在图像上，会动画的显示出图像的轮廓

代码:

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
</div>

25.1 添加自定义内容

可以向缩略图中添加各种HTML内容，比如标题、段落和按钮。具体步骤如下:

1.添加class .thumbnail的<div>
2.在<div>内，添加任何想要添加的东西

代码:

<div class="row">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些文本</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">按钮</a>
                    <a href="#" class="btn btn-default" role="button">按钮</a>
                </p>
            </div>
        </div>
    </div>
</div>

26. Bootstrap 警告(alerts)

警告向用户提供了一种定义消息样式的方式。

1.alert alert-success - 告警成功提示
2.alert alert-info - 告警信息提示
3.alert alert-warning - 警告提示
4.alert alert-danger - 危险提示

代码:

<div class="alert alert-success">成功！很好地完成了提交</div>
<div class="alert alert-info">信息！请注意这个信息</div>
<div class="alert alert-warning">警告！请不要提交</div>
<div class="alert alert-danger">错误！请进行一些更改</div>

26.1 可取消的警告(alert-dismissable)

创建一个可取消的警告步骤:

1.创建一个<div>，并向其添加一个class .alert和class .alter-success
2.向上面的<div>添加可选.alert-dismissable
3.添加一个关闭按钮

代码:

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交
</div>

26.2 警告(alert)中的链接

在警告中创建链接的步骤：

1.创建一个<div>，并向其添加class .alert和class .alert-success
2.使用class .alert-link来提供带有匹配颜色的链接

代码:

 <div class="alert alert-info">
    <a href="#" class="alert-link">
        信息！请注意这个信息
    </a>
</div>

27. Bootstrap 进度条

使用Bootstrap创建加载、重定向或动作状态的进步条

27.1 默认的进度条

创建一个基本的进度条的步骤:

1.添加一个带有class .progress的<div>
2.添加一个带有class .progress-bar的空的<div>
3.添加带有百分比的宽度的style属性，如style="width:60%"

代码:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.2 交替进度条

使用class .progress-bar-*属性来设置进度条的颜色

1.progress-bar-success - 成功颜色
2.progress-bar-info - 信息颜色
3.progress-bar-warning - 警告颜色
4.progress-bar-danger - 危险颜色

代码:

<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.3 条纹的进度条(progress-striped)

使用属性class .progress-striped来创建进度条

代码:

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.4 动画的进度条(active)

在一个带有class .progress和class .progress-striped的<div>中。同时添加class .active属性，如:<div class="progress progress-striped active">

27.5 堆叠进度条

将多个进度条放在相同的.progress中即可实现堆叠

代码：

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:40%">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:30%">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:20%">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

28. Bootstrap 多媒体对象(media)

使用class .media来设计轻量级的媒体，有下列两个标签:

1.media：该class允许多媒体(图像、视屏、音频)浮动到内容区块的左边(meida-left)或右边(media-right)

代码:

<div class="media">
    <a class="media-left" href="#">
        <img class="media-object" src="http://avatar.youkuaiyun.com/F/7/8/3_thinking_fioa.jpg"
             alt="媒体对象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        <span>
            示例文本
        </span>
    </div>
</div>

29. Bootstrap 列表组(list-group)

列表组件用于以列表形式呈现复杂和自定义的内容。基本的列表组的步骤如下:

1.向元素<ul>添加class .list-group
2.向<li>添加class .list-group-item

代码:

<ul class="list-group col-md-3">
    <li class="list-group-item">thinking_fioa</li>
    <li class="list-group-item">ppp</li>
    <li class="list-group-item">luweilin</li>
</ul>

29.1 向列表组添加徽章(badge)

向<li>元素中添加<span class="badge">即可添加徽章。会自动定位到右边

代码:

<ul class="list-group col-md-3">
    <li class="list-group-item">
        <span class="badge">新</span>
            thinking_fioa</li>
    <li class="list-group-item">ppp</li>
    <li class="list-group-item">luweilin</li>
</ul>

29.2 向列表组添加链接

使用<a>来添加链接

代码:

<div class="col-sm-3">
    <a href="#" class="list-group-item active">
        thinking_fioa
        <span class="badge">帅哥</span>
    </a>
    <a href="#" class="list-group-item">ppp</a>
    <a href="#" class="list-group-item">luweilin</a>
</div>

30. Bootstrap 面板(panel)

面板控件用于把DOM组件插入到一个盒子中。需要使用class .panel和class .panel-default

代码:

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

30.1 面板标题(panel-title)

可以使用两种方式来添加面板标题:

1.panel-heading - 向面板添加标题容器
2.使用.panel-title的<h1>和<h6>添加预定义样式的标题

代码:

<div class="panel panel-default">
    <div class="panel-heading">
        不带title的面板标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有title的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

30.2 面板脚注(panel-footer)

使用属性class .panel-footer来添加面板脚注

代码:

<div class="panel-footer">面板脚注</div>

30.3 带语境色彩的面板

设置语境色彩的面板有: panel-primary、panel-success、panel-info、panel-warning和panel-danger

30.4 带表格的面板

在面板中使用class .table来创建一个无边框的表格

代码:

<div class="panel panel-default col-md-6">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本面板
    </div>
    <table class="table">
        <tr>
            <th>姓名</th><th>年龄</th>
        </tr>
        <tr>
            <td>luweilin</td><td>24</td>
        </tr>
        <tr>
            <td>ppp</td><td>25</td>
        </tr>
    </table>
</div>

30.5 带列表组的面板

代码:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        一个基本面板内容
    </div>
    <ul class="list-group">
        <li class="list-group-item">thinking_fioa</li>
        <li class="list-group-item">luweilin</li>
        <li class="list-group-item">ppp</li>
    </ul>
</div>