Selamat Datang lagi dalam tutorial warungbelajar, kita masih membahas mengenai boostrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat jumbotron dengan bootstrap, dalam tutorial kali ini kita akan belajar membuat pesan alert dengan bootstrap.
Bootstrap menyediakan beberapa class yang bisa anda gunakan untuk menampilkan pesan alert, bootstrap 4 menyediakan beberapa jenis tampilan dari alert, sehingga anda dapat memanfaatkan alert tersebut untuk beberapa jenis pesan, seperti pesan error bisa menggunakan tampilan alert berwarna merah, untuk pesan info bisa menggunakan alert berwarna biru, untuk pesan sukses entry data bisa menggunakan alert berwarna hijau, dan masih ada beberapa lagi jenis tampilan alert yang bisa anda gunakan untuk menampilkan pesan pada halaman web anda..
Cara membuat alert di bootstrap 4
Untuk membuat alert anda cukup menuliskan class .alert pada tag
| .alert-success | : | [jenis alert ini biasanya digunakan untuk menampilkan pesan sukses dari sebuah action] |
| .alert-info | : | [jenis alert ini biasanya digunakan untuk menampilkan informasi yang bersifat biasa] |
| .alert-warning | : | [jenis alert ini biasanya digunakan untuk menampilkan informasi yang membutuhkan perhatian khusus] |
| .alert-danger | : | [jenis alert ini biasanya digunakan untuk menampilkan informasi peringatan bahaya dari sebuah action] |
| .alert-primary | : | [jenis alert ini biasanya digunakan untuk menampilkan informasi yang penting] |
| .alert-secondary | : | [jenis alert ini biasanya digunakan untuk menampilkan informasi yang bersifat tidak begitu penting] |
| .alert-light | : | [menampilkan alert dengan warna abu abu] |
| .alert-dark | : | [menampilkan alert dengan warna abu abu terang] |
untuk contoh penggunaan dari alert, perhatikan skrip dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Contoh Penggunaan Alert pada Bootstrap Success!Alert yang menggunakan classalert-success Info!Alert yang menggunakan classalert-info Warning!Alert yang menggunakan classalert-warning Danger!Alert yang menggunakan classalert-danger Primary!Alert yang menggunakan classalert-primary Secondary!Alert yang menggunakan classalert-secondary Dark!Alert yang menggunakan classalert-dark Light!Alert yang menggunakan classalert-light
|
Semisal kita simpan dengan nama alert_bootstrap.html, kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Alert akan ditampilkan dengan warna yang sesuai dengan class alertnya
- Jadi untuk membuat alert anda tinggal membuat tag dan tambahkan class alert, untuk pemilihan warna tinggal menyesuaikan class alert yang diinginkan
Menambahkan Link pada alert
Bootstrap juga menyediakan class alert-link yang digunakan untuk membuat link didalam box alert, dan link tersebut akan menyesuaikan dari jenis alert yang digunakan, baik untuk contoh silahkan perhatikan skrip dibawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Contoh Penggunaan Classalert-link pada link
Success!|Klik Disini
Info!|Klik Disini
Contoh Link yang tidak menggunakan alert-link
Success!|Klik Disini
Info! |Klik Disini
Semisal kita simpan dengan nama alert_link.html, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- perhatikan untuk 2 alert awal, ketika link menggunakan class alert-link text yang ditampilkan untuk link tersebut akan ditampilkan dengan text bold sehingga tampilannya pas dengan box alert.
- tetapi untuk 2 alert berikutnya, text ditampilkan dengan tampilan text biasa, karena kita tidak menambahkan class alert-link link tersebut
Membuat Tombol Close pada Alert
Setelah dalam bagian sebelumnya kita sudah membahas mengenai bagaimana cara membuat alert dengan berbagai tampilan warna sesuai dengan class alert yang digunakan, nah kali ini kita akan belajar untuk menambahkan tombol close pada bagian alert.
perhatikan contoh skripnya adalah sebagai berikut ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Contoh Penggunaan Tombol Close Alert
×
Alert dengan classalert-success
×
Alert dengan classalert-info
×
Alert dengan classalert-warning
Semisal kita simpan dengan nama close_alert.html, lalu jika kita buka di browser maka hasilnya :
Keterangan :
- untuk membuat tombol close pada bagian alert, kita tambahkan attribute alert-dismissable pada tag
- berikutnya tambahkan tombol diantara tag
, didalam tombol tersebut kita tambahkan class close, dan attribute data-dismiss dengan value alert- diantara tag dan tag penutup kita tuliskan × skrip tersebut akan menjadi tanda x [silang] pada bagian tombol
Menambahkan Animasi pada close alert
Setelah dibagian sebelumnya kita telah membahas mengenai tombol close pada bagian alert, berikutnya kita akan menambahkan animasi pada saat close alert, dengan animasi ini ketika tombol close ditekan maka alert akan menutup dengan jeda beberapa saat, untuk contoh perhatikan skrip dibawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Contoh Animasi Tombol Close Alert
×
Alert dengan classalert-success
×
Alert dengan classalert-info
Semisal kita simpan dengan nama animasi_close_alert.html, jika kita buka di browser maka hasilnya :
Keterangan :
- untuk skrip yang ditulis dimasing – masing dari alert dan tombol close sama seperti contoh sebelumnya, tetapi kita menambahkan attribute fade dan show pada bagian tag dari alert
Baik kurang lebih seperti itu teman – teman pembahasan mengenai cara membuat pesan alert dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap berikutnya.
Chủ Đề
- berikutnya tambahkan tombol diantara tag