Apa Itu Bootstrap?

Pengertian, Fungsi, dan

Kelebihannya
Apa Itu Bootstrap?
Bootstrap adalah framework web development berbasis HTML, CSS,
dan JavaScript yang dirancang untuk mempercepat proses
pengembangan web responsive dan mobile-first (memprioritaskan
perangkat seluler).

Selain bisa digunakan untuk mengembangkan website  dengan lebih

cepat, Bootstrap adalah framework gratis yang bersifat open-source.
Skrip dan syntax yang disediakan Bootstrap bisa diterapkan untuk
berbagai komponen dalam desain web.
Nah! Kali ini, selain membahas pengertian Bootstrap, kami juga akan
membahas kelebihan dan kekurangannya, serta berbagai jenis file yang
digunakan framework ini. Jadi, kami akan membantu Anda menentukan
apakah Bootstrap adalah pilihan tepat untuk Anda. Mari mulai!
 Fungsi Bootstrap
 Apa Kelebihan Bootstrap?
o Mudah Digunakan
o Responsive Grid
o Kompatibel dengan Banyak Browser
o Bootstrap Image System
o Dokumentasi Bootstrap yang Lengkap
 Apa Kekurangan Bootstrap?
 3 File Utama Bootstrap
o Bootstrap.css
o Bootstrap.js
o Glyphicons
 Cara Menggunakan Bootstrap dalam Web Development

Fungsi Bootstrap
Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive
dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa
bekerja secara optimal di semua ukuran layar, baik desktop maupun
perangkat seluler.
Bootstrap  tersedia dalam dua varian: versi yang sudah
dikompilasi dan didasarkan pada source code (kode sumber).
Developer yang sudah berpengalaman biasanya memilih penggunaan
Bootstrap dengan source code, karena lebih bebas menyesuaikan gaya
dengan proyek yang dikerjakan.
Contohnya, versi “kode sumber” Bootstrap memungkinkan Anda
mengakses port Sass. Jadi, framework ini akan membuat stylesheet
khusus yang mengimpor Bootstrap sehingga Anda bisa memodifikasi
dan menambahkan fungsinya sesuai kebutuhan.
Anda juga bisa menginstal Bootstrap  dengan package manager, yaitu
tool yang mengelola dan memperbarui framework, library, dan aset.
Beberapa package manager yang paling populer
adalah npm, Composer , dan Bower. Npm mengelola dependensi sisi
server, sementara Composer fokus pada front-end. Apabila menangani
proyek berbasis PHP, Anda bisa mencoba menggunakan Bower.
Karena popularitasnya ini, Bootstrap memiliki banyak komunitas. Para
developer dan desainer web bisa menjelajahi komunitas ini untuk saling
berbagi pengetahuan dan membahas versi terbaru patch Bootstrap.

Apa Kelebihan Bootstrap?

Beberapa komponen antarmuka Bootstrap mencakup navigation bar,
sistem grid, carousel gambar, dan tombol.
Apabila Anda masih belum yakin apakah Bootstrap layak untuk dicoba,
di bawah ini kami sudah merangkum sejumlah kelebihan Bootstrap
dibandingkan dengan framework web development lainnya.

Mudah Digunakan
Yap, kelebihan utama Bootstrap adalah kemudahannya untuk dipelajari.
Khususnya karena popularitasnya, banyak tutorial dan forum online
yang tersedia di internet untuk membantu Anda mulai mempelajarinya.
Salah satu alasan Bootstrap sangat populer di kalangan developer dan
desainer web adalah struktur filenya yang sederhana. File-filenya
dikompilasi untuk akses yang mudah, dan hanya
membutuhkan pengetahuan dasar HTML , CSS, serta JS untuk
memodifikasinya.
Anda juga bisa menggunakan tema untuk CMS populer sebagai bahan
praktik saat belajar. Sebagai contoh, hampir semua tema WordPress
dikembangkan menggunakan Bootstrap, yang bisa diakses oleh siapa
saja, termasuk web developer pemula.
Untuk mempercepat loading website, Bootstrap memperkecil (minify) file
CSS dan JavaScript. Selain itu, Bootstrap selalu menjaga konsistensi
syntax di antara berbagai website dan para developer, yang
membuatnya cocok untuk proyek kolaborasi tim.

