Ich möchte eine benutzerdefinierte Registerkarte in Bootstrap 3 erstellen.
Was ich getan habe ist
<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>
Und ich bekomme eine Registerkarte wie diese
Aber ich möchte, dass es farbig angepasst wird ... Ich bin neu in Bootstrap 3, daher weiß ich nicht, wie es geht.
Was ich will ist so etwas-
.
Kann mir jemand bitte helfen?
Vielen Dank im Voraus für Ihre Hilfe.
Auf dem Selektor .nav-tabs > li > a:hover
fügen Sie !important
zum background-color
hinzu.
.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>
Ich denke, Sie sollten den Anker-Tag in der Datei bootstrap.css bearbeiten. Andernfalls geben Sie dem Anker-Tag einen benutzerdefinierten Stil mit! wichtig (um den Stil in bootstrap.css zu überschreiben).
Beispielcode-
.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>
.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/>
Um die Registerkarte active
ebenfalls zu formatieren, kombinieren Sie die Antwort aus diesem Thread von Mansukh Khandhar mit diese andere Antwort von lmgonzalves :
.nav-tabs > li.active > a {
background-color: yellow !important;
border: medium none;
border-radius: 0;
}