A.PENDAHULUAN
Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten
Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten
B.PENGERTIAN
BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.
C.LATAR BELAKANG
agar bisa membuat web dengan Bootstrap
D.MAKSUD DAN TUJUAN
agar dapat menggunakan fungsi panel dengan bootstrap di HTML
E.ALAT DAN BAHAN
- Koneksi Internet
- 1 Unit PC/Komputer
- File Bootstrap
F.WAKTU YANG DIPERLUKAN
-/+ 15 menit
G.PEMBAHASAN
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>
H.HASIL YANG DIDAPAT
dapat membuat web dengan framework bootstrap
I.PENUTUP
Sekian yang dapat saya sampaikan semoga bermanfaat..!!
J.REFERENSI