Responsive Border Radius được xây dựng với Bootstrap 5. Sử dụng bán kính đường viền để xác định bán kính của các góc của phần tử. Thành phần này cung cấp cho bạn khả năng thêm các góc tròn vào các phần tử
Xem Tài liệu bán kính đường viền Bootstrap để biết hướng dẫn chi tiết và thậm chí nhiều ví dụ hơn
Ví dụ cơ bản
Làm thế nào để sử dụng?
Tải xuống MDB 5 - UI KIT miễn phí
Chọn thành phần tùy chỉnh yêu thích của bạn và nhấp vào hình ảnh
Sao chép và dán mã vào dự án MDB của bạn
▶️Đăng ký kênh YouTube để nhận tài nguyên và hướng dẫn phát triển web
Thêm ví dụ
Thêm tài liệu Bootstrap mở rộng
- hình đại diện khởi động
- Hồ sơ khởi động
- đường viền bootstrap
- Màu Bootstrap
- nút khởi động
- Hình ảnh Bootstrap
- bảng khởi động
Bốn giá trị - bán kính đường viền. 15px 50px 30px 5px;
Ba giá trị - bán kính đường viền. 15px 50px 30px;
Hai giá trị - bán kính đường viền. 15px 50px;
Một giá trị - bán kính đường viền. 15px;
Đưa ra bản chạy thử ❯
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố
Thuộc tính đường viền-bán kính5. 0
4. 0 -webkit-9. 04. 0
3. 0 -moz-5. 0
3. 1 -webkit-10. 5
Cú pháp CSS
bán kính đường viền. chiều dài 1-4. %/1-4 chiều dài. %. ban đầu. thừa kế;
Ghi chú. Bốn giá trị cho mỗi bán kính được đưa ra theo thứ tự trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái. Nếu bỏ qua phía dưới bên trái, nó giống như phía trên bên phải. Nếu bỏ qua phía dưới bên phải, nó giống như phía trên bên trái. Nếu trên cùng bên phải bị bỏ qua, nó giống như trên cùng bên trái
Bootstrap 4 có rất nhiều lớp tiện ích/trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào
biên giới
Sử dụng các lớp border
để thêm hoặc xóa đường viền khỏi phần tử
Thí dụ
Thí dụ
Màu viền
Thêm màu vào đường viền với bất kỳ lớp màu đường viền theo ngữ cảnh nào
Thí dụ
Thí dụ
Bán kính biên giới
Thêm các góc tròn vào một phần tử với các lớp rounded
Thí dụ
Thí dụ
Nổi và Clearfix
Di chuyển phần tử sang bên phải với lớp .float-right
hoặc bên trái với lớp .float-left
và xóa số float với lớp .clearfix
Thí dụ
Thí dụ
Trôi sang trái
Trôi sang phải
Phao đáp ứng
Di chuyển phần tử sang trái hoặc sang phải tùy thuộc vào độ rộng màn hình, với các lớp float đáp ứng [.float-*-left|right
- trong đó * là sm
[>=576px], md
[>=768px], lg
[>=992px] hoặc border
0 [>
Thí dụ
Nổi ngay trên màn hình nhỏ hoặc rộng hơn
Nổi ngay trên màn hình trung bình hoặc rộng hơn
Nổi ngay trên màn hình lớn hoặc rộng hơn
Nổi ngay trên màn hình cực lớn hoặc rộng hơn
Thí dụ
Nổi ngay trên màn hình nhỏ hoặc rộng hơn
Nổi ngay trên màn hình trung bình hoặc rộng hơn
Nổi ngay trên màn hình lớn hoặc rộng hơn
Nổi ngay trên màn hình cực lớn hoặc rộng hơn
không nổi
Tự mình thử »Căn giữa
Căn giữa một phần tử với lớp border
1 [thêm lề trái và lề phải. Tự động]
Thí dụ
Thí dụ
căn giữa
Tự mình thử »Bề rộng
Đặt chiều rộng của một phần tử với các lớp w-* [border
2, border
3, border
4, border
5, border
6]
Thí dụ
Thí dụ
Chiều rộng 25%
Chiều rộng 50%
Chiều rộng 75%
Chiều rộng 100%
Chiều rộng tối đa 100%
Tự mình thử »Chiều cao
Đặt chiều cao của phần tử với các lớp h-* [border
7, border
8, border
9, rounded
0, rounded
1]
Thí dụ
Thí dụ
Chiều cao 25%
Chiều cao 50%
Chiều cao 75%
Chiều cao 100%
Chiều cao tối đa 100%
Tự mình thử »
khoảng cách
Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: rounded
2 [=576px], md
[>=768px], lg
[>=992px] or border
0 [>=1200px]]:
Các lớp được sử dụng trong định dạng. rounded
7 cho rounded
2 và rounded
9 cho sm
, md
, lg
và border
0
Trường hợp tài sản là một trong
.float-right
4 - bộ.float-right
5.float-right
6 - bộ.float-right
7
Trường hợp các bên là một trong những
.float-right
8 - bộ.float-right
9 hoặc.float-left
0.float-left
1 - bộ.float-left
2 hoặc.float-left
3.float-left
4 - bộ.float-left
5 hoặc.float-left
6.float-left
7 - bộ.float-left
8 hoặc.float-left
9.clearfix
0 - đặt cả.float-left
6 và.float-left
9 hoặc.float-left
5 và.float-left
8.clearfix
5 - đặt cả.float-left
0 và.float-left
3 hoặc.float-right
9 và.float-left
2- để trống - đặt
.float-right
5 hoặc.float-right
7 trên cả 4 mặt của phần tử
Trường hợp kích thước là một trong những
.float-*-left|right
2 - bộ.float-right
5 hoặc.float-right
7 đến.float-*-left|right
2.float-*-left|right
6 - đặt.float-right
5 hoặc.float-right
7 thành.float-*-left|right
9 [4px nếu cỡ chữ là 16px]sm
0 - đặt.float-right
5 hoặc.float-right
7 thànhsm
3 [8px nếu cỡ chữ là 16px]sm
4 - đặt.float-right
5 hoặc.float-right
7 thànhsm
7 [16px nếu cỡ chữ là 16px]sm
8 - đặt.float-right
5 hoặc.float-right
7 thànhmd
1 [24px nếu cỡ chữ là 16px]md
2 - đặt.float-right
5 hoặc.float-right
7 thànhmd
5 [48px nếu cỡ chữ là 16px]md
6 - đặt.float-right
5 thành tự động
Ghi chú. lề cũng có thể âm, bằng cách thêm chữ "n" trước kích thước
md
8 - đặt.float-right
5 thànhlg
0 [-4px nếu cỡ chữ là 16px]lg
1 - đặt.float-right
5 thànhlg
3 [-8px nếu cỡ chữ là 16px]lg
4 - đặt.float-right
5 thànhlg
6 [-16px nếu cỡ chữ là 16px]lg
7 - đặt.float-right
5 thànhlg
9 [-24px nếu cỡ chữ là 16px]border
00 - đặt.float-right
5 thànhborder
02 [-48px nếu cỡ chữ là 16px]
Thí dụ
Tôi chỉ có một phần đệm trên cùng [1. 5rem = 24px]
Tôi có phần đệm ở tất cả các mặt [3rem = 48px]
Tôi có lề ở tất cả các cạnh [3rem = 48px] và phần đệm phía dưới [3rem = 48px]
Thí dụ
Tôi chỉ có một phần đệm trên cùng [1. 5rem = 24px]
Tôi có phần đệm ở tất cả các mặt [3rem = 48px]
Tôi có lề ở tất cả các cạnh [3rem = 48px] và phần đệm phía dưới [3rem = 48px]
Tự mình thử »Thêm ví dụ về khoảng cách
border
03margin on all sidesTry itborder
04margin topTry itborder
05margin bottomTry itborder
06margin leftTry itborder
07margin rightTry itborder
08margin left and rightTry itborder
09margin top and bottomTry itborder
10padding on all sidesTry itborder
11padding topTry itborder
12padding bottomTry itborder
13padding leftTry itborder
14padding rightTry itborder
15padding top and bottomTry itborder
16padding left and rightTry itbóng tối
Sử dụng các lớp border
17 để thêm bóng cho một phần tử
Thí dụ
Thí dụ
Không có bóng
cái bóng nhỏ
bóng mặc định
bóng lớn
Tự mình thử »Căn dọc
Sử dụng các lớp border
18 để thay đổi căn chỉnh của các phần tử [chỉ hoạt động trên các phần tử ô nội tuyến, khối nội tuyến, bảng nội tuyến và bảng]
Thí dụ
đường cơ sở trên cùng ở giữa dưới cùng văn bản trên cùng văn bản dưới cùng
Thí dụ
đường cơ sở
đứng đầu
tên đệm
đáy
văn bản trên cùng
văn bản dưới cùng
Nhúng đáp ứng
Tạo video phản hồi hoặc nhúng trình chiếu dựa trên chiều rộng của cha mẹ
Thêm border
19 vào bất kỳ phần tử nhúng nào [tương tự] trong phần tử gốc có border
20 và tỷ lệ khung hình do bạn chọn
Thí dụ
Thí dụ
Hiển thị
Sử dụng các lớp border
21 hoặc border
22 để kiểm soát khả năng hiển thị của các phần tử. Ghi chú. Các lớp này không thay đổi giá trị hiển thị CSS. Họ chỉ thêm border
23 hoặc border
24
Thí dụ
Thí dụ
tôi có thể nhìn thấy
tôi vô hình
Tự mình thử »Chức vụ
Sử dụng lớp border
25 để làm cho bất kỳ phần tử nào cố định/ở trên cùng của trang
Thí dụ
Tự mình thử »
Sử dụng lớp border
26 để cố định bất kỳ phần tử nào/ở cuối trang
Thí dụ
Tự mình thử »
Sử dụng lớp border
27 để cố định bất kỳ phần tử nào/ở đầu trang khi bạn cuộn qua phần tử đó. Ghi chú. Lớp này không hoạt động trong IE11 trở về trước [sẽ coi nó là border
28]
Thí dụ
Tự mình thử »
đóng biểu tượng
Sử dụng lớp border
29 để tạo kiểu cho biểu tượng gần. Điều này thường được sử dụng cho các cảnh báo và phương thức. Lưu ý rằng chúng tôi sử dụng ký hiệu border
30 để tạo biểu tượng thực tế [dấu "x" trông đẹp hơn]. Cũng lưu ý rằng nó nổi ngay theo mặc định
Trình đọc màn hình
Sử dụng lớp border
31 để ẩn phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình
Thí dụ
Tôi sẽ bị ẩn trên tất cả các màn hình ngoại trừ trình đọc màn hình
Tự mình thử »Màu sắc
Như được mô tả trong chương Màu sắc, đây là danh sách tất cả các lớp màu nền và văn bản
Các lớp cho màu văn bản là. border
32, border
33, border
34, border
35, border
36, border
37, border
38, border
39, border
40, border
41 [màu cơ thể mặc định/thường là màu đen] và border
42
Thí dụ
Văn bản này bị tắt tiếng
văn bản này là quan trọng
Văn bản này cho biết thành công
Văn bản này đại diện cho một số thông tin
Văn bản này đại diện cho một cảnh báo
Văn bản này thể hiện sự nguy hiểm
Văn bản phụ
Văn bản màu xám đậm
Bài kiểm tra cơ thể
Văn bản màu xám nhạt
Tự mình thử »Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, điều này sẽ thêm màu di chuột tối hơn
Bạn cũng có thể thêm 50% độ mờ cho văn bản đen trắng với các lớp border
43 hoặc border
44
Thí dụ
Văn bản màu đen với độ mờ 50% trên nền trắng
Văn bản màu trắng với độ mờ 50% trên nền đen
Tự mình thử »Màu nền
Các lớp cho màu nền là. border
45, border
46, border
47, border
48, border
49, border
50, border
51 và border
52
Lưu ý rằng màu nền không đặt màu cho văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp border
53
Thí dụ
văn bản này là quan trọng
Văn bản này cho biết thành công
Văn bản này đại diện cho một số thông tin
Văn bản này đại diện cho một cảnh báo
Văn bản này thể hiện sự nguy hiểm
Màu nền phụ
Màu nền xám đậm
Màu nền xám nhạt
Tự mình thử »Kiểu chữ / Lớp văn bản
Như đã mô tả trong chương Kiểu chữ, đây là danh sách tất cả các lớp kiểu chữ/văn bản
LớpMô tảVí dụ_______2_______54Các tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường [cỡ chữ lớn hơn và độ đậm của phông chữ nhẹ hơn] và có bốn loại để lựa chọn.border
55, border
56, border
57, border
58Try itborder
59Bold textTry itborder
60Bolder bold textTry itborder
61Normal textTry itborder
62Light weight textTry itborder
63Lighter weight textTry itborder
64Italic textTry itborder
65Makes a paragraph stand outTry itborder
66Indicates smaller text [set to 85% of the size of the parent]Try itborder
67Prevents long text from breaking layoutTry itborder
68Indicates - và
- ]. Lớp này chỉ áp dụng cho các mục danh sách con ngay lập tức [để xóa kiểu danh sách mặc định khỏi bất kỳ danh sách lồng nhau nào, hãy áp dụng lớp này cho bất kỳ danh sách lồng nhau nào]
border
82Đặt tất cả các mục danh sách trên một dòng [được sử dụng cùng với border
83 trên mỗiborder
84Làm cho một_______1_______Hãy thử nóPhần tử khối
Để biến một phần tử thành một phần tử khối, hãy thêm lớp border
85. Sử dụng bất kỳ lớp border
86 nào để kiểm soát KHI phần tử phải là phần tử khối trên một chiều rộng màn hình cụ thể