Home / Bootstrap / Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial sebelumnya kita sudah membahas tentang Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap. Kali ini akan membahas tentang cara membuat pills dan tabs dengan bootstrap. Selain menggunakan Navbar, Pills dan Tabs dapat dijadikan alterlatif lain dalam membuat navigasi menu website. Pills dan Tabs dapat juga digunakan pada content website sehingga content langsung di tampilkan berdasarkan kategori dalam bentuk tab.

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.

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 - 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">
                  <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">
                  <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, 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.

Hasilnya contoh pertama cara membuat tabs dan pills menggunakan bootstrap, seperti gambar berikut

Hasil contoh 1 Membuat Pills dan Tabs dengan Bootstrap

Hasil pada contoh diatas, tabs dan pills posisinya dimulai dari kiri dan tidak memenuhi halaman. 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. Hasilnya adalah sebagai berikut:

Hasil contoh 2 Membuat Pills dan Tabs dengan Bootstrap

Seperti yang saya sampaikan sebelumnya, 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. Hasilnya adalah sebagai berikut:

Hasil contoh 2 Membuat Pills dan Tabs dengan Bootstrap

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

Tutorial selanjutnya adalah Membuat Jumbotron dengan Bootstrap. Dalam tutorial tersebut kita akan membahas cara membuat sebuah content yang biasanya diletakkan di halaman utama website yang fungsinya untuk menonjolkan sebuah informasi.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *