Assalamualaikum Wr.Wb
Berjumpa lagi dengan bootstrap,sesuai dengan namanya bootstrap alerts bisa di artikan sebuah style atau fitur atau apalah itu yang intinya bisa di gunakan untuk membuat sebuah tampilan pesan peringatan maupun pesan yang intinya untuk info.Daripada bingung - bingung mari langsung kita coba untuk membuatnya ada 4 jenis style bootstrap alert.
Di sini saya meletakkan bootstrap alerts di dalam tag container agar lebih tertata.
Berjumpa lagi dengan bootstrap,sesuai dengan namanya bootstrap alerts bisa di artikan sebuah style atau fitur atau apalah itu yang intinya bisa di gunakan untuk membuat sebuah tampilan pesan peringatan maupun pesan yang intinya untuk info.Daripada bingung - bingung mari langsung kita coba untuk membuatnya ada 4 jenis style bootstrap alert.
- Danger yaitu alert dengan background yang cenderung merah
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-danger">
<strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap danger</a>.
</div>
</div>
</body>
</html>
Dan inilah hasilnya
- Warning yaitu alerts dengan background yang cenderung kuning
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-warning">
<strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
</div>
</div>
</body>
</html>
Hasilya seperti di bawah
- Info yaitu alert yang background nya cenderung berwarna biru
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-warning">
<strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
</div>
</div>
</body>
</html>
Dan hasilnya seperti di bawah
- Success yaitu alerts yang backgrond nya cenderung berwarna hijau
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success">
<strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap succes</a>.
</div>
</div>
</body>
</html>
Dan hasilnya seperti di bawah
saya beri satu contoh lagi yaitu alerts yang bisa di close tapi untuk membuktikan harus langsung di coba langsung
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success alert-dismissable">
<strong>Danger!</strong> Contoh Tekan simbol "X" untuk close<a href="#" class="close" data-dismiss="alert" >X</a>.
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah,tapi ingat harus di coba langsung
Oke mungkin sekian dulu untuk postingan kali ini semoga bermanfaat,sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.
Referensi:http://w3schools.com/
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar