Pada Kesempatan kali ini saya akan membahas dan memberikan tutorial tentang bagaimana cara membuat panel dengan bootstrap.
1. Latar Belakang
Pada setiap aplikasi atau tampilan web pasti ada yang membuat tampilan tersebut rapi dan tertata dengan baik, dari tampilan yang biasa saya buat sering kali saya membuat tampilan tersebut rapi menggunakan tabel atau panel. dan dengan mudahnya agar terlihat responsive menggunakan bootstrap.
2. Maksud tujuan
Mempraktekan materi yang ada bagaimana cara membuat panel pada bootstrap dengan responsive agar dapat lebih memahaminya
3. Alat dan Bahan
- Materi bahan pembelajaran pada bootstrap (w3shool)
Sebelum saya mempraktekan bagaimana tutorial membuat panel dengan bootstrap sebelumnya saya akan bahas dulu .
Apa itu panel..?
Panel adalah Sebuah kotak dengan border beberapa padding sekitar isinya .
yang fungsinya hampir sama dengan tabel sebagai wadah content atau isi tetapi panel tidak memiliki baris dan kolom.
5. Langkah Kerja
Bagaimana cara pembuatannya? bagaimana script.nya dan strukturnya panel dibagi menjadi 3 jenis... pastikan sebelum teman - teman membuat halaman tersebut teman - teman sudah mendownload file framework bootstrap terlebih dahulu.
1. Membuat Panel "Content"
Panel Content merupakan panel yang memiliki hanya satu bagian saja yang berfungsi untuk tempat/bagian penampil content/isi.
1. Buat satu halaman baru contoh panel1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap panel</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 Content/isi</h2>
<br>
<div class="panel panel-default">
<div class="panel-body">Panel ini hanya berupa bagian content/isi saja, tidak memiliki header dan footer. </div>
</div>
</div>
<p style="text-align:right; margin-right:50px;">risanurhaeni03skansa.blogspot.com | @risariis</p>
</body>
</html>
2. Membuat Panel "Header & Content".
Panel Content merupakan panel yang memiliki dua bagian yang berfungsi untuk tempat/bagian penampil content/isi dan bagian header yang biasanya digunakan untuk judul panel.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap panel</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 Header dan content</h2>
<br>
<div class="panel panel-default">
<div class="panel-heading">Bagian panel header(judul)</div>
<div class="panel-body">Bagian panel content(Sebagai Content/isi) </div>
</div>
</div>
<p style="text-align:right; margin-right:50px;">risanurhaeni03skansa.blogspot.com | @risariis</p>
</body>
</html>
3. Membuat Panel "Header,Content dan Footer" .
Panel Content merupakan panel yang memiliki dua bagian yang berfungsi untuk tempat/bagian penampil content/isi,header dan bagian footer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Panel</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 Content,header,footer</h2>
<br>
<div class="panel panel-default">
<div class="panel-heading">Panel Header(judul)</div>
<div class="panel-body">Bagian panel content(Sebagai Content/isi) </div>
<div class="panel-footer">Bagian panel yang digunakan sebagai footer/untuk keterangan tambahan</div>
</div>
</div>
<p style="text-align:right; margin-right:50px;">risanurhaeni03skansa.blogspot.com | @risariis</p>
</body>
</html>
6. Kesimpulan
Kesimpulannya adalah panel merupakan Sebuah kotak dengan border beberapa padding sekitar isinya . yang banyak digunakan untuk tempat dari content atau tempat berjalannya suatu program atau sebagai tempat/bagian penampil data dll. agar terlihat rapi.
7. Referensi
- https://www.w3schools.com/bootstrap/bootstrap_panels.asp
Sekian Terimkasih
Wassalamualaikum wr.wb
EmoticonEmoticon