Bootstrap Tab Nav example
부트스트랩 탭 메뉴 예 ( Bootstrap Tab Navigation example )
Screen Shot
<!DOCTYPE html>
<html>
<head>
<title>Example of Twitter Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="jquery-2.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<style type="text/css">
</style>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<p>Tabs With Dropdown Example</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#svn" data-toggle="tab">SVN</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li><a href="#dotnet" data-toggle="tab">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#swing" data-toggle="tab">Swing</a></li>
<li><a href="#jmeter" data-toggle="tab">jMeter</a></li>
<li><a href="#ejb" data-toggle="tab">EJB</a></li>
<li class="divider" data-toggle="tab"></li>
<li><a href="#separatedLink" data-toggle="tab">Separated link</a></li>
</ul>
</li>
<li><a href="#php" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">Here is HOME</div>
<div class="tab-pane fade" id="svn">Here is SVN</div>
<div class="tab-pane fade" id="ios">Here is ios</div>
<div class="tab-pane fade" id="dotnet">Here is dotnet</div>
<div class="tab-pane fade" id="swing">Here is swing</div>
<div class="tab-pane fade" id="jmeter">Here is swing</div>
<div class="tab-pane fade" id="ejb">Here is ejb</div>
<div class="tab-pane fade" id="separatedLink">Here is separatedLink</div>
<div class="tab-pane fade" id="php">Here is PHP</div>
</div>
</body>
</html>