Bootstrap adalah framework front-end open-source yang memudahkan pengembangan situs web responsif dengan komponen siap pakai dan dokumentasi lengkap. Ini memungkinkan pengembang untuk membuat tata letak yang menarik dan konsisten tanpa harus memulai dari nol, serta mendukung berbagai interaksi dinamis. Dengan integrasi CSS dan JavaScript, Bootstrap membantu menciptakan pengalaman pengguna yang lebih baik di berbagai perangkat.

1. SESI 2
Pemanfaatan
Framework
Bootstrap
I

2. MARI KITA SIMAK VIDEO BERIKUT INI

3. Apa itu Bootstrap?
Bootstrap adalah framework front-end open-source yang digunakan untuk
merancang dan mengembangkan situs web responsif dan mobile-first.
Diciptakan oleh tim pengembang dari Twitter, Bootstrap menawarkan
kumpulan alat dan sumber daya yang memungkinkan pengembang untuk
membuat tata letak situs web yang konsisten dan menarik secara visual.
Dengan penggunaan komponen-komponen yang sudah siap pakai,
pengembang tidak perlu membuat tata letak dan desain dari awal,
sehingga mempercepat proses pengembangan situs web.
I

4. Kelebihan Bootstrap
Rancangan Responsif
Bootstrap memungkinkan pengembang
untuk dengan cepat membuat tata letak
responsif yang akan terlihat baik di
berbagai ukuran layar, mulai dari
perangkat mobile hingga desktop. Ini
menghemat waktu dan usaha dalam
membuat tata letak yang responsif
secara manual.
Perpustakaan Komponen Siap
Pakai
Bootstrap dilengkapi dengan beragam
komponen UI siap pakai seperti tombol,
formulir, dan navigasi yang
memudahkan pengembang dalam
membangun antarmuka pengguna
yang menarik dan konsisten.
Dokumentasi Kaya dan Aktif
Bootstrap memiliki dokumentasi yang lengkap dan komunitas yang aktif, menjadikannya
mudah dipelajari dan didukung oleh berbagai tutorial, forum, dan sumber daya belajar
lainnya.

5. Cara penggunaan Bootstrap
1 Menambahkan Bootstrap ke Proyek
Langkah pertama dalam menggunakan Bootstrap adalah dengan menambahkan
library Bootstrap ke dalam proyek HTML Anda. Ini dapat dilakukan dengan
mengunduh file Bootstrap atau menggunakan versi terbaru dari CDN.
2 Mempelajari Dasar-dasar Grid System
Grid system adalah dasar dari Bootstrap yang memungkinkan pengembang untuk
membuat tata letak responsif secara efisien. Mengetahui cara kerja grid system
sangat penting dalam menggunakan Bootstrap secara efektif.
3 Memanfaatkan Komponen-komponen Siap Pakai
Selain grid system, Bootstrap juga menawarkan berbagai komponen UI siap pakai.
Mulai dari tombol, formulir, hingga navigasi, pengembang dapat langsung
menggunakan komponen ini dalam proyek mereka tanpa perlu membuatnya dari
awal.

6. Menggunakan Bootstrap dalam
HTML
1 Grid System
Bootstrap menyediakan grid system
berbasis 12 kolom yang
memudahkan pengaturan tata letak
halaman web.
2 Komponen Bootstrap
Penggunaan komponen-komponen
Bootstrap seperti tombol, formulir,
dan navigasi dapat mempermudah
pengembangan antarmuka
pengguna pada halaman web
HTML.
3 Responsivitas yang Konsisten
Dengan menggunakan kelas-kelas Bootstrap, pengembang dapat memastikan
tampilan halaman web tetap responsif di berbagai ukuran layar dan perangkat.

7. Menggunakan Bootstrap dalam CSS
Kepentingan Integrasi dengan CSS
Menggunakan Bootstrap dalam CSS
memastikan konsistensi dalam tampilan situs
web. Integrasi dengan CSS juga
memungkinkan penyesuaian tampilan lebih
mendalam sesuai kebutuhan proyek.
Customization dengan CSS
Dengan menggunakan CSS, pengembang
dapat membuat modifikasi pada tampilan
komponen-komponen Bootstrap atau
membuat gaya khusus untuk situs web
mereka.

