Tombol Bootstrap 5

按鈕樣式

Bootstrap 5 提供了不同樣式的按鈕：

Contoh

<button type="button" class="btn">基礎</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危險</button>
<button type="button" class="btn btn-dark">深色</button>
<button type="button" class="btn btn-light">淺色</button>
<button type="button" class="btn btn-link">鏈接</button>

Cuba sendiri

按鈕類可用於 <a>、<button> 或 <input> 元素：

Contoh

<a href="#" class="btn btn-success">鏈接按鈕</a>
<button type="button" class="btn btn-success">按鈕</button>
<input type="button" class="btn btn-success" value="輸入按鈕">
<input type="submit" class="btn btn-success" value="提交按鈕">
<input type="reset" class="btn btn-success" value="重置按鈕">

Cuba sendiri

Kenapa kami menulis # di dalam sifat href pautan?

Karna kami tiada halaman yang boleh dihubungi, dan kami tidak mahu menerima mesej "404", jadi kami gunakan # sebagai pautan. Dalam kehidupan sebenar, ia sepatutnya adalah URL yang sebenar halaman "Cari".

Contur butang

Bootstrap 5 turut menyediakan lapan butang contur/sematan.

Sekiranya anda gerakkan tetikus ke atasnya, anda dapat lihat kesan "terlekat" tambahan:

Contoh

<button type="button" class="btn btn-outline-primary">Utama</button>
<button type="button" class="btn btn-outline-secondary">Tambahan</button>
<button type="button" class="btn btn-outline-success">Berjaya</button>
<button type="button" class="btn btn-outline-info">Maklumat</button>
<button type="button" class="btn btn-outline-warning">Amaran</button>
<button type="button" class="btn btn-outline-danger">Bahaya</button>
<button type="button" class="btn btn-outline-dark">Gelap</button>
<button type="button" class="btn btn-outline-light text-dark">Besar warna</button>

Cuba sendiri

Saiz butang

Untuk butang besar .btn-lg Kelas, digunakan untuk butang kecil .btn-sm Kelas:

Contoh

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

Cuba sendiri

Butang besar

Untuk membuat butang besar yang melintasi seluruh lebar elemen induk, gunakan di elemen induk .d-grid Kelas "helper":

Contoh

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Tombol Lebar Penuh</button>
</div>

Cuba sendiri

Jika anda mempunyai banyak tombol blok, anda boleh menggunakan .gap-* Kelas mengawal jarak antara mereka:

Contoh

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Tombol Lebar Penuh</button>
  <button type="button" class="btn btn-primary btn-block">Tombol Lebar Penuh</button>
  <button type="button" class="btn btn-primary btn-block">Tombol Lebar Penuh</button>
</div>

Cuba sendiri

Tombol Aktif/Dihentikan

Tombol boleh ditetapkan keadaan aktif (terlihat seperti disentuh) atau dihentikan (tidak dapat ditekan):

kelas .active membuat tombol terlihat seperti disentuh, sementara disabled Properti membuat tombol tidak dapat ditekan. Perhatikan, elemen <a> tidak mendukung properti disabled, jadi perlu digunakan .disabled Kelas membuatnya terlihat seperti dihentikan secara visual.

Contoh

<button type="button" class="btn btn-primary active">Aktif Utama</button>
<button type="button" class="btn btn-primary" disabled>Dihentikan Utama</button>
<a href="#" class="btn btn-primary disabled">Pautan Dihentikan</a>

Cuba sendiri

Tombol Pemuat

Anda boleh menambah "spinner" kepada tombol, Anda akan belajar lebih banyak tentang pengajaran BS5 Spinner kami:

Contoh

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Memuat..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Memuat..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Memuat..
</button>

Cuba sendiri