黑色样式Bootstrap分页导航代码

转载 于 2022-06-13 12:30:51 发布 · 344 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://yy123.ink/frontDetail/6906
文章标签：

#jquery

这篇博客教你如何通过CSS轻松改造Bootstrap分页，获得优雅的黑色主题设计，提升网站视觉效果。

下载地址

黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。

1630005136.png

dd:

Bootstrap黑色主题分页导航样式
12-13
这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。
黑色主题的经典Bootstrap后台模板
10-18
一款经典的黑色主题Bootstrap后台模板，功能强大，高端大气，动态图表，相册图片可点击放大，覆盖全部按钮标签。
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); } }
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的分页代码
Bing's Blog
11-30 1020
<ul class ="pagination"> @if (Convert.ToInt32(Html.ViewContext.RouteData.Values["id"]) > 0) { <li> @Html.ActionLink( "<<", "Users" , "MVCUsers" , new { id = Convert.ToInt32(Html.ViewCon
基于Bootstrap的黑色主题分页导航样式设计
Bootstrap黑色主题分页导航样式是一种基于流行前端框架Bootstrap定制开发的UI组件，主要用于提升网页中分页功能的视觉表现力和用户体验。该样式通过引入自定义CSS代码，在保留Bootstrap原有结构与响应式特性的基础上...
黑色大气后台管理系统bootstrap商业模板
06-18
2. **预定义的组件**：Bootstrap提供了许多预定义的UI组件，如按钮、表单、下拉菜单、模态框、导航条、分页等。这些组件大大简化了开发流程，让开发者可以快速搭建用户界面。 3. **JavaScript插件**：除了CSS样式，...
黑色Bootstrap响应式后台管理系统html静态模板.zip
10-05
6. **表格**：Bootstrap的表格样式可以让你快速创建可排序、可分页的表格，同时支持行内操作和扩展功能。 7. **图标集**：Bootstrap通常与Font Awesome或Glyphicons等图标库结合使用，提供大量矢量图标，增强视觉...
高端大气的Bootstrap红色黑色前台模板
2. **组件丰富**：Bootstrap提供了按钮、表单、导航条、分页器、警告框、模态框、轮播图等多种预制的组件，用户可以直接使用，无需重新设计。 3. **兼容性好**：Bootstrap对主流浏览器有良好的兼容性，包括Chrome、...
bootstrap 分页样式代码
weixin_33736048的博客
11-16 170
bootstrap 分页样式代码，废话不多说，直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <style> .pagination { display: inline-block; ...
使用Bootstrap实现分页，并且当页码过多时使用省略号
01-08
使用Bootstrap实现分页，并且当页码过多时使用省略号，这篇文章有样式的简单演示：https://blog.youkuaiyun.com/u013025627/article/details/50485327 样式只是自己的简单样式，不同的项目有不同的样式风格，只是提供分页时显示页面的方法
Bootstrap4官方黑色主题模板
06-05
Bootstrap4的黑色主题模板，解压后可直接当做静态页面使用，与官方内容基本完全一致。 使用ie或其他浏览器在查看时如果没有效果，可能是浏览器阻止了网页上的部分内容，请允许它们并重新查看页面。
html5分页导航按钮样式动画特效.zip
07-11
代码简介：html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
bootstrap分页效果实现
09-15
基于bootstrap效果的分页实现。css样式和html页面样例。
基于BootStrap的分页代码实现
weixin_30700099的博客
07-18 135
1 public class PageUtil { 2 //targetUrl 访问url totalNum总记录数 currentPage 当前页数 pageSize每页的大小 3 public static String genPagation(String targetUrl,int totalNum,int currentPage,int pageSi...
bootstrap-分页
deepquiet的博客
03-06 640
分页的学习：
基于Bootstrap的黑色极简博客园主题
dfv6403的博客
05-23 492
正如你所看到的，这是一个基于Bootstrap的黑色博客元主题。 主要的改进有： 使用时间轴形式展示首页的博文列表 评论区iMessage风格化 整体风格bootstrap化 响应式设计。 关于时间轴 在我的首页，你可以看到一个时间轴形式的博文列表。这个时间轴效果最初是我在最近参加的一个现场网页制作比赛中实现的，后经过完善和改进，若感兴趣可以移步我的Gist 该时...
做个简单的分页导航
jeas_rt 的博客
11-01 205
     参考论坛上的分页样式，想给自己网页加上如下样式；        思考制作如此导航样式， 需要后台的参数为： pageinfo包含curpage，totalpage 导航本身的参数： autopagenum：导航中间选项个数。          在js中进行导航模块的生成， 然后将导航模块通过追加子节点的方式输出到页面。 在jsp中加入用于接收分页导航的&lt;...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值