1. 按钮组

概念： 将多个按钮放进 btn-group 容器中即可形成水平按钮组，支持嵌套：

• 替换 btn-group 为 btn-group-vertical 即可形成垂直按钮组，不支持嵌套。
• 添加 btn-group-xs/md/lg 可以设置整组按钮为小号/正常/大号。
• 将多个按钮组放进一个 btn-toolbar 容器中即可形成按钮工具条。

布局：

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
<section id="btn-group">
    <article class="btn-group">
        <button type="button" class="btn btn-info">左</button>
        <button type="button" class="btn btn-success">中</button>
        <article class="btn-group">
            <button type="button" class="btn btn-warning">右1</button>
            <button type="button" class="btn btn-danger">右2</button>
            <button type="button" class="btn btn-primary">右3</button>
        </article>
    </article>
</section>

<section id="btn-group-vertical">
    <article class="btn-group-vertical">
        <button type="button" class="btn btn-info">上</button>
        <button type="button" class="btn btn-success">中</button>
        <button type="button" class="btn btn-warning">下</button>
    </article>
</section>

<section id="btn-group-size">
    <article class="btn-group btn-group-xs">
        <button type="button" class="btn btn-info">左</button>
        <button type="button" class="btn btn-success">中</button>
        <button type="button" class="btn btn-warning">右</button>
    </article>
    <article class="btn-group btn-group-md">
        <button type="button" class="btn btn-info">左</button>
        <button type="button" class="btn btn-success">中</button>
        <button type="button" class="btn btn-warning">右</button>
    </article>
    <article class="btn-group btn-group-lg">
        <button type="button" class="btn btn-info">左</button>
        <button type="button" class="btn btn-success">中</button>
        <button type="button" class="btn btn-warning">右</button>
    </article>
</section>

<section id="btn-toolbar">
    <article class="btn-toolbar">
        <article class="btn-group">
            <button type="button" class="btn btn-info">左</button>
            <button type="button" class="btn btn-success">中</button>
            <button type="button" class="btn btn-warning">右</button>
        </article>
        <article class="btn-group">
            <button type="button" class="btn btn-info">左</button>
            <button type="button" class="btn btn-success">中</button>
            <button type="button" class="btn btn-warning">右</button>
        </article>
    </article>
</section>

2. 下拉菜单

概念： 一个下拉菜单由容器，触发器和菜单三部分组成：

• 容器：容器包裹着触发器和菜单，由 dropdown 修饰以设置相对定位：
• 触发器：触发菜单的元素需要添加 data-toggle="dropdown" 属性来提供下拉功能。
• 菜单：菜单一般使用有序列表或者无需列表：
  • 父元素添加 dropdown-menu 或 dropdown-menu-right 让菜单内容居左或居右。
  • 子元素添加 dropdown-header 来设置菜单标题项。
  • 子元素添加 divider 来设置菜单分割线。
  • 子元素添加 disabled 来设置菜单项禁用效果。
• 分裂式下拉菜单：触发器被分成多个部分，即可称为分裂式下拉菜单：
  • 需要在菜单容器中添加 .btn-group 完成按钮分裂。
  • dropdown-toggle改变后者分列式按钮直角为圆角。

上拉菜单和下拉菜单只有一处不同，就是菜单容器改为使用 .dropup 修饰。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    //下拉菜单
<section id="dropdown">
    <article class="dropdown">
        <button type="button" class="btn btn-info" data-toggle="dropdown">
            <span>货品列表</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">部分在售商品</li>
            <li class="divider"></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">苹果</a></li>
            <li class="divider"></li>
            <li><a href="#">大米</a></li>
            <li class="disabled"><a href="#">小米</a></li>
        </ul>
    </article>
</section>
	//上拉菜单
<section id="dropup">
    <article class="dropup">
        <button type="button" class="btn btn-info" data-toggle="dropdown">
            <span>货品列表</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">部分在售商品</li>
            <li class="divider"></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">苹果</a></li>
            <li class="divider"></li>
            <li><a href="#">大米</a></li>
            <li class="disabled"><a href="#">小米</a></li>
        </ul>
    </article>
</section>
	//分列式下拉菜单
<section id="btn-group-dropdown">
    <article class="dropdown btn-group">
        <button type="button" class="btn btn-info">后三国名将</button>
        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">三马食槽之：马腾</a></li>
            <li><a href="#">三马食槽之：马岱</a></li>
            <li><a href="#">三马食槽之：马超</a></li>
        </ul>
    </article>
</section>

3. 输入框组

概念： 将多个 <input> 放进 input-group 容器中即可形成输入框组：

