Artikel ini akan menunjukkan kaedah untuk menggunakan 'break-after' dengan titik putus dan pertanyaan media dalam Tailwind CSS.
Bagaimana untuk Menggunakan 'break-after' Dengan Breakpoints dan Pertanyaan Media dalam Tailwind?
Untuk menggunakan 'break-after' dengan titik putus dan pertanyaan media, tentukan nilai dan penggayaan yang berbeza untuk saiz skrin yang berbeza dengan utiliti 'break-after' dalam program HTML. Kemudian, sahkan output dengan melihat halaman web HTML.
Mari kita terokai pelaksanaan praktikal:
Langkah 1: Gunakan Titik Putus dan Pertanyaan Media Dengan Utiliti 'break-after'.
Buat program HTML dan tentukan nilai dan gaya yang berbeza untuk saiz skrin yang berbeza dengan utiliti 'break-after'. Sebagai contoh, kami telah menggunakan ' md ” titik putus dengan “ lajur pecah selepas ' utiliti dan ' lg ” titik putus dengan “ rehat-selepas-elak ” utiliti:
< badan >
< div kelas = 'lajur-2 bg-teal-400' >
< hlm kelas = 'md:break-after-column lg:break-after-elak' > salam... < / hlm >
< hlm > Selamat Datang Disini... < / hlm >
< hlm > Ketahui tentang CSS Tailwind... < / hlm >
< hlm > Ia adalah rangka kerja CSS... < / hlm >
< hlm > selamat tinggal... < / hlm >
< / div >
< / badan >
di sini:
- ' md:lajur-pecah-selepas kelas ” menunjukkan bahawa pemisah lajur harus berlaku selepas elemen
khusus ini pada “ md ” titik putus (saiz skrin sederhana).
- ' lg:break-after-elak kelas ” mencadangkan bahawa elemen harus mengelakkan rehat selepas pada “ lg ” titik putus (saiz skrin besar).
Langkah 2: Sahkan Output
Sahkan sama ada titik putus dan pertanyaan media telah digunakan dengan melihat halaman web HTML:
Dalam halaman web di atas, pemecahan lajur telah berlaku pada elemen yang ditentukan pada skrin sederhana dan pemecahan selepas telah dielakkan pada skrin besar.
Kesimpulan
Untuk menggunakan 'break-after' dengan titik putus dan pertanyaan media dalam Tailwind, mula-mula buat fail HTML. Kemudian, gunakan titik putus dan pertanyaan media dengan utiliti 'break-after' dengan menentukan nilai dan penggayaan yang berbeza untuk saiz skrin yang berbeza. Untuk pengesahan, jalankan program HTML dan lihat halaman web. Artikel ini telah menunjukkan kaedah untuk menggunakan 'break-after' dengan titik putus dan pertanyaan media dalam Tailwind CSS.