Trong Tailwind CSS, phần “ hộp-trang trí-phá vỡ ” thuộc tính xác định việc hiển thị nền, đường viền và phần đệm của phần tử khi nó trải rộng trên nhiều dòng hoặc cột. Nó có hai lớp tức là, “ lát cắt ' Và ' dòng vô tính ”. Người dùng có thể sử dụng thuộc tính “box-decoration-break” với các điểm ngắt và truy vấn phương tiện để xác định cách bố cục và hình thức của các thành phần thay đổi tùy thuộc vào chiều rộng của thiết bị và áp dụng các kiểu khác nhau dựa trên các điểm ngắt.
Bài viết này sẽ trình bày phương pháp sử dụng ngắt trang trí hộp với các điểm ngắt và truy vấn phương tiện.
Cách sử dụng Điểm ngắt trang trí hộp với Điểm ngắt và Truy vấn phương tiện trong Tailwind?
Để sử dụng ngắt trang trí hộp với các điểm dừng và truy vấn phương tiện, cần phải xác định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau trong chương trình HTML. Sau đó, xem trang web bằng cách chạy chương trình HTML để xác minh.
Để hiểu rõ hơn, hãy xem các bước được đề cập dưới đây:
Bước 1: Sử dụng Điểm ngắt và Truy vấn phương tiện với Dấu ngắt trang trí hộp
Tạo một chương trình HTML và chỉ định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau. Chẳng hạn, chúng tôi đã định nghĩa “ md ' Và ' lg ” điểm dừng với phong cách của họ:
< thân hình >< nhịp lớp học = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Xin chào < anh />
Linux < anh />
Gợi ý
nhịp >
thân hình >
Đây:
- “ bg-teal-600 ” đặt màu mòng két cho nền.
- “ hộp-trang trí-bản sao ” là một lớp tùy chỉnh được sử dụng để trang trí hộp nhân bản.
- “ md:bg-vàng-500 ” áp dụng màu nền vàng cho phần tử cho “ md ” điểm dừng (màn hình cỡ trung bình).
- “ lg:box-decoration-slice ” đặt hiệu ứng cắt lát cho trang trí hộp cho “ lg ” điểm dừng (màn hình lớn).
- “ chữ trắng ” đặt màu trắng cho văn bản.
- “ văn bản-3xl ” đặt kích thước phông chữ thành 3xl.
- “ px-2 ” thêm phần đệm ngang 2 pixel vào phần tử .
Bước 2: Xác minh đầu ra
Để đảm bảo rằng các điểm dừng và truy vấn phương tiện đã được áp dụng thành công, hãy chạy chương trình HTML và xem trang web:
Có thể thấy rằng trang web đang thay đổi theo đó các điểm ngắt và truy vấn phương tiện được xác định.
Phần kết luận
Để sử dụng dấu ngắt trang trí hộp có dấu ngắt và truy vấn phương tiện trong Tailwind, trước tiên, hãy tạo một tệp HTML. Sau đó, sử dụng các điểm ngắt và truy vấn phương tiện trong chương trình HTML bằng cách chỉ định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau. Để xác minh, hãy chạy chương trình HTML và xem trang web. Bài viết này đã trình bày phương pháp sử dụng ngắt trang trí hộp với các điểm ngắt và truy vấn phương tiện.