Kali ini kita akan belajar cara menggunakan bootstrap untuk mempercantik website. Kita kenalan dulu yuk dengan bootstrap. Bootstrap adalah framework css. Sebenarnya bootstrap bernama twitter bootstrap akan tetapi orang-orang menyebutnya dengan bootstrap saja. Bootsrap dikembangkan oleh Mark Otto and Jacob Thornton. Kedua orang ini bekerja di twitter. Mungkin karena itu namanya jadi twitter bootstrap.
Kenapa kita harus menggunakan bootstrap. Kita tahu kan betapa sulitnya membuat css sendiri –terutama bagi standalone programmer yang fokus pada program. Kita sudah buat bagus untuk chrome, ternyata di firefox tidak bagus. Betapa ribetnya membuat ukuran button yang pas. Dan masih banyak kerepotan-kerepotan yang lain. Dengan bootstrap kita dibantu untuk mengurangi kerepotan-kerepotan ini. Misalnya saja untuk button, bootstrap telah menyediakan ukuran normal, large, mini sehingga kita tidak perlu repot-repot membuat ukuran button yang pas.
LIHAT DEMOCara Menggunakan Bootstrap
Pertama, yang harus kita lakukan adalah download bootstrap. Teman-teman bisa download di web-nya secara langsung di sini. Setelah download, extract-lah hasil download tersebut. Berikut ini adalah tampilan setelah diextract. Pada gambar tersebut terdapat 3 buah folder, yaitu: css, fonts, dan js.
Folder Bootsrap terdiri dari 3 folder yaitu: css, fonts dan js
Setelah itu, kita buat sebuah halaman html. Simpan saja pada folder bootstrap. Pada halaman itu kita harus memasukkan elemen utama bootstrap. Berikut ini source codenya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <title>Belajar Bootstrap</title> <!-- elemen utama bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <script language="javascript" src="js/bootstrap.js"></script> </head> <body> <!-- isikan body di sini --> </body> </html> |
Elemen utama yang harus kita include adalah bootstrap.css, bootstrap-theme.css dan bootstrap.js. Teman-teman juga bisa menggunakan versi min, yaitu bootstrap.min.css, bootstrap-theme.min.css dan bootstrap.min.js. Ukuran versi min jauh lebih kecil. Aku sendiri juga menggunakan versi min untuk production.
Mulai Menggunakan Bootstrap
Jika langkah pertama sudah, kita akan mulai menggunakan bootstrap. Kita mulai dengan beberapa contoh sederhana penggunaaan bootstrap.
|
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 |
<html> <head> <title>Belajar Bootstrap</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <script language="javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <h1>Belajar Bootstrap</h1> <p>Belajar bootstrap bareng Ardhan</p> <h2>Contoh Button</h2> <button class="btn btn-danger">Button</button> <h2>Contoh Link dengan Button</h2> <a href="http://www.rahmanu.com" class="btn btn-success">Link ke Rahmanu.Com</a> <h2>Contoh Penggunaan Label</h2> <span class="label label-primary">berikut ini adalah label</span> <h2>Contoh Alert</h2> <div class="alert alert-danger"> <strong>Well done!</strong> You successfully read this important alert message. </div> <h2>Contoh Progress Bar</h2> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div> </div> </div> </body> </html> |
Dan, inilah hasil yang kita peroleh dari barisan kode di atas.
Contoh Cara Menggunakan Bootstrap
Nah, demikianlah cara menggunakan bootstrap dan sedikit contoh penggunaannya. Lain kali akan kita bahas lebih banyak lagi tentang bootstrap. Selamat belajar dan selamat mencoba.