Html 如何更改引导导航选项卡的颜色和字体_Html_Css_Twitter Bootstrap_Fonts

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

html css twitter-bootstrap fonts

Html 如何更改引导导航选项卡的颜色和字体,html,css,twitter-bootstrap,fonts,Html,Css,Twitter Bootstrap,Fonts,我想更改引导导航选项卡的颜色、字体和大小 1对于默认选项卡状态，我希望选项卡标签的文本颜色为575757，字体大小为16像素，字体为Lato常规字体 2对于活动选项卡，我想将文本颜色更改为3c5a78和拉托粗体字体这是我的靴子：这是我的HTML： <div class="content-section-c"> <div class="container"> <div class="row"> <d

我想更改引导导航选项卡的颜色、字体和大小

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

2对于活动选项卡，我想将文本颜色更改为3c5a78和拉托粗体字体

这是我的靴子：

这是我的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

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

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

在浏览器中，检查元素，并查看活动选项卡和非活动选项卡之间的区别

当您发现差异时，您将发现一个名为active target的类

然后，您可以通过定位所有导航项的li>a来定位字体

好吧，据我所知，你还没有为你的拉托粗体和拉托普通字体创建@font-face。因此，如果您想要使用某些外部字体系列，请确保为其定义了字体面

其次，我在这个URL演示中编写了一些CSS属性：我希望你能很容易理解

以下是变化：

.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) */

我需要添加字体系列吗？@user3075987请阅读我的答案，并确定哪个答案对你帮助最大。感谢u@user3075987如果您还没有包括lato字体系列，请包括以下链接。并使用字体系列：lato；对于此类：.nav tabs>li.active>a，字体大小为700，对于此类：.nav tabs>li>a，使用字体大小：normal。

.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) */