Responsive Grid
Bootstrap hadir dengan sistem grid siap pakai, sehingga Anda tidak
perlu membuatnya dari nol. Sistem grid ini terdiri dari baris dan kolom,
memungkinkan Anda membuat grid baru di dalam grid yang sudah ada
tanpa perlu memasukkan kueri media dalam file CSS.
Selain itu, sistem grid Bootstrap membantu mempersingkat proses entri
data. Tersedia banyak kueri media yang memungkinkan Anda
menentukan breakpoint (titik henti) kustom setiap kolom berdasarkan
kebutuhan Anda.
Untuk menggunakan grid ini, Anda bisa langsung menggunakan
pengaturan defaultnya. Setelah membuat grid, Anda hanya perlu
menambahkan konten ke container yang ada.
Sistem grid Bootstrap memiliki dua kelas container untuk mempermudah
penanganan proyek berbasis desktop dan seluler: fixed
container (.container) dan fluid container (.container-fluid).
Kelas container pertama menyediakan container dengan lebar tetap,
sedangkan yang kedua menyediakan container dengan lebar penuh
yang mampu menyesuaikan proyek Anda dengan semua ukuran layar.

Kompatibel dengan Banyak Browser

Website yang bisa diakses dari berbagai browser tentu akan membuat
pengunjung betah membukanya. Bounce rate pun berkurang, dan
peringkat website di hasil pencarian akan turut naik. Bootstrap
memenuhi persyaratan ini melalui kompatibilitasnya dengan versi
terbaru web browser utama.
Meskipun tidak mendukung browser yang kurang populer
seperti WebKit  dan Gecko, website dengan Bootstrap biasanya tetap
bisa berfungsi tanpa masalah. Namun, akan ada sejumlah batasan
modal dan dropdown yang mungkin ditetapkan pada layar berukuran
kecil.

Bootstrap Image System

Bootstrap menangani tampilan gambar dan responsivitas menggunakan
aturan HTML dan CSS yang telah ditentukan.
Dengan menambahkan kelas .img-responsive, Anda bisa mengubah
ukuran gambar secara otomatis sesuai ukuran layar pengguna. Tentu
saja ini akan meningkatkan performa website Anda, karena mengurangi
ukuran gambar merupakan salah satu cara optimasi website .
Bootstrap juga menyediakan kelas tambahan seperti .img-
circle dan .img-rounded, yang membantu memodifikasi bentuk
gambar.

Dokumentasi Bootstrap yang Lengkap

Bootstrap menyediakan dokumentasi bagi para developer yang baru
mulai belajar menggunakan framework ini. Berikut adalah beberapa
topik yang bisa Anda temukan di halaman dokumentasi  Bootstrap:

 Konten ‒ menyediakan kompilasi source code Bootstrap.

 Browser dan perangkat ‒ mencantumkan semua browser web
dan mobile yang didukung, serta komponen berbasis seluler.
 JavaScript ‒ menguraikan berbagai plugin JS yang
dikembangkan berdasarkan jQuery.
 Tema ‒ menjelaskan variabel Sass bawaan untuk penyesuaian
yang lebih mudah.
 Alat ‒ mengajarkan cara menggunakan skrip npm Bootstrap untuk
berbagai tindakan.
 Aksesibilitas ‒ mencakup fitur dan batasan Bootstrap terkait
markup struktural, komponen, kontras warna, visibilitas konten,
dan efek transisi.
Dokumentasi ini juga mencakup contoh kode untuk praktik tingkat dasar.
Bahkan, Anda bisa menyalin dan memodifikasi contoh kode untuk
proyek Anda sehingga tidak perlu repot-repot menulis kodenya dari nol.

Apa Kekurangan Bootstrap?

