【19】Bootstrap — 分页

最新推荐文章于 2018-12-20 22:52:16 发布
最新推荐文章于 2018-12-20 22:52:16 发布
阅读量243 收藏
点赞数
文章标签： bootstrap 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77864021
版权

默认分页

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <nav>
            <ul class="pagination">
                <li><a href="#">&laquo;</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="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </nav>
    </body>
</html>

bootstrap默认分页

禁用和激活状态

  • 分页样式1
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <nav>
            <ul class="pagination">
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#">»</a></li>
            </ul>
        </nav>
    </body>
</html>

禁用和激活状态

  • 分页样式2
<nav>
  <ul class="pager">
        <li class="previous disabled"><a href="#">&larr; Older</a></li>
        <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
</nav>

分页禁用和激活样式2

控制分页尺寸

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="bs-example">
            <nav>
                <ul class="pagination pagination-lg">
                    <li>
                        <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="#">5</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="pagination">
                    <li>
                        <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="#">5</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="pagination pagination-sm">
                    <li>
                        <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="#">5</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

分页尺寸大小

翻页

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <nav>
            <ul class="pager">
                <li><a href="#">Previous</a></li>
                <li><a href="#">Next</a></li>
            </ul>
        </nav>
    </body>
</html>

翻页

对齐链接

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <nav>
            <ul class="pager">
                <li class="previous"><a href="#">&larr; Older</a></li>
                <li class="next"><a href="#">Newer &rarr;</a></li>
            </ul>
        </nav>
    </body>
</html>

对齐链接

有心博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap--CSS组件--分页(pagination)和翻页(pager)
王欢的博客
12-16 6326
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。//源码 .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination >
bootstrap分页css样式,修改bootstrap-table中的分页样式
weixin_27014595的博客
08-03 1827
使用bootstrap-table时，使用$("")选择器没办法选中下方的分页button按钮，可能跟它是动态生成的有关吧。最终找到与之对应的js(bootstrap-table.js中搜索了data-toggle)，将class类更换成自己定义的一个class，完成了期望的效果var pageNumber = [Utils.sprintf('', this.options.paginationV...
BootStrap-CSS样式_布局组件_分页翻页
LoveyourselfJiuhao的博客
12-20 2164
Bootstrap 支持的分页特性 pagination样式：添加该 class 来在页面上显示分页 active样式：默认选中，指示当前的页面 disbaled样式：定义不可点击的链接 Pager样式：添加该 class 来获得翻页链接 previous样式： 把链接向左对齐 next样式： 把链接向右对齐。 pull-left样式：左浮动 pagination-lg样式：外观大...
ThinkPhp5使用bootstrap样式分页
读万卷书，行万里路
12-31 5557
1.查看分页的配置 在application/config.php文件中最后。 //分页配置 'paginate' => [ 'type' => 'bootstrap', 'var_page' => 'page', 'list_rows' => 15, ], 2.下载：https://v3.bootcss.com/getti
bootstrap实现分页（实例）
热门推荐
红岸基地
03-20 10万+
写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，...
bootstrap table配置参数例子
08-31
19. `queryParamsType`: 参数格式，如 `"limit"` 发送标准的 RESTful 类型的参数请求。 20. `toolbar`: 设置工具栏的 ID 或 class。 21. `columns`: 定义表格的列结构，包括标题、数据字段等。 22. `silent`: ...
bootstrap Table的一些小操作
08-28
19. `showExport` - 是否显示导出Excel按钮，允许用户将表格数据导出为Excel文件。 20. `showFooter` - 是否显示统计页脚，可以用来显示列的总计或平均值等统计信息。 21. `searchAlign` - 搜索框的对齐方式，同样...
03_Bootstrap 3 高级教程part2.rar
09-13
5. **Bootstrap分页与翻页** (15 Bootstrap分页与翻页使用方式.mp4): 分页组件用于处理大量数据的分页显示，Bootstrap 3 提供了清晰易用的分页按钮和链接，可以轻松实现前后翻页和跳转至指定页的功能。 6. **...
jsp+servlet+javabean+jdbc+mysql实现增删改查和分页功能
06-13
* 分页查询数据 4.准备环境 5.Servlet + JSP +JavaBean + JDBC（DBUtils）+ mysql 6.数据库 create database day19; use day19; create table t_customer( id varchar(40) primary key, username varchar(20)...
covid-19案例概述
02-16
6. **响应式设计**：考虑到项目可能在不同设备上展示，开发者可能会使用CSS媒体查询和JavaScript库如Bootstrap或Flexbox来确保页面在不同屏幕尺寸上的适配性。 7. **前端框架**：为了提高开发效率和代码组织，...
bootstrap实现分页
风一样的男子
08-20 8067
1.官网下载bootstrap,bootstrap-table https://v3.bootcss.com/ http://bootstrap-table.wenzhixin.net.cn/ 2.引入css和js 此处引用的是themeleaf写法 &lt;link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet...
thinkphp 引入页首页尾的写法
welcome to daijiguo's blog
06-25 416
header.html和foot.html放在Home/View/Public下面，Public文件夹是自己建的
thinkphp整合bootstrap分页
qq_22783765的博客
02-02 251
编辑Thinkphp/library/page.class.php文件，在分页的的html标签明，外包一个li元素，如//上一页$up_row = $this->nowPage - 1;$up_page = $up_row > 0 ? '<a class="prev" aria-label="Previous" href="' . $this->url($up_row) . '">' . $thi
打造简单实用的Thinkphp分页样式(Bootstrap版本)
weixin_34306676的博客
07-29 136
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单的数字，之间的空隙比较小，不大容易点，还有那个“前5页”和“后5页”显得有点多余，因为点击当前显示第一页的“上一页”按钮会自然出来前5页。3.1的分页效果是这个样子滴： 针对以上种种不太理想的情况，又加上最近学习了ThinkPHP5,在ThinkPHP5中提供了对BootStrap分页样式的完美支...
javascript 将 ThinkPHP 分页自动转换为 bootstrap 分页
____
09-27 3013
#写的一个通用的，将thinkphp生成的分页HTML，自动转换为 bootstrap 分页： /** * @author default7#zbphp.com * @description 将ThinkPHP的分页转换为 bootstrap分页 * @param selector */function initPagination(selector) { selector = selec
thinkphp3.2+bootstrap-inputfile多文件上传
wei365456yin的博客
01-20 2424
1.下载bootstrap-inputfile下载地址：https://github.com/kartik-v/bootstrap-fileinput 2.上传实例地址：http://plugins.krajee.com/file-input-ajax-demo/1 现在我们开始使用插件 (1)首先引入文件
创新药系列阿尔兹海默病千万患者迎来新疗法.pdf
07-18
医疗行业研究报告
2024全球数字营销趋势报告25页.pdf
最新发布
07-18
医疗行业研究报告
计算机控制专业技术.doc
07-18
计算机
Bootstrap分页
04-24
Bootstrap分页是一种用于网页内容分页显示的前端框架。它可以帮助开发者快速创建并美化分页组件，提供了丰富的样式和交互效果。 在Bootstrap中，分页组件通常由以下几个部分组成： 1. 分页容器（pagination）：用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值