Nút JS khởi động
Nút JS (button.js)
Sử dụng plugin này nếu bạn muốn có nhiều quyền kiểm soát hơn đối với các nút của mình.
Để biết hướng dẫn về Nút, hãy đọc Hướng dẫn về Nút Bootstrap của chúng tôi.
Các lớp plugin của nút
Các lớp bên dưới có thể được sử dụng để tạo kiểu cho bất kỳ phần tử <a>, <button> hoặc <input> nào:
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | Try it |
| .btn-default | Indicates a default/standard button | Try it |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
| .btn-success | Indicates a successful or positive action | Try it |
| .btn-info | Contextual button for informational alert messages | Try it |
| .btn-warning | Indicates caution should be taken with this action | Try it |
| .btn-danger | Indicates a dangerous or potentially negative action | Try it |
| .btn-link | Makes a button look like a link (will still have button behavior) | Try it |
| .btn-lg | Makes a large button | Try it |
| .btn-sm | Makes a small button | Try it |
| .btn-xs | Makes an extra small button | Try it |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
| .active | Makes the button appear pressed | Try it |
| .disabled | Makes the button disabled | Try it |
Thông qua JavaScript
Kích hoạt thủ công với:
$('.btn').button();
Tùy chọn nút
| None |
Phương pháp nút
Bảng sau liệt kê tất cả các phương thức nút có sẵn.
Lưu ý: Đối với plugin này, các phương thức cũng có thể được truyền qua thuộc tính dữ liệu; nối tên phương thức vào data-, như trong chuyển đổi dữ liệu hoặc tải dữ liệu.
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | Try it |
| .button("loading") | Disables the button and changes the button text to "loading..." | Try it |
| .button("reset") | Changes the button text to original text (if changed) | Try it |
| .button("string") | Specifies a new button text | Try it |
Thêm ví dụ
Sử dụng CSS để tùy chỉnh các nút
Cách loại bỏ các đường viền tròn:
Cách thêm một màu cụ thể:
Ví dụ
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Hãy tự mình thử »Cách thêm bóng:
