Bootstrap Button

Trong hướng dẫn này, bạn sẽ học cách tạo và tùy chỉnh các button với Bootstrap.

Tạo các button với Bootstrap

Các button (nút nhấn) là phần không thể thiếu của một trang web và ứng dụng.

Chúng được sử dụng cho các mục đích khác nhau như, gửi hoặc đặt lại biểu mẫu HTML, thực hiện các hành động tương tác như hiển thị hoặc ẩn thứ gì đó trên trang web khi nhấp vào button, chuyển hướng người dùng đến một trang khác, v.v.

Bootstrap cung cấp một cách nhanh chóng và dễ dàng để tạo và tùy chỉnh các nút.

Các kiểu button trong Bootstrap

Các lớp khác nhau có sẵn trong Bootstrap để tạo kiểu cho các button cũng như biểu thị các trạng thái hoặc ngữ nghĩa khác nhau. Các kiểu button có thể được áp dụng cho bất kỳ phần tử nào. Tuy nhiên, nó thường được áp dụng cho các phần tử <a>, <input> và <button> để hiển thị tốt nhất.

Ví dụ sau sẽ chỉ cho bạn cách tạo các kiểu button khác nhau trong Bootstrap:

<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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Kết quả của ví dụ trên sẽ giống như sau:

Các kiểu button viền trong Bootstrap

Bạn cũng có thể tạo các button viền bằng cách thay thế các lớp bổ trợ kiểu button trong Bootstrap, như sau:

<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-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi kích thước của các button

Bootstrap cung cấp cho bạn thêm tùy chọn để tăng hoặc giảm kích thước của button.

Để làm cho các button lớn hơn, hãy thêm một lớp bổ sung .btn-lg cho các button, như sau:

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

Kết quả của ví dụ trên sẽ giống như sau:

Tương tự, để làm cho các button nhỏ hơn, hãy thêm một lớp bổ sung .btn-sm cho các button, như sau:

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể tạo các button có chiều rộng đầy đủ hoặc các button khối (các button bao phủ toàn bộ chiều rộng của các phần tử cha) thông qua việc sử dụng các lớp tiện ích khoảng trống và hiển thị của Bootstrap.

Những tiện ích này cung cấp khả năng 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 type="button" class="btn btn-primary">Block button</button>
    <button type="button" class="btn btn-secondary">Block button</button>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể tạo biến thể đáp ứng của các nút này bằng cách sử dụng các lớp .d-{breakpoint}-block.

Trong ví dụ sau, các nút sẽ được xếp chồng lên nhau theo chiều dọc trên các thiết bị nhỏ và cực nhỏ (tức là chiều rộng khung nhìn <768px). Từ điểm ngắt trung bình (md) trở lên, lớp .d-md-block thay thế lớp .d-grid, do đó vô hiệu lớp .gap-2. Hãy cùng dùng thử và xem nó thực sự hoạt động như thế nào:

<div class="d-grid gap-2 d-md-block">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-secondary">Button</button>
</div>

Các button bị vô hiệu hóa Bootstrap

Đôi khi chúng ta cần phải tắt một button vì một số lý do nhất định, chẳng hạn như người dùng trong trường hợp không đủ điều kiện để thực hiện hành động cụ thể này hoặc chúng ta muốn đảm bảo rằng người dùng phải thực hiện tất cả các hành động bắt buộc khác trước khi tiếp tục hành động cụ thể này. Hãy xem làm thế nào để làm điều đó.

Tạo các button bị vô hiệu hóa bằng cách sử dụng phần tử button và input

Các button được tạo thông qua thẻ <button> hoặc <input> có thể bị vô hiệu hóa bằng cách thêm thuộc tính disabled vào phần tử tương ứng, như được hiển thị trong ví dụ sau:

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Secondary button</button>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo các button bị vô hiệu hóa bằng cách sử dụng phần tử anchor

Các button được tạo thông qua thẻ <a> có thể bị vô hiệu hóa bằng cách thêm lớp .disabled, như sau:

<a href="#" class="btn btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-secondary disabled">Secondary link</a>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Lớp .disabled chỉ làm cho các liên kết hiển thị trực quan như bị vô hiệu hóa, tuy nhiên liên kết sẽ vẫn có thể nhấp được trừ khi bạn xóa thuộc tính href khỏi nó. Ngoài ra, bạn có thể triển khai JavaScript tùy chỉnh để ngăn các nhấp chuột đó.

Các button hoạt động trong Bootstrap

Ngoài ra, bạn cũng có thể áp dụng lớp .active để buộc các button trông giống như đang hoạt động (tức là được nhấn). Thông thường, bạn không cần thêm lớp này vào các button, vì trạng thái hoạt động của chúng được Bootstrap tự động tạo kiểu bằng cách sử dụng lớp giả CSS :active. Đây là một ví dụ:

<button type="button" class="btn btn-primary active">Primary button</button>
<button type="button" class="btn btn-secondary active">Secondary button</button>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo button đang tải

Với Bootstrap, bạn có thể dễ dàng đưa biểu tượng con quay vào một button để biểu thị trạng thái đang tải trong ứng dụng của bạn. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>

Kết quả của ví dụ trên sẽ giống như sau:

Trong chương tiếp theo, bạn sẽ học cách kết hợp nhiều button theo chiều ngang hoặc chiều dọc trong một hàng như các thanh công cụ bằng cách sử dụng thành phần Bootstrap button group. Ngoài ra, trong phần nâng cao, bạn sẽ học cách tạo các button bật tắt mà không cần sử dụng bất kỳ mã JavaScript nào.

Bootstrap • Bootstrap Cơ Bản