Kembali lagi di tutorial belajar bootstrap 4 untuk pemula.
Setelah kemarin kita berhasil membuat jumbotron yang bisa kamu lihat di artikel Tutorial Bootstrap 4 Untuk Pemula #4 : Jumbotron
Sekarang kita akan membuat alert.
Apa Itu Alert ?
Sesuai namanya alert di bootstrap 4 merupakan peringatan
yang disebut peringatan disini adalah sebuah tampilan.
Adapun jenis-jenis tampilan peringatan di bootstrap 4 yaitu diantaranya adalah peringatan informasi dan lain-lain.
Cara membuat Alert Bootstrap 4
Langsung saja kita coba buat alert bootstrap 4
Lakukan persiapan seperti biasa . jika kamu belum melakukan persiapan kamu bisa membaca artikel Tutorial Bootstrap 4 Part #1 : Pengenalan dan Cara Menginstall Bootstrap 4 terlebih dahulu.
Sekarang saya anggap kamu sudah melakukan persiapan
Copy kode dibawah ini lalu masukkan ke file index.php kamu
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div>
Simpan kembali file index.php
lalu buka browser kamu sendiri dan lihat website kamu masing-masing.
Keterangan :
- Baris Pertama merupakan alert dengan class primary yang mempunyai background berwarna biru.
- Baris Kedua merupakan alert dengan class secondary yang mempunyai background berwarna abu-abu muda.
- Baris Ketiga merupakan alert dengan class success yang mempunyai background berwarna hijau.
- Baris Keempat merupakan alert dengan class danger yang mempunyai background berwarna merah.
- Baris Kelima merupakan alert dengan class warning yang mempunyai background berwarna orange.
- Baris Keenam merupakan alert dengan class info yang mempunyai background berwarna biru muda.
- Baris Ketujuh merupakan alert dengan class light yang mempunyai background berwarna putih dan warna tulisan abu-abu.
- Baris Kedelapan merupakan alert dengan class dark yang mempunyai background berwarna abu-abu tua dan warna tulisan hitam.
Alert Konten Bootstrap 4
Alert jenis ini merupakan alert dengan tampilan yang terdiri dari heading atau judul dan paragraph.
Tampilan alert konten pada bootstrap 4 seperti ini
Kode nya dibawah ini jangan lupa tambah kan di dalam tag <body> di file index.php kamu masing-masing
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
Alert dengan Tombol Close Bootstrap 4
Alert jenis ini sering digunakan untuk memberitahu feedback kepada user
Dengan tombol close maka tampilan alert akan hilang dan tampilan website tidak terganggu dengan alert sebelumnya
Hapus semua kode di index.php kemudian masukkan kode ini
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>Memberi Javascript
untuk membuat nya kamu perlu memberi javascript pada file index.php kamu tetapi karena kita memakai cdn atau versi online dari bootstrap
dan menggunakan starter template dasarnya bootstrap 4
maka kita tidak perlu lagi menambahkan javascript kamu bisa skip tutorial ini jika menggunakan cdn bootstrap 4.
<script>
$('.alert').alert('close')
</script>Tambahkan kode ini persis diatas tag </body>
Silahkan copas kode dibawah ini dan masukkan di antara tag body file php atau html kamu.
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
Jika sudah selesai maka tampilannya akan seperti ini.
Coba klik tombol close di pojok kanan alertnya.
Jika alert menghilang maka javascript yang kamu buat tadi sudah benar.
Penutup
kita sudah belajar cara membuat alert untuk pemula pada bootstrap 4. kamu bisa memodifikasi nya sesuai keinginan.
Alert sangat berguna agar tampilan jika ada proses data di dalam website kamu. menggunakan alert pada bootstrap 4 membuat tampilan alert menjadi menarik dan enak dilihat.
