Cara Membuat Template Website Dengan "Twitter Bootstrap Framework"
TS
mrcode
Cara Membuat Template Website Dengan "Twitter Bootstrap Framework"
Twitter BootstrapFramework
Di rate 5 dulu ya hehe
FOR NEWBIE ONLY
INTRO
KENAPA MEMBUATTHREAD INI?
Quote:
Alasan saya membuat thread ini hanyalah ingin membagi2kan ilmu saya yang masih dangkal ini yang mana pula saya berharap ilmu yang saya bagikan ini bermanfaat bagi kita semua termasuk saya sendiri.
Selain itu pula saya lihat kita di Indonesia ini sangat-sangat kekurangan sumber ilmu yang berhubungan dengan dunia programming yang disajikan dengan bahasa indonesia, sehingga agak menyulitkan buat beberapa orang yang sedikit kesulitan dengan bahasa asing (termasuk saya).
APA ITU FRAMEWORK?
Quote:
Mungkin ada beberap orang yang belum familiar mendengar kata-kata framework jadi akan saya jelaskan dengan singkat. Frameworkbisa disebut juga dengan kerangka kerja / pondasi. Dalam dunia pemrograman framework adalah sekumpulan script/fungsi yang sudah jadi dan siap digunakan. Sehingga kita tidak perlu membuat fungsi2 tersebut dari awal lagi.
Ibaratnya bila kita ingin merakit sebuah mobil kita tidak perlu membuat semua komponen2nya (mesin, body, ban dll) sendiri. Kita hanya perlu memesan komponen2 tersebut dari orang lain sehingga nntinya bisa kita gabungkan sendiri sehinggu menjadi sebuah mobil yg utuh.
Begitu pula framework dalam dunia web development, untuk membuat sebuah menubar, sidebar, content, footer dll kita tidaklah harus membuat semuanya sendiri, kta bisa menggunakan framework yang mana didalamnya terdapat fungsi2 untuk membuat menubar, sidebar, footer dll yang nantinya tinggal kita gabungkan sehingga mempersingkat waktu kita dalam membuat sebuah tempalte website
LALU APA ITU TWITTERBOOTSTRAP?
Quote:
Sudah jelaskan twitter bootstrap adalah sebuah framework CSS, HTML, dan Javascript yang mengedepankan tampilan untuk mobile device. Framework ini dibuat oleh twitter sendiri untuk mempermudah pengembangan web
KENAPA HARUS MENGGUNAKAN BOOTSTRAP?
Quote:
Beberapa kelebihan dari bootstrap sendiri antara lain adalah:
1. Responsif
Singkat saja maksud dari responsif disini adalah tampilan yang terlihat akan menyesuaikan diri secara otomatis dengan device kita. Contohnya jika kita buka template kita di smartphone maka templatenya akan mengikuti ukuran dari layar smartphone kita
2. Punya Banyak Fitur
Twitter sendiri menyediakan cukup banyak class (dalam CSS) yang bervariasi dan mengutamakan keindahan yang mana akan lebih mempermudah kita mengerjakan suatu web
3. Compatible Dengan Banyak Browser
Class-class yang dibuat dalam bootstrap sudah compatible dengan browser2 favorit agan semua seperti mozila, chrome, opera dsb sehingga membuat bootstrap sangatlah flexible
4. Sudah Support HTML5 dan CSS3
HTML5 dan CSS3 adalah versi terbaru dan terupdate dari kedua markup language tersebut. Sehingga kita tidak kehilangan fitur2 dari mereka berdua.
SYARAT MEMULAIMENGGUNAKAN BOOSTRAP?
Quote:
WAJIB SYARATNYA kalian sudah harus bisa dan familiar dengan CSS, HTML serta Javascript karna di thread ini nantinya saya hanya akan membahas fitur-fitur yang ada pada bootstrap saja dan saya tidak akan mengajari lagi CSS, HTML maupun Javascript dari awal karna itu akan memakan waktu. Jadi saran saya kalian harus menguasai atau setidaknya tau dan sudah kenal dengan CSS, HTML serta Javascript
WARNING !!!
=======================================================================
JIKA ANDA SUDAH MEMENUHI KETIGA KRITERIA DIATAS MONGGO LANJUT KEBAWAH INI
=======================================================================
Spoiler for mulai sekarang:
========== UPDATE DI POST 1(GRID SYSTEM)============
Quote:
NB. Berhubung saya ada keperluan saat saya membuat thread ini jadi mungkin awalnya hanya begini saja. Jika thread ini menuai kontroversi cukup di close saja jangan dibata apalagi di banned ya momod
Namun bila thread ini dianggap positif dan tidak melanggar rules maka akan terus saya lanjutkan mungkin sampai ketahap advance. Yang saya butuh kan hanyalah ini dan ini agar saya lebih semangat buat ngelanjutinnya hehe
Spoiler for Last:
Terakhir, bila ada yang salah2 mohon jangan langsung di BATAtoh saya juga cuman newbie disini yang cuman mau berbagi ilmu cukup meralatnya saja maka akan saya perbaikin. SEKIAN TERIMA KASIH
Ini ada sedikit saran dari agan zuperbayu, thanks gan sarannya
numpang ngikut nulis ye, gan ....
untuk coba2 ada baiknya menulis lengkap semua css dan js pada halaman html/php,
jadi code nya seperti ini,
karena barusan bingung, saya nyoba2 code dropdown kok error.. ternyata ketingalan file js nya.
kalao pengen download file js dan css nya bisa di mari : http://ge.tt/api/1/files/72QqtEI2/0/blob?download