Halo Gaesss, kembali lagi saya share mengenai pembahasan yang cukup menarik yaitu tentang bootstrap sebelumnya telah saya posting artikel mengenai pengenalan bootstrap, kini melanjutkan seri belajar bootstrap 4 akan saya bahas bagaimana membuat website dengan menggunakan bootstrap 4. Jujur saya sangat menyukai bootstrap karena kita dapat dengan mudah membuat desain web yang bagus dan responsive dengan perangkat mobile, penggunaan bootstrap juga mudah digunakan dan dapat dipahami dengan cepat bagi pemula yang ingin belajar framework yang fokus pada front end ini.
Bootstrap dapat kita gunakan pada komponen dokumen html, javascript dan css. penggunannya pun cukup mudah, kita hanya tinggal memasang komponen bootstrap pada website kita lalu tinggal kita panggil librarynya menggunakan class pada setiap elemen yang ingin kita buat. Oleh sebab itu kita perlu memahami terutama atribut class pada html. Selain itu kita juga perlu memahami tentang fluid desain, karena bootstrap mengadopsi tentang ini. Namun semuanya bisa kita pelajari step by step dengan teknik yang mudah.
Versi bootstrap yang kita pakai dalam seri belajar bootstrap kita adalah seri yang paling terbaru yaitu versi ke 4. Menggunakan versi yang terbaru lebih saya sarankan, karena dalam seri 4 ini sudah banyak pembaharuan dari versi sebelumnya, walaupun memang tidak jauh berbeda baik pada cara penggunannya dan fungsinya. Untuk mengimplementasikan bootstrap pada website kita baik html maupun php dapat kita gunakan dengan dua cara:
Bagaimana menggunakan bootstrap 4 ?
Untuk memulai menggunakan bootstrap kita dapat memakai dua cara yang pertama include dari CDN (Content Delivery Network) dan yang kedua kita download langsung bootstrapnya dan jalankan lewat drive kita sendiri. Berikut adalah pembahasan detailnya.
#1 Include Bootstrap dari MaxCDN
Bila kita tidak ingin mengunduh bootstrap sendiri di drive kita, maka bisa menggunakan CDN (Content Delivery Network) . CDN sendiri merupakan server global yang berfungsi untuk mendistribusukan konten ke website kita. Konten disini bisa berupa gambar, style css, atau javascript, video dan lainnya. Sehingga dengan CDN kita bisa mengakses data konten diluar server atau drive kita.
MaxCDN Merupakan salah satu server global yang memfasilitasi Style CSS, Javascript dan tentunya bootstrap. Penggunannyapun cukup mudah kita hanya perlu memanggil data kontennya dengan atribu src pada elemen style dan atau script di website kita.
<!-- Load file CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Load file library jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Load file library Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Load file library JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> Syntax diatas adalah contoh ketika ingin menggunakan bootstrap dengan CDN pada syntax pertama kita me-load bootstrap css dari maxdn, Kemudian kita juga meload javascript dan popper.js karena didalam bootstrap 4 wajib memakai keduanya, ini terkait komponen bootstrap yang wajib menggunakan javascript maupun popper.js seperti modals, tooltips, popovers dan lain-lain.
Contoh Include Bootstrap dari MaxCDN
<!DOCTYPE html>
<html>
<head>
<!-- Load file CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Load file library jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Load file library Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Load file library JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Ketegori
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub Kategori 1</a>
<a class="dropdown-item" href="#">Sub Kategori 2</a>
<a class="dropdown-item" href="#">Sub Kategori 3</a>
</div>
</div>
</body>
</html> Diatas contoh dokumen html sederhana yang mengggunakan bootstrap include dari CDN. Sebagai contoh saya membuat menu dropdown dengan meload javascript, css, jquery dan css bootstrap dai maxCDN. Semua elemen yang di load pastikan berada didalam tag <head>. Untuk hasil outputnya seperti gambar dibawah.
Walaupun penggunaan CDN (Content Delivery Network) ni mudah di impelementasikan pada website kita, namun terdapat kelemahan yaitu bahwa komputer kita ketika menjalankan dokumen website kita perlu terkoneksi jaringan internet, hal ini karena komputer kita perlu meload data konten dari CDN yang mengharuskan aktifnya koneksi internet. Sehingga ketika dalam pengembangan website tidak mungkin kita pasti akan selalu harus online untuk meload bootstrap dari CDN ini.
Walaupun sebetulnya ketika kita pertama kali mengakses bootstrap dari CDN maka akan disimpan dalam cache browser kita sehingga pada pengaksesan selanjutnya sistem hanya tinggal mengambil dari cache dan tidak perlu load kembali dengan CDN yang perlu menggunakan koneksi internet. Namun tetap menurut saya ini menjadi kelemahan jika menggunakan CDN dibandingkan dengan cara kedua yang saya bahas dibawah.
#2 Download Bootstrap kedalam drive kita
Selain menggunakan bootstrap dengan CDN, kita juga dapat mendownload langsung kedalam driver kita. Menurut saya cara kedua ini cukup saya sarankan dibandingkan cara pertama. Karena dengan kita me-host sendiri bootstrap pada drive kita, kita dapat mengelolah dengan baik website yang kita sinkronkan dengan bootstrap yang telah didownload. Selain itu dengan mendownload bootstrap ke driver kita tidak perlu koneksi internet untuk meload data baik css, javascript dan lain-lain seperti jika menggunakan CDN.
Cara Download Bootstrap 4
- Kunjungi halaman resmi bootstrap di https://getbootstrap.com/
klik tombol download, setelah itu akan masuk kehalaman penjelasan detail downloadnya.
- Langsung saja klik tombol download pada bagian “Compiled CSS and JS“
- File akan terdownload dalam bentuk ZIP achive
- Setelah file berhasil di download, selanjutnya extact file tersebut kedalam folder web kita
- Berikut adalah detail file dari folder css dan js
Cara menggunakan hasil download Bootstrap
Untuk menggunakan bootstrap secara offline melalui bootstrap yang sudah didownload seperti pada penjelasan diatas, kita perlu mendownload file jquery lagi untuk melengkapi fungsi komponen pada bootstrap
- Download Jquery pada url : https://code.jquery.com/jquery-3.3.1.min.js
- Masukan file tersebut dalam folder js
Selanjutnya buat file html seperti berikut:
<!DOCTYPE html>
<html>
<head>
<!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Halaman HTML dengan bootstrap offline</h1>
<p>Halaman ini responsive untuk semua jenis perangkat</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Kolom pertama</h3>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
</div>
<div class="col-sm-4">
<h3>Kolom kedua</h3>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
</div>
<div class="col-sm-4">
<h3>Kolom ketiga</h3>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
</div>
</div>
</div>
</body>
</html> - Dari syntax diatas kemudian kita coba jalankan pada browser berikut hasilnya:
Demikian pembahasan mengenai dua cara penggunaan bootstrap yang pertama kita menggunakan CDN (content delivery network) dan yang kedua kita mendownload bootstrap dan jquery langsung kedalam driver kita. Kedua cara tersebut mempunyai peran masing-masing. Anda bisa menggunakan salah satunya, namun bila anda meminta saran kepada saya cara yang paling saya rekomendasikan adalah yang kedua. Karena bagi saya dengan kita memiliki library file bootstrap pada driver kita sendiri kita dapat dengan mudah menggunakannya dalam pengembangan aplikasi web yang lebih lanjut. Baiklah terimakasih sudah membaca artikel saya silahkan komentar dibawah ini jika ada pertanyaan terkait pembahasan diatas.
Berikut contoh web portofolio menggunakan Bootstrap Unduh file DI SINI
