Pengertian
Navigasi biasanya di gunakan developer unutk memberikan fiture - fiture tambahan seperti menu-menu , dan di sini kita akan membahas tentang navigasi tabs,Navigasi tabs di buat menggunakan class "nav nav-tabs". class "nav" unutk mendefinisikan bahwa yang kita buat adalah navigasi . dan "nav-tabs" di gunakan unutk membuat navigasi dengan bentuk tabs.
Membuat menu navigasi tabs
Di sini saya akan memberikan source code membuat navigasi tabs :
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li> </ul>
</div>
</body>
</html>
calss "nav" dan "nav-tabs" di letakkan pada tag <ul> . sedikit penjelasan tambahan tentang penggunaan class "active" dan "disabled" dalam membuat navigasi tabs . anda bisa menambahkan class active atau disabled pada tag li yang anda inginkan .
dapat di lihat pada contaoh di bawah ini navigasi tabs sudah jadi , dan selanjutnya unutk membuat navigasi tabs yang memiliki dropdown dapat perhatikan contoh di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</body>
</html>
Membuat Dynamic tabs
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>www.bimablctelkom.com</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Tutorial pemrograman web, mobile dan design</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Membuat navigasi tabs dan pills bootstrap.</p>
</div>
</div>
</div>
</body>
</html>
Membuat Menu Navigasi Pills
Untuk membuat navigasi pills tambahkan class "nav nav-pills".
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="http://www.malasngoding.com">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</body>
</html>
dan cara membuat pills dengan bentuk vertikal
<!DOCTYPE html>
<html>
<head>
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</body>
</html>
Sekian Tutorial Membuat Tabs dan Pills bootstrap ,
No comments:
Post a Comment