Tutorial Bootstrap : Alerts, Buttons dan Button Group

Bootstrap : Alerts, Buttons, dan Buttons Group

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempataan kali ini saya akan menjelaskan cara menggunakan alerts, buttons, dan button group 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

Alerts
Alerts adalah sebuah pesan peringatan pada sebuah halaman website. Cara menggunakan alerts di bootstrap adalah dengan cara menambahkan class "alerts" di sebuah komponen yang ingin dijadikan alerts / pesan peringatan dan akan diikuti class yang untuk mendeskripsikan alerts tersebut seperti .alerts-success, .alerts-info, dan masih banyak lagi.

1. Alerts Links

Digunakan untuk mengatur alert agar di dalam alerts tersebut dapat disertakan sebuah link. Untuk menggunakannya cukup menambahkan komponen <a> di alerts tersebut dan lalu komponen <a> tersebut di tambahkan class .alerts-link.

2. Closing Alerts

Digunakan agar kita dapat menutup / menclose alerts, dengan menggunakan ini, di dalam alerts yang kita buat akan muncul tombol (x) atau close. Untuk menggunakan ini, kita harus menambahkan class .alerts-dismissable di komponen alerts,setelah itu buat sebuah tombol lalu tambahkan class="close" dan data-dismiss="alerts".

3. Animated Alerts

Digunakan untuk membuat animasi agar ketika kita menutup alerts tersebut, alerts tersebut tidak langsung menghilang namun akan terdapat efek menghilang. Untuk menggunakan ini kita harus menambah class .fade dan .show di komponen alerts.

Agar lebih paham tentang konsep alerts, lihatlah contoh penggunaan berikut :

Buttons
1. Button Style

Gaya - gaya tombol di bootstarp

• Bsic
• Primary
• Secondary
• Success
• Info
• Warning
• Danger
• Dark
• Light
• Link

Menggunakan pengaturan bottom dapat di aplikasikan di <a>, <button>, dan <input>.

2. Button Outline.  Adalah pengaturan outline untuk tombol.

Komponen button group sama dengan komponen button style.

3. Button Size

Digunakan untuk mengatur ukuran dari tombol. Digunakan dengan cara menambahkan class btn-lg (besar) dan btn-sm (kecil). 

4. Block Level Button

Digunakan untuk mengatur tombol agar lebarnya menyesuaikan lebar layar.

5. Active / Disabled Button

Digunakan untuk mengatur tombol aktif atau dimatikan.

Contoh Penggunaan :

Button Group

Button groups digunakan untuk menggabungkan beberapa tombol menjadi satu tombol. Cara menggunakan button groups yaitu dengan membuat <div> lalu ditambahkan class .btn-group .

Di sini juga kamu dapat mengatur ukuran dari button groups yang kamu buat, dengan cara menambahkan class btn-group-lg (besar) , btn-group-sm (kecil), atau btn-group-xs (sangat kecil).

1. Vertical Button Group

Di sini kamu juga dapat membuat tombol menyatu secara horizontal. Dengan cara mengganti class <div> menjadi .btn-group-vertical.

2. Button Group & Dropdown Menu

Berguna untuk membuat dropdown pada sebuah button groups.

Contoh penggunaan Button Groups :

E. Kesimpulan

>Untuk membuat sebuah website yang bagus kita dapat menggunakan fitur Alert untuk menampilkan pesan peringatan.
>Untuk membuat sebuah website yang baguskita harus mempertimbangkan pengaturan tombol agar sesuai dengan isi konten dan dapat dilihat menarik.

>Terkadang di sebuah halaman website kita membutuhkan button groups, untuk membuat beberapa tombol menjadi satu.
F. Referensi
https://id.wikipedia.org/wiki/PHP_Bootstrap
https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp
https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp

Wasalamu'alaikum W. W.

Share this post