Belajar Bootstrap dan Cara Menggunakan Bootstrap

Belajar Bootstrap dan Cara Menggunakan Bootstrap

Tutorial Cara Menggunakan Bootstrap – Belajar Boostrap

Bootstrap merupakan suatu framework terbaru yang dapat anda manfaatkan untuk membuat tampilan website menjadi responsive, dinamis dan berubah-ubah untuk menyesuaikan dengan ukuran layar perangkat pengunjung website anda. Jadi apabila pengunjung website anda menggunakan smartphone berlayar kecil, maka tampilan halaman website anda akan menyesuaikan dengan ukuran layar smartphone tersebut sehingga tetap nyaman untuk dibaca. Begitupun sebaliknya ketika pengunjung website anda menggunakan laptop atau komputer berlayar besar, tampilan website anda akan kembali menyesuaikan dengan ukuran layar besar dari pengunjung website anda.

Bootstrap diciptakan dengan menggunakan teknologi javascript dan css yang tentunya sudah sangat umum digunakan sebagai teknologi pada suatu website. Sehingga boleh dikatakan, bootstrap dapat digunakan di website manapun.

Cara Menggunakan Bootstrap di Website Anda

Untuk bisa menggunakan bootstrap, langkah pertama yang perlu anda lakukan adalah menginstall bootstrap di website anda. Untuk mendapatkan file framework bootstrap, anda bisa mendownloadnya dari website resmi bootstrap dihalaman ini : https://getbootstrap.com/. Pilih versi bootstrap terbaru lalu lakukan download bootstrap ke komputer anda.

Setelah selesai mendownload file bootstrap, langkah selanjutnya adalah mengupload file tersebut ke directory atau folder dari website anda. Folder atau directory dimana anda harus mengupload file bootstrap ini berbeda-beda sesuai dengan platform atau framework yang anda gunakan untuk membuat website anda. Jika anda menggunakan wordpress sebagai framework yang anda gunakan untuk membuat website, anda bisa mengupload file bootstrap ini ke folder themes/template anda di alamat websiteanda.com/wp-content/themes/tema-anda/.

Setelah file bootstrap berhasil anda upload, langkah selanjutnya adalah memanggil file tersebut di header website anda. File yang harus dipanggil di website anda adalah file css serta javascript dari bootstrap. Caranya dengan menggunakan code sebagai berkut :

<link href="directory_css_website_anda/bootstrap.css" rel="stylesheet">
<script src="directory_js_website_anda/bootstrap.js"></script>

Tempatkan kode tersebut diantara tag head di website anda. Save perubahan, dan selamat, bootstrap telah berhasil diinstal di website anda!

Jika anda memiliki kendala ataupun karena beberapa alasan tidak mau mengcopy file bootstrap ke direktori website anda, ada cara lain yaitu menggunakan CDN bootstrap yang bisa digunakan langsung tanpa harus memasukkan file bootstrap ke folder website anda. Cara memanggil CDN bootstrap sangatlah mudah, cukup tempatkan kode berikut diantara tag <head> di website anda :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Catatan : Beberapa fungsi dari bootstrap memerlukan jQuery yang terinstall di website anda. Jadi jika anda ingin memanfaatkan seluruh fungsi-fungsi yang ada pada bootstrap,sangat disarankan anda juga memasang plugin jQuery di website anda.

Elemen Container

Class container merupakan class wajib yang harus anda panggil jika ingin menggunakan bootstrap grid system. Ada 2 jenis container berbeda yaitu fixed-width container yang menetapkan lebar yang sama, atau fluid container yaitu container yang berubah-ubah dengan selalu menjaga posisi lebar di 100%. Untuk memanggil container pada bootstrap sangatlah mudah, cukup ketikkan kode berikut di website anda :

<div class="container">
</div>
<div class="container-fluid">
</div>

Cara Membuat Baris/Row Bootstrap

Baris atau row merupakan salah satu elemen penting pada bootstrap. Untuk membuat baris di website anda, anda bisa menggunakan kode berikut untuk setiap barisnya :

<div class="container">
<div class="row">
</div>
</div>

Cara Membuat Kolom di Bootstrap

Setelah berhasil membuat baris, langkah selanjutnya adalah membuat kolom-kolom di dalam baris yang telah anda buat. Namun sebelum membuat kolom, terlebih dahulu anda harus memahami berbagai tipe kolom pada bootstrap, berikut penjelasan untuk masing-masing tipe kolom :

Kolom Large (Col-lg) : Kolom large merupakan kolom yang dibuat untuk tampil pada tampilan layar besar seperti komputer atau laptop dengan lebar layar diatas 1200 piksel.

Kolom Medium (Col-md) : Kolom medium adalah kolom yang akan tampil untuk layar tampilan medium/sedang, contoh perangkat yang membutuhkan kolom medium yaitu laptop dengan layar kecil maupun tablet serta smartphone dengan layar besar. Ukuran layar yang masuk kedalam tampilan medium ini adalah perangkat dengan ukuran lebar layar antara 992 piksel sampai dengan 1200 piksel.

Kolom Small (Col-sm) : Kolom small adalah kolom untuk tampilan layar kecil. Sebagian besar smartphone saat ini akan menampilkan tampilan untuk kolom jenis ini. Untuk perangkat yang masuk kedalam kategori small yaitu perangkat dengan lebar layar antara 768px hingga 992px.

Kolom Extra Small (Coll-xs) : Kolom ekstra small merupakan kolom untuk tampilan perangkat yang sangat kecil dengan ukuran lebar layar dibawah 576 piksel.

Setelah menentukan jenis kolom, langkah selanjutnya adalah menentukan lebar kolom. Ukuran kolom maksimal untuk 1 baris yaitu 12. Jadi jika anda ingin membuat 2 buah kolom dengan besar yang sama untuk tampilan layar besar, anda bisa menggunakan kode berikut :

<div class="container">
<div class="row">
<div class="col-lg-6">
---isi kolom pertama---
</div>
<div class="col-lg-6">
---isi kolom kedua---
</div>
</div>
</div>

Selain itu anda bisa mengkombinasikan kolom untuk beberapa tampilan layar berbeda, misalkan anda ingin membuat sebuah baris yang terdiri dari 3 buah kolom sama besar untuk tampilan layar besar, namun untuk tampilan layar smartphone setiap kolom dibuat dengan ukuran full satu baris, berikut ini contoh codenya :

<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
---isi kolom pertama---
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
---isi kolom kedua---
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
---isi kolom ketiga---
</div>
</div>
</div>

Anda bisa bereksperimen dengan kode-kode baris dan kolom pada bootstrap untuk mendapatkan tampilan layout terbaik untuk website anda.

Membuat Gambar Menjadi Responsive Dengan Bootstrap

Kendala utama saat membuat website yaitu ketika diakses menggunakan perangkat mobile, gambar website seringkali menjadi berantakan. Untuk mencegah hal tersebut, bootstrap memiliki code khusus untuk membuat gambar menjadi responsive dan dapat berubah-ubah ukuran sesuai dengan ukuran layar perangkat yang digunakan untuk mengakses website. Kodenya sebenarnya sangat simple, cukup tambahakan class img-responsive pada setiap gambar di website anda, maka secara otomatis gambar tersebut akan menjadi responsive dan berubah-ubah ukuran sesuai ukuran lebar layar.

<img src="alamat_url_gambar.jpg" class="img-responsive">

Ditulis oleh : Admin | Tanggal Terbit : 7 Februari 2018 | Share artikel ini di :