bootstrap 分页样式代码

最新推荐文章于 2022-06-13 12:30:51 发布
最新推荐文章于 2022-06-13 12:30:51 发布
阅读量134 收藏 1
点赞数
原文链接：http://www.cnblogs.com/wsk198726/p/4969061.html
版权

bootstrap 分页样式代码，废话不多说，直接上源码

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 默认的分页</title>
    <style>
        .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; }
        .pagination li { display: inline; }
        .pagination li a { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.428571429; text-decoration: none; background-color: #fff; border: 1px solid #ddd; }
        .pagination li:first-child a { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
        .pagination li:last-child a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
        .pagination li a:hover, .pagination li a:focus { background-color: #eee; }
        .pagination .active a, .pagination .active a:hover, .pagination .active a:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; }
        .pagination .disabled a, .pagination .disabled a:hover, .pagination .disabled a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; }
        .pagination-lg li a { padding: 10px 16px; font-size: 18px; }
        .pagination-sm li a, .pagination-sm li span { padding: 5px 10px; font-size: 12px; }
    </style>
</head>
<body>
    <ul class="pagination pagination-lg">
        <li><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><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="#">»</a></li>
    </ul>
    <br />
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><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="#">»</a></li>
    </ul>
    <br />
    <ul class="pagination pagination-sm">
        <li><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><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="#">»</a></li>
    </ul>
</body>
</html>

 

转载于:https://www.cnblogs.com/wsk198726/p/4969061.html

weixin_33736048
关注
js+bootstrap实现分页、页码跳转
jiaonizuoren的博客
04-08 1万+
制作page.jsp，在其他页码引入，只需把最外层的form标签的id设置为myForm；其中　　totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;...
两款漂亮的bootstrap分页样式
12-13
在本主题中，我们聚焦于"两款漂亮的bootstrap分页样式"，这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件（Pagination）是一个基本的导航元素，用于分隔大量的内容或结果，让用户能够分步骤...
使用Bootstrap实现分页，并且当页码过多时使用省略号
01-08
使用Bootstrap实现分页，并且当页码过多时使用省略号，这篇文章有样式的简单演示：https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式，不同的项目有不同的样式风格，只是提供分页时显示页面的方法
基于BootStrap的分页代码实现
weixin_30700099的博客
07-18 103
1 public class PageUtil { 2 //targetUrl 访问url totalNum总记录数 currentPage 当前页数 pageSize每页的大小 3 public static String genPagation(String targetUrl,int totalNum,int currentPage,int pageSi...
基于bootstrap的分页代码
Bing's Blog
11-30 895
<ul class ="pagination"> @if (Convert.ToInt32(Html.ViewContext.RouteData.Values["id"]) > 0) { <li> @Html.ActionLink( "<<", "Users" , "MVCUsers" , new { id = Convert.ToInt32(Html.ViewCon
黑色样式Bootstrap分页导航代码
ICode联盟
06-13 296
下载地址黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。dd:
ASP.NET GridView的Bootstrap分页样式
10-21
综上所述，实现*** GridView的Bootstrap分页样式需要进行前端的Bootstrap样式引入、jQuery以及相关插件的引入、分页控件的初始化和事件绑定，以及后端数据处理逻辑的编写。通过这些步骤，可以实现一个既美观又功能性...
yii使用bootstrap分页样式的实例
12-18
以下是如何在不修改 Yii 内置代码的情况下，使用 Bootstrap 分页样式的步骤： 1. 在控制器中，你需要创建一个分页对象并传递给视图。以下是一个简单的示例： ```php public function actionIndex() { $cid = int...
jQuery+bootstrap网页分页样式代码.zip
最新发布
09-26
本篇将深入探讨如何利用jQuery和Bootstrap库来创建高效且美观的分页样式代码。这份"jQuery+bootstrap网页分页样式代码.zip"资源提供了实现这一目标的实例，适用于那些对此有需求或兴趣的开发者。 首先，jQuery是一...
【ASP.NET编程知识】ASP.NET GridView的Bootstrap分页样式.docx
05-16
ASP.NET GridView 的 Bootstrap 分页样式 本文将详细介绍 ASP.NET GridView 的 Bootstrap 分页样式，包括Revenue.cs 收入类的实现、Default.aspx 内容的设计和GridView 的 Bootstrap 分页样式的实现。 Revenue.cs ...
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分页效果实现
09-15
基于bootstrap效果的分页实现。css样式和html页面样例。
Bootstrap黑色主题分页导航样式
12-13
这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。
bootstrap-分页
deepquiet的博客
03-06 588
分页的学习：
Bootstrap分页样式
weixin_30301449的博客
10-10 631
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 分页的大小</title>//需引用bootstrap 3.3.7的bootstrap.min.css <link rel="style...
BootStrap-CSS样式_布局组件_分页翻页
LoveyourselfJiuhao的博客
12-20 2177
Bootstrap 支持的分页特性 pagination样式：添加该 class 来在页面上显示分页 active样式：默认选中，指示当前的页面 disbaled样式：定义不可点击的链接 Pager样式：添加该 class 来获得翻页链接 previous样式： 把链接向左对齐 next样式： 把链接向右对齐。 pull-left样式：左浮动 pagination-lg样式：外观大...
web项目 精美分页工具类 (Bootstrap样式) 源码【拿去使用】
杨大仙
11-16 1671
我们在做web项目时，经常要使用分页。在这里分享给大家博主使用Bootstrap样式做的分页工具类。（效果如图所示，附上源码及使用方式，无需再每次手动编写） 效果展示 例（当位于首页时）： 分页工具类的源代码如下： 工具类源码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="c" .
Bootstrap CSS——分页与标签
Tark——且行且珍惜
10-07 629
http://v3.bootcss.com/components/#pagination mark<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <bo
web项目 优化精美分页工具类【无bug】一行代码即可使用【Bootstrap样式】
杨大仙
11-29 496
看到朋友们反馈在使用上次封装的分页工具时有bug（也就是链接文章） ^ 于是重新进行了优化，现只需在页面添加一行代码即可使用，经测试后没有任何bug，可放心使用 ~ 非常感谢朋友们的bug分享！我们得以在相互交流之中不断成长，共同进步！Thanks！ 优化后的工具类源码：
bootstrap分页的代码
02-06
下面是 bootstrap 分页的示例代码： ``` <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li> </ul> </nav> ``` 这段代码使用了 Bootstrap 的分页样式，在页面中会显示出类似于 "Previous 1 2 3 Next" 的分页导航。 注意：这仅仅是一个示例代码，实际项目中需要根据具体需求调整分页的样式和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值