BootStrap -- API学习（七）

*******************************第七章 其他内置组件*********************************
一、缩略图
    1.使用thumbnail作为缩略图的容器
        <a href="#" class="thumbnail">
            <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
        </a>
        
    2.缩略图和内容（text、按钮等）配合使用
        ①在加上一个内容的容器：<div class="caption"></div>
        <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>
        
二、警告框
    1.默认警告框
        <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
        <div class="alert alert-info" role="alert">请输入正确的密码</div>
        <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
        <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>     
        
    2.可关闭的警告框
        在默认警告框的内容里面添加，关闭按钮
        <button class="close" type="button" data-dismiss="alert">&times;</button>
    
    3.警示框的链接
        情调: <strong></strong>
        链接：<a href="#" class="alert-link">警告链接</a>
        
三、进度条
    1.进度条基本样式
        progress作为外容器
        progress-bar作为内容器
        <div class="progress">
            <div class="progress-bar" style="width:40%"></div>
        </div>
        
    2.彩色进度条
        progress-bar-success
        progress-bar-info 
        progress-bar-warning
        progress-bar-danger
        例子：(但是之前的progress-bar 还是不能丢的)
            <div class="progress">
                <div class="progress-bar progress-bar-info" style="width:40%"></div>
            </div>
    
    3.条纹进度条
        在容器上添加progress-striped
        
    4.动态条纹进度条
        在同期上添加active,像是转转的进度条
        
    5.层叠进度条  就是使用一个容器就可以了(但是要几号他们的插值就好用了)（建议不用）
    
    6.带Label的进度条  直接加值就可以了 
        如：
            <div class="progress"><div class="progress-bar" style="width:30%">30%</div></div>
            
            
媒体对象
    1.默认媒体对象
        ☑  媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
        ☑  媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
        ☑  媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
        ☑  媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
        
    2.媒体对象的嵌套
        在media-body中使用media对象
    
    3.媒体对象列表
        在加一个media-list容器
    例子：
        <div class="media-list">
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031"/>
                </a>
                <div class="media-body">
                    <div class="media-header">
                        <h4>我是大漠</h4>
                    </div>
                    我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
                </div>
            </div>
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0"/>
                </a>
                <div class="media-body">
                    <div class="media-header">
                        <h4>我是大漠</h4>
                    </div>
                    我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
                </div>
            </div>
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1"/>
                </a>
                <div class="media-body">
                    <div class="media-header">
                        <h4>我是大漠</h4>
                    </div>
                    我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
                </div>
            </div>
        </div>
        
列表
    1.基础列表(看上去像是去掉列表符号的列表，加上边框的样式)
        容器:list-group
        子项:list-group-item
        <ul class="list-group">
            <li class="list-group-item">揭开CSS3的面纱</li>
            <li class="list-group-item">CSS3选择器</li>
            <li class="list-group-item">CSS3边框</li>
            <li class="list-group-item">CSS3背景</li>
            <li class="list-group-item">CSS3文本</li>
        </ul>
        
    2.带徽章的列表页
        子项中添加：<span class="badge">12</span>
        例子:
            <ul class="list-group">
                <li class="list-group-item">
                    揭开CSS3的面<span class="badge">13</span>
                </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>
            
    3.带链接的列表页
        直接在内容上加上超链接就ok
        <ul class="list-group">
            <li class="list-group-item">
                <a href="#">你说什么，我是链接</a>
            </li>
        </ul>
        
    4.自定义列表
        标题：list-group-item-heading
        内容：list-group-item-text
        例子：
            <a href="##" class="list-group-item">
                <h4 class="list-group-item-heading">Sass中国</h4>
                <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
            </a>
            
    5.列表项的状态
        激活: active
        禁用: desabled
        <li class="list-group-item active"></li>
        <li class="list-group-item disabled"></li>
        
    6.多彩列表
        ☑  list-group-item-success：成功，背景色绿色
        ☑  list-group-item-info：信息，背景色蓝色
        ☑  list-group-item-warning：警告，背景色为黄色
        ☑  list-group-item-danger：错误，背景色为红色
        
面板
    1.基础面板
        容器: panel panel-default
        内容: panel-body
        
    2.有头有尾的面板
        头部: panel-heading
        尾部: panel-footer
        
    3.彩色面板
        ☑ panel-primary：重点蓝
        ☑ panel-success：成功绿
        ☑ panel-info:信息蓝
        ☑ panel-warning：警告黄
        ☑ panel-danger：危险红
        
    4.面板中嵌套表格
        表格嵌套到panel-body中：有外边距
        表格嵌套到panel-body外：没有外边距，与面板贴合
        
    5.面板中嵌套列表 (规则同上)