Angularjs UI Bootstrap: 如何修改uib-tab CSS

Question

我正在使用 UI Bootstrap 选项卡，我想更改某些组件的 CSS，但不确定如何访问不同的元素.

我要更改的元素是活动选项卡的文本、非活动选项卡的文本以及两者的边框。

在 CSS 中访问这些选项卡所需的正确语法是什么？

这是 uib-tab HTML 我正在使用：

<uib-tabset>

    <uib-tab heading="Episodes"></uib-tab>

  <uib-tab heading="Categories"></uib-tab>

</uib-tabset>

我是 CSS 的新手 - 提前致歉...

Answer 1

您只需为 .nav-tabs

编辑 bootstrap 的 css

.nav-tabs > li > a {
    border: 1px solid #000;
}

对于活动选项卡

.nav-tabs > li.active > a {
    /*CSS HERE*/
}

您可以选择为 Angular 添加的 uib-tab class 添加样式：

.uib-tab a {
    border: 1px solid #000;
  }

为活跃uib-tab

.uib-tab.active a {
    /*CSS HERE*/
}

Angularjs UI Bootstrap: How to modify uib-tab CSS