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

发布时间：2020-12-17 18:08:14 所属栏目：安全来源：网络整理

导读：我正在使用UI Bootstrap选项卡,我想更改某些组件的CSS,但我不确定如何访问不同的元素. 我想要更改的元素是活动选项卡的文本,非活动选项卡的文本以及两者的边框. 在CSS中访问这些选项卡需要什么样的正确语法？这是我正在使用的uib-tab HTML： uib-tabset uib

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

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

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

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

<uib-tabset>

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

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

</uib-tabset>

我对CSS很陌生 – 提前道歉……

解决方法

您可以简单地编辑.nav-tabs的bootstrap的css

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

对于活动标签

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

(可选)您可以设置Angular添加的uib-tab类的样式：

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

对于活动的uib-tab

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!