Bootstrap分页

前面的话

　　分页导航几乎在每个网站都可见，好的分页能给用户带来好的用户体验。本文将详细介绍Bootstrap分页

 

概述

　　在Bootstrap框架中提供了两种分页导航：

 　　  ☑   带页码的分页导航

　　   ☑   带翻页的分页导航

 

页码分页

　　带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式

【默认分页】

　　平时很多人喜欢用

div>a
和 
div>span
结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是 
ul>li>a
这样的结构，在ul标签上加入pagination方法： 

<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/page/p1.html" frameborder="0" width="320" height="240">

【状态】

　　链接在不同情况下可以定制。可以给不能点击的链接添加 

.disabled
 类、给当前页添加  
.active
 类

　　最好将 active 或 disabled 状态的链接（即 

<a>
 标签）替换为  
<span>
 标签，或者在向前/向后的箭头处省略 
<a>
 标签，这样就可以让其保持需要的样式而不能被点击 

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled">
<span aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</span>
</li>
<li class="active"><span>1</span></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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/page/p2.html" frameborder="0" width="320" height="240">

【尺寸】

　　在Bootstrap框架中，可以通过两种不同的情况来设置其大小，类似于按钮一样：

　　1、通过“pagination-lg”让分页导航变大

　　2、通过“pagination-sm”让分页导航变小

<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

style="width: 100%; height: 275px;" src="https://demo.xiaohuochai.site/bootstrap/page/p3.html" frameborder="0" width="320" height="240">

 

翻页

　　Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮

【默认用法】

　　在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入

pager
类 

<ul class="pager">
<li><a href="#">&laquo;上一页</a></li>
<li><a href="#">下一页&raquo;</a></li>
</ul>

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p4.html" frameborder="0" width="320" height="240">

【对齐设置】

　　默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

　　☑   previous：让“上一步”按钮居左

　　☑   next：让“下一步”按钮居右

　　具体使用的时候，只需要在

li
标签上添加对应类名即可

　　实现原理很简单，就是一个进行了左浮动，一个进行了右浮动

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
<ul class="pager">
<li class="previous"><a href="#">&larr;上一页</a></li>
<li class="next"><a href="#">下一页&rarr;</a></li>
</ul>

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p5.html" frameborder="0" width="320" height="240">

【状态设置】

　　和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。可以通过js来处理，或将

a
标签换成 
span
标签 

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
color: #999;
cursor: not-allowed;
background-color: #fff;
}
<ul class="pager">
<li class="disabled"><span>&laquo;上一页</span></li>
<li><a href="#">下一页&raquo;</a></li>
</ul>

style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/page/p6.html" frameborder="0" width="320" height="240">

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368805.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

php 查询and or,php – SQL查询多个AND和OR不起作用

php 查询and or,php – SQL查询多个AND和OR不起作用

我有一个包含由双管分隔的值的单元格.我试图用以下内容搜索这个单元格的内容,(其中10是要搜索的数字)&#xff1f;,10&#xff05;,&#xff1f;&#xff05;和10我的查询似乎只返回10.没有其他变化.有人可以告诉我为什么它不起作用&#xff1f;提前谢谢了. (您在下面看到的SQL…
阅读更多...
[codevs1213]解的个数 二分 + exgcd

[codevs1213]解的个数 二分 + exgcd

题目← 扩欧&#xff0c;求不定方程解的个数 我们已经知道通解x0 x - (b/gcd(a,b))t&#xff0c;那只要知道有多少个t使x在题目给定的范围中就行了 但还有y 怎么办&#xff1f;求交集&#xff01; 分别二分确定在x取值范围内合法的t的范围和在y取值范围内合法的t的范围 然后交…
阅读更多...
爬取饿了么商铺信息

爬取饿了么商铺信息

分析&#xff1a; 当我们访问https://www.ele.me/home/时&#xff0c;看看我们得到了什么 1.png我们发现所有的城市名称和他的经纬度&#xff0c;还有一个风流的男子 然后随机输入一些东西看看&#xff0c;进入某个地区看一看 在新的界面里我们看到了这样一条url: https://main…
阅读更多...
html中的锚点

html中的锚点

一、页面内跳转的锚点设置 页面内的跳转需要两步&#xff1a; 方法一&#xff1a; ①&#xff1a;设置一个锚点链接<a href"#miao">去找喵星人</a>&#xff1b;&#xff08;注意&#xff1a;href属性的属性值最前面要加#&#xff09; ②&#xff1a;在页…
阅读更多...
linux基本命令du,Linux常用操作命令汇总

linux基本命令du,Linux常用操作命令汇总

你还在为不知道Linux常用操作命令汇总而不知所措么?下面来是学习啦小编为大家收集的Linux常用操作命令汇总&#xff0c;欢迎大家阅读&#xff1a;Linux常用操作命令汇总1.ls 命令ls以默认方式显示当前目录文件列表服务器教程ls -a显示所有文件包括隐藏文件ls -l显示文件属性&a…
阅读更多...
Maven部署到Nexus

Maven部署到Nexus

1.概述 在上一篇文章中 &#xff0c;我讨论了Maven项目如何在本地安装尚未部署在Maven Central&#xff08;或任何其他大型且公共托管的存储库&#xff09;上的第三方jar。 该解决方案仅适用于小型项目&#xff0c;在这些项目中安装&#xff0c;运行和维护完整的Nexus服务器可能…
阅读更多...
后处理效果栈

后处理效果栈

