Artikel ini akan memberi contoh kaedah menggunakan titik putus dan pertanyaan media pada utiliti 'jelas' dalam Tailwind.
Bagaimana untuk Menggunakan Titik Putus dan Pertanyaan Media tentang 'jelas' dalam Tailwind?
Untuk menggunakan titik putus dan pertanyaan media tertentu pada utiliti 'kosongkan' dalam Tailwind, buat struktur HTML. Kemudian, tentukan nilai yang dikehendaki kepada “ jelas-
Contoh
Dalam contoh ini, kami akan menggunakan ' md ” titik putus dengan “ jelas-keduanya ' utiliti dan ' lg ” titik putus dengan “ jelas-tiada ' utiliti dalam ' ” untuk menukar kedudukannya pada saiz skrin sederhana dan besar:
< badan >
< div kelas = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' kelas = 'apung-kiri p-3 w-28 h-24' segala-galanya = 'gambar' / >
< img src = 'tailwindcss_img.png' kelas = 'terapung-kanan p-3' segala-galanya = 'gambar' / >
< hlm kelas = 'text-justify clear-left md:clear-the both lg:clear-none' > CSS Tailwind menyediakan utiliti 'terapung' untuk mengawal pembalut kandungan di sekeliling elemen.
Contoh ini akan menunjukkan cara menggunakan titik putus dan pertanyaan media dengan utiliti 'jelas' dalam Tailwind. < / hlm >
< / div >
< / badan >
di sini:
- “terapung-kiri” kelas mengapungkan elemen ke sebelah kiri bekas.
- “terapung-kanan” kelas mengapungkan elemen ke sebelah kanan bekas.
- 'kiri jelas' kelas mengalihkan elemen
di bawah elemen terapung kiri dalam bekas.
- “md:jelas-keduanya” kelas mengosongkan kedua-dua terapung kiri dan kanan dan meletakkan elemen
di bawahnya pada saiz skrin sederhana.
- “lg:clear-none” kelas melumpuhkan sebarang jelas yang digunakan pada elemen
dan membenarkan elemen terapung pada kedua-dua belah bekas pada saiz skrin yang besar.
Pengeluaran
Mengikut output di atas, titik putus yang ditentukan dan pertanyaan media telah berjaya digunakan pada utiliti 'jelas'.
Kesimpulan
Untuk menggunakan titik putus dan pertanyaan media mengenai utiliti 'jelas' dalam Tailwind, tentukan nilai yang dikehendaki pada ' jelas-