Apa Itu Bootstrap?
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Bootstrap adalah salah satu framework CSS (Cascading Style Sheets) terpopuler yang memungkinkan developer membuat desain website dan aplikasi web dengan cepat dan mudah.
Framework ini menyediakan komponen-komponen pratampil seperti tombol, tabel, form, dan sebagainya, yang dapat dengan mudah disesuaikan dengan gaya visual yang diinginkan
Bootstrap juga dilengkapi dengan fitur-fitur responsif seperti grid layout, yang memungkinkan website atau aplikasi web menyesuaikan tampilan dengan ukuran layar perangkat yang berbeda.
Framework ini juga dilengkapi dengan JavaScript plugins yang memungkinkan Anda menambahkan interaksi dan fungsi tambahan pada halaman web Anda.
Sebagian besar website dan aplikasi web modern menggunakan Bootstrap sebagai dasar desain dan tata letak mereka.
Jika Anda ingin belajar membuat website atau aplikasi web, saya sangat merekomendasikan Anda untuk mempelajari Bootstrap.
Contoh Class Dalam Bootstrap
Berikut adalah beberapa contoh kelas CSS dalam Bootstrap dan penjelasannya secara singkat:
- .container: Kelas ini digunakan untuk membatasi lebar konten di dalam halaman web Anda. Konten yang ditempatkan dalam elemen .container akan memiliki jarak margin kiri dan kanan yang sama.
- .row: Kelas ini digunakan untuk membuat baris dalam grid layout Bootstrap. Elemen .row harus ditempatkan di dalam elemen .container untuk menjamin bahwa konten dalam baris tersebut memiliki lebar yang sesuai.
- .col-*: Kelas ini digunakan untuk membagi baris menjadi kolom. Kelas ini memiliki beberapa varian seperti .col-sm-*, .col-md-*, .col-lg-*, dan .col-xl-*, yang menentukan ukuran kolom pada layar berbeda.
- .btn: Kelas ini digunakan untuk membuat tombol dengan gaya Bootstrap. Anda dapat menambahkan varian seperti .btn-primary, .btn-secondary, .btn-success, dll untuk menentukan warna dasar dari tombol.
- .form-control: Kelas ini digunakan untuk membuat form input dengan gaya Bootstrap. Elemen seperti input teks, select box, dan checkbox dapat diberikan kelas ini untuk membuat mereka terlihat lebih rapi dan teratur.
- .table: Kelas ini digunakan untuk membuat tabel dengan gaya Bootstrap. Tabel yang diberikan kelas ini akan memiliki garis batas, garis header yang berbeda, dan sebagainya.
Ini hanya beberapa contoh kelas CSS dalam Bootstrap. Ada banyak kelas lain yang dapat Anda gunakan untuk membuat desain yang menarik dan responsif.
Contoh Halaman Sederhana Menggunakan Bootstrap
Berikut adalah contoh halaman sederhana menggunakan Bootstrap:
.my-5 {
margin-top: 3rem;
margin-bottom: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Halaman Sederhana</title>
</head>
<body>
<div class="container my-5">
<h1 class="text-center">Halaman Sederhana</h1>
<form>
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" class="form-control" id="nama">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pesan">Pesan:</label>
<textarea class="form-control" id="pesan" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Input nama, email, dan pesan diberikan kelas .form-control untuk membuat mereka terlihat lebih rapi dan teratur. Tombol submit diberikan kelas .btn-primary untuk memberikan gaya Bootstrap.
Ini adalah tabel sederhana yang menampilkan daftar nama dan alamat. Tabel ditempatkan dalam elemen .container untuk membatasi lebar konten. Tabel diberikan kelas .table untuk memberikan gaya Bootstrap.
Anda dapat membuat halaman web yang lebih kompleks dengan menambahkan komponen Bootstrap lainnya seperti tabel, navigasi, dan sebagainya.
Contoh Halaman Tabel Sederhana Menggunakan Bootstrap
Berikut adalah contoh tabel menggunakan Bootstrap:
.my-5 {
margin-top: 3rem;
margin-bottom: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Tabel Sederhana</title>
</head>
<body>
<div class="container my-5">
<h1 class="text-center">Tabel Sederhana</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Bandung</td>
</tr>
<tr>
<td>3</td>
<td>Caca</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Anda juga dapat menambahkan beberapa kelas Bootstrap lain untuk mempercantik tampilan tabel, seperti .table-striped untuk memberikan warna garis alternatif, .table-bordered untuk memberikan border pada tabel, dan sebagainya.
Baca dokumentasi Bootstrap untuk mempelajari lebih lanjut tentang bagaimana menggunakan tabel di Bootstrap.
Berdasarkan penjelasan di atas, kita bisa menyimpulkan bahwa:
- Bootstrap adalah framework CSS yang populer dan banyak digunakan untuk membangun halaman web yang responsive dan mudah dikelola.
- Bootstrap menyediakan banyak komponen yang siap digunakan, seperti form, tabel, tombol, dan lain-lain.
- Kita bisa menambahkan kelas Bootstrap pada elemen HTML untuk memberikan gaya dan tampilan yang baik.
Dalam contoh yang diberikan, kita menggunakan beberapa kelas Bootstrap untuk membuat form input yang terdiri dari nama, email, dan pesan.
Secara umum, Bootstrap mempermudah proses pembuatan halaman web dengan memberikan banyak komponen yang siap digunakan dan membuat halaman terlihat baik tanpa perlu menulis banyak CSS.