Tutorial Bootstrap : Cara Membuat Tab

Edisi tutorial kali ini akan membahas implementasi tab pada boostrap.  Penggunaan tab pada sebuah web berperan layaknya sebagai menu pada navigation bar.

Anda tidak perlu mendownload librari framework front-end Bootstrap, karena anda dapat mendownload secara keseluruhan source code dari tutorial ini, bahkan anda dapat melihat Live Preview terlebih dahulu sebelum memutuskan untuk mengdownloadnya.

Dalam percobaan pada tutorial ini, kita akan menggunakan template yang kita buat pada tutorial sebelumnya : Dropdown Login Menu Pada Navbar.  

Berikut ini adalah target output yang akan kita buat seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Jadi seperti yang ditunjukkan oleh Gambar.1, kita akan membuat empat buah tab yaitu : HTML, Bootstrap, Download dan About. 

Langkah 1

Pada langkah pertama, kita membuat file yang diberi nama index_tab.html. 

Pada file index_tab.html ini, tab yang diset aktif adalah "Home", sedangkan tab yang lainnya dalam keadaan menunggu untuk diaktifkan, yang artinya akan aktif ketika user mengklik masing-masing tab tersebut seperti yang ditunjukkan oleh script berikut :

<!-- Bagian Tab -->
<div class="container">
  <h3>Tutorial Bootsrap</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="tab_index.html">HTML</a></li>
    <li><a href="tutorial.html">Bootstrap</a></li>
    <li><a href="downloads.html">Downloads</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HTML</h3>
      <p>Tutorial tentang HTML</p>
    </div>
</div>
</div>
<!-- Akhir dari Tab -->

Langkah kedua

Buatlah sebuah file yang kita berinama bootstrap.html yang berisikan kode untuk tab Boostrap seperti script dibawah ini :

<!-- Bagian Tab -->
<div class="container">
  <h3>Tutorial Bootsrap</h3>
  <ul class="nav nav-tabs">
    <li><a href="tab_index.html">HTML</a></li>
 <li class="active"><a href="bootstrap.html">Boostrap</a></li>
    <li><a href="downloads.html">Downloads</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
<div class="tab-content">
   
    <div id="tutorial" class="tab-pane fade in active">
      <h3>Tutorial</h3>
      <p>Tutorial terlengkap tentang Boostrap </p>
    </div>
</div>
</div>
<!-- Akhir dari Tab -->

Langkah ketiga

Buatlah sebuah file yang kita berinama download.html yang berisikan script seperti berikut:

<!-- Bagian Tab -->
<div class="container">
  <h3>Tutorial Bootsrap</h3>
  <ul class="nav nav-tabs">
    <li><a href="tab_index.html">HTML</a></li>
 <li><a href="tutorial.html">Bootstrap</a></li>
    <li class="active"><a href="downloads.html">Downloads</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
<div class="tab-content">
    <div id="downloads" class="tab-pane fade in active">
      <h3>Tutorial</h3>
      <p>Kumpulan Tutorial Yang Dapat Anda Download</p>
   <ul>
  <li>Template Blog SEO</li>
  <li>Governement Template</li>
  <li>News Template</li>
   </ul>
    </div>
</div>
</div>
<!-- Akhir dari Tab -->

Langkah keempat

Buatlah sebuah file yang kita berinama about.html yang berisikan script seperti berikut:

<!-- Bagian Tab -->
<div class="container">
  <h3>Tutorial Bootsrap</h3>
  <ul class="nav nav-tabs">
    <li><a href="tab_index.html">HTML</a></li>
 <li><a href="bootstrap.html">Bootstrap</a></li>
    <li><a href="downloads.html">Downloads</a></li>
    <li class="active"><a href="about.html">About</a></li>
  </ul>
<div class="tab-content">
    <div id="about" class="tab-pane fade in active">
      <h3>About</h3>
      <p>Kami menyediakan konten yang berkualitas</p>
    </div>
</div>
</div>
<!-- Akhir dari Tab -->

Keempat file diatas akan membuat tab pada layout anda.  Silahkan download bagi anda yang memerlukan source code secara lengkap pada menu "Download" dibawah.

Live Preview    Download 

Tweet

Subscribe to receive free email updates: