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 .sr-only
lớ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-nowrap
lớ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 .btn
lớ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-lg
hoặc .btn-sm
cho 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>
Tạo các nút cấp độ khối — những nút kéo dài toàn bộ chiều rộng của nút cha — bằng cách thêm .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
Trạng thái hoạt động
Các nút sẽ xuất hiện khi được nhấn khi hoạt động với nền tối hơn, đường viền tối hơn và khi bật bóng tối, sẽ có bóng bên trong. Không cần thêm lớp vào <button>
s vì chúng sử dụng lớp giả . Tuy nhiên, bạn vẫn có thể ép buộc cùng một giao diện hoạt động với .active
(và bao gồm aria-pressed=“true”
thuộc tính) nếu bạn cần sao chép trạng thái theo chương trình.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
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 disabled
thuộc tính boolean vào bất kỳ <button>
phần tử nào.
<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ợdisabled
thuộc tính, vì vậy bạn phải thêm.disabled
lớ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-events
trên các nút neo. Trong các trình duyệt hỗ trợ thuộc tính đó, bạn sẽ không thấy con trỏ bị tắt. - Các nút bị vô hiệu hóa khi sử dụng
<a>
phải bao gồmaria-disabled="true"
thuộc tính để biểu thị trạng thái của phần tử đối với các công nghệ hỗ trợ. - Các nút bị vô hiệu hóa sử dụng
<a>
không được bao gồmhref
thuộc tính.
<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>
Báo trước chức năng liên kết
Để đề cập đến các trường hợp bạn phải giữ href
thuộc tính trên một liên kết bị vô hiệu hóa, .disabled
lớp sử 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. Lưu ý rằng thuộc tính CSS này chưa được chuẩn hóa cho HTML, nhưng tất cả các trình duyệt hiện đại đều hỗ trợ nó. 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.
<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>
Plugin nút
Làm được nhiều việc hơn với các nút. Các trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ.
Chuyển đổi trạng thái
Thêm data-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 thủ công .active
lớp và aria-pressed="true"
vào <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Hộp kiểm và các nút radio
Các kiểu của Bootstrap .button
có thể được áp dụng cho các phần tử khác, chẳng hạn như <label>
s, để cung cấp hộp kiểm hoặc nút kiểu radio bật tắt. Thêm data-toggle="buttons"
vào một .btn-group
có chứa các nút đã sửa đổi đó để kích hoạt hành vi chuyển đổi của chúng qua JavaScript và thêm .btn-group-toggle
để tạo kiểu cho <input>
các nút trong các nút của bạn. Lưu ý rằng bạn có thể tạo các nút hoặc nhóm được hỗ trợ đầu vào duy nhất.
Trạng thái đã chọn cho các nút này chỉ được cập nhật thông qua click
sự kiện trên nút. Nếu bạn sử dụng một phương pháp khác để cập nhật đầu vào — ví dụ: bằng <input type="reset">
hoặc bằng cách áp dụng thủ công thuộc tính của đầu vào checked
— bạn sẽ cần bật .active
chế độ này <label>
theo cách thủ công.
Lưu ý rằng các nút được chọn trước yêu cầu bạn thêm .active
lớp vào đầu vào theo cách thủ công <label>
.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
Phương pháp
Phương pháp | Sự mô tả |
---|---|
$().button('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. |
$().button('dispose') |
Hủy bỏ nút của một phần tử. |