Meskipun memiliki banyak kelebihan, Bootstrap juga punya
keterbatasan tertentu yang tidak cocok untuk proyek tertentu.
Kekurangan Bootstrap adalah gaya visualnya yang hampir selalu sama,
sehingga Anda perlu melakukan banyak penyesuaian gaya agar proyek
Anda tidak monoton. Kalau tidak, semua website yang dibuat
dengannya akan memiliki navigasi, struktur, dan komponen desain yang
sama, yang tentu saja kurang menarik dan profesional.
Selain itu, jumlah fungsi yang sangat banyak membuat ukuran file jadi
membengkak. Akibatnya, waktu loading website menjadi lambat dan
server cukup terbebani kalau Anda tidak cermat. Untuk menghindari
masalah ini, tambahkan kelas yang Anda butuhkan saja dan gunakan
versi file yang di-minify.
Meskipun Bootstrap kompatibel dengan versi terbaru browser populer,
masalah terkadang malah timbul di versi lama browser.
Artinya, tampilan website Anda akan sepenuhnya bergantung pada
pengguna, apakah mereka sudah memperbarui browsernya atau belum.
Kelemahan lainnya adalah gaya Bootstrap relatif besar. Tidak menutup
kemungkinan bahwa nantinya akan ada output HTML yang tidak
diperlukan, sehingga membuang-buang resource CPU.
Meskipun mudah digunakan, Bootstrap agak sulit dipelajari kalau benar-
benar baru memulai. Perlu waktu untuk mempelajari kelas dan
komponennya, yang mungkin cukup rumit apabila tidak memiliki skill
teknis sama sekali.

3 File Utama Bootstrap

Bootstrap terdiri dari kumpulan syntax yang dikompilasi dalam tiga file
utama: Bootstrap.css, Bootstrap.js, dan Glyphicons. Perlu diingat
bahwa Bootstrap memerlukan library JS yang disebut jQuery untuk
menjalankan plugin dan komponen JS.
Berikut adalah tiga file framework utama yang mengelola antarmuka
pengguna dan fungsionalitas website.

Bootstrap.css
Bootstrap.css adalah framework CSS yang mengatur dan mengelola
tata letak website. Kalau HTML bertugas untuk menangani konten dan
struktur halaman web, CSS menangani tata letaknya. Jadi, kedua
struktur ini perlu bekerja sama untuk melakukan tindakan tertentu.
Dengan fungsionalitasnya, Bootstrap.css membantu para developer
menciptakan tampilan yang seragam di sebanyak mungkin halaman
sesuai kebutuhan. Hasilnya, mereka pun tidak perlu menghabiskan
waktu berjam-jam untuk mengedit secara manual.
Daripada menulis coding dari awal, Anda hanya perlu mereferensikan
halaman web ke file CSS. Setiap perubahan yang diperlukan bisa
dilakukan dalam file itu sendiri.
Fungsi CSS tidak terbatas pada gaya teks saja karena Anda bisa
menggunakannya untuk memformat aspek lain dalam website, seperti
tabel dan tata letak gambar.
Karena CSS memiliki banyak deklarasi dan selector, dibutuhkan waktu
yang tidak sebentar untuk menghafalkan semuanya.

Bootstrap.js
Ini adalah bagian inti Bootstrap, terdiri dari file JavaScript yang bertugas
untuk menangani interaktivitas website.
Agar tidak perlu menulis syntax JavaScript berulang kali, developer
biasanya menggunakan jQuery, library JavaScript populer yang open-
source dan bisa digunakan lintas platform.
Berikut adalah beberapa fungsi yang bisa dilakukan jQuery:

 Melakukan permintaan AJAX , seperti mengurangi data dari lokasi

lain secara dinamis.
 Membuat widget menggunakan kumpulan plugin JavaScript.
 Membuat animasi kustom menggunakan properti CSS.
 Menambahkan dinamika pada konten website.
Meskipun bisa berfungsi lancar dengan properti CSS dan elemen HTML,
Bootstrap membutuhkan jQuery untuk membuat desain responsive.
Tanpanya, Anda hanya bisa menggunakan bagian kosong dan statis
bahasa stylesheet tersebut.
Jadi, setiap engineer software harus memahami dulu apa itu jQuery ,
karena merupakan salah satu bagian penting pengembangan web.

Glyphicons
Ikon merupakan bagian yang cukup krusial pada front-end website,
karena biasanya merepresentasikan tindakan dan data dalam
antarmuka pengguna.
Bootstrap menggunakan ikon yang disebut Glyphicons, yang
mencakup set Halflings Glyphicons . Meskipun desainnya terlihat biasa
saja, Glyphicons memiliki fungsi yang penting, dan boleh digunakan
secara bebas.
Kalau Anda ingin menggunakan gaya ikon yang lebih
beragam, Glyphicons  menjual berbagai kumpulan ikon premium untuk
website dengan niche tertentu.
Anda juga bisa mendownload ikon individual dan ikon khusus tema
secara gratis di berbagai website seperti Flaticon, GlyphSearch ,
dan Icons8 .
Untuk mengubah ukuran Glyphicons, Anda perlu menimpa gaya default
dengan properti font-size (ukuran font) CSS.

Cara Menggunakan Bootstrap dalam

Web Development
Untuk mendapatkan gambaran yang lebih baik tentang cara
menggunakan bootstrap, mari lihat contoh di bawah ini.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Kami akan menjelaskan beberapa baris ini secara lebih mendetail.

meta charset="utf-8"

Menyatakan set karakter yang digunakan untuk menulis website. Di sini,

UTF-8 mengacu pada Unicode.
meta http-equiv="X-UA-Compatible"

Menentukan versi Internet Explorer yang akan merender halaman.

Menggunakan mode Edge, konfigurasinya menetapkan mode paling
tinggi yang tersedia.
meta name="viewport"

Memastikan bahwa halaman memiliki rasio 1:1 dengan ukuran viewport

(area pandang).
link href="css/bootstrap.min.css" rel="stylesheet"

Ini adalah area untuk menambahkan CSS inti Bootstrap.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Memuat jQuery melalui CDN Google. Akan lebih baik untuk memuatnya
dari CDN melalui HTTP karena file bisa disimpan selama setahun dalam
cache.
src="js/bootstrap.min.js

Menambahkan JavaScript inti Bootstrap. Syntax ini harus berada di

bawah syntax jQuery agar berfungsi dengan baik. Proses penambahan
bisa dilakukan melalui URL Google atau download manual.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/
tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Bootstrap menyediakan bundle JavaScript untuk menyederhanakan

proses tersebut.
Tapi, bootstrap.bundle.js dan bootstrap.bundle.min.js menyertakan 
Popper , bukan jQuery. Popper adalah mesin pemosisian untuk
menghitung pemosisian elemen.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-
only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>

Contoh cara menggunakan link navigasi navbar Bootstrap untuk

membuat menu website.

Jadi, Bootstrap adalah…

Bootstrap adalah framework front-end gratis yang cukup populer di
kalangan developer saat ini, khususnya yang bekerja di bidang desain
web. Framework ini mudah digunakan dan membantu developer bekerja
lebih cepat tanpa harus menulis kode HTML, CSS, dan JavaScript
secara manual.
Selain itu, Bootstrap merupakan framework yang fleksibel dan mampu
membantu hampir semua proses web development front-end. Fitur
terbaiknya adalah template desain yang mengoptimalkan performa
halaman web di semua ukuran layar.
Meskipun sedikit sulit dipelajari, Bootstrap punya banyak materi dan
dokumentasi untuk membantu Anda mulai menggunakannya. Anda bisa
menggunakan beberapa platform untuk belajar, seperti halaman
dokumentasi Bootstrap dan forum khusus IT seperti Stack Overflow .
Semoga artikel ini membantu Anda mempelajari selengkapnya tentang
apa itu Bootstrap beserta manfaatnya dalam pengembangan dan desain
web, ya. Kalau masih punya pertanyaan, sampaikan saja lewat kolom
komentar di bawah ini.