前端基础之《Bootstrap（9）—CSS组件_分页、标签、警告框和进度条》

一、分页

1、分页效果（.pagination）

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

2、激活和禁用
激活：active
禁用：disabled

3、分页尺寸
大的（.pagination-lg）
中等的（.pagination）
小的（.pagination-sm）

4、上一页和下一页（.pager）

<ul class="pager">
    <li><a href="">上一页</a></li>
    <li><a href="">下一页</a></li>
</ul>

5、上一页下一页两端对齐

<ul class="pager">
    <li class="previous"><a href="">上一页</a></li>
    <li class="next"><a href="">下一页</a></li>
</ul>

二、标签

1、标签（.label）

2、颜色
灰色：.label-default
蓝色：.label-default
绿色：.label-success
青色：.label-info
黄色：.label-warning
红色：.label-danger

<h2><span class="label label-default">300</span></h2>
<h2><span class="label label-primary">300</span></h2>
<h2><span class="label label-success">300</span></h2>
<h2><span class="label label-warning">300</span></h2>
<h2><span class="label label-danger">300</span></h2>

三、徽章（.badge）

四、巨幕（.jumbotron）

<div class="jumbotron">
    <h1>测试</h1>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

五、缩略图

1、带链接的图片+指甲盖效果（.thumbnail）

<div class="row">
    <div class="col-md-3">
        <a href="" class="thumbnail">
            <img src="bs/image/222.jpg">
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="thumbnail">
            <img src="bs/image/222.jpg">
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="thumbnail">
            <img src="bs/image/222.jpg">
        </a>
    </div>
    <div class="col-md-3">
        <a href="" class="thumbnail">
            <img src="bs/image/222.jpg">
        </a>
    </div>
</div>

2、自定义图的说明（.caption）

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="bs/image/222.jpg">
            <div class="caption">
                <h2>标题</h2>
                <p>aaaaaaaaaaaaaaaa</p>
                <button class="btn btn-primary">Ok</button>
                <button class="btn btn-danger">Cancel</button>
            </div>
        </div>
    </div>
    
</div>

六、警告框

1、警告框（.alert）

2、警告框颜色
绿色：.alert-success
青色：.alert-info
黄色：.alert-warn
红色：.alert-danger

3、关闭警告框
data-dismiss="alert"

<div class="alert alert-success">
            <span class="close" data-dismiss="alert">&times;</span>
            <p>linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux </p>
        </div>
        <div class="alert alert-info">
            <span class="close" data-dismiss="alert">&times;</span>
            <p>linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux </p>
        </div>
        <div class="alert alert-warning">
            <span class="close" data-dismiss="alert">&times;</span>
            <p>linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux </p>
        </div>
        <div class="alert alert-danger">
            <span class="close" data-dismiss="alert">&times;</span>
            <p>linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux </p>
        </div>

4、警告框中的链接（.alert-link）
链接字体会突出

<div class="alert alert-success">
    <span class="close" data-dismiss="alert">&times;</span>
    <p><a href="" class="alert-link"> linux linux linux</a> linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux linux </p>
</div>

七、进度条

1、基本进度条（.progress .progress-bar）
进度通过style设置宽度实现

<div class="progress">
    <div class="progress-bar" style="width:50%">50%</div>
</div>

2、进度条颜色
绿色：.progress-bar-success
青色：.progress-bar-info
黄色：.progress-bar-warning
红色：.progress-bar-danger

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:50%">50%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:50%">50%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:50%">50%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%">50%</div>
</div>

3、进度条条纹效果（.progress-bar-striped）

4、进度条动画效果（.progress-bar-striped .active）

5、进度条堆叠效果

<div class="progress">
    <div class="progress-bar progress-bar-striped active" style="width:50%">50%</div>
    <div class="progress-bar progress-bar-success" style="width:30%">30%</div>
    <div class="progress-bar progress-bar-warning" style="width:20%">20%</div>
</div>