Bài viết này sẽ hướng dẫn bạn:
- Làm cách nào để tạo các nút trong Bootstrap?
- Làm cách nào để tạo các nút phác thảo trong Bootstrap?
- Làm cách nào để điều chỉnh kích thước nút Bootstrap?
- Làm cách nào để tạo nút cấp khối trong Bootstrap?
- Làm cách nào để tạo các nút trạng thái hoạt động trong Bootstrap?
- Làm cách nào để tạo các nút trạng thái bị vô hiệu hóa trong Bootstrap?
Làm cách nào để tạo các nút trong Bootstrap?
Bootstrap “ btn ” lớp được sử dụng để tạo các nút. Để thêm các nút được tạo kiểu, bạn có thể sử dụng nút “ btn ” lớp với lớp màu, chẳng hạn như “ btn-success ” để tạo một nút màu xanh lá cây.
Trong HTML, “
Để có một khái niệm rõ ràng, hãy xem ví dụ dưới đây.
Thí dụ
Trong tệp HTML, hãy làm theo các bước để tạo các nút bằng các thẻ khác nhau:
- Thêm vào '
' và ' ” phần tử và gán chúng “ btn ' và ' btn-chính ' các lớp học. - Sau đó, thêm một “ <đầu vào> ” gắn thẻ với loại “ cái nút ”. Chỉ định nó là “ btn ' và ' btn-success ” để tạo kiểu như hai nút đầu tiên có màu xanh lam và nút thứ ba có màu xanh lá cây:
< một tầng lớp = 'btn btn-chính' href = '#' > Mở ra < / một >
< đầu vào loại = 'cái nút' tầng lớp = 'btn btn-thành công' giá trị = 'Tìm kiếm' >
đầu ra
Làm cách nào để tạo các nút phác thảo trong Bootstrap?
Để thêm đường viền nút, Bootstrap “ btn-phác thảo-* ” lớp được sử dụng. Theo cú pháp của nó, “ * ” ở đây đại diện cho màu đường viền. Ví dụ, ' btn-phác thảo-nguy hiểm ” đặt đường viền màu đỏ, “ btn-dàn-chính ” thiết lập đường viền màu xanh, v.v.
Phân tích mã được đưa ra dưới đây:
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-cương-tiểu' >Tiếp theo< / cái nút >< cái nút loại = 'cái nút' tầng lớp = 'btn btn-cương-nguy hiểm' >Hủy< / cái nút >
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-dàn-thành-công' >Thành công< / cái nút >
Có thể nhận thấy rằng “ Kế tiếp nút ” có đường viền màu xanh lam, nút “ Hủy bỏ ” với đường viền màu đỏ và nút “ Sự thành công ” đã được tạo kiểu với đường viền màu xanh lục:
Làm cách nào để điều chỉnh kích thước nút Bootstrap?
Một số lớp Bootstrap được áp dụng để điều chỉnh kích thước nút, chẳng hạn như:
- “ btn-lg ” lớp được áp dụng để tạo một nút lớn. Lớp này có thể tăng kích thước phông chữ và phần đệm.
- “ btn-md ” tạo một nút có kích thước trung bình.
- “ btn-sm ” tạo một nút nhỏ.
Thí dụ
Bây giờ, chúng tôi sẽ tạo ba nút với các kích cỡ khác nhau và tên dễ hiểu:
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-trung btn-lg' >Lớn< / cái nút >< cái nút loại = 'cái nút' tầng lớp = 'btn btn-cảnh báo btn-md' >trung bình< / cái nút >
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-nguy hiểm btn-sm' >Nhỏ< / cái nút >
đầu ra
Làm cách nào để tạo nút cấp khối trong Bootstrap?
Các nút cấp khối là những nút giữ kích thước chiều rộng đầy đủ. Để tạo các nút cấp khối, nút “ khối btn ” lớp được sử dụng như sau
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-cảnh báo btn-chặn' > nút< / cái nút >< cái nút loại = 'cái nút' tầng lớp = 'btn btn-khối btn phụ' >nút< / cái nút >
đầu ra
Làm cách nào để tạo các nút trạng thái hoạt động trong Bootstrap?
Các nút trạng thái hoạt động đề cập đến các nút hiện đang hoạt động. Các nút này hơi tối hơn bình thường. Để tạo các nút như vậy, Bootstrap “ tích cực ” lớp được sử dụng.
Thí dụ
Đoạn mã dưới đây tạo hai nút. Cái đầu tiên ở trạng thái bình thường trong khi cái còn lại được áp dụng với “ tích cực ' tầng lớp:
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-thành công' >Thành công< / cái nút >< cái nút loại = 'cái nút' tầng lớp = 'btn btn-hoạt động thành công' >Thành công< / cái nút >
đầu ra
Làm cách nào để tạo các nút trạng thái bị vô hiệu hóa trong Bootstrap?
Các nút trạng thái bị vô hiệu hóa đề cập đến các nút không thể nhấp và không sử dụng được. Trong Bootstrap, “ tàn tật ” lớp được sử dụng để tạo nút trạng thái bị vô hiệu hóa. Các ' tàn tật ” thuộc tính cũng có thể được sử dụng cho mục đích này.
Thí dụ
Kiểm tra ví dụ được cung cấp dưới đây:
- Nút đầu tiên không ở trạng thái bị tắt.
- Cái thứ hai sử dụng “ tàn tật ” lớp để tạo nút trạng thái bị vô hiệu hóa.
- Cái thứ ba sử dụng “ tàn tật ' thuộc tính:
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-thành công bị vô hiệu hóa' >Thành công< / cái nút >
< cái nút loại = 'cái nút' tầng lớp = 'btn btn-thành công' bị vô hiệu hóa>Thành công< / cái nút >
đầu ra
Chúng tôi đã đề cập đến các khía cạnh khác nhau liên quan đến các nút Bootstrap và kiểu dáng của chúng trong CSS.
Phần kết luận
Các ' btn ” được sử dụng để tạo các nút Bootstrap với thiết kế đơn giản. Để tạo các nút màu và đường viền, nút “ btn-* ' và ' btn-phác thảo-* ” các lớp được sử dụng khi “ * ” tượng trưng cho bất kỳ lớp màu nào. Ví dụ, ' cảnh báo btn ” tạo một nút màu vàng, “ cảnh báo btn ” tạo một nút có viền màu vàng và nhiều nút khác. Để làm cho các nút hoạt động hoặc bị vô hiệu hóa, các lớp 'hoạt động' và 'bị vô hiệu hóa' được áp dụng tương ứng. Bài đăng này cung cấp một hướng dẫn toàn diện về các nút Bootstrap.