Bootstrap入门（十七）组件11：分页与标签

Bootstrap入门（十七）组件11：分页与标签

 

1.默认样式的分页

2.分页的大小

3.禁用的分页

4.翻页的效果

5.两端对齐的分页

6. 标签的不同样式

7. 标签的大小

 

先引入本地的CSS文件

<link href="css/bootstrap.min.css" rel="stylesheet">

1.默认样式的分页

在浏览网页或者搜索信息的时候，可能会遇到必须浏览几个页面的情况，分页为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

我们需要在一个<nav>标签中新建<ul><li>组合来实现，制定<ul>的class为pagination

（假定当前是第三页,class="active"，没有class="active"的话每个都是看起来一样的）

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

效果：

2.分页的大小

分页也有响应式的大小效果，根据不同的情况使用不同的大小

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

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

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

效果：

3.禁用的分页

只需要想禁用的地方加上disabled属性就可以了

（刚刚也使用了，可以仔细看，在“2”那里，鼠标移动上去会显示禁用的图案）

4.翻页的效果

只需要两个标签，而且是居中的，<ul>的class为pager

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

效果（是在整个浏览器水平居中）

5.两端对齐的分页

只需要修改<li>的class就可以了，而且是两端对齐的

　　　　　<nav>
            <ul class="pager">
                <li class="previous"><a href="#">&larr;向前</a></li>
                <li class="next"><a href="#">向后&rarr;</a></li>
            </ul>
        </nav>

效果

6. 标签的不同样式

在一些网站，我们经常能看到用不同颜色的标签、按钮等来显示当前是怎样的一个状态

有不同种类的标签（用<span>来承载）

　　　　 <span class="label label-default">默认</span>
        <span class="label label-primary">默认</span>
        <span class="label label-success">默认</span>
        <span class="label label-info">默认</span>
        <span class="label label-warning">默认</span>

效果

7. 标签的大小

标签的大小受<hn>的影响

　　　　 <h3>主标题<span class="label label-default">标识</span></h3>
        <h2>主标题<span class="label label-default">标识</span></h2>
        <h1>主标题<span class="label label-default">标识</span></h1>

效果