两款bootstrap分页样式美化特效插件

两款bootstrap分页样式美化特效插件

这是两款bootstrap分页样式美化特效。该bootstrap分页样式美化特效在元素bootstrap分页样式的基础上,通过简单的CSS代码,将对它们进行效果美化。

使用方法
在页面中引入bootstrap.min.css文件。

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

HTML结构
第一款bootstrap分页样式的HTML代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="container">
    <div class="row pad-15">
        <div class="col-md-12">
            <nav class="pagination-outer" aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item active"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

文件信息:

    5

    发表评论