Tutorial Bootstrap : Badges, Progress Bars, dan Pagination

Bootstrap : Badges, Progress Bars, dan Pagination

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempataan kali ini saya akan menjelaskan cara menggunakan badge, progress bars, dan pagination yang benar di bootstrap.

1.Pengertian

Bootstrap adalah sebuah framework yang bersifat open source. Bootstrap adalah sebuah framework yang digunakan untuk membuat sebuah website dinamis dengan menggunakan bahasa script CSS. Bootstrap dapat membantu developer dan designer dalam membuat sebuah tampilan website dengan cepat dan mudah tanpa harus membuatnya dari awal.

2.Latar Belakang
Mencari cara agar dapat membuat front end website dengan bagus, responsive, dan efektif. Tanpa harus membutuhkan waktu yang lama.

3.Maksud dan Tujuan
Paham dan dapat menggunakan Bootstrap, sehingga pengembangan front end dapat dilakukan dengan mudah.
B. Alat dan Bahan

- PC

- Text Editor

- Web Browser

C. Jangka Waktu Pelaksanaan

-

D. Penjelasan

Badge
Badge digunakan untuk memberikan informasi tambahan pada konten. Gunakan class .badge bersamaan dengan class tambahan (seperti .badge-secondary) dalam elemen <span>.

1. Cotextual Badges

Tambahkan class tambahan untuk mengganti warna badge.

Class tambahan :

• badge-primary
• badge-secondary
• badge-success
• badge-danger
• badge-warning
• badge-info
• badge-light
• badge-dark

2. Pill Badges

 Digunakan untuk membuat badge menjadi lonjong. Digunakan dengan cara menambahkan class .badge-pill setelah class .badge di elemen <span>.

3. Badge Inside Element

Digunakan untuk menyertakan badeg di sebuah elemen. Salah satunya yaitu menyertakan badge dalam button / tombol.

Contoh Penggunaan :

Progress Bars
1. Basic Progress Bar
Progress Bar digunakan untuk menunjukan seberapa jauh dia dalam suatu proses. Untuk membuat progress bar default kita dapat menambahkan class .progress di elemen <div>, setelah itu buat lagi elemn <div> di dalamnya lalu tambahkan class .progress-bar dan atur width untuk mengatur seberapa jauh iya dalam proses.
2. Progress Bar Height

Tinggi default untuk sebuah progress bar adalah 16px. Kita dapat menggunakan height untuk mengatur tinggi dari progress bar. kita cukup mengatur height di <div> induknya.
3. Progress Bar Labels
Progress Bar Labels digunakan untuk menuliskan berapa persen proses yang sudah dilalui.
4. Colored Progress Bars
Digunakan untuk mengganti warna progress bar-nya. Untuk mengganti warna progress bar kita bisa mengatur dengan cara menambahkan class tambahan pada elemen<div> anakan. (Seperti .bg-success, .ng-info, dan masih banyak lagi ).
5. Strped Progress Bars
Digunakan untuk membuat strip - strip pada progress bars. Cara menggunakannya cukup menambahkan class .progress-bar-striped pada elemen <div> anaknnya.
6. Animated Progress Bars
Digunakan untuk membuat animasi pada progress bars. Cara menggunakannya hampir sama dengan Striped progress bars, hanya saja ditambahkan class .progress-bar-animated setelah class .progress-bar-striped pada <div> anaknnya.
7. Multiple Progress Bars
Digunakan  untuk membuat perbedaan pada progress bar. Digunakan dengan cara membuat lebih banyak elemen <div> anakan pada elemen <div> induk dengan warna yang berbeda-beda.
Contoh penggunaan Progress Bars :

Pagination
Ketika anda membuat sebuah situs web, anda biasanya membuat banyak halaman yang isinya satu jenis konten misalnya ketika kita membuat situs download, biasanya kita membuat pagination untuk berpindah dari satu halaman ke halaman lain. Oleh karena itu kita dapat menggunakan pagination untuk berpindah - pindah ke halaman sebelumnya maupun selanjutnya.
1. Pagination Basic
Untuk membuat pagination dasar, kita dapat menambahkan class .pagination untuk elemen <ul>. Kemudian tambahkan class .page-item untuk masing -masing elemen <li>, dan tambahkan class .page-link untuk setiap elemen <a> yang berada dalam <li>.
2. Active State
Active state digunakan untuk menandai halaman saat ini / halaman yang sedang ditampilkan. Cara menggunakaannya adalah dengan cara menambahkan class .active di dalam <li>.
3. Disabled State
Disabled State digunakan untuk mengatur agar halaman tidak dapat di-click.. Cara menggunakannya dengan cara menambah class .disabled di dalam <li>.
4. Pagination Size
Pagination size digunakan untuk mengatur besar dari pagination. Cara menggunakannya adalah dengan cara menambahkan class .pagination-lg (besar) atau .pagination-sm (kecil) di dalam elemen <ul>
5. Breadcrumbs
Breadcrumbs digunakan untuk menunjukan lokasi saat ini. Cara menggunakannya adalah dengan cara mengubah class <ul> menjadi .breadcrum dan kelas <li> di dalamnya menjadi .breadcrumb-item.
Contoh Penggunaannya :

E. Kesimpulan

>Ketika membuat website kita dapat menggunakan badge untuk menandakan pesan masuk / notifikasi di sebuah website.
>Untuk membuat sebuah website terkadang kita harus menggunakan progress bar untuk menunjukan kerja suatu proses.
>Pagination membudahkan kita untuk mempermudah penggunaan website ketika memiliki banyak halaman.  
F. Referensi

https://id.wikipedia.org/wiki/PHP_Bootstrap
https://www.w3schools.com/bootstrap4/bootstrap_badges.asp
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp
https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp

Wasalamu'alaikum W. W. 

Share this post