Tạo và tùy chỉnh Button (nút) trong Bootstrap

Đừng bỏ lỡ các thông tin quan trọng khác về cách tạo và điều chỉnh nút trong Bootstrap tại bài viết của Mytour.

Tạo và tối ưu hóa các nút (button) để làm cho trang web của bạn trở nên phong cách và hiệu quả hơn trong Bootstrap.

1. Tạo nút (button) trong Bootstrap

Nút (button) đóng vai trò quan trọng trong thiết kế trang web, từ việc xử lý biểu mẫu đến tương tác người dùng. Trong hướng dẫn này, chúng ta sẽ khám phá cách tạo và tùy chỉnh nút trong Bootstrap một cách linh hoạt và hiệu quả.

2. Kiểu dáng độc đáo cho các nút (button) trong Bootstrap

Bootstrap cung cấp nhiều lớp để tạo kiểu cho nút, áp dụng linh hoạt cho a, input và button.

Ví dụ: Dưới đây là minh họa cách tạo kiểu cho các nút trong Bootstrap:

Kết quả hiển thị như sau:

3. Nút dự thảo trong Bootstrap

Chúng ta có thể sáng tạo nút phác thảo bằng cách thay đổi các lớp nút sửa đổi như trong ví dụ dưới đây:

Kết quả xuất hiện như sau:

4. Điều chỉnh kích thước nút trong Bootstrap

Bootstrap cung cấp các tùy chọn để người dùng linh động thay đổi kích thước nút. Để làm điều này, bạn chỉ cần thêm lớp .btn-lg hoặc .btn-sm.

Ví dụ: trong ví dụ dưới đây, chúng ta minh họa việc sử dụng các lớp .btn-lg và .btn-sm để điều chỉnh kích thước của các nút:

Kết quả xuất hiện như sau:

Ngoài ra, chúng ta cũng có thể tạo các nút dạng khối bằng cách thêm lớp .btn-block vào các nút như ví dụ dưới đây:

Kết quả xuất hiện như sau:

5. Nút Tắt trong Bootstrap

Trong một số tình huống, giả sử người dùng không đáp ứng đủ điều kiện để thực hiện một hành động cụ thể hoặc nếu muốn họ thực hiện các hành động khác trước khi thực hiện một hành động nào đó, chúng ta có thể sử dụng nút tắt.

6. Tạo Nút Tắt bằng phần tử button và input

Để tắt các nút được tạo bằng thẻ button hoặc input, chúng ta chỉ cần thêm thuộc tính disabled cho các phần tử tương ứng.

Ví dụ: Trong ví dụ này, chúng ta sẽ tạo các nút bị vô hiệu hóa bằng phần tử button và input:

Kết quả đầu ra sẽ có dạng như bên dưới:

7. Tạo nút vô hiệu hóa bằng phần tử Anchor

Để vô hiệu hóa các nút được tạo bằng thẻ a, chúng ta chỉ cần thêm lớp .disabled như trong ví dụ dưới đây:

Kết quả sẽ xuất hiện như sau:

Lưu ý: Lớp .disabled chỉ khiến cho các liên kết trở nên như bị vô hiệu hóa, tuy nhiên trong thực tế, chúng ta vẫn có thể click vào các liên kết này, trừ khi chúng ta xóa thuộc tính href. Hơn nữa, chúng ta có thể triển khai JavaScript tùy chỉnh để ngăn chặn sự kiện click trên các liên kết này.

8. Tạo nút ở trạng thái active trong Bootstrap

Chúng ta cũng có thể sử dụng lớp .active để tạo ra các nút ở trạng thái active (đang hoạt động). Thường thì chúng ta không cần thêm lớp này cho các nút vì Bootstrap sử dụng CSS :active pseudo-class để tự động tạo trạng thái hoạt động của các nút.

Ví dụ: trong ví dụ sau đây, chúng ta thấy cách tạo nút ở trạng thái active trong Bootstrap:

Kết quả xuất hiện như sau:

9. Thêm Spinner trong Bootstrap

Trong Bootstrap, việc thêm biểu tượng spinner vào một nút để hiển thị trạng thái đang tải (load) trong ứng dụng là một công việc đơn giản. Hãy tham khảo ví dụ dưới đây:

Kết quả hiển thị như sau:

Trong bài học về Bootstrap này, Mytour đã hướng dẫn bạn cách tạo và tùy chỉnh Button (nút) trong Bootstrap. Bài học tiếp theo sẽ giới thiệu về Button Group trong Bootstrap. Nếu bạn có thắc mắc hoặc câu hỏi, hãy chia sẻ ý kiến của bạn trong phần bình luận dưới bài viết.