• 额外添加 input-group-sm/lg 可以设置整组元素为小号/大号。
• 输入框组中，<input> 可以前后组合 input-group-addon 文字，支持多组。
• 输入框组中，<input> 可以前后组合 input-group-btn 按钮父容器，支持多组。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="input-group">
    <form action="">
        <div class="input-group">
            <span class="input-group-addon">￥</span>
            <input id="input-group-1" class="form-control"/>
            <span class="input-group-addon">.00 元</span>
        </div>
        <div class="input-group">
            <input id="input-group-2" class="form-control"/>
            <span class="input-group-btn">
                <!--.input-group-btn类不要直接放在按钮上-->
                <button type="button" class="btn btn-success">按钮1</button>
                <button type="button" class="btn btn-success">按钮2</button>
            </span>
        </div>
        <label hidden="hidden" for="input-group-1"></label>
        <label hidden="hidden" for="input-group-2"></label>
    </form>
</section>



<section id="input-group-size">
    <div class="input-group input-group-lg">
        <span class="input-group-addon">@</span>
        <input id="input-group-size-1" class="form-control">
    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon">@</span>
        <input id="input-group-size-2" class="form-control">
    </div>
    <label hidden="hidden" for="input-group-size-1"></label>
    <label hidden="hidden" for="input-group-size-2"></label>
</section>

4. 导航

概念： 导航包括容器和列表项两部分：

• 容器：一般使用 <ol> 或 <ul>：
  • 添加 nav 设置为基本垂直导航。
  • 添加 nav nav-tabs 设置为基本水平导航。
  • 添加 nav nav-pills 设置为胶囊水平导航，多了圆角效果。
  • 添加 nav nav-pills nav-stacked 设置为胶囊垂直导航，多了圆角效果。
  • 添加 breadcrumb 设置为路径导航，一般最后一项需设置为默认选项。
• 列表项：一般使用 <li> 配合 <a>，<li> 可以直接作为下拉菜单容器使用：
  • 添加 active 设置为首选项，即默认选中项。
  • 添加 disabled 设置为禁用项。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    //添加 `nav` 设置为基本垂直导航。
<section id="nav">
    <nav>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">我们</a></li>
        </ul>
    </nav>
</section>

//添加 `nav nav-tabs` 设置为基本水平导航。
<section id="nav-tabs">
    <nav>
        <ul class="nav nav-tabs">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">我们</a></li>
        </ul>
    </nav>
</section>

//添加 `nav nav-pills` 设置为胶囊水平导航，多了圆角效果。
<section id="nav-pills">
    <nav>
        <ul class="nav nav-pills">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">我们</a></li>
        </ul>
    </nav>
</section>

//添加 `nav nav-pills nav-stacked` 设置为胶囊垂直导航，多了圆角效果。
<section id="nav-stacked">
    <nav>
        <ul class="nav nav-pills nav-stacked">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">我们</a></li>
        </ul>
    </nav>
</section>

//添加 `breadcrumb` 设置为路径导航，一般最后一项需设置为默认选项。
<section id="breadcrumb">
    <nav>
        <ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品列表</a></li>
            <li><a href="#">2020</a></li>
            <li class="active">羊绒大衣</li>
        </ul>
    </nav>
</section>

//添加 `disabled` 设置为禁用项。
<section id="disabled">
    <nav>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li class="disabled"><a href="javascript:">咨询</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">我们</a></li>
        </ul>
    </nav>
</section>


<section id="li-dropdown">
    <nav>
        <ul class="nav nav-tabs">
            <li><a href="">首页</a></li>
            <li><a href="">咨询</a></li>
            <li><a href="">关于</a></li>
            <li class="dropup">
                <a href="javascript:" data-toggle="dropdown">
                    <span>我们</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="">我们001</a></li>
                    <li><a href="">我们002</a></li>
                    <li><a href="">我们003</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</section>

5. 导航条

概念： 多个导航可以组成导航条，由父容器和导航组成，可选添加子容器，标题和其他元素：

• 父容器：一般使用 <nav> 布局，并使用 navbar 作为基本样式：
  • 额外添加 navbar-default 设置默认导航条。
  • 额外添加 navbar-inverse 设置反色导航条。
  • 额外添加 navbar-static-top 设置静态样式，去除圆角。
  • 额外添加 navbar-fixed-top/bottom：设置浮顶/底样式，默认高度50px。
• 导航：使用 nav navbar-nav 来进行样式适配：
  • 额外添加 navbar-right 可以设置导航居右。
