Bootstrap——警告，进度条，列表组，面板，Well

可取消的警告

通过创建一个 <div>，并向其添加一个 .alert 和（alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div>class添加可选的.alert-dismissable。
添加一个关闭按钮。

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    错误！请进行一些更改。
</div>

进度条

默认进度条

<div class="progress">
    <div class="progress-bar" role="progressbar"  style="width: 40%;">
    </div>
</div>

有条纹的进度条

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>

会动的进度条

.active

堆叠的进度条

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

列表组

• 向ul加.list-group
• 向li加.list-group-item

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
</ul>

向列表组增加徽章组件

会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge">

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">新</span>
        24*7 支持
    </li>
    <li class="list-group-item">每年更新成本</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        折扣优惠
    </li>
</ul>

使用div的列表组

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            入门网站包
        </h4>
    </a>
    <a href="#" class="list-group-item">
        <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">
            24*7 支持
        </h4>
        <p class="list-group-item-text">
            我们提供 24*7 支持。
        </p>
    </a>
</div>

面板

<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">面板内容</div>
    <div class="panel-footer">面板脚注</div>
</div>

面板颜色
- panel-success
- panel-info
- panel-warning
- panel-danger
- panel-primary

Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div>中即可。

<div class="well">你好</div>
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>