Unity官方的Github实现&#xff1a;Post Processing Stack Post-processing is the process of applying full-screen filters and effects to a camera’s image buffer before it is displayed to screen. It can drastically improve the visuals of your product with litt…
阅读更多...
【Java IO流】浅谈io，bio，nio，aio

【Java IO流】浅谈io，bio，nio，aio

本文转载自&#xff1a;http://www.cnblogs.com/doit8791/p/4951591.html1、同步异步、阻塞非阻塞概念 同步和异步是针对应用程序和内核的交互而言的。 阻塞和非阻塞是针对于进程在访问数据的时候&#xff0c;根据IO操作的就绪状态来采取的不同方式&#xff0c;说白了是一种读…
阅读更多...
linux 安装tcl命令,TCL/TK Linux下安装 | 勤奋的小青蛙

linux 安装tcl命令,TCL/TK Linux下安装 | 勤奋的小青蛙

原创文章&#xff0c;转载请注明&#xff1a; 转载自勤奋的小青蛙本文链接地址: TCL/TK Linux下安装在Linux下安装TCL/TK&#xff0c;可以有编译源代码的方式安装&#xff0c;也可以有直接通过二进制压缩包进行解压缩安装&#xff0c;本文采用比较快捷的方式&#xff0c;用二进…
阅读更多...
安全性中的Spring AOP –通过方面控制UI组件的创建

安全性中的Spring AOP –通过方面控制UI组件的创建

以下文章将显示在我参与的一个项目中&#xff0c;我们如何使用Spring的AOP来介绍一些与安全性相关的功能。 这样的概念是为了使用户能够看到一些UI组件&#xff0c;他需要具有一定级别的安全特权。 如果不满足该要求&#xff0c;则不会显示UIComponent。 让我们看一下项目结构&…
阅读更多...
模拟生物自然进化的基因遗传算法

模拟生物自然进化的基因遗传算法

基因遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;是一种通过模拟生物进化过程来寻找最优解的优化算法。它是一种常见的启发式搜索算法&#xff0c;常用于优化、搜索和机器学习等领域。 生物基因遗传 生物的基因遗传是指父母通过基因传递给子代的过程。基因…
阅读更多...
折半查找算法及分析（手工过程）

折半查找算法及分析（手工过程）

折半查找的手工过程&#xff1a; 1.我需要查找的数是10&#xff1b; 给定&#xff1a;1 5 8 10 13 14 17 22 25 27 29 31 35 37 40 42 45 47 50 51 58 下标&#xff1a;0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1…
阅读更多...
Bootstrap下拉菜单

Bootstrap下拉菜单

前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项&#xff0c;Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单 使用方法 在使用Bootstrap框…
阅读更多...
linux进程socket通信,linux进程间通信--socket套接字 实例代码

linux进程socket通信,linux进程间通信--socket套接字 实例代码

可以实现通信的代码实现&#xff0c;拿去用&#xff01;原文来自&#xff1a;http://blog.chinaunix.net/uid-26790551-id-3171897.html服务器端&#xff1a;#include #include #include #include #include #include #define UNIX_DOMAIN "/tmp/UNIX.domain"int main…
阅读更多...
Maven发布到Nexus

Maven发布到Nexus

1.概述 在本系列的上一篇文章中&#xff0c;我们将Maven设置为Nexus的部署过程 。 在本文中&#xff0c;我们将在项目的pom以及Jenkins作业中使用Maven配置发布过程 。 2. 为了使Maven能够发布到Nexus Repository Server&#xff0c;我们需要通过distributionManagement元素定…
阅读更多...
mysql随机查询

mysql随机查询

select * from table as t1 join (select round(rand() * ((select max(id) from table)-(select min(id) from table))(select min(id) from table)) as id) as t2 where t1.id > t2.id order by t1.id limit 1;;转载于:https://www.cnblogs.com/upup2015/p/7782525.htm…
阅读更多...
CSS学习笔记11 CSS背景

CSS学习笔记11 CSS背景

background-color&#xff1a;背景色 前面我们经常用background-color这个属性来设置元素的背景色&#xff0c;例如下面这条css可将段落的背景色设置为灰色 p {background-color: gray;} 如果想要元素的背景色向外延伸&#xff0c;则只需增加内边距即可 background-color可以为…
阅读更多...
linux 文件的目录,Linux文件及目录管理

linux 文件的目录,Linux文件及目录管理

第七列&#xff1a;文件或目录名。名以 . 开头表示为隐藏文件或隐藏目录2.2 修改文件目录或者权限改变文件所属用户组&#xff1a;chgrpchgrp [-R] 用户组 文件或目录 ...[-R]&#xff1a;递归修改该目录下所有文件和目录&#xff1b;改变文件所有者&#xff1a;chownchown [-R…
阅读更多...
Hbuilder MUI 下拉选择与时间选择器

Hbuilder MUI 下拉选择与时间选择器

一、 Hbuilder 下拉选择 <link rel"stylesheet" href"../../../assets/mui/css/mui.picker.min.css" /><script type"text/javascript" src"../../../assets/mui/js/mui.picker.min.js"></script> //引用mui.picker…
阅读更多...
套接字（linux相关）

套接字（linux相关）

前言&#xff1a;略 一、前因 一切从tcp、udp开始。 众所周知&#xff0c;网络模型一般有两种模型&#xff0c;一种为OSI概念模型&#xff08;七层&#xff09;&#xff0c;另一种为TCP/IP网络模型&#xff08;四层&#xff09;。 TCP/IP应用层对应OSI的应用层、显示层、会话层…
阅读更多...
最新文章

Copyright @ 2022~2023