Scribd
Unggah
11 tayangan

CSS Bootstrap

CSS Bootstrap adalah kerangka kerja front-end untuk membangun tampilan halaman web secara efisien dan responsif. Dokumen ini menjelaskan tujuan, sejarah, dan komponen Bootstrap serta cara mengintegrasikannya ke halaman web.

Diunggah oleh

resti nuriqhwanti
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

CSS Bootstrap

CSS Bootstrap adalah kerangka kerja front-end untuk membangun tampilan halaman web secara efisien dan responsif. Dokumen ini menjelaskan tujuan, sejarah, dan komponen Bootstrap serta cara mengintegrasikannya ke halaman web.

Diunggah oleh

resti nuriqhwanti
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

CSS Bootstrap

• Apa itu CSS Bootstrap?

CSS Bootstrap adalah kerangka kerja (framework) front-end yang digunakan untuk membangun
tampilan dan tata letak halaman web secara efisien dan responsif.

• Sejarah CSS Bootstrap:

Dikembangkan oleh Twitter sebagai alat internal, lalu dirilis sebagai proyek open-source.

Versi pertama, Bootstrap 1, dirilis pada tahun 2011.

• Tujuan Penggunaan:

Membantu pengembang web merancang halaman yang konsisten, menarik, dan responsif
dengan cepat.

Mengenal Komponen Bootstrap

Dokumentasi Bootstrap : https://getbootstrap.com/docs/5.3/components/buttons/

1. Grid System: Tata Letak Responsif

• Membagi halaman menjadi kolom dan baris.

• Mendukung tampilan yang responsif pada berbagai perangkat (desktop, tablet, ponsel).

• Contoh kode :
2. Komponen UI yang Siap Pakai

• Tombol, formulir, kartu, jumbotron, bilah progres, ikon, dan lainnya.

• Memungkinkan pembangunan tampilan halaman web dengan komponen yang


konsisten.

3. Komponen Navigasi dan Organisasi Konten

• Navbar: Menampilkan menu navigasi atas halaman.

• Tab: Mengatur konten dalam tab terpisah.

• Menu Dropdown: Membuat menu drop-down yang terorganisir.

Integrasi CSS Bootstrap

1. Menambahkan Bootstrap ke Halaman Web

• Mengunduh dari dan menyisipkan file Bootstrap ke dalam proyek.

File download berisikan :

Menggunakan tautan (link) stylesheet dalam elemen <head>.


Atau menggunakan CDN

2. Menerapkan Kelas Bootstrap pada Elemen HTML

• Menggunakan kelas-kelas CSS Bootstrap untuk menerapkan tampilan dan gaya.

• Contoh: <button class="btn btn-primary">Klik Saya</button>.

3. Menyesuaikan Tampilan dengan CSS Tambahan

• Menambahkan aturan CSS khusus untuk memodifikasi tampilan Bootstrap.

Anda mungkin juga menyukai