Jumat, 05 September 2014

Filled Under:

Apa Itu Bootstrap


Apa itu Bootstrap?, mungkin dikalangan web developer atau pengembang website bootstrap sangatlah familiar di telinga mereka, kehadiran bootstrap telah memicu pengembangan terutama dikalang web design, menurut sumber dalam situs Wikipedia Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS(class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript. (http://id.wikipedia.org/wiki/Twitter_Bootstrap)

Jadi intinya Bootsrap merupakan sebuah framework yang mempermudah seorang web developer dalam mendesain tampilan website yang diharapkan pengembangan website dapat tercapai dengan lebih cepat.

Bagaimana Cara mengimplementasikan 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 nya di sini http://getbootstrap.com

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 :





















3. Daftar Component Bootstrap
berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
  • Navbar
  • Dropdowns
  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Cara Menggunakan Bootstrap

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 charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.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. Nah, Bagaimana cara membuatnya? Tunggu tulisan saya selanjutnya yang akan membahas tentang Grid System.


The Author :

1 komentar:

  1. wahhhh sepertinya sudah layak untuk membuat workshop ini

    BalasHapus