Bootstrap thay đổi màu viền nút khi nhấp

thuộc tính phác thảo. Outline là một thuộc tính phần tử vẽ một đường xung quanh phần tử nhưng bên ngoài đường viền. Nó không chiếm không gian từ chiều rộng của một phần tử như đường viền

Trước phác thảo nút

Bước 1. Bao gồm chế độ xem bootstrap

Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn

Trước khi thực hiện với các lớp phác thảo của bootstrap, chỉ cần biết về một chút phác thảo nút. Đường viền trên các nút có nghĩa là tạo đường viền xung quanh các nút. Cái này '. lớp btn-outline' loại bỏ tất cả các màu nền hoặc kiểu khỏi nút để mang lại giao diện Hiệu quả, sáng hơn và tô sáng cho nút bên ngoài. Về cơ bản, nút phác thảo chịu trách nhiệm vẽ đường viền được đánh dấu xung quanh nút

Đường viền của các nút được sử dụng cho nhiều mục đích như –

  • Để cung cấp một cái nhìn hiệu quả về các nút
  • Để chỉ ra một hành động ngoài cơ chế làm việc hiện tại
  • Để vẽ các đường viền nổi bật xung quanh các nút để tạo giao diện khác với các nút bình thường
  • Để tạo một nút “Nổi bật”
  • Để cung cấp các kiểu khác nhau cho các hành động trong biểu mẫu và hộp thoại

Tiếp cận. Trong Bootstrap 4 có các lớp theo ngữ cảnh mặc định hoặc lớp được xác định trước với “. btn-outline”,  Có một số nút màu tích hợp phác thảo các lớp trong bootstrap 4 được sử dụng cho mục đích khác

Các lớp phác thảo nút là.  

  • btn-dàn-chính
  • btn-dang-trung
  • btn-phác thảo-thành công
  • btn-phác thảo-nguy hiểm
  • cảnh báo btn
  • btn-dàn-thông-tin
  • btn-outline-light
  • btn-phác thảo-tối

Include Bootstrap4 and jQuery CDN into the tag before all other stylesheets to load our CSS.




ví dụ 1. Trong ví dụ này, chúng ta có thể thấy tất cả các loại lớp ngữ cảnh phác thảo nút trong bootstrap và biết cách nó được sử dụng trong trang web

HTML




 

    

Chủ Đề