bootstrap3和4哪个好用（在Bootstrap4+Vue2中如何实现分页查询）

本文目录

• 在Bootstrap4+Vue2中如何实现分页查询
• bootstrap4兼容哪些浏览器
• bootstrap4框架使用总结

在Bootstrap4+Vue2中如何实现分页查询

本篇文章主要介绍了使用Bootstrap4 + Vue2实现分页查询的示例代码，现在分享给大家，也给大家做个参考。
写在前面
工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。
前端框架：Bootstrap4，Vue.js2
后台框架：spring boot，spring data JPA
开发工具：IntelliJ IDEA，Maven
实现效果：
会员信息
如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕，本文主题开始。
一、使用Bootstrap搭建表格
表格区
《p class="row"》
《table class="table table-hover table-striped table-bordered table-sm"》
《thead class=""》
《tr》
《th》《input type="checkbox"》《/th》
《th》序号《/th》
《th》会员号《/th》
《th》姓名《/th》
《th》手机号《/th》
《th》办公电话《/th》
《th》邮箱地址《/th》
《th》状态《/th》
《/tr》
《/thead》
《tbody》
《tr v-for="(user,index) in userList"》
《td》《input type="checkbox" :value="index" v-model="checkedRows"》《/td》
《td》{{pageNow*10 + index+1}}《/td》
《td》{{user.id}}《/td》
《td》{{user.username}}《/td》
《td》{{user.mobile}}《/td》
《td》{{user.officetel}}《/td》
《td》{{user.email}}《/td》
《td v-if="user.disenable == 0"》正常《/td》
《td v-else》注销《/td》
《/tr》
《/tbody》
《/table》
《/p》分页区
《p class="row mx-auto"》
《ul class="nav justify-content-center pagination-sm"》
《li class="page-item"》
《a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"》《i class="fa fa-fast-backward" @click="switchToPage(0)"》 《/i》《/a》
《/li》
《li class="page-item"》
《a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"》《i class="fa fa-backward" @click="switchToPage(pageNow-1)"》《/i》《/a》
《/li》
《li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}"》
《a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link"》{{n}}《/a》
《/li》
《li class="page-item"》
《a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"》《i class="fa fa-forward" @click="switchToPage(pageNow+1)"》《/i》《/a》
《/li》
《li class="page-item"》
《a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"》《i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"》《/i》《/a》
《/li》
《/ul》
《/p》二、初始化Vue对象及数据
创建Vue对象
var vueApp = new Vue({
el:"#vueApp",
data:{
userList:,
perPage:10,
pageNow:0,
totalPages:0,
checkedRows:
},
methods:{
switchToPage:function (pageNo) {
if (pageNo 《 0 || pageNo 》= this.totalPages){
return false;
}
getUserByPage(pageNo);
}
}
});初始化数据
function getUserByPage(pageNow) {
$.ajax({
url:"/user/"+pageNow,
success:function (datas) {
vueApp.userList = datas.content;
vueApp.totalPages = datas.totalPages;
vueApp.pageNow = pageNow;
},
error:function (res) {
console.log(res);
}
});
}完整js代码：
《script》
var vueApp = new Vue({
el:"#vueApp",
data:{
userList:,
perPage:10,
pageNow:0,
totalPages:0,
checkedRows:
},
methods:{
switchToPage:function (pageNo) {
if (pageNo 《 0 || pageNo 》= this.totalPages){
return false;
}
getUserByPage(pageNo);
}
}
});
getUserByPage(0);
function getUserByPage(pageNow) {
$.ajax({
url:"/user/"+pageNow,
success:function (datas) {
vueApp.userList = datas.content;
vueApp.totalPages = datas.totalPages;
vueApp.pageNow = pageNow;
},
error:function (res) {
console.log(res);
}
});
}
《/script》三、使用JPA实现分页查询
controller接收请求
/**
* 用户相关请求控制器
* @author louie
* @date 2017-12-19
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 分页获取用户
* @param pageNow 当前页码
* @return 分页用户数据
*/
@RequestMapping("/{pageNow}")
public Page《User》 findByPage(@PathVariable Integer pageNow){
return userService.findUserPaging(pageNow);
}
}JPA分页查询
@Service
public class UserServiceImpl implements UserService {
@Value("${self.louie.per-page}")
private Integer perPage;
@Autowired
private UserRepository userRepository;
@Override
public Page《User》 findUserPaging(Integer pageNow) {
Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id");
return userRepository.findAll(pageable);
}
}好了，至此功能完成，工程代码已在GitHub中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用jQuery+CSS如何实现table表格
***隐藏网址***
使用Angular如何实现国际化（详细教程）
用JQuery如何实现表单验证，具体应该怎么做？
使用Vue如何设置多个Class

