Bài viết này sẽ minh họa phương pháp áp dụng các điểm dừng và truy vấn phương tiện trên các tiện ích 'xóa' trong Tailwind.
Cách sử dụng Điểm ngắt và Truy vấn phương tiện khi 'xóa' trong Tailwind?
Để áp dụng các điểm dừng cụ thể và truy vấn phương tiện trên các tiện ích 'xóa' trong Tailwind, hãy tạo cấu trúc HTML. Sau đó, xác định giá trị mong muốn cho “ rõ ràng-
Ví dụ
Trong ví dụ này, chúng tôi sẽ sử dụng “ md ” điểm ngắt với “ rõ ràng cả hai ” tiện ích và“ lg ” điểm ngắt với “ rõ ràng-không có ” tiện ích trong “ ” để thay đổi vị trí của nó trên kích thước màn hình vừa và lớn:
< thân hình >
< div lớp học = 'h-96 mx-10 p-8 bg-sky-500' >
< hình ảnh src = 'tailwindcss_img.png' lớp học = 'float-left p-3 w-28 h-24' mọi thứ = 'hình ảnh' / >
< hình ảnh src = 'tailwindcss_img.png' lớp học = 'phao-phải p-3' mọi thứ = 'hình ảnh' / >
< P lớp học = 'text-justify clear-left md:clear- both lg:clear-none' > Tailwind CSS cung cấp các tiện ích 'float' để kiểm soát việc bao bọc nội dung xung quanh một phần tử.
Ví dụ này sẽ cho biết cách sử dụng điểm dừng và truy vấn phương tiện với tiện ích 'xóa' trong Tailwind. < / P >
< / div >
< / thân hình >
Đây:
- 'phao sang trái' class thả nổi các phần tử sang phía bên trái của vùng chứa.
- 'phao-phải' lớp thả nổi các phần tử vào phía bên phải của vùng chứa.
- 'rõ ràng bên trái' class di chuyển phần tử
bên dưới phần tử được thả nổi bên trái trong vùng chứa.
- “md:xóa-cả hai” class xóa cả float trái và phải và đặt phần tử
bên dưới chúng trên kích thước màn hình trung bình.
- “lg: rõ ràng-không có” lớp vô hiệu hóa mọi xóa được áp dụng cho phần tử
và cho phép phần tử nổi trên cả hai mặt của vùng chứa ở kích thước màn hình lớn.
đầu ra
Theo đầu ra ở trên, các điểm ngắt và truy vấn phương tiện được chỉ định đã được áp dụng thành công cho tiện ích 'xóa'.
Phần kết luận
Để áp dụng các điểm ngắt và truy vấn phương tiện trên các tiện ích “xóa” trong Tailwind, hãy xác định giá trị mong muốn cho “ rõ ràng-