Semua ini memiliki sejarah kenapa muncul bootstrap. ternyata sumbernya dari keinginan 2 orang agar dapat memiliki web yang bisa di akses baik dari alat apapun (desktop/mobile atau pad). Namun ternyata tidak semudah itu karena masing-masing memiliki gaya dan cara menangani html di tempat mereka.
Hal ini juga diperparah dengan keinginan client yang selalu ingin yang terbaik buat mereka tetapi kurang peduli dengan developernya. Kadang terlalu banyak duit membuat si owner malah arogan. Tapi sebagai seorang web dev yang tahu kurang-lebihnya, sebaiknya kita tidak kesulitan dengan adanya bantuan bootstrap.
konsep dari bootstrap bukan hanya edit tampilan, tapi juga edit form!! termasuk efek-efek yang akan dibahas nantinya. Disini kita akan mencoba membuat webpage sederhana, tidak lain kita akan membuat hello world!!
Langkah awal adalah download di twitter bootstrap. download dari sana dan pastikan file ditaro di tempat yang benar. Berikutnya ada extract.. lalu apa ini sudah selesai?!? ternyata blum.. dapatkan jquery terbaru dan letakkan ditempat yang mudah di jangkau..
kita akan membuat
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world</title>
</head>
<body>
<p>Hallo.. </p>
</body>
</html>
pada dasarnya disini hanya menampilkan tulisan Hallo saja, tetapi apa yang membuat anda tak puas? Tentu saja tulisannya terlalu mepet ke kiri atas. gunakan margin pada body dan hasilnya sesuaikan dengan keinginan anda!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>No Boostrap in this project</title> <style>
body{ margin:10px }
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
 |
| perubahannya mungkin tak terlalu terlihat |
Intinya kita akan / perlu menggunakan css dalam coding ini.. Lalu lengkapi dengan
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>No Boostrap in this project</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <p>Hey, i wanna be responsive too :(</p> <script src="../../jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
posisi jquery samakan dengan yang kamu letakan jquerynya. Refresh dan kamu akan dapat sesuatu yang berbeda. Lalu kenapa saya tidak menjelaskan apa yang terjadi saat di extract.. saya sebenarnya hanya memberikan pelajaran singkat. Jadi maklum..
Pada saat kamu extract, foldernya akan berisi file-file penting yaitu javascript dan css. Tapi jangan lupa kamu membutuhkan jquery, jadi disarankan untuk download sebelumnya dan gunakan di script tersebut.
*saya memakai jquery.1.8.2.js
Bila ini di lokal, saran saya jangan di hapus beberapa fungsi.. kecuali ada alasannya (fungsi telah expire) dan lain-lain.
Tidak ada komentar:
Posting Komentar