Bootstrap - Các nút
Chương này bao gồm tuổi sử dụng của nút Bootstrap với các ví dụ. Bất cứ thứ gì được phân loại.btnsẽ kế thừa giao diện mặc định của một nút màu xám với các góc được bo tròn. Tuy nhiên, Bootstrap cung cấp một số tùy chọn để tạo kiểu cho các nút, được tóm tắt trong bảng sau:
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | btn Nút mặc định / tiêu chuẩn. |
| 2 | btn-primary Cung cấp thêm trọng lượng trực quan và xác định hành động chính trong một tập hợp các nút. |
| 3 | btn-success Cho biết một hành động thành công hoặc tích cực. |
| 4 | btn-info Nút theo ngữ cảnh cho các thông báo cảnh báo thông tin. |
| 5 | btn-warning Cho biết cần thận trọng với hành động này. |
| 6 | btn-danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực. |
| 7 | btn-link Nhấn mạnh nút bằng cách làm cho nó trông giống như một liên kết trong khi vẫn duy trì hành vi của nút. |
Ví dụ sau minh họa tất cả các lớp nút ở trên:
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Kích thước nút
Bảng sau đây tóm tắt các lớp được sử dụng để lấy các nút có kích thước khác nhau:
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | .btn-lg Điều này làm cho kích thước nút lớn. |
| 2 | .btn-sm Điều này làm cho kích thước nút nhỏ. |
| 3 | .btn-xs Điều này làm cho kích thước nút cực nhỏ. |
| 4 | .btn-block Điều này tạo ra các nút cấp độ khối — những nút này kéo dài toàn bộ chiều rộng của nút chính. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>Trạng thái nút
Bootstrap cung cấp các lớp cho phép bạn thay đổi trạng thái của các nút như đang hoạt động, bị vô hiệu hóa, v.v. mỗi lớp sẽ được thảo luận trong các phần sau.
Trạng thái hoạt động
Các nút sẽ xuất hiện được nhấn (với nền tối hơn, đường viền tối hơn và bóng chìm) khi hoạt động. Bảng sau đây tóm tắt các lớp được sử dụng để làm cho các phần tử nút và phần tử neo hoạt động:
| Thành phần | Lớp học |
|---|---|
| Phần tử nút | Sử dụng .active lớp để cho thấy rằng nó đã được kích hoạt. |
| Phần tử neo | Sử dụng .active lớp thành các nút <a> để cho biết nó đã được kích hoạt. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>Trạng thái tàn tật
Khi bạn tắt một nút, nó sẽ mờ đi 50% màu và mất gradient.
Bảng sau đây tóm tắt các lớp được sử dụng để tắt phần tử nút và phần tử neo:
| Thành phần | Lớp học |
|---|---|
| Phần tử nút | Thêm disabled thuộc tính cho các nút <button>. |
| Phần tử neo | Thêm disabled lớp đến các nút <a>. Note- Lớp này sẽ chỉ thay đổi giao diện của <a> chứ không phải chức năng của nó. Bạn cần sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết tại đây. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Thẻ nút
Bạn có thể sử dụng các lớp nút với phần tử <a>, <button> hoặc <input>. Nhưng chúng tôi khuyên bạn nên sử dụng nó với các phần tử <button> để tránh các vấn đề không nhất quán giữa các trình duyệt.
Ví dụ sau đây chứng minh điều này -
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">