Scribd
Unggah
21 tayangan3 halaman

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
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
21 tayangan3 halaman

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
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

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 : [Link]

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