Html 如何自定义 Bootstrap 3 标签颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28296517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:27:07 来源:igfitidea点击:
How to customize Bootstrap 3 tab color
提问by Abrar Jahin
I want to create a customized tab using Bootstrap 3.
我想使用 Bootstrap 3 创建一个自定义选项卡。
What I have done is -
我所做的是——
<ul class="nav nav-tabs" id="myTab">
<script type="text/javascript">
$(document).ready(function() {
//1st (1-1 = 0) tab selected initialy
$("#myTab li:eq(0) a").tab('show');
});
</script>
<li><a data-toggle="tab" href="#sectionA">SEARCH</a></li>
<li><a data-toggle="tab" href="#sectionB">ADVANCED</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</div>
<div id="sectionB" class="tab-pane fade">
Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.
</div>
</div>
And I am getting a tab like this-
我得到了一个这样的标签-
But I want to have is a customized colored. I am new in Bootstrap 3, so I don't know how to do it.
但我想要的是定制颜色。我是 Bootstrap 3 的新手，所以我不知道该怎么做。
What I want is something like this-
我想要的是这样的——
.
.
Can anyone help me please?
有人可以帮我吗？
Thanks in advance for helping.
提前感谢您的帮助。
回答by Mansukh Khandhar
On the selector .nav-tabs > li > a:hoveradd !importantto the background-color.
在选择器上.nav-tabs > li > a:hover添加!important到background-color.
.nav-tabs{
background-color:#161616;
}
.tab-content{
background-color:#303136;
color:#fff;
padding:5px
}
.nav-tabs > li > a{
border: medium none;
}
.nav-tabs > li > a:hover{
background-color: #303136 !important;
border: medium none;
border-radius: 0;
color:#fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#search">SEARCH</a></li>
<li><a data-toggle="tab" href="#advanced">ADVANCED</a></li>
</ul>
<div class="tab-content">
<div id="search" class="tab-pane fade in active">
Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</div>
<div id="advanced" class="tab-pane fade">
Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.
</div>
</div>回答by Vivekraj K R
I think you should edit the anchor tag on bootstrap.css. Otherwise give customized style to the anchor tag with !important(to override the default style on bootstrap.css).
我认为您应该编辑 bootstrap.css 上的锚标记。否则为锚标记提供自定义样式!important（以覆盖 bootstrap.css 上的默认样式）。
Example code
示例代码
.nav {
background-color: #000 !important;
}
.nav>li>a {
background-color: #666 !important;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">tab1</div>
<div role="tabpanel" class="tab-pane" id="messages">tab2</div>
<div role="tabpanel" class="tab-pane" id="settings">tab3</div>
</div>
</div>Fiddle: http://jsfiddle.net/zjjpocv6/2/
回答by PK-1825
.panel.with-nav-tabs .panel-heading {
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs {
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified {
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs>li>a,
.with-nav-tabs.panel-primary .nav-tabs>li>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>li>a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs>.open>a,
.with-nav-tabs.panel-primary .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-primary .nav-tabs>li>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>li>a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs>li.active>a,
.with-nav-tabs.panel-primary .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>li.active>a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-primary .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
background-color: #4a9fe9;
}
/********************************************************************/
/*** PANEL SUCCESS ***/
.with-nav-tabs.panel-success .nav-tabs>li>a,
.with-nav-tabs.panel-success .nav-tabs>li>a:hover,
.with-nav-tabs.panel-success .nav-tabs>li>a:focus {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs>.open>a,
.with-nav-tabs.panel-success .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-success .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-success .nav-tabs>li>a:hover,
.with-nav-tabs.panel-success .nav-tabs>li>a:focus {
color: #3c763d;
background-color: #d6e9c6;
border-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs>li.active>a,
.with-nav-tabs.panel-success .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-success .nav-tabs>li.active>a:focus {
color: #3c763d;
background-color: #fff;
border-color: #d6e9c6;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-success .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #3c763d;
}
/********************************************************************/
/*** PANEL INFO ***/
.with-nav-tabs.panel-info .nav-tabs>li>a,
.with-nav-tabs.panel-info .nav-tabs>li>a:hover,
.with-nav-tabs.panel-info .nav-tabs>li>a:focus {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs>.open>a,
.with-nav-tabs.panel-info .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-info .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-info .nav-tabs>li>a:hover,
.with-nav-tabs.panel-info .nav-tabs>li>a:focus {
color: #31708f;
background-color: #bce8f1;
border-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs>li.active>a,
.with-nav-tabs.panel-info .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-info .nav-tabs>li.active>a:focus {
color: #31708f;
background-color: #fff;
border-color: #bce8f1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu {
background-color: #d9edf7;
border-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-info .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #31708f;
}
/********************************************************************/
/*** PANEL WARNING ***/
.with-nav-tabs.panel-warning .nav-tabs>li>a,
.with-nav-tabs.panel-warning .nav-tabs>li>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>li>a:focus {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs>.open>a,
.with-nav-tabs.panel-warning .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-warning .nav-tabs>li>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>li>a:focus {
color: #8a6d3b;
background-color: #faebcc;
border-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs>li.active>a,
.with-nav-tabs.panel-warning .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>li.active>a:focus {
color: #8a6d3b;
background-color: #fff;
border-color: #faebcc;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu {
background-color: #fcf8e3;
border-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-warning .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #8a6d3b;
}
/********************************************************************/
/*** PANEL DANGER ***/
.with-nav-tabs.panel-danger .nav-tabs>li>a,
.with-nav-tabs.panel-danger .nav-tabs>li>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>li>a:focus {
color: #a94442;
}
.with-nav-tabs.panel-danger .nav-tabs>.open>a,
.with-nav-tabs.panel-danger .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-danger .nav-tabs>li>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>li>a:focus {
color: #a94442;
background-color: #ebccd1;
border-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs>li.active>a,
.with-nav-tabs.panel-danger .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>li.active>a:focus {
color: #a94442;
background-color: #fff;
border-color: #ebccd1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu {
background-color: #f2dede;
/* bg color */
border-color: #ebccd1;
/* border color */
}
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>li>a {
color: #a94442;
/* normal text color */
}
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
background-color: #ebccd1;
/* hover bg color */
}
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-danger .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
color: #fff;
/* active text color */
background-color: #a94442;
/* active bg color */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="page-header">
<h1>Panels with nav tabs.<span class="pull-right label label-default">:)</span></h1>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
<li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
<li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
<li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">Default 1</div>
<div class="tab-pane fade" id="tab2default">Default 2</div>
<div class="tab-pane fade" id="tab3default">Default 3</div>
<div class="tab-pane fade" id="tab4default">Default 4</div>
<div class="tab-pane fade" id="tab5default">Default 5</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li>
<li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li>
<li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li>
<li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">Primary 1</div>
<div class="tab-pane fade" id="tab2primary">Primary 2</div>
<div class="tab-pane fade" id="tab3primary">Primary 3</div>
<div class="tab-pane fade" id="tab4primary">Primary 4</div>
<div class="tab-pane fade" id="tab5primary">Primary 5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-success">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li>
<li><a href="#tab2success" data-toggle="tab">Success 2</a></li>
<li><a href="#tab3success" data-toggle="tab">Success 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4success" data-toggle="tab">Success 4</a></li>
<li><a href="#tab5success" data-toggle="tab">Success 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1success">Success 1</div>
<div class="tab-pane fade" id="tab2success">Success 2</div>
<div class="tab-pane fade" id="tab3success">Success 3</div>
<div class="tab-pane fade" id="tab4success">Success 4</div>
<div class="tab-pane fade" id="tab5success">Success 5</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1info" data-toggle="tab">Info 1</a></li>
<li><a href="#tab2info" data-toggle="tab">Info 2</a></li>
<li><a href="#tab3info" data-toggle="tab">Info 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4info" data-toggle="tab">Info 4</a></li>
<li><a href="#tab5info" data-toggle="tab">Info 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1info">Info 1</div>
<div class="tab-pane fade" id="tab2info">Info 2</div>
<div class="tab-pane fade" id="tab3info">Info 3</div>
<div class="tab-pane fade" id="tab4info">Info 4</div>
<div class="tab-pane fade" id="tab5info">Info 5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-warning">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1warning" data-toggle="tab">Warning 1</a></li>
<li><a href="#tab2warning" data-toggle="tab">Warning 2</a></li>
<li><a href="#tab3warning" data-toggle="tab">Warning 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4warning" data-toggle="tab">Warning 4</a></li>
<li><a href="#tab5warning" data-toggle="tab">Warning 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1warning">Warning 1</div>
<div class="tab-pane fade" id="tab2warning">Warning 2</div>
<div class="tab-pane fade" id="tab3warning">Warning 3</div>
<div class="tab-pane fade" id="tab4warning">Warning 4</div>
<div class="tab-pane fade" id="tab5warning">Warning 5</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel with-nav-tabs panel-danger">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1danger" data-toggle="tab">Danger 1</a></li>
<li><a href="#tab2danger" data-toggle="tab">Danger 2</a></li>
<li><a href="#tab3danger" data-toggle="tab">Danger 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4danger" data-toggle="tab">Danger 4</a></li>
<li><a href="#tab5danger" data-toggle="tab">Danger 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1danger">Danger 1</div>
<div class="tab-pane fade" id="tab2danger">Danger 2</div>
<div class="tab-pane fade" id="tab3danger">Danger 3</div>
<div class="tab-pane fade" id="tab4danger">Danger 4</div>
<div class="tab-pane fade" id="tab5danger">Danger 5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>回答by Brandt
To have the activetab also styled, merge the answer from this thread, from Mansukh Khandhar, with this other answer, from lmgonzalves:
要使active选项卡也有样式，请将来自 Mansukh Khandhar 的该线程的答案与来自 lmgonzalves 的其他答案合并：
.nav-tabs > li.active > a {
background-color: yellow !important;
border: medium none;
border-radius: 0;
}