• 子容器：父容器内嵌一层 .container 容器可以使导航条居中且添加两侧内边距。
• 标题：.navbar-header 容器可以设置导航标题，内嵌 .navbar-brand 容器可以设置品牌。
• 其他元素：导航条中允许添加其他容器，如下：
  • .navbar-text 容器用来对导航条中的文本进行适配。
  • .navbar-link 容器用来对导航条中的非导航链接进行适配。
  • .navbar-btn 容器用来对导航条中的按钮进行适配。
  • .navbar-form 容器用来对导航条中的表单进行适配，建议表单右对齐。
  • .navbar-right 用来设置导航条中其他内容居右。

    <style type="text/css">
        body {
            height: 3000px;
        }

        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="navbar-default">
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li><a href="#">专业团队</a></li>
            <li><a href="#">员工风貌</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li><a href="#">合作企业</a></li>
            <li><a href="#">加入我们</a></li>
        </ul>
    </nav>
</section>


<section id="navbar-container">
    <nav class="navbar navbar-default">
        <article class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-inverse">
    <nav class="navbar navbar-inverse">
        <article class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-static-top">
    <nav class="navbar navbar-inverse navbar-static-top">
        <article class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-fixed-top">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <article class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-fixed-bottom">
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <article class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-header">
    <nav class="navbar navbar-inverse">
        <article class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">LOGO</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </article>
    </nav>
</section>


<section id="navbar-element">
    <nav class="navbar navbar-inverse">
        <article class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">LOGO</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">专业团队</a></li>
                <li><a href="#">员工风貌</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">合作企业</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
            <span class="navbar-text">文本</span>
            <span class="navbar-text">跳入<a href="#" class="navbar-link">百度</a></span>
            <button class="btn btn-danger navbar-btn">按钮</button>
            <!--导航条中的表单元素后面也不允许在同一行添加其他元素，除非表单右对齐-->
            <form class="navbar-form navbar-right">
                <input id="navbar-form-ipt-1" class="form-control"/>
                <button class="btn btn-info">登录</button>
                <label for="navbar-form-ipt-1"></label>
            </form>
        </article>
    </nav>
</section>

6. 分页

概念： 分页一般使用有序/无序列表配合 <a> 来布局：

• 简单分页：
  • 父元素使用 pager 修饰。
  • 子元素使用 previous 和 next 进行两端对其，可选。
  • 子元素可以使用 disabled 来表示禁用，建议将 <a> 替换为 <span>。
• 数字分页：
  • 父元素使用 pagination 修饰。
  • 父元素可以使用 pagination-lg/sm 来调整分页组件为大号/小号。
  • 子元素可以使用 active 来表示默认选中，建议将 <a> 替换为 <span>。
  • 子元素可以使用 disabled 来表示禁用，建议将 <a> 替换为 <span>。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="pager">
    <ol class="pager">
        <li><a href="#">&larr;上一页</a></li>
        <li><a href="#">下一页&rarr;</a></li>
    </ol>
</section>


<section id="pager-previous-next">
    <ol class="pager">
        <li class="previous"><a href="#">&larr;上一页</a></li>
        <li class="next"><a href="#">下一页&rarr;</a></li>
    </ol>
</section>


<section id="pager-disabled">
    <ol class="pager">
        <li class="disabled"><span>&larr;上一页</span></li>
        <li><a href="#">下一页&rarr;</a></li>
    </ol>
</section>


<section id="pagination">
    <ol class="pagination pagination-sm">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">158</a></li>
        <li><a href="#">尾页</a></li>
        <li><a href="#">&raquo;</a></li>
    </ol>
    <ol class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">158</a></li>
        <li><a href="#">尾页</a></li>
        <li><a href="#">&raquo;</a></li>
    </ol>
    <ol class="pagination pagination-lg">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">158</a></li>
        <li><a href="#">尾页</a></li>
        <li><a href="#">&raquo;</a></li>
    </ol>
</section>


<section id="pagination-active-disabled">
    <ol class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">首页</a></li>
        <li class="active">
            <span href="#">1</span>
        </li>
        <li><a href="#">2</a></li>
        <li class="disabled">
            <span disabled>...</span>
        </li>
        <li><a href="#">158</a></li>
        <li><a href="#">尾页</a></li>
        <li><a href="#">&raquo;</a></li>
    </ol>
</section>

7. 标签和徽章

概念：

• label：标签用来描述消息状态，建议用 <label> 或 <span> 布局：
  • 添加 label-default/success/info/primary/warning/danger 可以设置标签情景色。
