Kategori Random

Bootstrap : Membuat Tab Horizontal

Posted : 20 Februari 2015 | 04:58:20 , Dibaca 5010 kali

Taukah anda tab? bagi yang belum tau adalah menu-menu yang tersusun kesamping dan dapat berisi content seperti text, image, form ataupun yang lainnya. Seperti pada browser jika kita membuka halaman baru tanpa menutup halaman sebelumnya dan halaman baru akan tampil pada tab.

 

Pada sebagian orang termasuk saya, membuat tab secara manual bisa saya bilang susah dan sulit. Dengan adanya plugin-plugin seperti saat ini sangat membantu dalam membuat tab ini. Seperti halnya bootstrap juga memberikan kemudahan bagi kita dalam membuat tab yang cantik dan indah. Baik mari kita mulai membuatnya

Perlu dipersiapkan core bootstrap dan jquery.

Langkah Awal

Buatlah halaman dengan format html berinama tab.html buatkan isinya seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Faber Nainggolan">

    <title>Tab Bootstrap 3</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- styles untuk template -->
    <link href="css/style.css" rel="stylesheet">

  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">Membuat Tab Bootstrap </h1>
        <p class="lead blog-description">Contoh membuat tab dengan Bootstrap.</p>
      </div>

      <div class="row">

        <div class="col-sm-8 blog-main">

        <!-- content blog anda isikan disini-->

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
          </div>


        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <div class="blog-footer">
      <p>Template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="http://twitter.com/@mdo">@4ber</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

Pada skrip diatas saya ambil contoh template yang sudah tersedia di bootstrap dan sedikit saya modifikasi.

Langkah Akhir

Kemudian sisipkan kode berikut ini dibawah <!-- content blog anda isikan disini-->

  <ul class="nav nav-tabs">
          <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
          <li><a href="#profil" data-toggle="tab">Profil</a></li>
          <li><a href="#about" data-toggle="tab">About</a></li>
          <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
        <!-- Tab panes content dari tab di atas -->
        <div class="tab-content">
          <div class="tab-pane active" id="home">Welcome tab 1 </div>content langsung active-->
          <div class="tab-pane" id="profil">
          Profil<br>
            Faber Nainggolan
          </div>
          <div class="tab-pane" id="about">Bootstrap adalah framework css yang dibangun oleh twitter</div>
          <div class="tab-pane" id="settings">Settingan semua dapat dilakukan</div>
        </div>

Penjelasan Skrip

  1. Tab pada bootstrap menggunakan tag ul dan sebagai tampilannya menggunakan div.
  2. Pada baris 3 terdapat li dan diberi class active digunakan agar tab yang aktif pertama kali adalah li yang diberi class active
  3. Pada a href setiap li dibuat #.. sebagai id penanda pada tab contentnya, jadi setiap ingin menambah tab berikan #diikuti_nama_tab_contentnya
  4. Pada baris 10 diberi class active juga, agar tab li ul mendapat pasangan yang aktif.

Demikian tutorial kali ini semoga bermanfaat.

Hasil akhir tab

Source Code

 

Postingan Terkait
» Modal Bootstrap tahap III: Membawa kode unik ke modal ( 05 Apr 2017 | 06:24:03 , 214 hits )
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 185 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 4503 hits )
» Trik Zoom Image View pada postingan dengan CSS ( 23 Sep 2015 | 07:05:18 , 2060 hits )
» Membuat Modal Bootstrap PHP ( 19 Mar 2015 | 03:00:11 , 13058 hits )