如何bootstrap的分页插件的颜色

最新推荐文章于 2022-06-13 12:30:51 发布

小饼干的甜甜圈

最新推荐文章于 2022-06-13 12:30:51 发布

阅读量2.1k

点赞数 2

分类专栏： bootstrap

本文链接：https://blog.csdn.net/hgr12138/article/details/94600694

版权

bootstrap 专栏收录该内容

0 篇文章

订阅专栏

如何bootstrap的分页插件的颜色

一、首先找到使用分页的地方，并找到id为 pagination 的 ul：

  <!-- 把分页搞出来 -->
  <ul id="pagination"></ul>

二、对于不怎么拎得清前台代码的小可爱们的话，可以使用idea的查找替换的快捷键（Ctrl + R）来查找，在 bootstrap.css 里面查找 pagination 所在的地方：

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #f96d0b;/*分页的选中的字的颜色*/
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #f99331;/*分页的当前页的背景颜色*/
  border-color: #f99331;/*分页的当前页的边框颜色*/
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

修改分页的鼠标悬停的字的颜色：

找到 .pagination > li > span:focus 这个地方，里面有一个 color 属性，修改成你需要的颜色即可。
```
.pagination > li > span:focus {
  z-index: 2;
  color: #f96d0b;/*分页的鼠标悬停的字的颜色*/
  background-color: #eee;
  border-color: #ddd;
}
```

修改分页的当前页的背景颜色：

找到 .pagination > .active > span:focus { 这个地方，里面有一个 background-color 的属性，修改成你需要的颜色即可。

.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #f99331;/*分页的当前页的背景颜色*/
  border-color: #f99331;/*分页的当前页的边框颜色*/
}

修改分页的当前页的边框颜色：

找到 .pagination > .active > span:focus { 这个地方，里面有一个 border-color 的属性，修改成你需要的颜色即可。
```
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #f99331;/*分页的当前页的背景颜色*/
  border-color: #f99331;/*分页的当前页的边框颜色*/
}
```
如果有什么疑问，可以留言给我，看到后会回复的。