BootStrap分页和标签

最新推荐文章于 2022-06-18 19:16:36 发布

花果山总钻风

最新推荐文章于 2022-06-18 19:16:36 发布

阅读量441

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/dszgf5717/article/details/47287297

版权

BootStrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>BootStrap分页，标签</title>
</head>
<body>
    <div class="container">
        <nav>
            <ul class="pagination pagination-lg">
                <li class="disabled"><a href="#">«</a></li>
                <li><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="#">»</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="pagination">
                <li class="disabled"><a href="#">«</a></li>
                <li><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="#">»</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="pagination pagination-sm">
                <li class="disabled"><a href="#">«</a></li>
                <li><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="#">»</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="pager">
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="pager">
                <li class="previous"><a href="#">←向前</a></li>
                <li class="next"><a href="#">向后→</a></li>
            </ul>
        </nav>

        <span class="label label-danger">哈哈</span>
        <span class="label">哈哈</span>
        <span class="label label-success">哈哈</span>
        <span class="label label-info">哈哈</span>
        <span class="label label-warning">哈哈</span>
        <span class="label label-primary">哈哈</span>
        <h3>这是一个主标题<span class="label label-default">描述</span></h3>
    </div>
</body>
</html>

花果山总钻风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap分页和标签

摘自《极客学院》1、效果图：2、html代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> BootStrap分页，标签
复制链接

扫一扫

专栏目录