Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat Panel dengan Bootstrap.
Panel Dasar
Sebuah panel di bootstrap adalah kotak dengan border beberapa padding sekitar isinya. Panel di buat dengan class .panel dan konten dalam panel memiliki class .panel-body.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
<h2>Panel Dasar</h2>
<div class="panel panel-default">
<div class="panel-body">A. Panel Dasar</div>
</div>
</div>
</body>
</html>
Panel Heading
Class .panel-heading menambahkan heading ke panel.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
<h2>Panel Heading</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Konten</div>
</div>
</div>
</body>
</html>
Panel Footer
Class .panel-footer menambahkan footer ke panel.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
<h2>Panel Footer</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</body>
</html>
Panel Grup
Untuk banyak kelompok panel bersama-sama, membungkus <div> dengan class .panel-group disekitar mereka. Class .pael-group membersihkan bagian bawah margin masing-masing panel.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
<h2>Panel Group</h2>
<p>Class panel-group membersihkan bagian bawah margin. Cobalah untuk menghapus kelas dan melihat apa yang terjadi.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</body>
</html>
Panel dengan Class Kontekstual
Untuk warna panel, menggunakan class kontekstual (.panel-deafult, panel-primary, .panel-succes, .panel-info, .panel-warning, .panel-danger).Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
<h2>Panel dengan Class Kontekstual</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</body>
</html>
Sekian Cara Membuat Panel dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon