Tutorial Belajar Bootstrap 4 Part 1 – Mengenal Bootstrap

Selamat datang lagi teman – teman di web warung belajar, nah dalam tutorial kali ini kita akan membahas hal baru,, jika dalam tutorial sebelumnya kita telah belajar mengenai HTML, dan CSS,,, nah dalam tutorial ini kita akan membahas mengenai Bootstrap…

Wah apalagi nih yang namanya Bootstrap ??

Bootstrap adalah salah satu Framework CSS yang sangat populer saat ini,,, kita mengatakan bootstrap adalah salah satu framework CSS karena banyak sekali framework CSS yang bisa digunakan…

Ngomong – ngomong teman – teman udah ngerti kan apa itu framework ??

Framework itu secara sederhana adalah sebuah kerangka kerja yang bisa anda gunakan untuk mempermudah proses pekerjaan anda,, nah kalau disini kita berbicara framework CSS, berarti framework ini digunakan untuk mempermudah anda dalam menuliskan perintah CSS.

Dalam Bootstrap itu sudah disediakan perintah – perintah CSS yang bisa anda gunakan, untuk menggunakan library bootstrap anda hanya perlu menuliskan nama classnya saja, jadi anda tidak perlu menuliskannya perintah css satu persatu seperti dalam tutorial – tutorial sebelumnya.

Nah jadi bisa  dikatakan bahwa dengan adanya bootstrap ini anda akan dipermudah dalam penulisan skrip CSS yang digunakan untuk mengatur tampilan web..

Selain itu dengan menggunakan Bootstrap, tampilan web yang anda buat otomatis akan bersifat responsive.

 

Apa itu Responsive ??

Responsive atau dikenal dengan istilah Mobile Responsive, penjelasan sederhananya tampilan web yang sudah mobile responsive itu akan menyesuaikan ukuran device yang digunakan untuk mengakses web tersebut, seperti yang anda ketahui sekarang banyak orang yang mengakses web itu dari smartphone… nah kalau tampilan web kita gak responsive maka tampilannya akan tidak teratur ketika diakses dari device dengan ukuran layar kecil semisal smartphone

 

 

Dokumentasi Bootstrap

JIka ingin membaca – baca lebih lanjut bisa mengakses dokumentasi dari bootstrap ada di webnya https://getbootstrap.com

Untuk model tampilan – tampilan dari  web yang bisa anda buat di bootstrap 4 bisa diakses di webnya

https://getbootstrap.com/docs/4.0/examples/

masih banyak lagi di google silahkan search dengan keyword semisal “theme bootstrap 4”

Oia teman – teman bootstrap saat ini sudah sampai di versi 4 padahal dulu saya belajarnya di versi 2 hehe….

okey kita mulai proses belajarnya, ditutorial ini kita akan mulai dari cara install dari bootstrap.

 

 

Install Bootstrap

Nah disini kita akan berbicara gimana cara install bootstrap, sebenarnya secara konsep istilah install disini menggunakan metode pemanggilan file css external yang sebelumnya telah kita pelajari dalam tutorial cara penulisan kode css, jadi kita tinggal memanggil file external css yang telah tersedia dari bootstrap, tidak hanya file css kita juga bisa menggunakan file javascript yang juga diberikan oleh bootstrap, untuk menggunakan file javascript yang diberikan bootstrap, anda perlu memanggil file jquery.js nanti akan kita jelaskan dibawah.

Untuk cara install bootstrap yang sering digunakan adalah menggunakan 2 cara :

1. secara offline
2. secara online

 

 

Cara Install Bootstrap secara Offline

Untuk menginstall bootstrap secara offline anda harus mendownload dulu file Bootstrap di web resmi bootstrap https://getbootstrap.com

untuk download file bootstrap silahkan klik tombol “Download”

 

 

 

Silahkan klik tombol “Download” pada bagian Compiled CSS and JS, anda akan mendapatkan file .zip, yang berisi file css dan javascript, silahan di extract, maka anda akan mendapatkan file css dan js dengan isi seperti berikut ini :

Jadi kurang lebih seperti ini teman – teman untuk posisi filenya :

hasil extract library saya rename dengan nama bootstrap agar lebih mudah pemanggilan file library bootstrapnya, untuk 2 file bootstrap_online.html, dan index.html itu adalah file belajar kita untuk menginstall bootstrap.

 

Berikutnya anda bisa memulai untuk membuat file HTML dan menyisipkan skrip untuk memanggil file css dan js hasil download dari bootstrap, skrip HTML sederhananya adalah seperti berikut ini :

Keterangan :

• Bootstrap 4 direkomendasikan untuk menggunakan HTML 5 sehingga kita berikan tag <!doctype html> untuk deklarasi dari HTML 5
• Bootstrap 4 mendukung mobile responsive, sehingga kita perlu memberikan tag <meta name=”viewport” content=”width=device-width, initial-scale=1″>
• Linkkan file css dengan nama bootstrap.min.css yang ada di folder css hasil extract library bootstrap yang telah kita download
• Lalu karena kita menggunakan library js didalam bootstrap, kita perlu linkkan juga file jquery-3.2.1.js, dalam contoh ini saya gunakan diversi 3.2.1, untuk download jquery silahkan di klik disini
• Linkkan file js dengan nama bootstrap.min.js yang ada di folder js hasil extract library bootstrap yang telah kita download

 

Silahkan anda simpan file htmlnya semisal index.html, lalu buka di browser maka hasilnya adalah sebagai berikut :

maka hasilnya terdapat 2 tombol yang terkena effect dari bootstrap, perhatikan dalam skrip HTML diatas :

1. kita menuliskan <button class=”btn btn-info”>Klik Disini</button> yang menghasilkan tombol berwarna biru
2. skrip <button class=”btn btn-info”>Klik Disini</button> menghasilkan tombol berwarna merah
3. jadi kita tinggal menyebutkan classnya saja yang sesuai dengan bootstrap, sehingga merubah warna tombol, gimana mudah kan

 

 

Cara Install Bootstrap secara Online

Setelah anda belajar menginstall secara offline berikutnya kita akan belajar menginstall secara Online, sebenarnya apa sih perbedaan install secara offline dan online ??

Perbedaannya hanya pada pemanggilan library bootstrap aja, kalau offline kita harus mendownload terlebih dahulu, baru kita linkkan

tetapi jika install secara online, kita tidak perlu download library bootstrap, kita bisa menuliskan langsung alamat server yang menyimpan library bootstrap, tapi kekurangannya ya anda harus terkoneksi dengan internet..

baik langsung saja skripnya adalah seperti berikut ini :

 

semisal kita simpan dengan nama belajar_bootstrap_online.html, lalu kita buka di browser maka hasilnya juga sama

Keterangan :

• Pada skrip html kita menuliskan perintah yang sama, hanya saja untuk pemanggilan file library css dan js bootstrap, langsung kita akses secara online.

Bagaimana  teman – teman mudah bukan, jadi kurang lebih seperti itu pembahasan awal dari bootstrap 4, kita sudah mengenal apa itu bootstrap, fungsi dari bootstrap hingga cara menginstall bootstrap secara offline ataupun online, jika ada yang ingin didiskusikan silahkan di kolom komentar.