Sử dụng các tiện ích đường viền để thêm hoặc xóa đường viền của phần tử. Chọn từ tất cả các đường viền hoặc từng đường viền một
phụ gia
Thêm đường viền vào các yếu tố tùy chỉnh
trừ
Hoặc xóa viền
Màu sắc
Thay đổi màu đường viền bằng các tiện ích được xây dựng dựa trên màu sắc chủ đề của chúng tôi
Hoặc sửa đổi
6 mặc định của một thành phầnThay đổi màu sắc và chiều rộng đường viền
Email address
Dangerous heading
Changing border color and width
độ mờ
Đã thêm vào v5. 2. 0Các tiện ích Bootstrap
7 được tạo bằng Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu sắc theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt của alpha độngLàm thế nào nó hoạt động
Hãy xem xét tiện ích
8 mặc định của chúng tôi.border-success {
--bs-border-opacity: 1;
border-color: rgba[var[--bs-success-rgb], var[--bs-border-opacity]] !important;
}
Chúng tôi sử dụng phiên bản RGB của biến CSS
9 [với giá trị là
0] và đính kèm một biến CSS thứ hai,
1, để tạo độ trong suốt của alpha [với giá trị mặc định là
2 nhờ một biến CSS cục bộ]. Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng
8 ngay bây giờ, giá trị
4 được tính toán của bạn là
5. Biến CSS cục bộ bên trong mỗi lớp
6 tránh các vấn đề thừa kế nên các phiên bản lồng nhau của các tiện ích không tự động có độ trong suốt alpha được sửa đổiThí dụ
Để thay đổi độ mờ đó, hãy ghi đè
1 thông qua kiểu tùy chỉnh hoặc kiểu nội tuyếnĐây là đường viền thành công mặc định
Đây là đường viền thành công có độ mờ 50%
7Hoặc, chọn từ bất kỳ tiện ích nào của
8Đây là đường viền thành công mặc định
Đây là đường viền thành công có độ mờ 75%
Đây là đường viền thành công có độ mờ 50%
Đây là đường viền thành công có độ mờ 25%
Đây là đường viền thành công có độ mờ 10%
9Bề rộng
bán kính
Thêm các lớp vào một phần tử để dễ dàng làm tròn các góc của nó
75x75 75x75 75x75 75x75 75x75 75x75 150x75
1kích cỡ
Sử dụng các lớp tỷ lệ cho các góc tròn lớn hơn hoặc nhỏ hơn. Kích thước nằm trong khoảng từ
9 đến
Email address
Dangerous heading
Changing border color and width
0 và có thể được định cấu hình bằng cách sửa đổi API tiện ích75x75 75x75 75x75 75x75 75x75 75x75
4CSS
Biến
Đã thêm vào v5. 2. 0
0biến sass
1
2Sass mixin
3API tiện ích
Tiện ích biên giới được khai báo trong API tiện ích của chúng tôi trong
Email address
Dangerous heading
Changing border color and width
1. Tìm hiểu cách sử dụng API tiện ích