308、bootstrap 之 分页 组件

最新推荐文章于 2024-06-09 18:06:43 发布
最新推荐文章于 2024-06-09 18:06:43 发布
阅读量330 收藏
点赞数
分类专栏： 06_bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l0510402015/article/details/104525829
版权

1、如果页面内容有多个，可以将页面分成多页进行显示

2、可以给加入disabled类 和active类来禁止链接属性，比如说在第一时，《这个就不能有链接属性了。

3、类pagination-sm、pagination、pagination-lg 可以用来设置分页字符大小，添加在列表标签<ul>中

      注意：使用pagination-sm、pagination-lg类时，也必须添加pagination类。

其它请看手册

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap hello world</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="styleshee
最低0.47元/天 解锁文章
l0510402015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 组件：分页组件的使用
WangMin@汪末末
09-07 2384
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 给网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。 默认分页样式 注意： 标记分页组件。分页组件应该包装在nav元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。此外，由于一个页面可能已经有多个这样的导航部分（例如标题中的主导航或侧栏导航），建议为nav提供一个描述性的aria标签，以说明它的用途。例如，如果分页组件用于在一组搜索结果之间导航，则适当的标签可以是aria l
利用Bootstrap的分页组件实现分页效果
昊虹AI笔记
10-21 3665
利用Bootstrap的分页组件实现分页效果
Bootstrap系列之分页（Pagination）
老__L的博客
06-18 8972
我们让分页（pagination）占据了一大块区域来放置相互关联的链接，这让链接更醒目并且易于扩充，除了这些好处，还为链接提供了较大的点击区域。分页（Pagination）是利用 HTML 的列表元素构建的，因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。此外，由于页面上可能会有多个这样的导航区域，因此建议为设置一个用于描述其用途的aria-label属性。
BootStrap入门到实战：BootStrap组件（三）- 分页、标签、徽章、巨幕、页头与缩略图
最新发布
林林一928的博客
06-09 1081
一、 分页1. 默认分页、2. 尺寸、3. 翻页、4. 对齐链接、5. 可选的禁用状态。二、 标签。 三、 徽章。* 扩- 标签与徽章的使用区别 。四、巨幕。 五、页头与缩略图。 1. 页头。 2. 缩略图。2.1 默认样式的缩略图。 2.2 自定义内容。 2.3 缩略图的用途。 2.4 缩略图在日常开发中的作用
Web前端 — Bootstrap（8）
Roger_CoderLife的博客
06-13 296
本次知识点： 1.分页 2.标签 3.徽章 4.巨幕 5.页头 6.缩略图 7.警告框 1.分页 （1）默认的分页 <ul class="pagination"> <li><a href="">«</a></li> <li><a h...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
qq_35727582的博客
10-13 1993
记录并分享一下基于 jQuery 和 bootstrap 封装的一个简单分页表格组件，希望对你有用
Bootstrap分页组件的设计
04-12
Bootstrap 分页组件的设计 Bootstrap 分页组件的设计是基于 Bootstrap 前端开发框架，简单设计了前端分页控件。该组件提供了一个基本的分页控件，能够满足大多数情况下的分页需求。 分页组件的结构 分页组件的...
基于Bootstrap样式的分页组件（可以自己改样式）
03-03
基于Bootstrap样式的分页组件
Bootstrap3分页组件rPage.zip
07-19
rPage 是一个易于使用的插件，它能使 BootStrap3 的分页更加灵敏。rPage 自动收缩分页组件，并且当空间不够时删除一些组件。 标签：rPage
解决JS组件bootstrap table分页实现过程中遇到的问题
10-22
主要介绍了JS组件bootstrap table分页实现过程中遇到的问题，感兴趣的小伙伴们可以参考一下
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 CSS组件之分页(pagination)和翻页(pager)
08-31
在Bootstrap中，分页组件使用`<ul class="pagination">`来创建，每个页码是一个`<li>`元素内的`<a>`链接。基础的分页样式如下： ```html <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href=...
3.Bootstrap组件
wxhua420701325的博客
10-25 1546
栅格系统。
BootStrap分页插件
qq_48575500的博客
08-03 1551
分页插件
Bootstrap 禁用某个菜单项
歪脖先生的博客
03-08 1881
禁用某个菜单项为下拉菜单某个下拉项的 &lt;li&gt; 元素添加 .disabled 类，就可以禁止该选项，让该菜单项的链接变灰并失去鼠标悬停效果。如：&lt;ul class="dropdown-menu"&gt;  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Regular link&lt;/a&gt;&lt;/l
Adminlte Bootstrap 侧边栏li禁用方法
12-26 261
　　使用Adminlte 和 Bootstrap 的过程中，想要把侧边栏的ul li 给disabled掉，方法如下： 在需要处理的地方增加 class = “disabled”， 根据不同需要采用以下两种方式对disabled类进行处理 <li class="disabled">testtest</li> 1. 使用js处理 ...
Bootstrap组件之分页
bboyjoe的博客
08-01 2050
.pagination——指定ul元素包裹分页组件； .pagination-lg、..pagination-sm——改变分页组件的尺寸大小，适配不同屏幕的分辨率； .disabled——指定分页组件的列表项为禁用状态； .active——指定分页组件的列表项为激活状态； .pager——指定ul元素包裹翻页组件； .previous、.next——分别设置翻页组件的列表项元素的链接
Bootstrap框架常用组件
m0_46420078的博客
02-16 3672
一、组件基础 1、什么是组件 组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象的思想来说 ，将一些符号某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。 2、组件的优势 组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。 组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。 3、Boots..
Bootstrap 的分页组件实现分页
05-26
Bootstrap 的分页组件非常易于使用，可以方便地实现分页功能。以下是实现分页的简单步骤： 1. 在 HTML 中添加分页组件的基本结构： ```html <span aria-hidden="true">« ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值