Tutorial Bootstrap – Cara Menggunakan Bootstrap


Mengapa Menggunakan Bootstrap?

Bootstrap memang bukan framework baru, bahkan versi terbarunya adalah Bootstrap 3.1.1 yang support responsive design. Mengapa kita perlu mengenal CSS framework ini? Tentunya karena framework ini begitu lengkap, memiliki dokumentasi yang komplit. Selain itu bootstrap memiliki komponen-komponen dan fitur yang lengkap seperti penjelasan dibawah.

Langkah Awal Menggunakan Bootstrap

Untuk menggunakan bootstrap, silakan mendownload terlebih dahulu Twitter Bootstrap dengan mengunjungi homepagenya di http://getbootstrap.com. File yang terdownload [boostrap.zip] mengandung 3 folder aset dari bootstrap yakni seperti gambar berikut:

bootstrap

Berikut isi dari 3 folder aset tersebut:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
├── img/
│   ├── glyphicons-halflings.png
│   ├── glyphicons-halflings-white.png

  1. css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan bootstrap.
  2. css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
  3. css/bootstrap-min.css dan
  4. css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan bootstrap-responsive.css
  1. img/glyphicons-halflings.png dan
  2. img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap dengan teknik spriting.
  1. js/bootstrap.js dan
  2. js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.

 

Buat file index.html dan copy script berikut ini

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My First Bootstrap project</title>
</head>
<body>
</body>
</html>

tambahkan link ke file bootstrap.css di folder css dalam tag  <head> dan include javascript files di paling akhir dari tag <body> , jangan di atas.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Test Bootstrap project</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<!-- Javascript files harus ditaruh di bawah untuk meningkatkan performa web -->
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

kita akan mulai mendesain. Tetapi sebelum itu, perlu diingat bahwa bootstrap menggunakan 12 grids, untuk membagi grids tersebut kita akan menggunakan “span”, misal : bila ingin membuat menu disebelah isi, kita dapat membaginya jadi “span4″ untuk menu dan “span 8″ untuk isi. Kita akan membuat :

  1. Header
  2. Marketing Area
  3. Leftside Bar dengan Content Area di satu baris
  4. Footer yang akan dibagi menjadi 2 bagian

Tambahkan ini dalam tag <body> di atas javascript files.

<div class="container">
 <h1><a href="#">Bootstrap Site</a></h1>

 <div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 <ul class="nav">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 </div>
</div>
</div>

Tulis coding ini ke dalam div “container”, jangan diluar. Baca lebih lengkap tentang button pada bootstrap disini.

<div class="hero-unit">
 <h1>Marketing stuff!</h1>
 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <a href="#" class="btn btn-large btn-success">Get Started</a>
</div>
 testbootpart2

3 Tanggapan

  1. mangstaps gans, yang butuh tambahan referensi silakan mampir gan,
    kesini
    http://gatewawan.blogspot.com/2013/12/cara-menggunakan-bootstrap-tutorial.html

    thnx

  2. terima kasih sudah berkunjung gan

  3. sama-sama gan .. thanks

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: