Bootstrap学习笔记 14 - 分页

最新推荐文章于 2022-04-30 22:10:50 发布

Cynhard85

最新推荐文章于 2022-04-30 22:10:50 发布

阅读量417

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 分页学习笔记

本文链接：https://blog.csdn.net/u011304970/article/details/78666084

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

分页

<ul class="pagination" id="pagination">
    <li id="page1"><a href="#">1</a></li>
    <li id="page2"><a href="#">2</a></li>
    <li id="page3"><a href="#">3</a></li>
</ul>

active 与 disabled 状态

<ul class="pagination" id="pagination">
    <li id="page1"><a href="#">1</a></li>
    <li id="page2" class="active"><a href="#">2</a></li>
    <li id="page3" class="disabled"><a href="#">3</a></li>
</ul>

面包屑

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Private</a></li>
    <li><a href="#">Pictures</a></li>
    <li class="active">Vacation</li> 
</ul>

翻页

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

完整示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>Pagination</title>
        <script>
            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }
            $(function() {
                showHTMLContent('#showPaginationTest', '#paginationTest');
                showHTMLContent('#showBreadcrumbTest', '#breadcrumbTest');
                showHTMLContent('#showPager', '#pager');
                $(":radio[name='styleSize']").click(function() {
                    $("#pagination").attr("class", $(this).val());
                    showHTMLContent('#showPaginationTest', '#paginationTest');
                });
                $("#styleActive").click(function() {
                    if (this.checked) {
                        $("#page2").addClass("active");
                    } else {
                        $("#page2").removeClass("active");
                    }
                    showHTMLContent('#showPaginationTest', '#paginationTest');
                });
                $("#styleDisabled").click(function() {
                    if (this.checked) {
                        $("#page3").addClass("disabled");
                    } else {
                        $("#page3").removeClass("disabled");
                    }
                    showHTMLContent('#showPaginationTest', '#paginationTest');
                });
                $("#addPrevious").click(function() {
                    if (this.checked) {
                        $("#prePage").addClass("previous");
                    } else {
                        $("#prePage").removeClass("previous");
                    }
                    showHTMLContent('#showPager', '#pager');
                });
                $("#addNext").click(function() {
                    if (this.checked) {
                        $("#nextPage").addClass("next");
                    } else {
                        $("#nextPage").removeClass("next");
                    }
                    showHTMLContent('#showPager', '#pager');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>分页样式</h1>
            <form role="form">
                <div class="form-group">
                    <h3>大小</h3>
                    <input type="radio" name="styleSize" value="pagination" checked> pagination <br>
                    <input type="radio" name="styleSize" value="pagination pagination-lg"> pagination pagination-lg <br>
                    <input type="radio" name="styleSize" value="pagination pagination-sm"> pagination pagination-sm <br>
                </div>
                <div class="form-group">
                    <h3>状态</h3>
                    <input type="checkbox" id="styleActive" value="active"> Set page 2 active <br>
                    <input type="checkbox" id="styleDisabled" value="disabled"> Set page 3 disalbed <br>
                    <br>
                </div>
            </form>
            <h2>代码</h2>
            <pre id="showPaginationTest"></pre>
            <h2>样式</h2>
            <div id="paginationTest">
                <ul class="pagination" id="pagination">
                    <li id="page1"><a href="#">1</a></li>
                    <li id="page2"><a href="#">2</a></li>
                    <li id="page3"><a href="#">3</a></li>
                    <li id="page4"><a href="#">4</a></li>
                    <li id="page5"><a href="#">5</a></li>
                </ul>
            </div>

            <br><br>

            <h1>面包屑</h1>
            <h2>代码</h2>
            <pre id="showBreadcrumbTest"></pre>
            <h2>样式</h2>
            <div id="breadcrumbTest">
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Private</a></li>
                    <li><a href="#">Pictures</a></li>
                    <li class="active">Vacation</li> 
                </ul>
            </div>

            <br><br>

            <h1>翻页</h1>
            <form role="form">
                <div class="form-group">
                    <input type="checkbox" id="addPrevious"> Set "previous" class to 上一页 <br>
                    <input type="checkbox" id="addNext"> Set "next" class to 下一页 <br>
                    <br>
                </div>
            </form>
            <h2>代码</h2>
            <pre id="showPager"></pre>
            <h2>样式</h2>
            <div id="pager">
                <ul class="pager">
                    <li id="prePage"><a href="#">上一页</a></li>
                    <li id="nextPage"><a href="#">下一页</a></li>
                </ul>
            </div>

            <br><br>

        </div>
    </body>
</html>

查看运行结果

Cynhard85

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记 14 - 分页

分页<ul class="pagination" id="pagination"> <li id="page1"><a href="#">1</a></li> <li id="page2"><a href="#">2</a></li> <li id="page3"><a href="#">3</a></li></ul>active 与 disabled 状态<ul cla
复制链接

扫一扫

专栏目录