8. Menggunakan Bootstrap dalam
JavaScript
1 Komponen JavaScript yang
Siap Pakai
Bootstrap menyediakan beragam
komponen JavaScript siap pakai seperti
dropdowns, modals, dan tooltips yang
dapat dengan mudah diintegrasikan
dalam proyek.
2 Interaksi Dinamis
Dengan menggunakan JavaScript
dalam Bootstrap, pengembang dapat
menambahkan interaksi dinamis pada
situs web, meningkatkan pengalaman
pengguna secara keseluruhan.

9. Komponen-komponen Bootstrap
Komponen Antarmuka Pengguna
Bootstrap menawarkan beragam komponen
antarmuka pengguna yang siap pakai, seperti
tombol, navigasi, dan formulir, yang
memudahkan pembuatan tampilan yang
menarik dan konsisten.
Plugin dan Utilitas
Selain komponen dasar, Bootstrap juga
menyediakan plugin-plugin seperti
datepicker, collapse, dan popover yang dapat
meningkatkan fungsionalitas situs web.

10. Membuat tata letak responsif
dengan Bootstrap
1 Gunakan Grid System
Grid system Bootstrap memungkinkan penataan elemen-elemen secara
responsif sehingga situs web akan terlihat baik di berbagai perangkat.
2 Penggunaan Media Queries
Menggunakan media queries dapat membantu menyesuaikan tata letak
situs web dengan baik pada berbagai ukuran layar.

11. Membuat tata letak responsif dengan
Bootstrap
Pemahami Tipe Grid
Memahami sistem grid
Bootstrap membantu
dalam menata elemen-
elemen situs web untuk
tampil responsif di
sejumlah perangkat.
Perhatikan Ukuran
Layar
Melakukan penyesuaian
tata letak berdasarkan
ukuran layar merupakan
langkah penting dalam
membuat situs web
responsif.
Uji Responsifitas Situs
Sebelum penyelesaian,
pastikan untuk menguji
tampilan situs pada
berbagai perangkat untuk
memastikan
responsifitasnya.

12. Contoh penggunaan Bootstrap dalam
proyek
1 Situs Web Pendidikan
Menggunakan Bootstrap, pembuat situs
web pendidikan dapat membuat
tampilan yang menarik dan intuitif untuk
para siswa dan pengajar.
2 Toko Online
Bootstrap menyediakan beragam
komponen UI yang mempermudah
pembuatan tampilan toko online yang
menarik dan responsif di berbagai
perangkat.

13. Bootstrap
▶ Framework/kerangka kerjaCSSyangbersifat open
source dan digunakan untuk kebutuhan pembuatan
tampilan desain visual dari aplikasi webatau situs
website. Kerangka kerjayangdigunakan
berbentuk template desain berbasis HTMLdan CSS
untuk kebutuhan pengembangan navigasi, tombol,
tipografi, formulir, dan komponen antarmukayang
lainnya.
▶ Bootstrap jugamemilikifitur yangmencakup library dari
JavaScript. Untuk penggunaandari framework ini
digunakan untuk membantudalammenyusunprogram
aplikasipadasisi front end (client –side).

37. PRAKTIK
 Langkah 1: Menyertakan Bootstrap
Tambahkan tautan ke Bootstrap di bagian <head> dokumen HTML Anda. Anda bisa
menggunakan tautan ke CDN Bootstrap atau mengunduh dan menyertakan file Bootstrap
lokal.
 Langkah 2: Membuat Layout Dasar
Tambahkan konten halaman ke dalam elemen <body>. Gunakan kelas-kelas Bootstrap untuk
mengatur struktur dan tata letak.
 Langkah 3: Menambahkan Komponen Bootstrap
Gunakan komponen Bootstrap untuk meningkatkan tampilan dan fungsionalitas halaman.
Misalnya, tambahkan tombol dan jumbotron
 Pastikan untuk merujuk dokumentasi Bootstrap untuk memahami lebih lanjut tentang
komponen dan opsi yang tersedia: Bootstrap Documentation