Membuat website gampang-gampang susah, terutama saat berurusan sama tampilan. Terkadang hampir sebagian besar waktu mengerjakan website kita habiskan di bagian ini. Ya, berurusan dengan css dan html memang cukup membuat frustasi terutama saat dikejar deadline. Namun saya rasa Framework yang satu ini bisa mempermudah programmer dalam mempercantik webnya. namanya adalah Twitter Bootstrap.
 |
| Contoh halaman web yang menggunakan twitter bootstrap |
Menurut 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.
Penggunaannya pun cukup mudah dan bisa dimodifikasi sesuai dengan keinginan kita. Berikut beberapa langkah yang bisa dicoba.
- Download dan ekstrak twitter bootstrap dari situs resminya, klik disini.
- Simpan pada direktori website yang kita buat. berikut struktur file dari twitter bootstrap:
- Tambahkan twitter bootstrap pada bagian header dari halaman website kita.
<!DOCTYPE html> <html> <head> <title>Contoh Penggunaan Bootstrap/title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> </body> </html> - Selesai, kita bisa langsung menggunakan twitter bootstrap.
Bagaimana? menarik dan cantik kan? ini salah satu modifikasi tampilan twitter bootstrap:
Silahkan kunjungi website resminya, disana tersedia semua petunjuk penggunaan, serta contoh contoh yang lainnya. Happy Codding All.
Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.
Silahkan kunjungi website resminya, disana tersedia semua petunjuk penggunaan, serta contoh contoh yang lainnya. Happy Codding All.
Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.
Template tersedia untuk download gak gan?
BalasHapusThank's
Iya, templatenya gratis dan siap download, silahkan google dengan keyword "charisma"
Hapus