Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap
Membuat Navigasi Tabs dan Pills Bootstrap
Ini dia class bootstrap yang paling banyak di gunakan dan sangat besar kegunaannya dalam membangun sebuah front-end yang modern dan sangat menghemat waktu. yaitu anda dapat membuat navigasi tabs dan pills dengan sangat cepat tentunya sangat menghemat waktu. karena anda hanya perlu menambahkan class-class yang di sediakan oleh bootstrap untuk membuat navigasi yang berbentuk tabs dan navigasi pills dengan bootstrap.
silahkan perhatikan penjelasan berikut ini untuk membuat navigasi tabs dan pills dengan bootstrap.
Membuat menu navigasi tabs
Navigasi tabs di buat menggunakan class “nav nav-tabs”. class “nav” untuk mendefinisikan bahwa yang kita buat adalah navigasi. dan “nav-tabs” di gunakan untuk membuat navigasi dengan bentuk tabs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap</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 | www.malasngoding.com</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” 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.
membuat navigasi tabs dan pills bootstrap
dapat di lihat pada contoh di atas navigasi tabs sudah jadi. dan untuk membuat navigasi tabs yang memiliki dropdown dapat perhatikan contoh berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-tabs"> <li class="active"><a href="https://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> |
See the Pen Membuat navigasi tabs bootstrap by Malas Ngoding (@malasngoding) on CodePen.0
Membuat Dynamic tabs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap</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 | www.malasngoding.com</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.malasngoding.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> |
See the Pen Membuat konten dynamic tabs by Malas Ngoding (@malasngoding) on CodePen.0
Membuat Menu Navigasi Pills
Untuk membuat navigasi pills tambahkan class “nav nav-pills”.
|
1 |
<ul class="nav nav-pills"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap</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 | www.malasngoding.com</h1> <br/> <ul class="nav nav-pills"> <li class="active"><a href="https://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> |
membuat navigasi pills dengan bootstrap
dan cara membuat pills dengan bentuk vertikal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap</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 | www.malasngoding.com</h1> <br/> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="https://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> |
membuat nav pills vertikal dengan bootstrap
Sekian tutorial bootstrap part 11 : Membuat navigasi tabs dan pills bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
Pak kalo perintah pindah tab pake javascript gimana pak? bukan pake href=””
jadi saya mengieim data pake javascript, setelah penyimpana berhasil saya ingin pindah tab.
terima kasih pak sebelumnya.
pakai alternatif lain aja mas, pakai window aja, jadi datanya di buka di window baru, pakai javascript juga