Bootstrap 组件-分页

最新推荐文章于 2025-06-28 12:36:45 发布
转载 最新推荐文章于 2025-06-28 12:36:45 发布 · 532 阅读 · 0

本文介绍如何使用Bootstrap实现分页功能，包括基本分页样式、禁用和激活状态、不同尺寸的分页按钮、翻页链接及两端对齐样式等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1 : 基本分页    
2 : 禁用和激活状态    
3 : 尺寸    
4 : 翻页    
5 : 两端对齐    
6 : 翻页禁用状态    

  • 基本分页



    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <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>
  • 禁用和激活状态

    最后一页不可点
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <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 class="disabled">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
  • 尺寸


    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <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>
  <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>
  <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>
  • 翻页


    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>
  • 两端对齐


    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
  • 翻页禁用状态


    <script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>

308、bootstrap 之 分页 组件
l0510402015的博客
02-27 391
1、如果页面内容有多个，可以将页面分成多页进行显示 2、可以给加入disabled类 和active类来禁止链接属性，比如说在第一时，《这个就不能有链接属性了。 3、类pagination-sm、pagination、pagination-lg 可以用来设置分页字符大小，添加在列表标签<ul>中 注意：使用pagination-sm、pagination-lg类时，也...
BootStrap入门到实战：BootStrap组件（三）- 分页、标签、徽章、巨幕、页头与缩略图
林林一928的博客
06-09 1419
一、 分页1. 默认分页、2. 尺寸、3. 翻页、4. 对齐链接、5. 可选的禁用状态。二、 标签。 三、 徽章。* 扩- 标签与徽章的使用区别 。四、巨幕。 五、页头与缩略图。 1. 页头。 2. 缩略图。2.1 默认样式的缩略图。 2.2 自定义内容。 2.3 缩略图的用途。 2.4 缩略图在日常开发中的作用
bootstrap分页组件 bootstrap-paginator-master
09-07
bootstrap分页组件,bootstrap-paginator,可以轻松实现bootstrap风格的分页效果,欢迎下载
Bootstrap分页组件实战应用与项目整合
最新发布
weixin_31620365的博客
06-28 875
在网页设计中，分页组件是提高用户体验的一个重要元素，它允许用户通过页码或导航按钮来浏览不同的数据页面。Bootstrap分页组件作为Bootstrap框架的一部分，提供了便捷的分页功能，使开发者能够快速地集成分页功能到他们的项目中。Bootstrap分页组件具有以下基本特点：简洁直观的界面：通过简洁的设计，确保用户可以快速理解如何导航页面。响应式设计：适应不同设备屏幕尺寸，确保在手机、平板和桌面显示器上均能提供良好的浏览体验。易用性。
Bootstrap分页组件的设计
04-12
基于boostrap前端开发框架，简单的设计了前端分页控件
Bootstrap3分页组件rPage.zip
07-19
rPage 是一个易于使用的插件，它能使 BootStrap3 的分页更加灵敏。rPage 自动收缩分页组件，并且当空间不够时删除一些组件。 标签：rPage
bootstrap-paginator 分页组件
11-18
bootstrap-paginator是一款集美观和好用于一身的一个分页组件。 里面有demo并加以说明
bootstrap-table后端分页功能完整实例
10-15
Bootstrap Table 是一个基于 Bootstrap 框架的前端组件，用于创建功能丰富的表格。在实际的 Web 开发中，为了提高性能和减少服务器负担，我们通常会采用后端分页技术，即在服务器端处理数据分页，而不是一次性加载...
bootstrap3-editable
10-31
3. **bootstrapTable插件**：bootstrapTable是一款基于Bootstrap的表格插件，它扩展了Bootstrap的表格功能，提供了分页、排序、过滤、搜索、列选择等多种功能，同时支持JSON数据源，使得在网页上显示动态数据变得...
bootstrap-table-fixed-columns.zip
01-14
Bootstrap Table 是一个基于 Bootstrap 框架的开源前端组件，用于展示数据并具有丰富的功能，如排序、过滤、分页等。在 FastAdmin 框架中，Bootstrap Table 被广泛用于后台管理界面的数据展示，提供高效且美观的数据...
bootstrap table-js.rar
05-24
Bootstrap Table是一款基于Bootstrap框架的动态数据表格插件，它提供了丰富的功能，如排序、过滤、分页、自定义列等，极大地增强了网页中表格的交互性和用户体验。在使用"bootstrap table-js.rar"这个压缩包时，你...
bootstrap4-editable.7z
08-02
BootstrapTable是一款基于Bootstrap框架的可扩展的表格插件，它具有丰富的功能，如排序、筛选、分页等。而“bootstrap4-editable.7z”这个压缩包正是为增强BootstrapTable的功能而设计的，特别是针对行内编辑的需求...
Bootstrap分页
05-27
package com.org.controller; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONException; import org.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.org.BaseController; import com.org.model.User; import com.org.service.IUserService; /** * @Author:liangjilong * @Date:2014-2-25 * @Version:1.0 * @Description: */ @Controller public class UserController extends BaseController { @Resource private IUserService userService; /*** * 方法一请求使用String * * 请求@RequestMapping匹配的URL request * * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList1.do") public String userList1(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return "userList"; } /** * 方法二请求使用ModelAndView * * @param request * @param response * @return * @throws Exception */ @RequestMapping(value = "/userList2.do") public ModelAndView userList2(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); List<User> lists = userService.getUserList(); if (lists != null) { request.setAttribute("userList", lists); } // userList指跳转到userList.jsp页面 return new ModelAndView("userList"); } /*** * 自定义标签实现分页 * * @param request * @param response * @param @ResponseBody ajax响应 * @param method={RequestMethod.POST,RequestMethod.GET}表单请求 * @param consumes="application/json; charset=UTF-8"请求格式是json * @return * @throws UnsupportedEncodingException * @throws Exception */ @RequestMapping(value = "/pageList.do" ,method={RequestMethod.POST,RequestMethod.GET}) public @ResponseBody ModelAndView getUserInfo(Model model, @RequestParam(required = false) String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize) { try { String userName = new String(username.getBytes("ISO-8859-1"),"UTF-8");//处理乱码 Map<String, Object> map = new HashMap<String, Object>(); username=(username==null)?"":username; map.put("username", username);//username必须要和ibatis配置的property=username一致 Integer totalCount = this.userService.getUserCount(map); this.initPage(map, pageNum, pageSize, totalCount); List list = this.userService.getUserLists(map); this.initResult(model, list, map); return new ModelAndView("pagerList"); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 添加用户 * @param type * @param model * @return */ @RequestMapping("/addUser.do") public ModelAndView addUser(@RequestParam String username, Model model) { User user = new User(); user.setUsername(username); this.userService.addUser(user); return this.getUserInfo(model, null, null, null); } /*** * 删除用户 * @param id * @param pageNum * @param pageSize * @param model * @return */ @RequestMapping(value="/delUser.do",method={RequestMethod.POST,RequestMethod.GET},consumes="application/json; charset=UTF-8") @ResponseBody public ModelAndView delUser(@RequestParam(required = true) Integer id, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model, HttpServletRequest request,HttpServletResponse response) { PrintWriter out=null; JSONObject result=new JSONObject(); try { out=response.getWriter(); this.userService.delUserById(id); result.put("flag", true); out.write(result.toString()); } catch (Exception e) { try { result.put("flag", false); out.write(result.toString()); } catch (JSONException e1) { e1.printStackTrace(); } } return null; //return this.getUserInfo(model, null, pageNum, pageSize); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/getUserById.do") public ModelAndView getUserById(@RequestParam(required = true) Integer id, Model model) { User u = this.userService.getUserById(id); model.addAttribute("user", u); return new ModelAndView("editUser"); } /*** * 编辑用户 * @param id * @param model * @return */ @RequestMapping("/editUser.do") public ModelAndView editUser(@RequestParam(required = true) Integer id, @RequestParam String username, @RequestParam(required = false) Integer pageNum, @RequestParam(required = false) Integer pageSize, Model model) { User u = new User(); u.setUsername(username); this.userService.editUser(u); return this.getUserInfo(model, null, pageNum, pageNum); } }
bootstrap分页组件
huangbaokang的博客
04-24 711
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...
Bootstrap组件_分页
Leon_Jinhai_Sun的博客
03-13 213
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <bod...
BootStrap 分页组件
刚哥的博客
07-20 483
分页组件可以提供带有展示页面的功能     «     1     2     3     4     5     » 设置尺寸 翻页效果     上一页     下一页
BootStrap分页插件
qq_48575500的博客
08-03 1657
分页插件
利用Bootstrap的分页组件实现分页效果
昊虹AI笔记
10-21 5981
利用Bootstrap的分页组件实现分页效果
Bootstrap分页插件--Bootstrap Paginator
热门推荐
乐于学习、乐于分享、乐于总结
10-22 1万+
1.在视图上引入bootstrap.css、bootstrap-page
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值