Apa itu Bootstrap?
Seperti yang telah dikatakan sebelumnya, Bootstrap merupakan sebuah framework CSS, yang menyediakan kumpulankomponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.
Mengutip pengembang yang menciptakan Bootstrap, Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Mendapatkan Bootstrap
dan integrasinya dengan
javascript
Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://getbootstrap.com/ dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap.
Selesai download, anda akan memiliki file bootstrap.zip yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama dengan bootstrap.html, sehingga sekarang kita memiliki file seperti berikut:
dengan isi dari masing-masing direktori yaitu:
2. bootstrap.min.css
3. bootstrap-responsive.css
4. bootstrap-responsive.min.css
Direktori “img memiliki dua buah file di dalamnya, yaitu:
1. glyphicons-halflings.png
2. glyphicons-halflings-white.png
Direktori “js” memiliki dua buah file di dalamnya, yaitu:
1. bootstrap.js
2. bootstrap.min.js
Jika seluruh file yang ada telah sama, maka kita telah siap menggunakn Bootstrap!
Checkpoint: Sebelum masuk ke langkah selanjutnya, pastikan file yang ada pada direktori percobaan anda telah sama dengan daftar file yang ada di atas.
Fitur Bootstrap dan Penggunaannya
Glyphicons
Sebanyak 200 glyps pada format tulisan dari Glyphicon Halflings. Ikon ini tidak didapatkan secara gratis namun pembuat ikon ini
menyediakannya untuk bootstrap tanpa biaya unduh.
Dropdowns
Menu-menu yang biasanya ditampilkan dalam bentuk list atau daftar bisa dibuat interaktif denganToggleable dropdown JavaScript plugin.
tuliskan dropdown's trigger dan the dropdown menu dengan .dropdown, atau dengan elemen deklarasi lainnya position: relative;. Tuliskan kodenya pada HTML.
Alignment
options
tambahkan.pull-right to a .dropdown-menu to right align the dropdown menu.
Headers
tambahkan kop pada penanda di dropdown menu
Disabled menu items
Button groups
Kelompokkan satu seri tombol bersama pada 1 garis dengan button group. Tambahkan pada pilihan JavaScript dan checkbox dengan button plugin.
Contoh dasar
Button Toolbar
Nesting
Justified Link Variation
Sizing
Breadcrumbs
Jumbotron
Penggunaan Class CSS
Untuk menggunakan CSS Bootstrap, Download CSS bootsrap di SINI di folder css terdapat 4 file yaitu bootstrap.css, bootstrap.min.css, bootstrap-responsive.css, dan bootstrap-responsive.min.css.
Setelah file-file tersebut di cek, kembali ke halaman berikutnya dan buat satu file bernama index.html
Kemudian buat Tag Header seperti dibawah ini
<head>
</head>
Untuk Mengecek apakah css sudah berjalan dengan baik pada halaman index, buatlah sebuah button menggunakan class yang ada pada bootstrap didalam tag body seperti dibawah ini
<body>
<input type="button" class="btn btn-primary" value="Belajar Syntax" /> </body>
Selanjutnya silahkan menggunakan atribut-atribut bootstrap yang lainnya seperti penggunaan
Grid