bootstrap4兼容哪些浏览器

Bootstrap4支持多种浏览器和设备，不管是最新的还是一些较早的浏览器，都支持。
支持的浏览器（推荐学习：Bootstrap视频教程）
Bootstrap4 支持所有的主流浏览器和平台的最新的、稳定的版本。
移动设备
总的来说，Bootstrap支持所有主流平台的最新版本的默认浏览器。
Chrome
Firefox
Opera
Safari
Android Browser & WebView
Android
支持 支持 不支持N/A Android v5.0+ 支持 iOS
支持 N/A不支持 支持N/A
桌面浏览器
差不多的，大多数最新版本的桌面浏览器也是支持的。
Chrome
Firefox
Internet Explorer
Microsoft Edge
Opera
Safari
Mac
支持
N/A
N/A
支持支持支持Windows
支持支持支持支持支持支持对于 Firefox, 除了最新的普通稳定版本, 我们也支持Firefox浏览器最新的扩展支持版本 (ESR)。
非正式地，Bootstrap应当在Chromium系统以及Linux系统的Chrome、Linux系统的Firefox以及Internet Explorer 8或更早版本的IE中也表现良好。虽然它们不是正式支持的。
验证器
为了能够向漏洞百出的老版本的浏览器提供尽可能好的体验，Bootstrap在多个不同的地方使用了 CSS 浏览器hacks 使用针对对于特定的浏览器版本的特殊的CSS，以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。在一些地方，我们也使用尚未完全标准化的前沿CSS特征，但是使用它们纯粹是为了渐进增强。
这些验证器的警告在实践中没生产妨碍，因为我们的CSS的非hacky部分已经充分验证，而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

bootstrap4框架使用总结

bootstrap 是一个开源的前端框架，主要应用于页面的布局。

官网介绍：

同时，它也是移动优先的布局框架。

移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。

使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在 head 部分加入：

可以设置的属性：

m - 设置外边距 margin
p - 设置内边距 padding

可以设置的方向：

t - 设置上 距 *-top
b - 设置下 距 *-bottom
l - 设置左 距 *-left
r - 设置右 距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向

可以设置的大小：

0 - 设置 边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to $spacer * .25
2 - (by default) 设置 the margin or padding to $spacer * .5
3 - (by default) 设置 the margin or padding to $spacer
4 - (by default) 设置 the margin or padding to $spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的 外边距 * the margin to auto

示例：

mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......

d-inline-block 将块级元素转换为行内块级元素

见官网： 栅栏布局

效果如下：

offset-*

d-flex

justify-content-*

作用于div子元素。

效果依次为：

align-items-*

同样作用于div子元素。

效果依次为：

flex-fill

作用于当前元素，效果是充满父元素。

flex-grow-*

将当前元素尽可能地增长，效果如下：

flex-shrink-*

将当前元素有必要地缩短，效果如下：

利用外边距可以实现：

ml-auto 表示 margin-left:auto ，效果使得当前元素水平居右。

mx-auto 表示左右外边距都为 auto ，效果是水平居中。

align-*

作用于当前元素 ，效果如下：

效果如下：

text-wrap

字体会自动换行，适用于 规定宽度 的div中的字体。

不包裹字体则是 text-nowarp 。

text-truncate

适用于块级元素中的字体。

text-*

效果如下：

list-unstyled 列表无黑点

list-inline 行内列表
list-inline-item 行内列表中的一项

使用如下：

见官网 表格

blockquote 设置为块引用
blockquote-footer 块引用的引脚

效果如下：