Dalam pengembangan aplikasi berbasis web, kita mungkin akan menampilkan pesan pemberitahuan seperti persetujuan mengenai syarat dan ketentuan. Dalam Bootstrap kita akan dengan mudah membuatnya dengan Panel.
Misal kita ingin membuat tampilan seperti di bawah ini:
Source Code utama tampilan di atas adalah:
<div class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
Perhatian !
</div>
<div class=”panel-body”>
Dengan menggunakan program kami, anda setuju untuk mengikuti syarat dan ketentuan yang telah kami buat.
Anda setuju untuk tidak menuntut apapun di kemudian hari.
Program telah dibuat sesempurna mungkin, tetapi segala akibat yang terjadi di luar perkiraan kami adalah resiko anda.
</div>
<div class=”panel-footer”>
<a href=”#” class=”btn btn-danger btn-sm”>Setuju</a>
<a href=”#” class=”btn btn-default btn-sm”>Tolak</a>
</div>
</div>
</div> <!– /container –>
Demonya dapat kita lihat di http://aris.proweb.asia/dist/coba09.html . Source code lengkapnya adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Panel</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
Perhatian !
</div>
<div class=”panel-body”>
Dengan menggunakan program kami, anda setuju untuk mengikuti syarat dan ketentuan yang telah kami buat.
Anda setuju untuk tidak menuntut apapun di kemudian hari.
Program telah dibuat sesempurna mungkin, tetapi segala akibat yang terjadi di luar perkiraan kami adalah resiko anda.
</div>
<div class=”panel-footer”>
<a href=”#” class=”btn btn-danger btn-sm”>Setuju</a>
<a href=”#” class=”btn btn-default btn-sm”>Tolak</a>
</div>
</div>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#panels .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.