Buat bisnismu menarik dengan menggunakan layanan kami. Klik disini.
Beranda
Widget

Cara Membuat Tab Content Bootstrap

Bootstrap

Menu Tab adalah sederetan menu yang ditandai dengan teks. terdiri dari tab File, Insert, Page Layout, dll. Ribbon adalah area yang digunakan untuk menampilkan tab dan menu dari tab yang aktif. Sedangkan Group adalah kelompok menu dalam tiap Ribbon yang memiliki kesamaan fungsi.untuk membuat tab ini bisa olah menggunakan css. tpi ada cara yang lebih mudah dan cepatnya yaitu mengunakan Bootsrap.

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Membuat TAB menggunakan Bootsrap sangatlah mudah codenya bisa di ambil di website resminya www.getbootsrap.com pada menu javascrip disana juga bnyak komponen-komponen yang sudah jadi yang telah menggunakan javascript sehingga web kita akan jadi lebih interaktiv.

Cara membuat menu tab menggunakan bootstrap yang pertama harus agan ketahui adalah cara instalansi bootsrap jika agan belum tau bisa baca di cara instalansi bootsrap online dan offline.

lihatlah contoh code html menggunakan menu tab dibawah ini. silahkan di ambil dan digunakan untuk keperluan anda.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar membuat menu tab</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">TAB 1</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">TAB 2</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">TAB 3</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">TAB 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
        <h1> Hallo ini adalah Isi tab satu</h1>
    </div>

    <div role="tabpanel" class="tab-pane" id="profile">
    <h1> dan ini adalah Isi tab dua</h1></div>

    <div role="tabpanel" class="tab-pane" id="messages">
       <h1> welcome ini Isi tab tiga</h1></div>

    <div role="tabpanel" class="tab-pane" id="settings">
    <h1> terakhir ini contoh Isi tab empat</h1></div>
  </div>

</div>
</div>

</body>
</html>

Sekian tutorial Cara Membuat Tab Content Bootstrap. Semoga dapat memberikan manfaat. Terima Kasih. Kalau ada pertanyaan silahkan komentar dibawah!.

Kira-kira kalian mau dibuatkan artikel tentang apalagi? Tuliskan di kolom komentar