Question

我想更改引导导航标签的颜色，字体和大小。

1）对于默认的选项卡状态，我希望选项卡标签的文本颜色为＃575757，字体大小为16像素，Lato-Regular字体。

2）对于活动标签，我希望将文本颜色更改为＃3c5a78和Lato-Bold字体。

这是我的bootply： http://www.bootply.com/huskydawgs/Y7qGo2Kz62

这是我的HTML：

<div class="content-section-c">

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2>Sample Search Results</h2>
            </div>
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">APPLE<br>
                TREES
                               </a></li>
            <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
            <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
            <li><a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a></li>
            <li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li> 
                           </ul>
          <div class="tab-content">
            <div id="pane1" class="tab-pane active">
              <p>126 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                                                  </div>
            <div id="pane2" class="tab-pane">
            <p>75 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
            </div>
            <div id="pane3" class="tab-pane">
              <p>144 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
            </div>
            <div id="pane4" class="tab-pane">
              <p>170 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
            <div id="pane5" class="tab-pane">
              <p>256 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
          </div><!-- /.tab-content -->
        </div><!-- /.tabbable -->
        </div>

    </div>
    <!-- /.container -->
</div>
<!-- /.content-section-c -->

这是我的CSS：

        padding: 50px 0;
    background-color: #d4d4d4;
}

h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #3C5A78;
    line-height: 1;
    text-align:center;
    padding: 0 0 16px 0;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
 border-top: none;
 border-left: none;
 border-right: none;
 border-bottom: 3px solid #e9a39c;
 font-weight: bold;
 background-color: #d4d4d4 !important; 
}

.nav-tabs>li>a:hover{
  border: 1px solid transparent;
}

.nav>li>a:focus, .nav>li>a:hover{
    background-color: #d4d4d4;
}

.nav-tabs{
    border-bottom: none;
    display: inline-block; /* needed to center the list items */
}

.tabbable{
     text-align: center;
}

Answer 1

请将此css添加到您的文件中。

.nav-tabs > li.active > a {
  color: #3c5a78;
  font-size: 16px;
}
.nav-tabs > li > a {
  color: #575757;
}

Answer 2

这是一个非常简单的问题。请不要给他CSS。

在浏览器中，检查元素并查看活动和非活动选项卡之间的不同之处。

当你发现差异时（你会发现一个名为active的类）目标那个类。

然后，您可以通过定位li＆gt;来定位字体。所有导航项目中的一个。

Answer 3

好吧，据我所知，你还没有为你的Lato-Bold，Lato-Regular创建@font-face。因此，如果您想使用某些外部font-family，请确保您已定义font-face。 You can learn from here that how to make font family

其次，我在这个 URL DEMO：中写了一些CSS属性我希望你能轻松理解它，http://www.bootply.com/GB3f0moehB

以下是更改：

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
 border-top: none;
 border-left: none;
 border-right: none;
 border-bottom: 3px solid #e9a39c;
 font-weight: bold;
 background-color: #d4d4d4 !important;
 /* NEW ADDED PART (START) */
 color: #3c5a78 !important;
 font-family: YOUR-FONT FAMILY !important;
 /* NEW ADDED PART (END) */

}

 /* NEW ADDED PART (START) */
.nav-tabs>li>a {
 color: #575757 !important;
 font-family: YOUR-FONT FAMILY !important;
}
 /* NEW ADDED PART (END) */

如何更改引导程序导航选项卡的颜色和字体

3 个答案: