Dokumen tersebut membahas komponen-komponen responsive dalam pembuatan website menggunakan Bootstrap seperti button groups, button dropdowns, navigasi, navbar, breadcrumbs, pagination, label, badges, tipeografi, thumbnail, alert, progress bar, media object dan elemen lainnya beserta penjelasan singkat mengenai penggunaan kelas CSS untuk masing-masing komponen.

1. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Pertemuan 9 {
button groups, button dropdowns, navs,
navbar, breadcrumbs, pagination, label &
badges, typography, thumbnails, alerts,
progress bars, media object, misc
Web Responsive
[Components]
}
web.html responsive.css

2. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Button Groups;
Pengelompokan tombol yang dirangkai dalam satu baris,
biasanya ditambahkan efek dengan menggunakan javascript.
Terdapat beberapa macam button group yang dapat digunakan,
diantaranya adalah basic button group, button toolbar,
vertical button group, sizing dan nesting. Class yang
digunakan adalah btn-group.
Web Responsive
web.html responsive.css

3. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Button Dropdowns;
Pengelompokan tombol dan dropdown yang membantuk daftar
vertical, penggunaan komponen ini disertai dengan javascript
untuk menampilkan daftarnya. Class yang digunakan adalah btn
dan dropdown-menu.
Web Responsive
web.html responsive.css

4. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Navs;
Navigasi atau susunan menu yang membentuk untaian yang
memanjang secara horizontal. Class yang digunakan adalah nav.
Terdapat berbagai macam navs, diantaranya adalah base nav
(position:left, center, right), vertical, tabs, pills, dsb.
Web Responsive
web.html responsive.css

5. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Navbar;
Navigasi atau susunan menu yang membentuk untaian yang
memanjang secara horizontal dibungkus dengan bar (objek
persegi panjang). Class yang digunakan adalah navbar. Konten
dalam navbar mendukung untuk brand, toggler, form inline,
text, color, dsb.
Web Responsive
web.html responsive.css

6. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Breadcrumbs;
Penanda lokasi atau path file dalam suatu hirarki dengan
pemisah tertentu seperti slash (/). Class yang digunakan
adalah breadcrumb.
Web Responsive
web.html responsive.css

7. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Pagination;
Serangkaian navigasi halaman dengan penomoran urut, biasanya
digunakan untuk membatasi jumlah data yang ditampilkan. Class
yang digunakan adalah pagination. Navigasi ini dapat
dimodifikasi seperti menggunakan icon, menambahkan bagian
yang aktif, pengaturan posisi dan ukuran.
Web Responsive
web.html responsive.css

8. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Label & Badges;
Label merupakan komponen pelengkap dalam struktur html yang
digunakan untuk memberikan keterangan dalam bentuk tulisan,
biasanya pelengkap untuk komponen input, sedangkan badges
class labeling yang tersedia pada bootstrap, dengan ini label
dapat dikelola ukuran dan variasi lainnya.
Web Responsive
web.html responsive.css

9. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Typography;
Pengaturan karakter dalam berbagai macam bentuk dan
modifikasi. Ini mencangkup ukuran, pewarnaan, bentuk, tata
letak, dsb.
Web Responsive
web.html responsive.css

10. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Alert;
Umpan balik dalam bentuk pesan peringatan, ini dapat
digunakan dengan mengacu pada tindakan yang dilakukan oleh
pengguna. Class yang digunakan adalah alert. Komponen ini
dapat dimodifikasi seperti modifikasi pewarnaan, penambahan
konten lain, beserta dismiss.
Web Responsive
web.html responsive.css

11. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Progress Bar;
Komponen grafis untuk melihat sejauh mana suatu proses atau
langkah berjalan. Komponen ini dapat digunakan untuk unduh,
download, transfer, pemasangan, dsb. Class yang digunakan
adalah progress. Terdapat berbagai macam progress bar,
perubahan bentuk pada progress bar terjadi karena penambahan
elemen dan pewarnaan.
Web Responsive
web.html responsive.css

12. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Media Object;
Komponen media yang mengandung informasi seperti digunakan
untuk komentar, postingan, dsb. Class yang digunakan adalah
media. Terdapat beberapa bentuk media yang dapat digunakan
seperti default media object, nesting, penempatan, bentuk
list dan sebagainya.
Web Responsive
web.html responsive.css

13. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Misc;
Elemen ini terdiri dari address, blockquote dan inline
element.
Web Responsive
web.html responsive.css