Bagaimana Cara Menggunakan BOOTSTRAP

Pada Kesempatan ini, saya akan mencoba berbagi cara menggunakan bootstrap secara umum. Siapkan secangkir kopi..=)

Pertama, download bootstrap (saya menggunakan versi 2.3.2) buat folder (nama terserah) lalu buat file index.html . Ekstrak zip bootstrap, copy semua folder (css, img, js) ke dalam folder contoh kita.

2013-08-18_211118

Kedua, isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal karena kita akan menggunakan HTML5.

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

Ketiga, 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>My First 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>

Keempat, 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>
 <h1><a href="#">Bootstrap Site</a></h1>

 <div>
 <div>
 <div>
 <ul>
 <li><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>

2013-08-18_211210

Kelima, kita akan membuat marketing area menggunakan class “hero-unit”. 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>

2013-08-18_211613

Keenam, sekarang kita akan membuat area yang akan dibagi menjadi dua, satu untuk leftside bar (menu) dan satu lagi disebelah kanan untuk content area. Kita akan menggunakan div dengan class row sebagai container area ini karena secara default, span akan float ke kiri, kalau tidak menggunakan div dengan class row maka div span4 dan div span8 tidak akan bisa sejajar.

<div class="row">
 <div>
 <p>Dummy Text</p>
 </div>
 <div>
 <p>Dummy Text</p>
 </div>
</div>

2013-08-19_104814

Ketujuh, kita akan mengisi leftside bar span4 dengan menggunakan class nav dan turunannya class nav-list agar terlihat seperti list/daftar. Sedangkan nav-header untuk membuat judul.

<div>
 <div>
 <ul class="nav nav-list">
 <li>What we are?</li>
 <li><a href="#">Home</a></li>
 <li><a href="#">Our Clients</a></li>
 <li><a href="#">Our Services</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>

 <li>Our Friend</li>
 <li><a href="#">Google</a></li>
 <li><a href="#">Yahoo!</a></li>
 <li><a href="#">Bing</a></li>
 <li><a href="#">Microsoft</a></li>
 <li><a href="#">Gadgetic World</a></li>
 </ul>
 </div>

 <div>
 <p>Dummy Text</p>
 </div>
 </div>

2013-08-19_105548

Kedelapan, kita akan mengisi bagian content area span8 dengan paragraf.

<div>
 <h3>How we started ?</h3>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

 <h3>How do we market?</h3>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>

2013-08-19_105833

2013-08-19_105824

Terakhir, kita akan menambahkan footer, footer akan dibagi menjadi tiga bagian yang sama besar, karena boostrap menggunakan 12grids maka untuk mendapatkan tiga bagian yang sama besar harus dibagi menjadi 4-4-4, jadi kita menggunakan span4 untuk ketiga div kita. Jangan lupa untuk membuat div dengan class row terlebih dahulu.

<div>
 <div>
 <h4>Meet Our Clients</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#"><i></i> Our Clients</a>
 </div>

 <div>
 <h4>Know Our Employees</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#"><i></i> Our Employees</a>
 </div>

 <div>
 <h4>Reach Us</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#">Contact Us</a>
 </div>
</div>

<hr> <!--Garis Batas-->
<div>
 <p>&copy; 2013</p>
</div>

2013-08-19_110641

Tambahan, kita dapat membuat menu dropdown untuk menu navigasi kita dengan menggunakan class dropdown pada tag <li>.

<div>
 <div>
 <div>
 <ul>
 <li><a href="#">Home</a></li>
 <li>
 <a href="#" data-toggle="dropdown">
 <i></i>Projects
 <b></b>
 </a>

 <ul>
 <li><a href="#">Item1</a></li>
 <li><a href="#">Item2</a></li>
 <li><a href="#">Item3</a></li>
 </ul>
 </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>

2013-08-19_112540

Download Source Code

Download Bootstrap 2.3.2 mirror link

Sumber : http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

This entry was posted in eTutors and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *