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 :
Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/
+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
¦ +-- bootstrap.min.js
Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.
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.
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
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 :Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada.
0 komentar:
Posting Komentar