Bootstrap - Buttons Demo

Hai teman, super bintang coding masa depan! Hari ini, kita akan melihat dunia yang menakjubkan tombol Bootstrap. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minumannya yang favorit, nyamanlah, dan mari kita mulai petualangan yang menarik ini bersama!

Apa Itu Tombol Bootstrap?

Sebelum kita masuk ke detailnya, mari bicarakan apa sebenarnya tombol Bootstrap itu. Bayangkan Anda sedang membangun sebuah rumah. Dinding dan atap adalah struktur HTML Anda, catnya adalah CSS Anda, dan Bootstrap? Well, itu seperti memiliki sebuah kotak pernak-pernik yang magic yang membuat segala sesuatu menjadi mudah dan cantik. Tombol Bootstrap adalah tombol yang sudah di-styling, siap pakai, dan Anda dapat menambahkannya secara mudah ke halaman web Anda.

Memulai dengan Bootstrap

Pertama-tama, kita perlu mengatur tempat bermain Bootstrap kita. Jangan khawatir, itu lebih mudah daripada mengatur permainan Monopoly!

Langkah 1: Menyiapkan Struktur HTML

Mari kita mulai dengan struktur HTML dasar:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Tombol kita akan berada di sini -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ini seperti menyiapkan kanvas sebelum menggambar. Kita telah menyertakan file CSS dan JS Bootstrap, yang memberikan kita akses ke semua keajaiban Bootstrap.

Tombol Bootstrap Dasar

Sekarang, mari kita tambahkan beberapa tombol ke halaman kita!

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Ini apa yang dilakukan setiap kelas:

btn: Ini adalah kelas dasar untuk semua tombol Bootstrap.
btn-primary, btn-secondary, dll.: Kelas ini menentukan warna dan gaya tombol.

Ukuran Tombol

Seperti halnya Anda dapat memesan ukuran berbedaFrench fries di restoran makanan cepat saji, tombol Bootstrap juga tersedia dalam ukuran yang berbeda!

<button type="button" class="btn btn-primary btn-lg">Tombol Besar</button>
<button type="button" class="btn btn-primary">Tombol Default</button>
<button type="button" class="btn btn-primary btn-sm">Tombol Kecil</button>

btn-lg: Membuat tombol lebih besar
btn-sm: Membuat tombol lebih kecil

Tombol Outline

kadang-kadang, Anda ingin tombol yang lebih halus. Itu di mana tombol outline berguna!

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>

Kelas btn-outline-* memberikan Anda tombol dengan batas berwarna dan latar belakang transparan.

Tombol Block

Butuh tombol yang meluas ke keseluruhan lebar induknya? Tombol block adalah teman Anda!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Tombol Block</button>
<button class="btn btn-primary" type="button">Tombol Block</button>
</div>

Kelas d-grid pada div induk dan kelas gap-2 menambahkan jarak antar tombol.

State Tombol

Tombol dapat memiliki state yang berbeda, sama seperti kita memiliki mood yang berbeda!

<button type="button" class="btn btn-primary">Tombol Normal</button>
<button type="button" class="btn btn-primary active">Tombol Aktif</button>
<button type="button" class="btn btn-primary" disabled>Tombol Nonaktif</button>

Kelas active membuat tombol terlihat ditekan.
Atribut disabled membuat tombol tak dapat diklik.

Tombol Toggle

Tombol toggle seperti saklar cahaya - mereka bisa nyala atau mati!

<button type="button" class="btn btn-primary" data-bs-toggle="button">Tombol Toggle</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Tombol Toggle Aktif</button>

Atribut data-bs-toggle="button" mengaktifkan fungsi toggle.

Grup Tombol

Kadang-kadang, tombol seperti berada bersama. Itu di mana grup tombol berguna!

<div class="btn-group" role="group" aria-label="Contoh dasar">
<button type="button" class="btn btn-primary">Kiri</button>
<button type="button" class="btn btn-primary">Tengah</button>
<button type="button" class="btn btn-primary">Kanan</button>
</div>

Kelas btn-group mengelompokkan tombol bersama.

Tombol Dropdown

Tombol dropdown seperti kotak kejutan - klik mereka, dan opsi lain muncul!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Tombol Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Kelas dropdown-toggle dan atribut data-bs-toggle="dropdown" mengaktifkan fungsi dropdown.

Kesimpulan

Selamat! Anda baru saja menyelesaikan perjalanan singkat tentang tombol Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba kombinasi yang berbeda. Siapa tahu? Anda mungkin akan menciptakan hal yang besar dalam desain web!

Berikut adalah tabel rujukan cepat dari semua kelas tombol yang kita bahas:

Kelas	Deskripsi
btn	Kelas tombol dasar
btn-primary	Tombol warna utama
btn-secondary	Tombol warna sekunder
btn-success	Tombol warna sukses
btn-danger	Tombol warna bahaya
btn-warning	Tombol warna peringatan
btn-info	Tombol warna informasi
btn-light	Tombol warna terang
btn-dark	Tombol warna gelap
btn-lg	Tombol besar
btn-sm	Tombol kecil
btn-outline-*	Tombol outline
active	Tombol state aktif
disabled	Tombol state nonaktif
data-bs-toggle="button"	Tombol toggle
btn-group	Grup tombol
dropdown-toggle	Tombol dropdown

Selamat coding, dan may the Bootstrap be with you!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Demo Grid

Tutorial Selanjutnya:

Bootstrap - Demo Navigasi