HASANONTA - Melanjutkan tutorial Bootstrap sebelumnya, kali ini kita akan belajar sebuah class Bootstrap yang paling banyak digunakan dan sangat besar kegunaannya dalam membangun sebuah front-end website yang modern dan menghemat waktu dalam pembuatanya. yaitu anda dapat membuat navigasi tabs dan pills dengan sangat cepat dan tentunya modern. karena anda hanya tinggal memasukkan class-class yang telah disediakan oleh Bootstrap Bootstrap.
Membuat Menu Navigasi Tabs
Navigasi Tabs dibuat menggunakan class "nav nav-tabs". class "nav" digunakan untuk mendefinisikan bahwa kita akan membuat sebuah navigasi. dan class "nav-tabs" digunakan untuk membuat navigasi dengan bentuk tabs. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</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">
<h1>Membuat Navigasi Tabs dan Pills Bootstrap | HasanOnta</h1>
<br/>
<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>
class "nav" dan "nav-tabs" diletakkan didalam tag <ul>. sedikit tambahan tentang penggunaan class "active" dan class "disabled" dalam membuat navigasi tabs. anda bisa menambahkan class active atau disabled pada tag <li> di tampat yang anda inginkan.
Output :
Dapat dilihat diatas bahwa navigasi tabs sudah jadi. dan jika anda ingin menambahkan navigasi tabs yang memiliki drodown bisa dilihat di contoh ini :
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</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">
<h1>Membuat Navigasi Tabs dan Pills Bootstrap | HasanOnta</h1>
<br/>
<ul class="nav nav-tabs">
<li class="active"><a href="http://www.malasngoding.com">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>
Output :
Membuat Dynamic tabs
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</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">
<h1>Membuat Navigasi Tabs dan Pills Bootstrap | HasanOnta</h1>
<br/>
<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.hasanonta.ga</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Tutorial pemrograman web</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>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar