Mendesain Web dengan Twitter Bootstrap

Published · Updated

Jika anda seorang pengembang web, web pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, side effects 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 baiknya kita memahami beberapa fitur dan komponen yang terdapat pada bootstrap.

1. Source 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 :

<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”css/bootstrap.min.css” type=”text//css”>
<link rel=”sstylesheet” href=”css/bootstrap-responsif.min.css” type=”text/css”
</head>

<body>

—-

<script src=”http://code.jquery.com/jquery.js”></script>
<script src=”js/bootstrap.min.js”></script>

</body>

Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada. Jika anda penasaran dengan hasil layout wensite menggunakan Bootstrap, silahkan klik di sini.

Nah, Bagaimana cara membuatnya? Tunggu tulisan saya selanjutnya yang akan membahas tentang Grid System…. 🙂

You may also like...