Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit.. Tapi Syukurlah, Karena Bootstrap memberikan banyak kemudahan dalam bisang Web Design diantaranya kemudahan untuk membuat Tab.. Apa itu Tab? Coba lihat bagian atas Browser anda.. Inilah Tab.. ...

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

Asalamualaikum..

Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..

Tapi Syukurlah, Karena Bootstrap memberikan banyak kemudahan dalam bisang Web Design diantaranya kemudahan untuk membuat Tab..

Apa itu Tab?

Coba lihat bagian atas Browser anda..

Inilah Tab..

Tabs Browser

Ya, tapi sekarang kita akan membuat Tab untuk website agar tampilan website lebih rapi dan cantik..

Nah, sekarang saya ingin memberikan tutorial “Cara Membuat Tab dengan Bootstrap”.

Kenapa harus dengan Bootstrap?

Karena untuk memudahkan membuat tap hanya dengan class CSS saja tanpa perlu mengerti jQuery..

Sekarang kita mulai tutorialnya..

Siapkan Alat dan Bahanya..

  1. Laptop atau benda sejenisnya.
  2. Browser.
  3. Text editor.
  4. Jquery. Versi 1.7 keatas, bias di download di situs resminya..
  5. Bootstrap 3. Saya disini menggunakan Bootstrap v.3..

Jika semua sudah terkumpul saatnya saya mulai..

Langkah 1

Niat.. *Ini Penting..

 

Langkah 2

Nyalakan Laptop atau benda sejenisnya..

Buka Text editor..

 

Langkah 3

Buat folder , terserah dimana saja. Misal D: coba..

Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap.

Sekarang kita extrak bootstrap 3 yang sudah ada..

Seperti ini..  

Extrak BOOTSTRAP 3

Hasil struktur Foldernya jadi seperti ini..

coba
>bootstrap
>>css
>>fonts
>>js

 

Langkah 4

Sekarang kita letakan jQuery.min.js di  coba>bootstrap>js..

Seperti ini..

Move jQUERY

 

Langkah 5

Sekarang kita mulai coding..

Buat dulu code struktur dasar untuk bootstrap..

Patekan Code ini ke text editor kamu..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Membuat Button Bootstrap</title>
  
    <!-- dibawah sini CSS Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- dibawah sini CSS kamu, contoh <link href="MyStyle.css" rel="stylesheet">-->
      
    <!-- JS untuk IE -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
  </head>
  <body>
 
 
  <!-- Content START -->
 
 
 
 <!-- Content END -->
 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Kita akan coding diantara Content Start dan END..

 

Langkah 6

Sekarang kita akan membuat beberapa tab, Coba lihat betapa mudahnya membuat tab dengan Bootstrap

Pastekan code ini di antara Content Start dan END, fungsi dari barisan code sudah ada di Komentar Code..

<h1>Tab Mudah dengan Bootstrap</h1>
<!-- Nav tabs, ini tombol tab di atas -->
<ul class="nav nav-tabs">
<!-- Untuk Semua Tab.. pastikan a href=”#nama_id” sama dengan nama id di “Tap Pane” dibawah-->
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <!-- Untuk Tab pertama berikan li class=”active” agar pertama kali halaman di load tab langsung active-->
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes, ini content dari tab di atas -->
<div class="tab-content">
  <div class="tab-pane active" id="home">Selamat datang</div><!-- Untuk Tab pertama berikan div class=”active” agar pertama kali halaman di load content langsung active-->
  <div class="tab-pane" id="profile">Profil saya</div>
  <div class="tab-pane" id="messages">Sangat Mudah membuat Tap dengan Bootstrap</div>
  <div class="tab-pane" id="settings">Setting di sini..</div>
</div>

Lalu save file ini dengan nama index.html di folder coba..

 

Langkah 7

Buka index.html tadi..

Open with Browser anda..

Hasilnya..

Tabs Bootstrap

 

Selesai..

 

Untuk mendapat update tutorial dari saya, silahkan click tombol “Follow” dibawah Foto saya di atas..

Original Posted By : Arinadi Nur Rohmad


About Author

Arinadi Nur Rohmad

Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..


Comment & Discussions

  • milejolim (Guest)
    thanks banget infonya :)

  • Maaf Ane lupa password, system lupa password jagocoding lg troble..
    layangkan komentar di http://arinadi-nr.blogspot.com
    udah tak repost kesana.. trimakasih

  • yang tampil ko g sama yaa,,
    simpen file bootstrapnya dimana bro??
    file:///C:/xampp/htdocs/bootstrap/coba/js
    yang tampil cuma tulisan nya

  • Freddy Sidauruk
    gak jalan yang ini :(

  • Fajar Hakiki
    So, Nice. :)

  • Please LOGIN before if you want to give the comment.