Tombol
Gunakan gaya tombol kustom Bootstrap untuk tindakan dalam formulir, dialog, dan lainnya dengan dukungan untuk berbagai ukuran, status, dan lainnya.
Contoh
Bootstrap menyertakan beberapa gaya tombol yang telah ditentukan, masing-masing melayani tujuan semantiknya sendiri, dengan beberapa tambahan untuk kontrol lebih.
<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>
<button type="button" class="btn btn-link">Link</button>
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hidden
kelas.
Nonaktifkan pembungkusan teks
Jika Anda tidak ingin teks tombol terbungkus, Anda dapat menambahkan .text-nowrap
kelas ke tombol. Di Sass, Anda dapat mengatur $btn-white-space: nowrap
untuk menonaktifkan pembungkusan teks untuk setiap tombol.
Tag tombol
Kelas .btn
dirancang untuk digunakan dengan <button>
elemen. Namun, Anda juga dapat menggunakan kelas <a>
atau <input>
elemen ini (meskipun beberapa browser mungkin menerapkan rendering yang sedikit berbeda).
Saat menggunakan kelas tombol pada <a>
elemen yang digunakan untuk memicu fungsionalitas dalam halaman (seperti menciutkan konten), daripada menautkan ke halaman atau bagian baru dalam halaman saat ini, tautan ini harus diberi a role="button"
untuk menyampaikan tujuannya dengan tepat ke teknologi pendukung seperti pembaca layar.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Tombol garis besar
Membutuhkan tombol, tetapi bukan warna latar belakang yang besar dan kuat yang mereka bawa? Ganti kelas pengubah default dengan .btn-outline-*
yang menghapus semua gambar dan warna latar belakang pada tombol apa pun.
<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>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
ukuran
Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-lg
atau .btn-sm
untuk ukuran tambahan.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Status dinonaktifkan
Buat tombol terlihat tidak aktif dengan menambahkan disabled
atribut boolean ke <button>
elemen apa pun. Tombol yang dinonaktifkan telah pointer-events: none
diterapkan, mencegah pemicuan kursor dan status aktif.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Tombol yang dinonaktifkan menggunakan <a>
elemen berperilaku sedikit berbeda:
<a>
s tidak mendukungdisabled
atribut tersebut, jadi Anda harus menambahkan.disabled
kelas agar tampak dinonaktifkan secara visual.- Beberapa gaya ramah masa depan disertakan untuk menonaktifkan semua
pointer-events
tombol jangkar. - Penggunaan tombol yang dinonaktifkan
<a>
harus menyertakanaria-disabled="true"
atribut untuk menunjukkan status elemen ke teknologi bantu. - Penggunaan tombol yang dinonaktifkan
<a>
tidak boleh menyertakanhref
atribut.
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Peringatan fungsionalitas tautan
Untuk menutupi kasus di mana Anda harus menyimpan href
atribut pada tautan yang dinonaktifkan, .disabled
kelas menggunakan pointer-events: none
untuk mencoba menonaktifkan fungsionalitas tautan <a>
s. Perhatikan bahwa properti CSS ini belum distandarisasi untuk HTML, tetapi semua browser modern mendukungnya. Selain itu, bahkan di browser yang mendukung pointer-events: none
, navigasi keyboard tetap tidak terpengaruh, artinya pengguna keyboard yang dapat melihat dan pengguna teknologi bantu masih dapat mengaktifkan tautan ini. Jadi agar aman, selain aria-disabled="true"
, sertakan juga tabindex="-1"
atribut pada tautan ini untuk mencegahnya menerima fokus keyboard, dan gunakan JavaScript khusus untuk menonaktifkan fungsinya sama sekali.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
Blokir tombol
Buat tumpukan responsif "tombol blok" lebar penuh seperti yang ada di Bootstrap 4 dengan campuran utilitas tampilan dan celah kami. Dengan menggunakan utilitas alih-alih kelas khusus tombol, kami memiliki kontrol yang jauh lebih besar atas spasi, penyelarasan, dan perilaku responsif.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Di sini kita membuat variasi responsif, dimulai dengan tombol yang ditumpuk secara vertikal hingga md
breakpoint, di mana .d-md-block
menggantikan .d-grid
kelas, sehingga meniadakan gap-2
utilitas. Ubah ukuran browser Anda untuk melihatnya berubah.
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Anda dapat menyesuaikan lebar tombol blok Anda dengan kelas lebar kolom kotak. Misalnya, untuk "tombol blokir" setengah lebar, gunakan .col-6
. Pusatkan secara horizontal dengan .mx-auto
, juga.
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Utilitas tambahan dapat digunakan untuk menyesuaikan perataan tombol saat horizontal. Di sini kami telah mengambil contoh responsif kami sebelumnya dan menambahkan beberapa utilitas fleksibel dan utilitas margin pada tombol untuk menyelaraskan tombol saat tidak lagi ditumpuk.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Plugin tombol
Plugin tombol memungkinkan Anda membuat tombol sakelar hidup/mati sederhana.
Alihkan status
Tambahkan data-bs-toggle="button"
untuk mengaktifkan status tombol active
. Jika Anda melakukan pra-beralih tombol, Anda harus menambahkan .active
kelas secara manual dan aria-pressed="true"
untuk memastikan bahwa itu disampaikan dengan tepat ke teknologi bantu.
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
Metode
Anda dapat membuat instance tombol dengan konstruktor tombol, misalnya:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
metode | Keterangan |
---|---|
toggle |
Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan. |
dispose |
Menghancurkan tombol elemen. (Menghapus data yang tersimpan pada elemen DOM) |
getInstance |
Metode statis yang memungkinkan Anda untuk mendapatkan instance tombol yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Metode statis yang mengembalikan instance tombol yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini:bootstrap.Button.getOrCreateInstance(element) |
Misalnya, untuk mengaktifkan semua tombol
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Kelancangan
Variabel
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: $link-color;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;
campuran
Ada tiga mixin untuk tombol: mixin varian garis besar tombol dan tombol (keduanya berdasarkan $theme-colors
), ditambah mixin ukuran tombol.
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $disabled-border;
}
}
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
@include font-size($font-size);
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
}
Loop
Varian tombol (untuk tombol biasa dan garis besar) menggunakan mixin masing-masing dengan $theme-colors
peta kami untuk menghasilkan kelas pengubah di scss/_buttons.scss
.
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}