Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Saturday 15 April 2017

Belajar Bootstrap Part 11 Membuat Navigasi Tabs & Pills Dengan Bootstrap


Assalamualaikum Wr. Wb.





PENGERTIAN

Bootstrap juga menyediakan class-class yang dapat digunakan untuk membuat Pills dan Tabs. Meskipun fungsi pills dan tabs tidak jauh berbeda dengan Navbar, tetapi cara penggunaan class pills dan tabs berbeda dengan class navbar yang pernah kita bahas pada tutorial cara membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap.
LATAR BELAKANG

Mendalami belajar framework bootrap.

MAKSUD & TUJUAN

Dengan menggunakan framework bootstrap diharapkan kita lebih mudah dalam membuat tab dan phils tersebut. 

ALAT & BAHAN
  • Bootstrap
  • Laptop/PC
  • Text Editor
  • Browser  

PEMBAHASAN

Class pills dan tabs berada dalam List, jadi penggunaanya hampir sama dengan tutorial sebelumnya mengenai cara membuat List Group Dengan Bootstrap. Penempatan class pills dan tabs terlebih dahulu diawali dengan class nav serta diletakkan dalam tag <ul> dan dalam tag <li> hanya diberikan role. Pemberian role dalam tag <li> ini yang membedakan dengan tutorial sebelumnya mengenai List group, yang di dalam tag <li> juga diberikan class list-group-item.
Untuk lebih jelasnya mengenai penggunaan class pills dan tabs silakan lihat contoh berikut:


<! DOCTYPE html>
<html>
  <head>
    <title> MEMBUAT Pills Dan Tabs DENGAN Bootstrap </ title>
    <link href = "css / bootstrap.min.css" rel = "stylesheet">
  </ head>
    <body>
    <div class = "container">
        <div class = "row">
            <div class = "col-md-12">
                <h3> INI Adalah Contoh Tab </ h3>
                <ul class = "nav nav-tab">
                  <peran li = "presentasi" class = "aktif"> <a href="#"> Bootstrap </a> </ li>
                  <li role = "presentasi"> <a href="#"> PHP </a> </ li>
                  <peran li = "presentasi"> <a href="#"> C ++ </a> </ li>
                  <peran li = "presentasi"> <a href="#"> VB.Net </a> </ li>
                </ ul>
                <h3> INI Adalah contoh Pills </ h3>
                <ul class = "nav nav-pil">
                  <peran li = "presentasi" class = "aktif"> <a href="#"> Bootstrap </a> </ li>
                  <li role = "presentasi"> <a href="#"> PHP </a> </ li>
                  <peran li = "presentasi"> <a href="#"> C ++ </a> </ li>
                  <peran li = "presentasi"> <a href="#"> VB.Net </a> </ li>
                </ ul>
            </ div>
        </ div>
    </ div>
  <script src = "js / jQuery v3.2.0.js"> </ script>
  <script src = "js / bootstrap.min.js"> </ script>
  </ body>
</ html>
Pada contoh diatas, untuk membuat tabs dimulai dari baris 12 sampai 17. Penggunaanya dengan cara meletakkan class nav nav-tabs dalam tag <ul> dan pada list tabnya pada tag <li> diberikan role presentation
Untuk membuat Pills, dimulai dari baris 19 sampai 24. Sama halnya dengan Tab, class Pills nav nav-pills juga diletakkan pada tag <ul> dan list pillsnya pada tag <li> diberikan role Presentation. 


Pills dan tabs juga dapat di buat posisinya di tengah dan langsung memenuhi sebuah halaman. Caranya dengan menambahkan class tab-justified pada tag <ul>.

Berikut penggunaan class tab-justified:


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Pills dan Tabs dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">  
                <h3> Ini adalah Contoh Tabs</h3>
                <ul class="nav nav-tabs nav-justified">
                  <li role="presentation" class="active"><a href="#">Bootstrap</a></li>
                  <li role="presentation"><a href="#">PHP</a></li>
                  <li role="presentation"><a href="#">C++</a></li>
                  <li role="presentation"><a href="#">VB.Net</a></li>
                </ul>
                <h3> Ini adalah contoh Pills</h3>
                <ul class="nav nav-pills nav-justified">
                  <li role="presentation" class="active"><a href="#">Bootstrap</a></li>
                  <li role="presentation"><a href="#">PHP</a></li>
                  <li role="presentation"><a href="#">C++</a></li>
                  <li role="presentation"><a href="#">VB.Net</a></li>
                </ul>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Tidak ada perbedaan dengan contoh sebelumnya, diatas hanya ditambahkan class nav-justified di tag <ul> pada baris 12 dan 19. 

Pills dan tabs juga dapat dijadikan navigasi menu, yag di tempatkan di sebelah kiri atau kanan halaman website. Cara penggunaanya dengan menambahkan class nav-stacked pada tag <ul>. Berikut ini contoh selanjutnya tentang cara membuat pills dan tabs dengan bootstrap:


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Pills dan Tabs dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">  
                <h3> Ini adalah Contoh Tabs</h3>
                <ul class="nav nav-tabs nav-stacked">
                  <li role="presentation" class="active"><a href="#">Bootstrap</a></li>
                  <li role="presentation"><a href="#">PHP</a></li>
                  <li role="presentation"><a href="#">C++</a></li>
                  <li role="presentation"><a href="#">VB.Net</a></li>
                </ul>
                <h3> Ini adalah contoh Pills vertical</h3>
                <ul class="nav nav-pills nav-stacked">
                  <li role="presentation" class="active"><a href="#">Bootstrap</a></li>
                  <li role="presentation"><a href="#">PHP</a></li>
                  <li role="presentation"><a href="#">C++</a></li>
                  <li role="presentation"><a href="#">VB.Net</a></li>
                </ul>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada contoh diatas, hanya ditambahkan class nav-stacked pada tag <ul> untuk membuat posisi Tabs dan Pills horizontal. Umumnya Pills lah yang dijadikan navikasi menu pada sidebar website.

Demikian tutorial Membuat Pills dan Tabs dengan Bootstrap, yang memungkinkan kita membuat navigasi alternatif selain menggunakan Navbar. Selamat mencoba dan semoga bermanfaat! 


Wassalamualaikum Wr. Wb.

Referensi

http://itgeek.id

No comments:

Post a Comment

Adbox