• badge：徽章用来描述消息数量，建议用 <span> 布局，在按钮中时可以自动适配按钮情景。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="label">
    <h1>今天XX出轨了！！&nbsp;<label class="label label-default">New</label></h1>
    <h2>今天XX出轨了！！&nbsp;<label class="label label-info">New</label></h2>
    <h3>今天XX出轨了！！&nbsp;<label class="label label-success">New</label></h3>
    <h4>今天XX出轨了！！&nbsp;<span class="label label-primary">New</span></h4>
    <h5>今天XX出轨了！！&nbsp;<span class="label label-danger">New</span></h5>
    <h6>今天XX出轨了！！&nbsp;<span class="label label-warning">New</span></h6>
</section>


<section id="badge">
    <a href="#">Inbox&nbsp;<span class="badge">42</span></a>

    <button class="btn btn-default">
        <span>已读&nbsp;</span>
        <span class="badge">3</span>
    </button>

    <button class="btn btn-info">
        <span>未读&nbsp;</span>
        <span class="badge">7</span>
    </button>
</section>

8. 巨幕

概念： 巨幕是一个能延伸至整个视口来展示关键内容的灰色展板：

• .container 内嵌 .jumbotron 可以组成左右有15px的内边距，圆角矩形的巨幕。
• .jumbotron 内嵌 .container 可以组成宽度占屏幕100%，直角矩形的巨幕。
• .page-header 容器用来设置页头，为内容额外设置了一些空间，并为底边框添加灰色。
• .well 容器是一种内嵌形态的巨幕，也可以和 .container 配合使用：
  • 添加 well-sm/lg 可以调整内嵌巨幕为小号/大号。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="container-jumbotron">
    <article class="container">
        <article class="jumbotron">巨幕</article>
    </article>
</section>

<section id="jumbotron-container">
    <article class="jumbotron">
        <article class="container">巨幕</article>
    </article>
</section>

<section id="page-header">
    <article class="page-header">
        <h1>页头<small>副标题</small></h1>
    </article>
</section>


<section id="well">
    <article class="well">well组件测试</article>
    <article class="well well-sm">well组件测试</article>
    <article class="well well-lg">well组件测试</article>
</section>

9. 缩略图

概念： .thumbnail 缩略图容器包含媒体对象和 .caption 文字容器两部分，配合栅格系统可以更优雅的展示响应式图文内容列表。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="thumbnail" class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <div class="thumbnail">
                <img src="../../image/img-test.jpg" alt=""/>
                <div class="caption">
                    <h3>标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容</p>
                    <p><a href="#" class="btn btn-default">点击详情</a></p>
                </div>
            </div>
        </div>
    </div>
</section>

10. 警告框

概念： alert 是警告框容器的基本样式：

• 添加 alert-success/info/warning/danger 可设置警告框绿/蓝/黄/红背景色。
• 关闭警告框：
  • 为警告框添加 alert-dismissible 设置警告框可关闭。
  • 为警告框添加 fade in 设置警告框关闭时的过渡动画效果。
  • 设计关闭按钮，添加 data-dismiss="alert" 属性。
• .alert-link 用来修饰警告框中链接以适配警告框样式。

 <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }

        .alert {
            width: 300px;
            height: 200px;
        }
    </style>
    
    
    
<section id="alert">
    <div class="alert alert-success">成功</div>
    <div class="alert alert-info">信息</div>
    <div class="alert alert-warning">警告</div>
    <div class="alert alert-danger">危险</div>
</section>


<section id="alert-close">
    <div class="alert alert-warning alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>注册失败！</strong>该用户已经存在！
    </div>
</section>


<section id="alert-link">
    <div class="alert alert-success">
        <strong>注册失败！</strong>
        <a href="#" class="alert-link">点我返回登录页面！</a>
    </div>

    <div class="alert alert-danger">
        <strong>注册失败！</strong>
        <a href="#" class="alert-link">点我返回登录页面！</a>
    </div>
</section>

11. 媒体容器

概念： .media 媒体容器包含媒体对象容器和文字描述容器两部分：

• 媒体对象容器：由 .media 修饰，需要内嵌一个 .media-object 媒体对象。
  • 添加 media-left/right/top/middle/bottom 来设置媒体对象的位置。
• 文字描述容器：由 .media-body 修饰，需要内嵌一个 .media-heading 标题。
• 位置更换：媒体容器默认左图右文，如需对调，仅需对调两个容器的编写位置。
• 媒体列表：允许将多套媒体容器放入一个 .media-list 列表中形成媒体对象列表，其中每一个 <li> 都是一个媒体容器，方便统一管理。

 <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }

        .media-object {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
    
    
<section id="media-left">
    <article class="media">
        <article class="media-left media-top">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>


    <article class="media">
        <article class="media-left media-middle">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>


    <article class="media">
        <article class="media-left media-bottom">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>
</section>


<section id="media-right">
    <article class="media" style="width:500px;">
        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
        <article class="media-left">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>
    </article>
</section>


<section id="media-list">
    <ul class="media-list">
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
    </ul>
</section>

12. 列表组

概念： .list-group 内嵌 .list-group-item 可以组成列表组结构：

• 可以采用 <ul> 配合 <li>，<ol> 效果同 <ul>：
  • <li> 添加 list-group-item-success/info/warning/danger 可调整颜色。
  • <li> 中的徽章组件会自动居右显示。
• 可以采用 <div> 配合 <a>，<button> 效果同 <a>：
  • <a> 添加 list-group-item-success/info/warning/danger 可调整颜色。
  • <a> 添加 active 表示默认选中，蓝底白字。
  • <a> 添加 disabled 表示禁用，灰底黑字。
  • <a> 中可以使用 list-group-item-heading 和 list-group-item-text 组合一个自定义的列表项。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="ul-li">
    <ul class="list-group">
        <li class="list-group-item list-group-item-success"><a href="#">朝辞白帝彩云间</a></li>
        <li class="list-group-item list-group-item-warning"><a href="#">千里江陵一日还</a></li>
        <li class="list-group-item list-group-item-info"><a href="#">两岸猿声啼不住</a></li>
        <li class="list-group-item list-group-item-danger"><a href="#">轻舟已过万重山</a></li>
    </ul>
</section>



<section id="ul-badge">
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">14</span>
            <span>朝辞白帝彩云间</span>
        </li>
        <li class="list-group-item">
            <span class="badge">6</span>
            <span>千里江陵一日还</span>
        </li>
    </ul>
</section>



<section id="div-a">
    <div class="list-group">
        <a href="#" class="list-group-item active">朝辞白帝彩云间</a>
        <a href="#" class="list-group-item disabled">千里江陵一日还</a>
        <a href="#" class="list-group-item list-group-item-danger">两岸猿声啼不住</a>
        <a href="#" class="list-group-item">轻舟已过万重山</a>
    </div>
</section>



<section id="div-btn">
    <div class="list-group">
        <button class="list-group-item active">朝辞白帝彩云间</button>
        <button class="list-group-item disabled">千里江陵一日还</button>
        <button class="list-group-item list-group-item-danger">两岸猿声啼不住</button>
        <button class="list-group-item">轻舟已过万重山</button>
    </div>
</section>



<section id="heading-text">
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">朝辞</h4>
        <p class="list-group-item-text">朝辞白帝彩云间</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">千里</h4>
        <p class="list-group-item-text">千里江陵一日还</p>
    </a>
</div>
</section>

13. 面板

概念： 一个面板组件由容器，头容器，体容器和脚容器组成：

• 容器：由 .panel 修饰，包裹着头容器，体容器和脚容器：
  • 添加 panel-default/success/info/primary/warning/danger 以设置情景色。
• 头容器：由 .panel-heading 修饰，内嵌 .panel-title 标题容器设置标题。
• 体容器：由 .panel-body 修饰，可以存在多个或不存在，容器具有内边距。
• 脚容器：由 .panel-footer 修饰，一般放置一些注脚和功能按钮。
• 其他元素：面板中可以直接嵌入列表和表格，建议放在 .panel-body 同级位置。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
    
<section id="panel">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">
                <h2>面板标题</h2>
            </div>
        </header>
        <article class="panel-body">面板内容</article>
        <footer class="panel-footer">面板注脚</footer>
    </article>
</section>



<section id="panel-color">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-success">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-info">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-primary">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-warning">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-danger">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
</section>




<section id="panel-element">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">
            <table class="table table-striped table-hover table-bordered">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>备注</th>
                </tr>
                <tr>
                    <td>001</td>
                    <td>赵四</td>
                    <td>58</td>
                    <td>男</td>
                    <td>亚洲舞王</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>广坤</td>
                    <td>59</td>
                    <td>男</td>
                    <td>广坤山货</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>刘能</td>
                    <td>57</td>
                    <td>男</td>
                    <td>玉田花圃</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>大脚</td>
                    <td>56</td>
                    <td>女</td>
                    <td>大脚超市</td>
                </tr>
            </table>
        </article>
        <div class="list-group">
            <a href="#" class="list-group-item">青青河边草</a>
            <a href="#" class="list-group-item">一岁一枯荣</a>
            <a href="#" class="list-group-item">野火烧不尽</a>
            <a href="#" class="list-group-item">春风吹又生</a>
        </div>
        <footer class="panel-footer">面板注脚</footer>
    </article>
</section>