我想使用Bootstrap 3创建自定义标签。
我所做的是-
<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>
我得到这样的标签-
但我要拥有的是定制颜色。我是Bootstrap 3的新手,所以我不知道该怎么做。
我想要的是这样的东西-
。
谁能帮我吗?
在此先感谢您的帮助。
在选择器上.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句