Bootstrap juga salah satu framework yang bersifat open source. Bootstrap bisa digunakan dengan dua cara, pertama dengan online dan yang kedua dengan offline. Itulah sedikit penjelasan tentang bootstrap. Sekarang kita akan membahas lebih detailnya, mulai dari kelebihan, kekurangan dan cara penggunaan nya.
Kelebihan Bootstrap
Diatas kita sudah mengetahui tentang Bootstrap, sekarang kita akan membahas kelebihan dari bootstrap. Berikut ini adalah kelebihan kelebihan yang dimiliki oleh bootstrap.
- Membuat Website Menjadi Responsive
Kelebihan bootstrap yang pertama adalah membuat website menjadi responsive. Dengan bantuan bootstrap, para web developer akan lebih mudah dalam membuat website yang responsive.
- Mempermudah Web Developer
Dengan adanya bootstrap ini, tentu saja sangat membantu bagi para web developer. Karena hanya dengan mengimport link CDN nya sudah bisa digunakan. Jadi ketika para developer ingin membuat button, image slider, navbar, dan lainnya bisa langsung mengunjungi web bootstrap nya langsung karena sudah tersedia berbagai source code nya.
- Memiliki Dokumentasi Lengkap
Bootstrap juga memiliki dokumentasi yang lengkap sehingga memudahkan para pengguna nya untuk menggunakan bootstrap. Selain dokumentasi yang lengkap, bootstrap juga memberikan source code kepada para pengguna nya. Contohnya jika kamu ingin membuat navbar menggunakan bootstrap, maka sudah tersedia source code nya, jadi tinggal menyalin nya ke text editor.
- Mudah digunakan
Bootstrap juga termasuk framework yang mudah digunakan. Karena bootstrap adalah framework yang bersifat open source, jadi lebih mudah untuk di modifikasi file file nya sesuai keinginan pribadi. Jika kamu ingin mencoba modifikasi file file nya, pastikan kamu memiliki pemahaman mengenai bahasa html, css dan javascript.
- Kompatibel Pada Beberapa Browser
Yang terakhir bootstrap juga support pada beberapa bootstrap. Selain memudahkan para pengembang website, hal ini juga memudahkan para pengunjung website untuk mengakses website. Contohnya browser yang paling digunakan adalah google chrome. Selain google chrome, kamu juga bisa menggunakan uc browser, uc mini, uc turbo, opera mini ataupun browser lainnya.
Kekurangan Bootstrap
Meskipun bootstrap memiliki beberapa kelebihan, tentu saja bootstrap pun masih memiliki berbagai kekurangan. Berikut ini adalah beberapa kekurangan dari bootstrap
- Membuat Website Menjadi Berat
Meskipun bootstrap dapat membantu dalam pengembangan website, namun bootstrap juga bisa membuat website menjadi berat. Penyebab website menjadi berat karena terlalu banyak file ataupun script yang digunakan untuk website. Namun hal ini hanya berlaku jika kamu menggunakan bootstrap secara offine. Jika kamu menggunakan bootstrap secara online, kamu tidak perlu menyimpan file apapun di dalam hostingmu. Karena bootstrap yang secara online hanya menggunakan link CDN.
- Memiliki Gaya Visual yang Hampir Sama
Kekurangan bootstrap yang kedua adalah memiliki gaya visual yang hampir sama. Jika gaya visual nya hampir sama, maka website terlihat monoton dan kurang menarik. Jadi jika kamu menginginkan gaya visual yang berbeda, kamu harus bisa melakuka penyesuaian terhadap gaya visual yang akan diterapkan pada webite milikmu. Namun jika kamu menggunakan bootstrap secara offline, kamu bisa menyesuaikan gaya visual nya sesuai dengan keinginan mu. Misalnya kamu ingin mengubah style warna, font dan yang lainnya.
Setelah mengetahui kelebihan dan kekurangan dari bootstrap, sekarang kita akan melanjutkan cara menggunakan bootstrap. Untuk menggunakan bootstrap, kita bisa menggunakan dua cara. Cara yang pertama adalah menggunakan nya secara online dan cara yang kedua adalah menggunakan nya secara offline. Jika kamu menggunakan bootstrap secara online, kamu hanya mengimport link CDN nya ke dalam codingan nya. Jadi jika kamu ingin melihat perubahan tampilan nya kamu harus terhubung ke internet. Jika kamu ingin menggunakan nya secara offline, kamu bisa mendownload file bootstrap dengan ukuran dibawah 10 MB. Jika kamu menggunakan bootstrap secara offline, kamu bisa memodifikasi codingan css nya sesuai dengan keinginan mu. Selain itu, jika kamu ingin melihat perubahan tampilan nya kamu tidak perlu terhubung ke internet. Berikut ini adalah cara menggunakan bootstrap secara online
Cara Menggunakan Bootstrap Secara Online
1. Kunjungi situs resmi nya bootstrap, yaitu https://getbootstrap.com/
2. Setelah itu kunjungi halaman dokumentasi nya atau bisa melalui https://getbootstrap.com/docs/5.3/getting-started/introduction/
3. Buatlah file index.html dan salin codingan yang terdapat pada halaman dokumentasi.
4. Contohnya codingan lengkapnya seperti dibawah ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
5. Codingan diatas merupakan contoh cara penggunaan bootstrap secara online. Kamu bisa menambahkan file css ataupun codingan lainnya sesuai dengan tampilan website yang kamu inginkan.
Cara Menggunakan Bootstrap Secara Offline
1. Kunjungi situs resmi nya bootstrap, yaitu https://getbootstrap.com/
2. Untuk menggunakan bootstrap secara offline, kamu harus mendownload file css dan file javascript nya terlebih dahulu pada halaman https://getbootstrap.com/docs/5.2/getting-started/download/
3. Download pada bagian Compiled CSS and JS
4. Jika sudah di download, ekstrak folder nya menggunakan File Eksplorer atau File Manager
5. Jika sudah di ekstrak, buatlah file dengan nama index.html untuk tampilan awalnya
6. Contoh codingan nya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>Selamat Datang</title>
</head>
<body>
<p>Selamat Datang di Blog Freeze Coder</p>
<script src="/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</body>
</html>
7. Untuk letak file CSS dan Javascript Bootstrap nya bisa kamu sesuaikan dengan codingan mu. Contohnya saya menyimpan file bootstrap.min.css di dalam folder css dan untuk file bootstrap.min.js nya disimpan di dalam folder js.
Sekian itulah dua cara menggunakan bootstrap, baik secara online maupun online. Jika kamu masih kurang paham, silahkan bertanya di kolom komentar