CSS 如何自定义Bootstrap 3选项卡颜色

在本文中，我们将介绍如何使用CSS来自定义Bootstrap 3选项卡的颜色。Bootstrap是一个流行的前端框架，提供了大量的CSS类来帮助我们快速搭建漂亮的网页。然而，默认情况下，Bootstrap的选项卡颜色可能不符合我们的需求。通过自定义CSS，我们可以轻松地改变选项卡的颜色，以适应我们的网站风格。

阅读更多：CSS 教程

了解Bootstrap选项卡的结构

在开始自定义之前，我们需要了解Bootstrap选项卡的结构。Bootstrap的选项卡使用了一系列的CSS类来实现样式效果。以下是Bootstrap选项卡的基本结构：

<div class="tab--wrapper">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h3>Tab 1 Content</h3>
      <p>This is the content of tab 1.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>Tab 2 Content</h3>
      <p>This is the content of tab 2.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h3>Tab 3 Content</h3>
      <p>This is the content of tab 3.</p>
    </div>
  </div>
</div>

如上所示，选项卡通过ul元素和对应的li元素来构建，每个li元素都代表一个选项卡。a元素用于触发选项卡内容的切换，href属性指向对应的标志性div元素。选项卡的内容则位于.tab-content的子元素div中，每个div都有一个唯一的id属性，用于与选项卡的href属性相对应。

自定义选项卡颜色

现在我们可以根据需要自定义选项卡的颜色了。我们可以通过修改Bootstrap提供的CSS类或自定义新的CSS类来实现这一目标。

修改默认颜色

如果只是想简单地修改默认选项卡的颜色，我们可以使用以下CSS代码：

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #your_color;
  color: #your_text_color;
}

在上述代码中，我们通过修改background-color属性和color属性来改变选项卡的背景颜色和文本颜色。将#your_color替换为你想要的选项卡背景颜色的十六进制值，将#your_text_color替换为你想要的选项卡文本颜色的十六进制值。

自定义新的颜色

如果想要自定义新的颜色选项，我们可以通过添加自定义的CSS类来实现。首先，在HTML文件中添加我们自定义的CSS类：

<div class="tab--wrapper">
  <ul class="nav nav-tabs custom-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h3>Tab 1 Content</h3>
      <p>This is the content of tab 1.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>Tab 2 Content</h3>
      <p>This is the content of tab 2.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h3>Tab 3 Content</h3>
      <p>This is the content of tab 3.</p>
    </div>
  </div>
</div>

在上述代码中，我们给.nav-tabs元素添加了一个新的CSS类custom-tabs，这个类将会应用于我们自定义的选项卡。

接下来，我们在CSS文件中定义我们的自定义CSS类：

.custom-tabs > li.active > a,
.custom-tabs > li.active > a:hover,
.custom-tabs > li.active > a:focus {
  background-color: #your_custom_color;
  color: #your_custom_text_color;
}

同样，将#your_custom_color替换为你想要的选项卡背景颜色的十六进制值，将#your_custom_text_color替换为你想要的选项卡文本颜色的十六进制值。

现在，我们的自定义选项卡颜色已经准备就绪。将CSS文件链接到HTML文件中，并保存运行，你将看到选项卡的颜色已经变成了你自定义的颜色。