Bootstrap5 分页

于 2024-09-02 12:06:31 发布
阅读量146 收藏 3
点赞数 2
文章标签： bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141815338
版权

https://getbootstrap.com/docs/5.3/components/pagination/

基础的分页

要创建一个基础的分页，可以在<ul>元素上添加.pagination类，然后在<li>元素上添加.page-item类，<li>元素的<a>标签上添加.page-link类。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

活动状态的分页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

禁用状态的分页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

分页大小

https://getbootstrap.com/docs/5.3/components/pagination/#sizing

分页块页可以调整为更大或更小的尺寸，较大的块添加类.pagination-lg，较小的块添加类.pagination-sm。

更大的尺寸

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination pagination-lg">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

更小的尺寸

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

分页对齐

https://getbootstrap.com/docs/5.3/components/pagination/#alignment

居中对齐

默认情况下，分页水平左对齐。要将其与页面中心对齐，将类.justify-content-center添加到.pagination。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

右对齐

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="pagination justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

听海边涛声
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap的表单验证 vue_Bootstrap 表单验证formValidation 的实例详解
weixin_36285826的博客
12-24 1668
这篇文章主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下Bootstrap教程动态添加input并动态添加新验证方式！init状态：点击“+”后：验证后：知识点：1 先去官网下载：formvalidation.io/2 导入文件，注意事项我就不多说了在远程验证那篇我已经讲过。3 用到的关键字：addField、removeField、d...
基于前端验证框架bootstrapValidator的表单验证
qq_35907502的博客
08-26 1416
 前两天学习到了前端验证框架bootstrapValidator，因此用它写了个简单的表单验证，没有涉及后台。其中表单用到了bootstrap框架，验证部分用到了bootstrapValidator框架。 效果图如下： 什么都不填写，直接提交后如下，然后按钮不可点击： 错误填写效果：按钮不可点击  代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;...
Bootstrap-04-常见样式——表单控件(单选框和复选框)
Void的博客
03-01 2997
原生单选框 name 判断是否同组 <input type="radio" name="hobby" id="">男 <input type="radio" name="hobby" id="">女 bootstrap 单选框 bootstrap单选框 垂直显示:.radio 水平显示:.radio-inline <!-- 垂直 --> <div class="row"> <div class="col-md-3"
Bootstrap 表单验证formValidation 之表单动态验证
热门推荐
久如云漂泊
11-22 1万+
动态添加input并动态添加新验证方式！ 知识点： 1 先去官网下载：http://formvalidation.io/ 2 导入文件，注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的关键字：addField、removeField、different 4注意一点就是官网里的例子他们的name是不一样的。我这里比较偷懒。且项目ajax的时候不是用的form表单提交，而是自己并接成json提交，所以x，y
零基础Bootstrap入门教程(9)--使用表单控件
程序员大阳
02-21 1462
本文目录1. 概述2. 基本输入控件3. 调整表单控件的大小4. 表单控件的特殊用法4.1 单选框用法4.2 复选框用法5. 小结 1. 概述 表单控件用来获取表单中输入的信息，HTML5提供了各种不同的表单控件，而在Bootstrap中这些控件的样式得到了进一步的加强。 2. 基本输入控件 在Bootstrap中，只需为基本输入控件添加.form-control类，即可将控件的样式设置为Bootstrap提供的预设样式。接下来我们用一个实例来展示下常用的输入控件。 <!-- 基本输入控件 -
Bootstrap 表单验证formValidation 之比较两个input值的大小
久如云漂泊
06-02 1万+
老规矩先上效果图 A两个input必须满足大于10； B当输入其中一个input时，且满足A条件，如果另一个input为空，这个文本框通过； C最小时长<最大时长；html 片段 <td style="min-width:325px;"> <div class="inp
Bootstrap之Form表单验证神器： BootstrapValidator
weixin_38047955的博客
05-16 3844
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。bootstrapvalidator源码：https://github.com/nghuuphuoc/bootst...
bootstrap 表单 label 和 input 实现左标签右输入布局
www.iokay.cn
03-18 1万+
首先直接贴效果图要求就是label和input的输入框 这样排列，下面是代码 加注释                &lt;%--首先表单垂直布局 form-horizontal --%&gt; &lt;div class="form-horizontal"&gt; &lt;fieldset&gt; ...
添加Bootstrap表单验证之后无法提交表单
time512的博客
10-26 1706
问题：一个登录页面，使用BootstrapValidator表单验证之后，输入正确的格式点击登录，发现表单没有提交，并且登录按钮变为不可选，只有输入一次错的格式之后再输入正确的格式才能登录成功。 代码如下： &lt;button type="submit" id="subLogin" class="btn text-muted text-center btn-danger" &gt;登 录...
Bootstrap 5-表单-单选按钮/复选框
m0_73839298的博客
10-13 1131
作用:用于定义存放表单中的复选框/单选按钮的容器。作用:用于定义复选框/单选按钮添加标签。作用:用于定义复选框/单选按钮的控件。
Bootstrap所支持的表单控件实例详解
11-22
在本文中，我们将深入探讨Bootstrap如何支持和美化常见的HTML表单控件，包括输入框(input)、文本框(textarea)、复选框(checkbox)和单选按钮(radio)。 1. 输入框（Input） 输入框是最基本的表单元素，允许用户输入...
Bootstrap CSS布局之表单
11-26
- 虽然Bootstrap提供了基本的表单样式，但它并不包含完整的表单验证功能。开发者通常需要结合JavaScript库（如jQuery Validate）或者利用HTML5的内置验证特性来实现客户端验证。 在实际开发中，根据项目需求和设计...
完全深入学习Bootstrap表单
12-28
表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 一、基础表单 <form role=form> <div class=form-group> <label for=exampleInputEmail1>邮箱：</label> <...
全面解析Bootstrap表单样式的使用
01-19
本文主要给大家介绍了bootstrap表单样式的使用知识，非常不错，一起看看吧！ 表单 <form role=form> <div class=form-group> <label for=exampleInputEmail1>邮箱：</label> <input type=email class=form...
Bootstrap表单组件教程详解
11-22
表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本： LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset、legend、label标签进行了...
Window Performance API
Bruce__taotao的博客
08-28 1575
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue ref和reactive区别
灰海
08-25 6360
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 658
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue 通过事件的形式调用全局组件
最新发布
liux6687的博客
08-29 1570
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值