PENGENALAN BOOTSTRAP
Jika anda seorang pengembang web, pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, Flash dst. Atau bagi yang suka nye-cript…pasti hafal dengan elemen-elemen HTML, CSS bahkan Javascript atau JQuery.
Mendesain
website menggunakan program aplikasi, memang terasa lebih mudah dan
cepat, dibandingkan dengan cara menuliskan kode-kode (tag/elemen)
HTML/CSS/Javascript yang rumit. Namun, ada beberapa fasilitas tertentu
yang tidak didukung oleh beberapa program aplikasi tersebut, yang
memaksa seorang web developer untuk mengetikkan kode-kode tertentu untuk
mengatasinya.
Jika sudah begini, maka scripting adalah satu-satunya alternatif yang harus dilakukan :(
Twitter
bootstrap adalah suatu cara mendesain web atau membuat aplikasi
berbasis web dengan cara scripting yang sangat mudah dilakukan. Kenapa
saya bilang mudah? Karena eh..karena anda tidak perlu menghafalkan
banyak kode HTML/CSS/Javascript untuk membuat tampilannya, namun
hasilnya sangat bagus dan menarik. Tak kalah dengan template2 buatan CMS
terkemuka, seperti Joomla dan WordPress.
Dengan
menggunakan Boostrap, kita dapat dapat membuat layout halaman website,
tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah
website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS
(class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah
didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang
dibangun dengan menggunakan JavaScript.
Bootstrap
ini sendiri dikembangkan oleh Mark Otto (@mdo) dan Jacob Thornton
(@fat) dan didukung oleh hampir semua browser, baik Mozilla, Chrome,
Safari, Opera, bahkan Internet Explorer.
Bagaimana Cara memanfaatkan Twitter Bootstrap?
Sebelum
kita memulai membuat layout website menggunakan Twitter boostrap, ada b
aiknya kita memahami beberapa fitur dan komponen yang terdapat pada
bootstrap.
Yang
perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah
mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya
di sini.
Jika
anda sudah mendownloadnya, maka anda akan melihat sebuah file zip,
bernama bootstrap.zip, yang mana jika di-extract akan menjadi sebuah
folder Bootstrap, yang terdiri atas beberapa file berikut :
2. Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
Dari
struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap
untuk layout website kita, kita pasti faham, di mana seharusnya file
kita diletakkan.
3. Docs Section
Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :
Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts
Base
CSS : Bagian yang mengatur tampilan elemen HTML seperti typography,
code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan
ikon-ikon kecil.
Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.
Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.
4. Daftar Component Bootstrap
Berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
- Button groups
- Button dropdowns
- Navigational tabs, pills, and lists
- Navbar
- Labels
- Badges
- Page headers and hero unit
- Thumbnails
- Alerts
- Progress bars
- Modals
- Dropdowns
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
5. Cara menggunakan Boostrap
Untuk
membuat layout website menggunakan bootstrap, sama dengan ketika
mendesain menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya
perlu menambahkan pada bagian <head> </head> dan pada bagian
<body> </body> beberapa elemen berikut :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text//css">
</head>
<body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
