Belajar Bootstrap part 1 Mengenai Dasar Bootstrap

bewoksatukosong.com | Halo Semua, jam 22:26 waktu yang tepat buat bikin tutorial, dan tidak ada kerjaan.

Karena kamu belum tau cara menggunakan bootstrap, nah kali ini om bewok akan sharing cara menggunakanya. Untuk masalah grid, form bla bla bla di tutorial selanjutnya saja ya soalnya terlalu banyak kalau ditulis disini semua.

Perlu kalian tahu, bahwa bootstrap ada 2 cara pemanggilanya yang pertama bisa secara langsung, tapi kita harus tersambung internet dan satu lagi secara offline, jadi kita download dulu bootstrap nya baru bisa menggunakan. 

Kali ini om bewok bakal ngejelasin cara keduanya, tapi untuk tutorial selanjutnya om bewok bakal menggunakan yang offline. Why ? karena lebih cepat dan buat teman - teman yang lagi irit kuota :p

Baca :

- Belajar Bootstrap part 6 Mengenai Form Bagian 1

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Pertama kamu bisa buka website ini 

http://getbootstrap.com/

akan muncul seperti ini.

Tampilan depan website bootstrap

Lalu Klik Download Bootstrap.

Klik download bootstrap

Maka akan muncul seperti ini

Sudah tau dong mana yang harus di download, yap yang button pertama yang di panah merah, yang paling kiri, yang di sentuh sama cursor, yang beda sendiri warnanya. Awas aja kalau sampai ada yang nanya, "om bewok yang mana harus di download ?", tak jewer nanti.

Sudah ? om bewok tungguin deh :D

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Lalu setelah di download selesai - masuk ke folder download nya - klik kanan - cut. kita mau pindahin ke folder yang lebih bersih, keren, asik ya pokoknya gitu. 

Klik kanan lalu cut

Kita buat folder baru di mana aja, kalau bisa di :D atau di :E soalnya kalau :C kan sistem, nanti kalau sistem bermasalah, harus install ilang, data kamu masih di :C kan jadi ilang data kamu. 
Saat ini om bewok bikin folder :D seperti di bawah ini. 

Ada yang gatau caranya bikin folder baru ?

ayo tunjuk tangan kalau ga tau.. 

Kita bikin :  

Folder baru di :D 

lalu ganti nama nya menjadi bewok bootstrap, dan 

Terakhir paste kan bootstrap di nya, lalu kamu klik kanan pilih  extract here, kalau kamu bingung liat gambar nya di bawah ya 

Membuat folder baru

Ganti nama menjadi bewok bootstrap

Paste kan file bootstrap tersebut

Klik kanan pada file lalu Extract Here

Sudah semua ? kita bisa di dalam nya ada 3 folder yaitu css, fonts, dan js. untuk saat ini yang kita pelajari lebih dalam yaitu css nya terlebih dahulu ya.

Terdapat 3 folder css,js,fonts

Dalam Folder CSS

Om bewok kan di dalam folder css ada 2 ada bootstrap.css dan bootstrap.min.css di yang lain juga ada om kayak di jquery pasti ada 2 pilihan nya ? 

Jawabanya adalah untuk yang bootstrap.css itu yang belum di compress, jadi ukuran lebih besar, sedangkan untuk yang bootstrap.min.css itu sudah di compress jadi ukuran nya jadi lebih kecil, sehingga ketika kita memanggil yang bootstrap.min.css itu lebih ringan.

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Langsung kita praktekan, yang sudah om bewok singgung sebelumnya, kita mencoba bootstrap menggunakan 2 versi yang pertama menggunakan internet dan yang kedua yaitu offline.

1. Menggunakan Internet

Pertama kamu bisa kunjungi ini untuk melihat link nya http://getbootstrap.com/getting-started/

Kedua kamu bisa melihat ada 3 pemanggilan seperti di bawah ini 

Lihat di kotak merah tersebut ada 3 pilihan

Om bewok bakal bahas satu persatu dahulu, dari 3 tersebut

Kodingan Dibawah ini adalah css nya yang akan kita gunakan.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Ini adalah pemanggilan pilihan theme, jadi kamu bisa memilih standart theme bootstrap di halaman pertama nya, mungkin bakal ada penjelasan juga, atau akan ada di bagian akhir untuk bonus nya :).

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

Ini adalah pemanggilan javascriptnya.

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

MARI KITA MULAI

Cara pemanggilan nya cukup mudah, seperti di bawah ini jika ingin di masukan ke kodingan nya ya.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Pemanggilan Bootstrap Secara Online</title>
<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
 <div class="row">
    <div class="col-md-1" style="background:#e74c3c">.col-md-1</div>
    <div class="col-md-1" style="background:#3498db">.col-md-1</div>
    <div class="col-md-8" style="background:#2980b9">Halo nama saya om bewok, saya tinggal di bekasi</div>
  </div>
</body>
</html>

Hasil nya akan seperti ini 

Tampilan Codingan Pertama

Jika ukuran nya di kecilin maka tampilan nya akan seperti ini

Responsive bro

Yap kita belum bikin media screen tapi sudah responsive sendiri, mudah bukan. ?

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

2. Secara Offline

Pertama kita bikin file html dahulu di tempat bootstrap dengan nama index.html, Seperti di bawah ini

buat index.html 

Selanjutnya masukan koding nya di index.html seperti di bawah ini ya.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Pemanggilan Bootstrap Secara Online</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <div class="row">
    <div class="col-md-1" style="background:#1abc9c">.col-md-1</div>
    <div class="col-md-1" style="background:#e67e22">.col-md-1</div>
    <div class="col-md-8" style="background:#95a5a6">Halo nama saya om bewok, saya tinggal di bekasi</div>
  </div>
</body>
</html>

Hasilnya akan seperti di bawah ini 

Tampilan 

Tentu saja sudah responsive jika ukuran browser di perkecil 

Jika di perkecil browser nya

Saya akan menjelaskan cara pemanggilan-nya

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

Konsepnya sama kok seperti css biasa, cara pemanggilanya menggunakan css external, kita lihat di bagian akhirnya, kalau kita ubah menjadi kalimat menjadi seperti dibawah ini 

"kita memanggil di folder css lalu memanggil file yang bernama boostrap.min.css"

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Itu saja yang bisa dijelaskan di tutorial dasar, untuk tutorial selanjutnya om bewok akan memberikan materi untuk grid layout nya. om bewok sengaja membuat ini bener - bener dasar sekali biar teman - teman tidak salah langkah dalam mengambil  keputusan#apaSih

Oh iya om bewok selalu bilang kalau mau belajar bootstrap pahami dulu css dasar kalau bisa sampai advance. karena kalau langsung belajar bootstrap kalian tidak akan bisa mengerti apa yang dijelasin di sini. Ibarat kamu bisa berlari tapi ga tau caranya berjalan. Jadi intinya dasar css itu sangat penting disini. bootstrap ini kan hanya membantu pekerjaan menjadi lebih mudah tetapi harus tau dulu css dasar nya. sama seperti framework lain nya. seperti laravel, ci, ruby on rails, django. Oh iya jika kamu ingin melihat tutorial dasar bootstrap series dari dasar, ada di bawah sini ya, agar ketika kamu belajar bootstrap berurutan biar ga bingung mulai darimana jangan loncat - loncat belajarnya

- Baca : 

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website


Thanks 


Om bewok