vue.js - 如何更改 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

SCSS

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

View the variables.

CSS

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

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

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

如果您在组件中使用 scoped 样式标记，请注意您可能必须使用 deep selector正确定位 a 标记。

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

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

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

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bccac9d9fc8e928a928d8d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f6463646271603d66657550223e243e21" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc6dcc3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4a9f2f1e1c4b6aab0aab5" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet"/>


<div id="app">
  <b-pagination
    :total-rows="50"
    :per-page="5"
    class="customPagination"
  >
  </b-pagination>
</div>