Scribd
Unggah
90 tayangan30 halaman

Bootstrap

Bootstrap adalah framework CSS yang digunakan untuk medesain website secara responsif dari berbagai perangkat. Dokumen ini membahas pengantar, layout menggunakan sistem grid baris dan kolom, serta komponen seperti tombol, alert, tabel, form, dan navbar pada Bootstrap.

Diunggah oleh

KevinPrilian
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
90 tayangan30 halaman

Bootstrap

Bootstrap adalah framework CSS yang digunakan untuk medesain website secara responsif dari berbagai perangkat. Dokumen ini membahas pengantar, layout menggunakan sistem grid baris dan kolom, serta komponen seperti tombol, alert, tabel, form, dan navbar pada Bootstrap.

Diunggah oleh

KevinPrilian
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
Anda di halaman 1/ 30

TIB22 – PERANCANGAN

PEMROGRAMAN WEB
BOOTSTRAP
Pertemuan ke-13 dan 14
Sub-CPMK
Mahasiswa mampu membuat website statis dengan
menggunakan jQuery dan framework bootstrap (C3, A3)

Materi
1. Pengantar Bootstrap
2. Layout Bootstrap
3. Komponen Bootstrap
4. Penerapan JQuery dan Bootstrap pada Aplikasi
1. Pengantar Bootstrap
1.1 Bootstrap
• Bootstrap adalah sebuah framework CSS yang
digunakan untuk medesain website.
• Bootstrap memungkinkan desain sebuah web
menjadi responsive sehingga dapat dilihat dari
berbagai macam ukuran device dengan
tampilan tetap menarik.
• Bootstrap yang digunakan adalah bootstrap
versi 4.
1.2 Penggunaan Bootstrap
Cara penggunaan Bootstrap seperti berikut.
• Bootstrap dapat di download melalui
https://getbootstrap.com/
• Salin folder dist ke folder tempat
penyimpanan file website.
• Tambahkan tag <meta name=“viewport”> di
elemen <head> pada file template yang
menggunakan bootstrap untuk membuat web
responsive.
1.2 Penggunaan Bootstrap
(Lanj..)
• Panggil file bootstrap.min.css pada elemen
<head>
• Panggil library jQuery dan file atau
bootstrap.bundle.min.js bootstrap.min.js di
bagian akhir elemen <body>.
1.3 Struktur Dasar
2. Layout Bootstrap
2.1 Layout
• Layout pada bootstrap menggunakan grid
system yang terdiri dari baris dan kolom dan
dibungkus dengan container.
• Container merupakan tag <div> yang diberi
class container atau container-fluid.
• Baris merupakan tag <div> yang diberi class
row.
• Kolom merupakan tag <div> yang diberi class
dengan diawali col-.
2.1 Layout (Lanj..)
• Format penulisan kolom sebagai berikut
<div class=“col-{breakpoint}-{lebar kolom}”>

• Lebar kolom merupakan angka dari 1 – 12,


dimana 12 untuk lebar memenuhi container.
• Breakpoint diisi sesuai dengan target layar
diantaranya
xs sm md lg xl
< 576px ≥ 576px ≥ 768px ≥ 992px ≥ 1200px
Contoh Layout
Code
Contoh Layout (Lanj..)
Output
Contoh Layout (Lanj..)
3. Komponen Bootstrap
3.1 Background Color
• Background color pada bootstrap
menggunakan class bg-.
3.1 Button
• Button pada bootstrap dapat dibuat dengan
tag <a>, <button>, dan <input> yang diberi
class btn.
3.2 Alert
• Alert digunakan untuk menampilkan pesan
kepada pengunjung website.
• Alert dibuat menggunakan tag <div> dengan
tambahan class alert.
3.2 Alert (Lanj..)
3.3 Table
• Pada bootstrap dalam membuat table
menggunakan tag table serta menambahkan
class table.
3.3 Table (Lanj..)
• Ada beberapa class table pada bootstrap
yaitu:
– table-striped: memberikan warna background
secara bergantian.
– table-bordered: akan membuat bingkai pada
semua cell.
– table-hover: memberikan efek Ketika mouse
diarahkan ke table.
– table-condensed: membuat table lebih kompak
dengan merapatkan jarak setiap cell-nya.
3.3 Table (Lanj..)
3.4 Form
• Bootstrap menyediakan desain yang menarik
pada berbagai elemen pada form.
• Umumnya class yang dapat digunakan pada
elemen form yakni form-group yang diberikan
pada tag <div>.
3.4 Form (Lanj..)
3.5 Navbar
• Navbar digunakan sebagai navigasi utama
yang memilki sifat responsive.
• Navbar digunakan pada tag <nav> yang diberi
class navbar.
3.5 Navbar (Lanj..)
4. Penerapan JQuery dan
Bootstrap pada Aplikasi
4.1 Penerapan JQuery dan
Bootstrap
Ringkasan
• Bootstrap adalah sebuah framework CSS yang
digunakan untuk medesain website.
• Layout pada bootstrap menggunakan grid
system yang terdiri dari baris dan kolom dan
dibungkus dengan container.
• Komponen bootstrap terdiri dari button, alert,
table, form, dan lain sebagainya.
Terima Kasih

Anda mungkin juga menyukai