单独设置Bootstrap选项卡

时间:2016-06-27 14:58:35

标签: css twitter-bootstrap reactjs tabs

我正在使用Bootstrap选项卡,并想知道分别识别标签的最佳方法是什么,所以我可以用不同的方式设置它们 - 例如,这样就有一个蓝色标签和一个红色标签,而不是两个看起来相同的标签

这是适用于标签的HTML :(注意:我也在使用反应。)

<ul className="nav nav-tabs">
            <li className="active"><a data-toggle="tab" href="#menu1">This is the headline of one article</a></li>
            <li className="tab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
 </ul>

这是我到目前为止的CSS:

.nav-tabs>li>a {
    background-color: #3999C9;
    color:red;
    font-family:Fira Sans;
}

.nav-tabs {
    font-family:Fira Sans;
    border-bottom: 1px solid #10122B;
}

所以不多,哈哈。感谢任何提示,无论是在某个地方添加课程还是其他任何提示。

1 个答案:

答案 0 :(得分:0)

好吧,只需使用css选择器:

.nav-tabs li:nth-of-type(1) a { ... } // first tab
.nav-tabs li:nth-of-type(2) a { ... } // 2nd
.nav-tabs li:nth-of-type(3) a { ... } // etc