搜索
首页web前端Bootstrap教程详细了解Bootstrap中的分页组件

分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验。本篇文章给大家详细介绍一下Bootstrap分页。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详细了解Bootstrap中的分页组件

概述

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

☑   带页码的分页导航

☑   带翻页的分页导航

页码分页

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

【默认分页】

平时很多人喜欢用p>ap>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">«</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">»</span>
      </a>
    </li>
  </ul>
</nav>

1.png

相关推荐:《bootstrap教程

【状态】

链接在不同情况下可以定制。可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类

最好将 active 或 disabled 状态的链接(即 3499910bf9dac5ae3c52d5ede7383485 标签)替换为 45a2772a6b6107b401db3c9b82c049c2 标签,或者在向前/向后的箭头处省略3499910bf9dac5ae3c52d5ede7383485 标签,这样就可以让其保持需要的样式而不能被点击

9c11416f1e924a7e2887753e1f09da5d
  051ed3719fd88644fafce0a581612566
    a2d610699b52fc7a32bced2e8401766d
      a4319459fc5db2efcff976c0f71e69cc
        21578ee2d4f7cf2764e549101cf9903a«54bdf357c58b8a65c66d7c19c8e4d114
      54bdf357c58b8a65c66d7c19c8e4d114
    bed06894275b65c1ab86501b08a632eb
    6072cf9f6bd7b20ca2e4e430b3e487ad45a2772a6b6107b401db3c9b82c049c2154bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81235db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81245db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81255db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6
      bc9408f9e2f2b6fac77da89b90aaaa1d
        21578ee2d4f7cf2764e549101cf9903a»54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
44f9630a3d507ae7532760da37622b0f

2.png

【尺寸】

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

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

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

9c11416f1e924a7e2887753e1f09da5d
  387cf4b7a00f5e7acb87da8861f77a95
    25edfb22a4f469ecb59f1190150159c6
      cfece38725eb231dad40d98fbfadc8f4
        21578ee2d4f7cf2764e549101cf9903a«54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81215db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81235db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81245db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81255db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6
      bc9408f9e2f2b6fac77da89b90aaaa1d
        21578ee2d4f7cf2764e549101cf9903a»54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
44f9630a3d507ae7532760da37622b0f

9c11416f1e924a7e2887753e1f09da5d
  051ed3719fd88644fafce0a581612566
    25edfb22a4f469ecb59f1190150159c6
      cfece38725eb231dad40d98fbfadc8f4
        21578ee2d4f7cf2764e549101cf9903a«54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81215db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81235db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81245db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81255db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6
      bc9408f9e2f2b6fac77da89b90aaaa1d
        21578ee2d4f7cf2764e549101cf9903a»54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
44f9630a3d507ae7532760da37622b0f

9c11416f1e924a7e2887753e1f09da5d
  06ebeb7ff7f50ba36987f35e1865d4b4
    25edfb22a4f469ecb59f1190150159c6
      cfece38725eb231dad40d98fbfadc8f4
        21578ee2d4f7cf2764e549101cf9903a«54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81215db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81235db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81245db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a81255db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6
      bc9408f9e2f2b6fac77da89b90aaaa1d
        21578ee2d4f7cf2764e549101cf9903a»54bdf357c58b8a65c66d7c19c8e4d114
      5db79b134e9f6b82c0b36e0489ee08ed
    bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
44f9630a3d507ae7532760da37622b0f

3.png

翻页

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

【默认用法】

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

6a8a9ab7d2b361f87c0030eb6303b3d8
   25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812&laquo;上一页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
   25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812下一页&raquo;5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

4.png

【对齐设置】

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

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

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

具体使用的时候,只需要在li标签上添加对应类名即可

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

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
6a8a9ab7d2b361f87c0030eb6303b3d8
   1145dc31315778de8f3bb24d9756d28df1b3ba8846c179e65eb68da95b01a812&larr;上一页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
   6e6b85f2c07fbd625b8067b496dcb355f1b3ba8846c179e65eb68da95b01a812下一页&rarr;5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

5.png

【状态设置】

和带页码分页导航一样,如果在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;
}
6a8a9ab7d2b361f87c0030eb6303b3d8
  a2d610699b52fc7a32bced2e8401766d45a2772a6b6107b401db3c9b82c049c2&laquo;上一页54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812下一页&raquo;5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

6.png

更多编程相关知识,请访问:编程视频!!

以上是详细了解Bootstrap中的分页组件的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:cnblogs。如有侵权,请联系admin@php.cn删除
Bootstrap:简化响应式Web开发Bootstrap:简化响应式Web开发May 09, 2025 am 12:13 AM

Bootstrap简化开发流程主要通过其栅格系统、预定义组件和JavaScript插件。1.栅格系统允许灵活布局,2.预定义组件如按钮和导航栏简化样式设计,3.JavaScript插件增强交互功能,提升开发效率。

Bootstrap:响应式Web设计的关键Bootstrap:响应式Web设计的关键May 08, 2025 am 12:24 AM

Bootstrap是由Twitter开发的开源前端框架,提供了丰富的CSS和JavaScript组件,简化了响应式网站的构建。1)其网格系统基于12列布局,通过类名控制元素在不同屏幕尺寸下的显示。2)组件库包括按钮、导航栏等,易于定制和使用。3)工作原理依赖于CSS和JavaScript文件,需注意处理依赖关系和样式冲突。4)使用示例展示了基本和高级用法,强调了自定义功能的重要性。5)常见错误包括网格系统计算错误和样式覆盖,需使用开发者工具调试。6)性能优化建议只引入必要组件,使用预处理器定制样

Bootstrap:一个强大的Web设计框架Bootstrap:一个强大的Web设计框架May 07, 2025 am 12:05 AM

Bootstrap是一个开源的前端框架,由Twitter团队开发,旨在简化和加速网页开发过程。1.Bootstrap基于HTML、CSS和JavaScript,提供了丰富的组件和工具,用于创建现代化的用户界面。2.它的核心在于响应式设计,通过预定义的类和组件实现各种布局和样式。3.Bootstrap提供了预定义的UI组件,如导航栏、按钮、表单等,易于使用和调整。4.使用示例包括创建简单的导航栏和高级的可折叠侧边栏。5.常见错误包括版本冲突、CSS覆盖和JavaScript错误,可通过版本管理工具

Bootstrap在React中的力量:详细的外观Bootstrap在React中的力量:详细的外观May 06, 2025 am 12:06 AM

Bootstrap在React中可以通过两种方式集成:1)使用Bootstrap的CSS和JavaScript文件;2)使用React-Bootstrap库。React-Bootstrap提供了封装好的React组件,使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap组件:逐步教程在React中使用Bootstrap组件:逐步教程May 05, 2025 am 12:09 AM

在React项目中使用Bootstrap组件可以通过两种方式:1)使用原始Bootstrap的CSS和JavaScript;2)使用专门为React设计的库如react-bootstrap或reactstrap。1)通过npm安装Bootstrap并在入口文件中引入其CSS文件,然后在React组件中使用Bootstrap类名。2)安装react-bootstrap或reactstrap后,直接使用其提供的React组件。使用这些方法可以快速构建响应式UI,但需注意样式加载、JavaScript

简单英语的引导程序:简化网络开发简单英语的引导程序:简化网络开发May 04, 2025 am 12:02 AM

Bootstrap是开源的前端框架,简化网页开发。1.它基于HTML、CSS、JavaScript,提供预定义样式和组件。2.使用预定义类和JavaScript插件,实现响应式布局和交互功能。3.基本用法是引入CSS和JavaScript文件,使用类创建导航栏等。4.高级用法包括自定义复杂布局。5.调试时检查类名和文件引入,使用开发者工具。6.优化建议是只引入必要文件,使用CDN,自定义时用LESS或Sass。

引导和反应:创建响应式Web应用程序引导和反应:创建响应式Web应用程序May 03, 2025 am 12:13 AM

如何利用Bootstrap和React打造响应式Web应用?通过结合Bootstrap的CSS框架和React的组件化架构,可以创建现代、灵活且易于维护的Web应用。具体步骤包括:1)导入Bootstrap的CSS文件并使用其类样式化React组件;2)利用React的组件化管理状态和逻辑;3)按需加载Bootstrap样式以优化性能;4)使用React的Hooks和Bootstrap的JavaScript组件创建动态界面。

Bootstrap:前端开发变得更加容易Bootstrap:前端开发变得更加容易May 02, 2025 am 12:10 AM

Bootstrap是一种开源的前端框架,帮助开发者快速构建响应式网站。1)它提供了预定义的样式和组件,如网格系统和导航栏。2)通过CSS和JavaScript文件实现样式和动态交互。3)基本用法是引入文件并使用类名构建页面。4)高级用法包括通过Sass自定义样式。5)常见问题包括样式冲突和JavaScript组件问题,可通过开发者工具和模块化管理解决。6)性能优化建议选择性引入模块和合理使用网格系统。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具