Lớp Bootstrap nào được sử dụng để tạo nút dưới dạng?

Bootstrap là một nền tảng để phát triển web dựa trên khung giao diện người dùng. Nó được sử dụng để tạo các thiết kế đáp ứng đặc biệt bằng cách sử dụng HTML và CSS. Các mẫu này được sử dụng cho biểu mẫu, bảng, nút, kiểu chữ, mô hình, bảng, điều hướng, băng chuyền và hình ảnh. Các nút là một phần không thể thiếu của một trang web và ứng dụng. Trong bài viết này, chúng ta sẽ tìm hiểu về các loại nút bootstrap khác nhau theo trình tự sau

Làm cách nào để tạo nút Bootstrap?

Các nút được sử dụng cho các mục đích khác nhau. Bạn có thể 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 nội dung nào đó trên trang web khi nhấp vào nút, 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ó nhiều hành động khác nhau có thể được thực hiện bằng các nút. Hãy tiếp tục và đi sâu vào các nút bootstrap và các hoạt động khác nhau của chúng

Kiểu nút Bootstrap

Các lớp khác nhau có sẵn trong Bootstrap để tạo kiểu cho các nút. Ngoài ra, chúng chỉ ra các trạng thái hoặc ngữ nghĩa khác nhau. Các kiểu nút có thể được áp dụng cho bất kỳ phần tử nào. Tuy nhiên, nó được áp dụng bình thường cho các phần tử , và để hiển thị tốt nhất. Để đạt được các kiểu, Bootstrap có các lớp như. btn,. btn-mặc định,. btn-chính,. btn-success,. thông tin btn,. cảnh báo btn,. nguy hiểm btn,. liên kết btn

Dưới đây là một ví dụ để chỉ cho bạn cách tạo các kiểu nút khác nhau trong Bootstrap

Chính Thành công phụ Thông tin cảnh báo nguy hiểm Liên kết ánh sáng tối

đầu ra

Kích thước nút

Bạn có thể tăng hoặc giảm kích thước nút với sự trợ giúp của bootstrap. Do đó, bạn có thể làm cho các nút lớn hơn hoặc nhỏ hơn thông qua việc thêm một lớp bổ sung. btn-lg hoặc. btn-sm

Hãy lấy một ví dụ và xem nó hoạt động như thế nào

Large
Default
Small

đầu ra

Các nút được viền ngoài.
Bootstrap cung cấp cho chúng ta một loạt các lớp có thể được sử dụng khi chúng ta cần sử dụng các nút theo kiểu phác thảo trong dự án của mình, đó là các nút không có màu nền. Các lớp nút phác thảo loại bỏ mọi màu nền hoặc kiểu hình nền được áp dụng cho [các] nút. Các lớp này được liệt kê dưới đây.

btn-phác thảo-chínhbtn-phác thảo-phụbtn-phác thảo-thành côngbtn-phác thảo-nguy hiểmbtn-phác thảo-cảnh báobtn-phác thảo-thông tinbtn-phác thảo-ánh sángbtn-phác thảo-tối

Ví dụ

HTML