Bootstrap-other内置组件

1、缩略图

缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

使用方法：

通过“thumbnail”样式配合bootstrap的网格系统来实现。

<h1>复杂的缩略图</h1>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>    Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div>
    </div>
</div>

2、警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

使用方法：

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>
<div class="alert alert-info alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    请输入正确的密码
</div>
<div class="alert alert-warning alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    您已操作失败两次，还有最后一次机会
</div>
<div class="alert alert-danger alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    对不起，您输入的密码有误
</div>

3、进度条

<h2>基本进度条</h2>
<div class="progress">
     <div class="progress-bar" style="width:40%">
    </div>
</div>
<h2>彩色进度条</h2>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
     <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
     <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
     <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>条纹进度条</h2>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>层叠进度条</h2>
<h5>正常层叠进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<h5>不良效果层叠进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:40%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div>
<h5>层叠条纹进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
</div>

<h5>进度条2</h5>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

4、列表组

在Bootstrap框架中的基础列表组主要包括两个部分：

☑  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

☑  list-group-item：列表项，常用的是li元素，当然也可以是div元素

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">
        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">
        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">
        <span class="badge">1290</span>CSS3文本
    </li>
</ul>

带链接的列表组，其实就是每个列表项都具有链接效果

Bootstrap框加在链接列表组的基础上新增了两个样式：

☑  list-group-item-heading：用来定义列表项头部样式

☑  list-group-item-text：用来定义列表项主要内容

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
    </a>
</div>

Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：

☑  active：表示当前状态

☑  disabled：表示禁用状态

列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。

☑  list-group-item-success：成功，背景色绿色

☑  list-group-item-info：信息，背景色蓝色

☑  list-group-item-warning：警告，背景色为黄色

☑  list-group-item-danger：错误，背景色为红色

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

5、面板

面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码：

☑  Less版本：对应的源码文件是 panels.less

☑  Sass版本：对应的源码文件是 _panels.scss

☑  编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

☑  panel-heading：用来设置面板头部样式

☑ panel-footer：用来设置面板尾部样式

在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

☑  panel-primary：重点蓝

☑  panel-success：成功绿

☑ panel-info:信息蓝

☑ panel-warning：警告黄

☑ panel-danger：危险红

使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面板</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>基础面板</h3>
<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
<h3>带有头和尾的面板</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<h3>彩色面板</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">            详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<h3>面板中嵌套表格</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>＃</th>
                    <th>我的书</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>《图解CSS3》</td>
                    <td>2014-07-10</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>