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>

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>

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 (với nền tối hơn, đường viền tối hơn và bóng chìm) khi hoạt động. 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 disabledthuộ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ợ 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. 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ị 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>

Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Lưu ý rằng các nút được chọn trước yêu cầu bạn thêm .activelớ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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Phương pháp