Last active
March 20, 2022 11:30
-
-
Save theWhiteFox/d60951de593fc13544cd720b44ddafa3 to your computer and use it in GitHub Desktop.
Bootstrap tab panel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Bootstrap tab panel example | |
--------------------------- | |
This works on html 5 supported browsers. | |
A [Pen](https://codepen.io/wizly/pen/BlKxo) by [weiss](https://codepen.io/wizly) on [CodePen](https://codepen.io). | |
[License](https://codepen.io/wizly/pen/BlKxo/license). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div> | |
<div id="exTab1" class="container"> | |
<ul class="nav nav-pills"> | |
<li class="active"> | |
<a href="#1a" data-toggle="tab">Overview</a> | |
</li> | |
<li><a href="#2a" data-toggle="tab">Using nav-pills</a> | |
</li> | |
<li><a href="#3a" data-toggle="tab">Applying clearfix</a> | |
</li> | |
<li><a href="#4a" data-toggle="tab">Background color</a> | |
</li> | |
</ul> | |
<div class="tab-content clearfix"> | |
<div class="tab-pane active" id="1a"> | |
<h3>Content's background color is the same for the tab</h3> | |
</div> | |
<div class="tab-pane" id="2a"> | |
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> | |
</div> | |
<div class="tab-pane" id="3a"> | |
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> | |
</div> | |
<div class="tab-pane" id="4a"> | |
<h3>We use css to change the background color of the content to be equal to the tab</h3> | |
</div> | |
</div> | |
</div> | |
<hr></hr> | |
<div class="container"><h2>Example tab 2 (using standard nav-tabs)</h2></div> | |
<div id="exTab2" class="container"> | |
<ul class="nav nav-tabs"> | |
<li class="active"> | |
<a href="#1" data-toggle="tab">Overview</a> | |
</li> | |
<li><a href="#2" data-toggle="tab">Without clearfix</a> | |
</li> | |
<li><a href="#3" data-toggle="tab">Solution</a> | |
</li> | |
</ul> | |
<div class="tab-content "> | |
<div class="tab-pane active" id="1"> | |
<h3>Standard tab panel created on bootstrap using nav-tabs</h3> | |
</div> | |
<div class="tab-pane" id="2"> | |
<h3>Notice the gap between the content and tab after applying a background color</h3> | |
</div> | |
<div class="tab-pane" id="3"> | |
<h3>add clearfix to tab-content (see the css)</h3> | |
</div> | |
</div> | |
</div> | |
<hr></hr> | |
<div class="container"><h2>Example 3 </h2></div> | |
<div id="exTab3" class="container"> | |
<ul class="nav nav-pills"> | |
<li class="active"> | |
<a href="#1b" data-toggle="tab">Overview</a> | |
</li> | |
<li><a href="#2b" data-toggle="tab">Using nav-pills</a> | |
</li> | |
<li><a href="#3b" data-toggle="tab">Applying clearfix</a> | |
</li> | |
<li><a href="#4a" data-toggle="tab">Background color</a> | |
</li> | |
</ul> | |
<div class="tab-content clearfix"> | |
<div class="tab-pane active" id="1b"> | |
<h3>Same as example 1 but we have now styled the tab's corner</h3> | |
</div> | |
<div class="tab-pane" id="2b"> | |
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> | |
</div> | |
<div class="tab-pane" id="3b"> | |
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> | |
</div> | |
<div class="tab-pane" id="4b"> | |
<h3>We use css to change the background color of the content to be equal to the tab</h3> | |
</div> | |
</div> | |
</div> | |
<!-- Bootstrap core JavaScript | |
================================================== --> | |
<!-- Placed at the end of the document so the pages load faster --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
padding : 10px ; | |
} | |
#exTab1 .tab-content { | |
color : white; | |
background-color: #428bca; | |
padding : 5px 15px; | |
} | |
#exTab2 h3 { | |
color : white; | |
background-color: #428bca; | |
padding : 5px 15px; | |
} | |
/* remove border radius for the tab */ | |
#exTab1 .nav-pills > li > a { | |
border-radius: 0; | |
} | |
/* change border radius for the tab , apply corners on top*/ | |
#exTab3 .nav-pills > li > a { | |
border-radius: 4px 4px 0 0 ; | |
} | |
#exTab3 .tab-content { | |
color : white; | |
background-color: #428bca; | |
padding : 5px 15px; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment