Bootstrap - Butang Demo

Hai there, super bintang pengkomputeran masa depan! Hari ini, kita akan melihat dunia yang menakjubkan butang Bootstrap. Sebagai guru komputer tetangga yang ramah, saya disini untuk memandu anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman kegemaran anda, betulkan kedudukan, dan mari kita embarkasi dalam pengembaraan yang menarik ini bersama!

Bootstrap - Buttons Demo

Apa Itu Butang Bootstrap?

Sebelum kita masuk ke hal yang mendalam, mari kita berbicara tentang apa sebenarnya butang Bootstrap. Bayangkan anda sedang membina rumah. Dinding dan atap adalah struktur HTML anda, cat adalah CSS anda, dan Bootstrap? Well, itu seperti memiliki kotak alat ajaib yang membuat segalanya mudah dan cantik. Butang Bootstrap adalah butang yang sudah di gayakan, siap pakai yang anda dapat tambahkan dengan mudah ke halaman web anda.

Memulakan Bootstrap

Pertama-tama, kita perlu menguruskan padang permainan Bootstrap kami. Jangan khawatir, itu mudah seperti menguruskan permainan Monopoli!

Langkah 1: Menetapkan Struktur HTML

Mari kita mulai dengan struktur HTML asas:

<!DOCTYPE html>
<html lang="en">
<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">
<!-- Butang kami 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 menetapkan kanvas anda sebelum melukis. Kita telah masukkan fail Bootstrap CSS dan JS, yang memberikan akses kepada semua kebaikan Bootstrap.

Butang Bootstrap Asas

Sekarang, mari kita tambahkan beberapa butang 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>

Berikut apa yang dilakukan setiap kelas:

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

Saiz Butang

Seperti bagaimana anda boleh mendapatkan saiz yang berbeza bagi kentang di restoran makanan cepat, butang Bootstrap juga datang dalam saiz yang berbeza!

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

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

Butang Garisan

kadang-kadang, anda mahu butang yang lebih halus. Itu di mana butang garisan 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 butang dengan sempadan berwarna dan latar belakang yang transparent.

Butang Blok

Perlu butang yang melintasi keseluruhan lebarnya induknya? Butang blok adalah rakan anda!

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

Kelas d-grid pada div induk dan kelas gap-2 menambah ruang antara butang.

Status Butang

Butang boleh mempunyai status yang berbeza, seperti bagaimana kita mempunyai mood yang berbeza!

<button type="button" class="btn btn-primary">Butang Normal</button>
<button type="button" class="btn btn-primary active">Butang Aktif</button>
<button type="button" class="btn btn-primary" disabled>Butang Dimatikan</button>

Kelas active membuat butang kelihatan ditekan.
Atribut disabled membuat butang tak dapat diklik.

Butang Togol

Butang togol adalah seperti suis lampu - mereka boleh dihidupkan atau dimatikan!

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

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

Kumpulan Butang

Kadang-kadang, butang suka berada bersama-sama. Itu di mana kumpulan butang berguna!

<div class="btn-group" role="group" aria-label="Contoh asas">
<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 mengumpulkan butang bersama-sama.

Butang Tunggangan

Butang tunggangan adalah seperti kotak rahasia - klik mereka, dan lebih banyak pilihan muncul!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Butang Tunggangan
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lain</a></li>
<li><a class="dropdown-item" href="#">Hal lain disini</a></li>
</ul>
</div>

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

Kesimpulan

Selamat! Anda telah menyelesaikan perjalanan kilat melalui butang Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencuba kombinasi yang berbeza. Siapa tahu? Anda mungkin mencipta hal yang besar dalam reka bentuk web!

Berikut adalah jadual rujukan cepat bagi semua kelas butang yang kita telah cover:

Kelas	Keterangan
btn	Kelas butang dasar
btn-primary	Butang warna utama
btn-secondary	Butang warna sekunder
btn-success	Butang warna kesuksesan
btn-danger	Butang warna bahaya
btn-warning	Butang warna amaran
btn-info	Butang warna maklumat
btn-light	Butang warna cerah
btn-dark	Butang warna gelap
btn-lg	Butang besar
btn-sm	Butang kecil
btn-outline-*	Butang garisan
active	Butang status aktif
disabled	Butang dimatikan
data-bs-toggle="button"	Butang togol
btn-group	Kumpulan butang
dropdown-toggle	Butang tunggangan

Bersih-bersih coding, dan maya Bootstrap menyertain kamu!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Demo Grid

Tutorial Seterusnya:

Bootstrap - Demo Navigasi