nút
Sử dụng các kiểu nút tùy chỉnh của Bootstrap cho các hành động trong biểu mẫu, hộp thoại, v.v. với sự hỗ trợ cho nhiều kích thước, trạng thái và hơn thế nữa.
Các ví dụ
Bootstrap bao gồm một số kiểu nút được xác định trước, mỗi kiểu phục vụ mục đích ngữ nghĩa riêng của nó, với một vài tính năng bổ sung được đưa vào để kiểm soát nhiều hơn.
<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>Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hiddenlớp.
Tắt gói văn bản
Nếu bạn không muốn văn bản nút bị bao bọc, bạn có thể thêm .text-nowraplớp vào nút. Trong Sass, bạn có thể đặt $btn-white-space: nowrapđể tắt gói văn bản cho mỗi nút.
Thẻ nút
Các .btnlớp được thiết kế để sử dụng với <button>phần tử. Tuy nhiên, bạn cũng có thể sử dụng các lớp này trên <a>hoặc <input>các phần tử (mặc dù một số trình duyệt có thể áp dụng cách hiển thị hơi khác).
Khi sử dụng các lớp nút trên <a>các phần tử được sử dụng để kích hoạt chức năng trong trang (như thu gọn nội dung), thay vì liên kết đến các trang hoặc phần mới trong trang hiện tại, các liên kết này phải được cung cấp role="button"để chuyển tải một cách thích hợp mục đích của chúng đến các công nghệ hỗ trợ như trình đọc màn hình.
<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">Các nút phác thảo
Bạn cần một nút bấm, nhưng không cần màu nền đắt giá mà chúng mang lại? Thay thế các lớp bổ trợ mặc định bằng các lớp .btn-outline-*để loại bỏ tất cả các hình ảnh và màu nền trên bất kỳ nút nào.
<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>Kích thước
Các nút lớn hơn hoặc nhỏ hơn lạ mắt? Thêm .btn-lghoặc .btn-smcho các kích thước bổ sung.
<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>Trạng thái bị vô hiệu hóa
Làm cho các nút trông không hoạt động bằng cách thêm disabledthuộc tính boolean vào bất kỳ <button>phần tử nào. Các nút đã pointer-events: nonetắt được áp dụng để ngăn kích hoạt trạng thái di chuột và trạng thái đang hoạt động.
<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>Các nút bị vô hiệu hóa sử dụng <a>phần tử hoạt động hơi khác một chút:
<a>s không hỗ trợdisabledthuộc tính, vì vậy bạn phải thêm.disabledlớp để làm cho nó có vẻ bị vô hiệu hóa về mặt trực quan.- Một số kiểu thân thiện với tương lai được bao gồm để tắt tất cả
pointer-eventstrên các nút neo. - Các nút bị tắt phải bao gồm
aria-disabled="true"thuộc tính để chỉ ra trạng thái của phần tử đối với các công nghệ hỗ trợ.
<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>Báo trước chức năng liên kết
Lớp .disabledsử dụng pointer-events: noneđể cố gắng vô hiệu hóa chức năng liên kết của <a>s, nhưng thuộc tính CSS đó chưa được chuẩn hóa. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ pointer-events: none, điều hướng bàn phím vẫn không bị ảnh hưởng, có nghĩa là người dùng bàn phím có tầm nhìn và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để an toàn, ngoài ra aria-disabled="true", hãy bao gồm một tabindex="-1"thuộc tính trên các liên kết này để ngăn chúng nhận tiêu điểm bàn phím và sử dụng JavaScript tùy chỉnh để vô hiệu hóa hoàn toàn chức năng của chúng.
Các nút chặn
Tạo các ngăn xếp đáp ứng có chiều rộng đầy đủ, “các nút khối” giống như trong Bootstrap 4 với sự kết hợp của các tiện ích hiển thị và khoảng trống của chúng tôi. Bằng cách sử dụng các tiện ích thay vì các lớp cụ thể của nút, chúng tôi có quyền kiểm soát tốt hơn nhiều đối với khoảng cách, căn chỉnh và các hành vi đáp ứng.
<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>Ở đây chúng tôi tạo một biến thể đáp ứng, bắt đầu với các nút xếp chồng theo chiều dọc cho đến mdđiểm ngắt, nơi .d-md-blockthay thế .d-gridlớp, do đó vô hiệu hóa gap-2tiện ích. Thay đổi kích thước trình duyệt của bạn để xem chúng thay đổi.
<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>Bạn có thể điều chỉnh độ rộng của các nút khối của mình bằng các lớp độ rộng cột lưới. Ví dụ: đối với "nút chặn" nửa chiều rộng, hãy sử dụng .col-6. Căn giữa nó theo chiều ngang với .mx-auto.
<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>Các tiện ích bổ sung có thể được sử dụng để điều chỉnh căn chỉnh của các nút khi nằm ngang. Ở đây, chúng tôi đã lấy ví dụ đáp ứng trước đó của chúng tôi và thêm một số tiện ích linh hoạt và tiện ích lề trên nút để căn phải các nút khi chúng không còn xếp chồng lên nhau nữa.
<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 nút
Plugin nút cho phép bạn tạo các nút bật / tắt đơn giản.
Chuyển đổi trạng thái
Thêm data-bs-toggle="button"để chuyển đổi trạng thái của một nút active. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm .activelớp theo cách thủ công và aria-pressed="true" để đảm bảo rằng lớp đó được chuyển tải một cách thích hợp đến các công nghệ hỗ trợ.
<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>Phương pháp
Bạn có thể tạo một phiên bản nút với hàm tạo nút, ví dụ:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
| Phương pháp | Sự mô tả |
|---|---|
toggle |
Chuyển đổi trạng thái đẩy. Cung cấp cho nút giao diện như nó đã được kích hoạt. |
dispose |
Hủy bỏ nút của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM) |
getInstance |
Phương thức tĩnh cho phép bạn lấy phiên bản nút được liên kết với một phần tử DOM, bạn có thể sử dụng nó như sau:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Phương thức static trả về một phiên bản nút được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. Bạn có thể sử dụng nó như thế này:bootstrap.Button.getOrCreateInstance(element) |
Ví dụ: để chuyển đổi tất cả các nút
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Biến
$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%;
Mixin
Có ba mixin cho các nút: mixin biến thể nút và phác thảo nút (cả hai đều dựa trên $theme-colors), cộng với một mixin kích thước nút.
@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);
}
Vòng lặp
Các biến thể của nút (đối với nút thông thường và nút phác thảo) sử dụng các mixin tương ứng của chúng với $theme-colorsbản đồ của chúng tôi để tạo các lớp bổ trợ trong 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);
}
}