代码之家 › 专栏 › 技术社区 › user7693832

如何设置b分页的主颜色?

bootstrap-vue javascript

0

user7693832 · 技术社区 · 3 年前

在里面 bootstrap-vue 分页没有用于更改分页主颜色的插槽。

你看,它只有蓝色。

0 回复 | 直到 3 年前

1

0

Iman Shafiei 3 年前

您可以通过更改 CSS 活动项的 b-pagination . 我用以下代码说明了解决方案:

new Vue({
  el: '#app',
  data() {
    return {
      rows: 100,
      perPage: 10,
      currentPage: 1
    }
  },

})

.customPage.page-item.active .page-link {
  background-color: red;
  border-color: red;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" page-class="customPage"></b-pagination>
</div>