Membahas TUTORIAL NAV PILL MENGGUNAKAN BOOTSTRAP,
sebenarnya nav pill sama strukturnya dengan nav tab/menu tab dapat
dibuat tanpa harus menggunakan bootstrap juga dapat dilakukan, hal itu
tergantung pada teman-teman sekalian yang ingin menggunakannya. Namun
disini akan menggunakan bootstrap dikarenakan bootstrap adalah salah
satu framework css yang terpopuler dibeberapa tahun ini.
Setelah beberapa waktu lalu saya membuat tutorial TUTORIAL NAV TAB MENGGUNAKAN BOOTSTRAP, saat ini akan melaju untuk membuat nav tab
menggunakan bootstrap. adapun yang harus teman-teman miliki/siapkan seperti biasanya yaitu file bootstrap.
Dalam struktur penulisan kode HTML akan terlihat seperti dibawah ini, teman-teman dapat mencoba secara langsung dengan mengikuti kode-kode yang ada.
<!DOCTYPE html> <html> <head> <title>Bootstrap Nav Pills</title> <!-- Bootstrap Css --> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <!-- mulai container --> <div class="container"> <h1>Membuat Nav Pills Menggunakan Bootstrap</h1> <ul class="nav nav-pills"> <li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li> <li><a data-toggle="pill" href="#menu2" >Menu 2</a></li> <li><a data-toggle="pill" href="#menu3" >Menu 3</a></li> <li><a data-toggle="pill" href="#menu4" >Menu 4</a></li> </ul> <!-- mulai isi konten --> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>ini menu satu ya</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>ini menu dua ya</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>ini menu tiga ya</p> </div> <div id="menu4" class="tab-pane fade"> <h3>Menu 4</h3> <p>ini menu empat ya</p> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Perhatikan pada kode dibawah ini
<li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
data-toggledisini digunakan untuk memanggil menu tab pills agar dapat berfungsi ketika diklik. Demikian pula pada tag
<a href>
dengan attribut #menu1 hal ini digunakan untuk memanggil isi dari konten dari tab. Pada setiap tab pills memiliki attribut yang berbeda beda. Penerapan untuk menngunakan akan tampak seperti dibawah ini.
<div id="menu1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>ini menu satu ya</p> </div>
Hasil dari struktur kode diatas akan menjadi seperti dibawah ini.
Sekian dan selamat mencoba, tetap semangat dan mari berbagi .....
Tutorial Membuat Nav Pills dengan Mudah Menggunakan Bootstrap
Reviewed by creativekiller
on
January 11, 2018
Rating:
Reviewed by creativekiller
on
January 11, 2018
Rating:
No comments: