alexa-tracking

Cara Membuat Template Website Dengan "Twitter Bootstrap Framework"

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/5577f74d108b46a9048b4568/cara-membuat-template-website-dengan-quottwitter-bootstrap-frameworkquot
Cool 
Cara Membuat Template Website Dengan "Twitter Bootstrap Framework"
Twitter Bootstrap Framework
emoticon-Rate 5 Star emoticon-Rate 5 Star emoticon-Rate 5 Star
Di rate 5 dulu ya hehe
FOR NEWBIE ONLY

INTRO

KENAPA MEMBUAT THREAD 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. Framework bisa 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 TWITTER BOOTSTRAP?
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 MEMULAI MENGGUNAKAN 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
=======================================================================


emoticon-I Love Indonesia emoticon-I Love Indonesia emoticon-I Love Indonesia
Spoiler for mulai sekarang:


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 emoticon-Frown

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 emoticon-Rate 5 Star dan iniemoticon-Toast agar saya lebih semangat buat ngelanjutinnya hehe


Spoiler for Last:


Ini ada sedikit saran dari agan zuperbayu, thanks gan sarannya

Spoiler for zuperbayu:


#CendolForUsefulThread
#Rate5ForGoodThread
Bootstrap Grid System

Quote:WARNING!
Create dua buah file dengan nama index.htm dan style.css dan masukkan file2 tersebut kedalam sebuah folder. Lalu download framework bootstrap dari getbootstrap. com. dan ekstrak kedalam folder yang sama dengan index.htm tadi.

Quote:NB. Karna saya menganggap kalian sudah paham html, css maupun javascript maka saya tidak menjelaskan secara detail step diatas. Namun bila ada pertanyaan bisa lgs komen aja


INTRO
Quote:Ini adalah hal paling dasar dan harus dipahami sebelum kita lanjut ke materi-materi selanjutnya. Mungkin dari kalian masih ada yang bertanya-tanya apasih grid itu? jadi grid adalah sebuah layout berbentuk kolom-kolom yang telah disediakan oleh bootstrap agar tampilan web kita bisa responsif.

Hmm bikin makin bingung ya gan? haha. Jadi begini gan sebenarnya intinya grid ini membuat kita bisa memanipulasi posisi/letak dari suatu objek pada web.

Pasti agan2 semua pernah kesulitan bila ingin meletakkan suatu objek ntah itu gambar ataupun kalimat ditempat yg kita inginkan? nah dengan grid ini kita bisa meletakkan objek tersebut dimanapun yang kita mau. Biar lebih jelasnya liat gambar dibawah ini aja.
Spoiler for awas bwk:

Nah jadi seperti itu gan, jika ingin menaruh suatu objek lebih baik dimasukkan kedalam grid2 tersebut gan agar lebih rapi dan enak dipandang. Mungkin biar lebih jelas langsung ke praktiknya ajaya gan emoticon-I Love Indonesia (S)

========================================
DO THIS WITHOUT BU*LSH*T!!
========================================


Quote:STEP 1
Ketikan script dibawah ini kedalam file index.htm yang sudah kita buat tadi. INGAT GAN "KETIK" JANGAN COPYPASTE! karna dengan mengketik kalian bisa memahami maksud dari codingan tersebut.


Spoiler for step1:

Quote:Sedikit penjelasan ya, jadi pada baris 13 gunanya mengambil/mendifine style.css dari bootstrap yang sudah kita download (taukan external styling gan? kalo gaktau baca2 dulu ya di w3school hehe) begitu pula pada baris 17 yaitu untuk mengambil javascript dari bootstrap yg sudah kita download tadi.

Loh gan dibaris 14 itu kok ada style.css lagi? nah style.css pada baris 14 tersebut adalah buatan kita sendiri yang sudah kita buat diawal tadi. Gunanya buat apa? jadi jika ada feature2 yang kurang sesuai dengan keinginan kita, misal kita ingin membuat navbar berwarna merah namun style.css bootstrap sendiri hanya menyediakan warna putih dan abu2 jd kita bisa mengedit navbar bawaan dari bootstrap sesuai dengan keinginan kita.

Nah cara mengeditnya adalah dengan menambahkan script kedalam style.css buatan kita sendiri. Untuk urusan edit mengedit ini nnti juga akan ada tutorialnya lebih lanjut jd tunggu aja ya gan emoticon-Ngakak (S)


YAP BACK TO TOPIC
==START==

Quote:Pada dasar untuk membuat tampilan yang responsif kita perlu membuat grid system. Untuk membuat grid kita tinggal memanggil class .container dan class .row yaitu dengan cara:
Quote:<div class="container">
<div class="row">

</div>
</div>
Letakkan script diatas didalam tag <body> ya gan!



Quote:Kalo masih ada yang bingung agan coba tulis sesuatu didalam <div class="row"> dan diluar <div class="container"> dan lihat perbedaannya.

Untuk membagi tiap baris kedalam beberapa kolum seperti gambar pada contoh grid diawal tadi, anda bisa melakukan ini
Spoiler for stepGrid:

Coba dibaca pelan2 tiap baris dari codingan diatas pasti agan bakal paham kok. Ada beberapa jenis .col gan, ada .col-xs, .col-md dan .col-lg. Sejauh yg saya tau perbedaan dari ketiga hal tersebut hanya dapat dilihat saat layar menjadi kecil (mobile view), saat layar standard (laptop view) tidak ada perbedaan sama sekali kok. Saya jg masih krg tau perbedaannya gan (haha maklum newbie) mungkin bisa agan coba sendiri dan cari tau perbedannya. oiya banyaknya kolum tidak harus selalu 1,4, dan 6 kok. bila agan ingin membuat 10 kolum agan bisa buat <div class="col-md-10"> Sesuai dengan keinginan dan kebutuhan kita sendiri.


GRID OFFSET
Quote:Nah namun bisa gak gan kalo kita ingin membuat kolum ditengah tanpa harus membuat kolum dari kiri? bisa kok gan dengan menggunakan offset seperti dibawah ini.
Spoiler for offset:

bisa diliat pada col-md-6 col-md-offset-3, maksudnya adalah kita membuat 6 buah kolom (col-md-6) tepat setelah 3 kolom dari kiri (col-md-3). Ngerti kan gan? kalo masih kurang paham mongga dibaca pelan2 dulu lalu jika masih blum paham jg bisa tanya dan koment insyaallah saya bantu hehe.


Mungkin segini dulu ya gan, kalo ada yang perlu ditambahin lagi nnti bakal saya tambahin kok. Jangan lupa emoticon-Toast dan emoticon-Rate 5 Star ya gan ./thanks

#CendolForUsefulThread
#Rate5ForGoodThread
NAVBAR

Quote:Halo semuanya berhubung ane lagi gakada kesibukan jadi ane sempetin ngelanjutin ini thread. Sekarang ane mau nunjukin caranya buat navbar. Apa itu navbar? navbar itu yg biasanya ada dibagian atas web gan yg isinya biasanya Home | Contact | About Me dll. Tau kan gan? harus tau dong haha.

INTRO

Quote:Jadi di bootstrap ada dua komponen paling standard buat bikin navbar gan yang pertama ."navbar navbar-default" sama navbar navbar-inverse". Perbedaan dua klass tersebut hanya diwarna navbar dan warna link hover, active dsb. Untuk manggil class tersebut cukup ketikkan

Spoiler for navbar:


langsung coba aja gan dan liat perbedaannya. Trus kita isi navbar yg udh kita buat dengan menu2 sesuai dengan apa yg kita mau. disini ane mau ngebuat 3 menu, pertama Home trus Categories dimana dlm menu ini terdapat sub2 menu lg lalu About Me


STEPONE
"BUAT BUTTON AGAR TAMPILAN TETAP RESPONSIVE"
Quote:Jadi kita ingin buat biar bisa kayak gini gan saat layar dikecilin
Spoiler for navbar:

Jadi saat layar dikecilkan akan muncul toggle seperti digambar, nah saat diklik toggle tersebut bakaln muncul menu2 yang ada. Cara membuatnya seperti ini gan

Spoiler for navbar:


buat "navHeaderCollapse" itu namanya terserah mau agan buat apa.


STEPTWO
"BUAT MENU SESUAI KEINGINAN KITA"
Quote:Langsung ajaya gan jadi seperti ini caranya
Spoiler for navbar:

Bisa dilihat ada navHeaderCollapse diatas gan, itu sesuai dengan apa yg agan buat di step pertama tadi ya. Hasilnya bakal seperti ini gan
Spoiler for hasil:

Spoiler for hasil:



THE-END

Quote:Begitulah gan kira2. Sebenarnya masih banyak lg bentuk2 navbar yg disediakan oleh bootstrap tapi gak bsa ane bahas semua karna bsa2 gak kelar2 gan emoticon-Ngakak (S) Mungkin agan bisa liat sendiri di getbootstrap. com untuk lebih lengkapnya. Kalo ada yg kebingungan monggo ditanya aja gan semoga ane bisa bantu.

buat kodingan lengkapnya bisa buka disini gan agar lebih jelas pastebin.com/ x6dA80Xd.


Spoiler for last:


Oiya gan ada yg tau gak gimana caranya embbed codingan? jd biar kodingan yg ane buat ada syntax highliternya sehingga lbh berwarna dan lebih eyecatching. Biar mempermudah agan2 semua ngebaca codingan ane. klo ada yg tau kommen ya gan emoticon-Malu (S)

#CendolForUsefulThread
#Rate5ForGoodThread
#untukUPDATE(?)
emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S)
ayo lanjut gan, ane pantau
iyaa gan ntar bakal ane lanjutin, di emoticon-Rate 5 Star dulu gan biar semangat emoticon-Stick Out Tongue
ninggalin jejak dulu gan
diriin tenda sambil nunggu update-an
Quote:Original Posted By ed05
ninggalin jejak dulu gan


Quote:Original Posted By galow2014
diriin tenda sambil nunggu update-an


monggo gan, jgn lupa di emoticon-Rate 5 Star yacc

nitip sendal gan.
sambil nunggu updeta ane bantuemoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S)
lanjutannya mana bro
ditunggu lanjutanya gan, udah ane emoticon-Rate 5 Star
Quote:Original Posted By stefimarina05
Selengkapnya dapat dilihat disini : http://goo.gl/fEkJxX


Quote:Original Posted By cepbengras
nitip sendal gan.
sambil nunggu updeta ane bantuemoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S) emoticon-Sundul Gan (S)


Quote:Original Posted By 4.Rijkaard
lanjutannya mana bro


Quote:Original Posted By mioyeng2
ditunggu lanjutanya gan, udah ane emoticon-Rate 5 Star


Wah berhubung responnya lumayan positif maka sesuai janji akan saya lanjutkan gan, mohon ditunggu yaa sedang on progress emoticon-Malu (S) emoticon-Malu (S)

#cendolForUsefulThread
#rate5ForGoodThread
nah ini nih trit yg ane tunggu emoticon-2 Jempol
ane lagi pengen belajar bootstrap , ditunggu gan updat-annya emoticon-Rate 5 Star
Monggo dibeber gan, mumpung ane lg utek2 dabr twitter client nih emoticon-Ngakak
ikutan ngantri, baru belajar web ane gan...

udah lulus baru muncul niat belajar emoticon-Sorry
semangat lanjutin gan,,emoticon-I Love Indonesia (S)
Quote:Original Posted By rex66
nah ini nih trit yg ane tunggu emoticon-2 Jempol
ane lagi pengen belajar bootstrap , ditunggu gan updat-annya emoticon-Rate 5 Star


Quote:Original Posted By BRANDALOKAJAYA
Monggo dibeber gan, mumpung ane lg utek2 dabr twitter client nih emoticon-Ngakak


Quote:Original Posted By bukanyudha
ikutan ngantri, baru belajar web ane gan...

udah lulus baru muncul niat belajar emoticon-Sorry


Quote:Original Posted By globalweb1
semangat lanjutin gan,,emoticon-I Love Indonesia (S)


monggo tuh gan dahada apdetannya emoticon-Cendol (S)

mantep banget si agan berbagi ilmu nya ane gagal ilmu mengenai bahasa pemrograman macem begini emoticon-Hammer (S) ntar ane praktekin biar pinter deh
Quote:Original Posted By HackGuard
mantep banget si agan berbagi ilmu nya ane gagal ilmu mengenai bahasa pemrograman macem begini emoticon-Hammer (S) ntar ane praktekin biar pinter deh


makasi gan, iya harus lgs dipraktekin biar ngerti gan emoticon-Rate 5 Star kalo masih blum paham jg tanya aja gan mungkin saya bisa bantu