.jpeg "Pengenalan Bootstrap")
Apa itu Bootstrap ? Bootstrap adalah sebuah framework berbasis HTML, CSS, dan Javascript yang digunakan untuk mengembangkan sebuah website. Bootstrap dirancang agar mempermudah para web developer (khususnya front end) untuk mengembangkan website. Karena dengan bootstrap, para web developer lebih mudah untuk membuat website dengan tampilan yang responsive.
Selain digunakan untuk mengembangkan website, Bootstrap juga merupakan salah satu framework yang bersifat open source. Meskipun bersifat open source, bootstrap memiliki 2 varian yang bisa kamu gunakan. Pertama yang sudah dikompilasi dan yang kedua open source. Bootstrap juga bisa digunakan dengan 2 cara, pertama dengan online dan yang kedua dengan cara offline. Nah itulah sedikit penjelasan tentang Bootstrap. Sekarang kita bahas lebih detailnya, mulai dari kelebihan, kekurangan, dan cara penggunaan nya.
Kelebihan Bootstrap
Diatas kita sudah mengetahui apa itu Bootstrap, nah sekarang kita akan membahas kelebihan bootstrap. Pastikan sebelum kamu menggunakan Bootstrap, kamu harus mengetahui kelebihan dari Bootstrap. Berikut ini adalah kelebihan kelebihan yang dimiliki oleh botstrap.
- Membuat website jadi responsive
Kelebihan bootstrap yang pertama adalah membuat website jadi responsive. Dengan bantuan bootstrap, web developer akan lebih mudah dalam membuat tampilan yang responsive. Responsive maksudnya adalah tampilan website yang menyesuaikan perangkat pengguna.
- Mempermudah web developer
Dengan adanya bootstrap, para web developer lebih mudah menyelesaikan pekerjaannya dalam mengembangkan website. Karena selain dapat membantu membuat tampilan website yang responsive, bootstrap juga memiliki banyak fitur yang dapat digunakan oleh para pengguna nya. Contohnya seperti grid layout, navbar, button, image slider, accordion dan fitur lainnya.
- 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. Contoh jika ingin membuat navbar menggunakan bootstrap, maka sudah tersedia source code nya, jadi tinggal menyalin nya ke text editor.
- Mudah digunakan
Salah satu kelebihan yang dimiliki oleh bootstrap adalah mudah digunakan. Karena bootstrap adalah framework yang bersifat open source, jadi lebih mudah untuk memodifikasi file file nya sesuai dengan keinginan pribadi. Untuk memodifikasi nya, kamu hanya membutuhkan pengetahuan tentang bahasa Html, CSS, dan JavaScript.
- Kompatibel pada beberapa browser
Yang terakhir, bootstrap juga support pada beberapa browser. Jadi memudahkan para pengembang website agar situs nya bisa diakses melalui browser apapun. Selain memudahkan untuk para pengembangan website, hal ini juga memudahkan para pengunjung website untuk mengakses website. Contohnya browser yang populer adalah google chrome. Nah selain google chrome, kamu bisa menggunakan uc browser, opera mini, dan uc turbo.
Kekurangan Bootstrap
Meskipun memiliki beberapa kelebihan, bootstrap juga memiliki kekurangan nya. Berikut ini adalah beberapa kekurangan dari bootstrap.
- Membuat website menjadi lambat
Meskipun bootstrap membantu dalam pengembangan website, namun bootstrap juga bisa membuat website menjadi lambat. Penyebab website menjadi lambat adalah karena terlalu banyak file ataupun banyak script yang terdapat dalam codingan nya sehingga akan menambah ukuran file nya. Contohnya script loader ataupun penggunaan JavaScript yang terlalu banyak, maka akan membuat website menjadi lambat.
- Memiliki gaya visual yang hampir sama
Jika gaya visual nya hampir sama, maka website terlihat monoton dan kurang menarik. Jadi jika ingin memiliki gaya visual yang berbeda, kamu harus bisa melakukan penyesuaian terhadap gaya visual yang akan diterapkan pada website milikmu.
- Terdapat bug pada web browser
Hal ini sering terjadi ketika saya menggunakan bootstrap. Biasanya penyebab terdapat bug mya adalah karena browser yang kamu gunakan itu versi lama. Jadi cara mengatasi nya adalah dengan mengupdate browser yang kamu gunakan. Jika masih belum teratasi bug nya, kamu hapus data browser milikmu dan coba jalankan ulang bootstrap. Biasanya dampak dari bug ini adalah tampilan website tidak berpengaruh ketika sudah mengedit codingan nya.
Setelah mengetahui kelebihan dan kekurangan bootstrap, sekarang kita lanjut cara menggunakan bootstrap. Untuk menggunakan bootstrap, kita bisa menggunakan 2 cara. Cara yang pertama adalah menggunakan nya secara online dan cara yang kedua adalah menggunakan nya secara offline. Jika menggunakan yang online, kamu hanya mengimport file CSS dan JavaScript dan untuk melihat perubahan tampilan nya kamu harus terhubung ke internet. Jika menggunakan yang offline, kamu bisa mendownload bootstrap nya dengan ukuran dibawah 5 MB. Kamu bisa memodifikasi codingan nya dan untuk melihat perubahan tampilan nya tidak perlu terhubung ke internet. Jadi kamu bebas mau memilih menggunakan nya secara online ataupun offline. Berikut ini adalah cara menggunakan nya.
Cara Menggunakan Bootstrap Secara Online
1. Kunjungi situs resmi nya bootstrap, yaitu https://getbootstrap.com/
2. 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 dokumentasi nya.
4. Kamu bisa menuliskan codingan dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>5. Codingan diatas merupakan contoh cara penggunaan bootstrap secara online. Kamu bisa menambahkan codingan lainnya sesuai dengan tampilan website yang kamu inginkan.
Rekomendasi artikel lainnya :
Cara Menggunakan Bootstrap Secara Offline
1. Kunjungi situs resmi nya bootstrap, yaitu https://getbootstrap.com/
2.Untuk menggunakan Bootstrap secara offline, kamu harus mendownload nya terlebih dahulu pada halaman https://getbootstrap.com/docs/5.3/getting-started/download/
3. Scroll ke bawah dan kamu klik tombol download pada halaman Compiled CSS dan JS.
4. Jika sudah di download, ekstrak file nya menggunakan file manager.
5. Jika sudah di ekstrak, kamu buat file dengan nama index.html untuk membuat tampilan awal nya
6. Kemudian buka folder Bootstrap pada text editor milikmu, contoh di sini saya menggunakan Acode
7. 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 Gans</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>8. Untuk pemanggilan css nya bisa kamu sesuaikan dengan letak folder css Bootstrap nya dan pemanggilan JavaScript nya pun kamu sesuaikan dengan letak folder JavaScript Bootstrap.
Sekian itulah cara menggunakan Bootstrap, baik secara online ataupun offline. Jika kamu kurang paham, kamu bisa tanyakan di kolom komentar.