如何更改 bootstrap-vue 中分页的颜色？

Question

我尝试用引导示例更改它，但失败了。

        <b-pagination
            v-model="currentPage"
            :total-rows="users.length"
            :per-page="perPage"
            align="fill"
            size='lg'
            first-number
            last-number
            class="my-0"
        ></b-pagination>

Answer 1

社会保障体系

正如 Troy 在评论中指出的那样，bootstrap 有各种 SCSS 变量，您可以使用它们来自定义分页。因此，如果您使用 SCSS，这将是首选方式。

查看变量。

CSS

您可以添加一个类b-pagination并使用该类来定位a分页内的标签。检查代码片段以获取相关示例。

您还可以使用以下属性（需要v2.3.0+）在各种类型的按钮上放置特定的类。请注意，这些会将类放置在 上li，因此您仍然需要 CSS 来定位标记a。有关类道具的更多信息，请查看参考部分

page-class
first-class
last-class
prev-class
next-class
ellipsis-class

scoped如果您在组件中使用样式标签，请注意您可能必须使用深层选择器才能正确定位该a标签。

page-class
first-class
last-class
prev-class
next-class
ellipsis-class

new Vue({
  el: '#app'
})

.customPagination > li > a {
  color: red;
}

.customPagination > li.active > a,
.customPagination > li > a:hover
{
  color: white;
  background-color: green!important;
}