[bootstrap] tabs/pills

bootstrap-tabs-pills.markdown

[bootstrap] tabs/pills

A Pen by Souffle on CodePen.

License.

index.html

<div class="container">

			<h3>Tabs</h3>
			<ul class="nav nav-pills">
  <li class="active"><a href="#home">Home</a>
  </li>
				  <li><a href="#profile">profile</a></li>
				  <li><a href="#messages">messages</a>
  </li>
				  <li><a href="#settings">settings</a></li>
			</ul>
		
			<div class="tab-content clearfix">
			  <div class="tab-pane active" id="home">
			  	<li>aaaaa</li>
			  	<li>bbbbb</li>
			</div>

			<div class="tab-pane fade" id="profile">
			  	<li>aaaaa</li>
			  	<li>bbbbb</li>
			  	<li>ccccc</li>
			</div>

			<div class="tab-pane fade" id="messages">
			  	<li>aaaaa</li>
			  	<li>bbbbb</li>
			  	<li>ccccc</li>
			  	<li>ddddd</li>
			</div>

			<div class="tab-pane fade" id="settings">
			  	<li>aaaaa</li>
			  	<li>bbbbb</li>
			  	<li>ccccc</li>
			  	<li>ddddd</li>
			  	<li>eeeee</li>
			</div>

		</div>

script.js

$('.nav-pills a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>

style.css

.nav-pills, .tab-content{
	box-sizing: border-box;
}
.nav-pills{
  margin: 0;
	border-radius: 5px 5px 0 0;
	background: rgba(255,200,180,0.6);
	font-weight: bold;
}

.nav-pills li a{
  margin: 0;
  padding: 15px;
	border-radius: 5px 5px 0 0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus{
  color: #000;
  background-color: rgba(255,200,180,0.6);  
} 

.tab-content{
	padding: 20px 50px;
	background: rgba(255,200,180,0.8);
	font-size: 1.2em;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />