Bu makale, Tailwind'deki 'açık' yardımcı programlarda kesme noktaları ve medya sorguları uygulama yöntemini örnekleyecektir.
Tailwind'de “clear” üzerinde Kesme Noktalarından ve Medya Sorgularından Nasıl Yararlanılır?
Tailwind'deki 'açık' yardımcı programlara belirli kesme noktaları ve medya sorguları uygulamak için bir HTML yapısı oluşturun. Ardından, istenen değeri “ temizle-
Örnek
Bu örnekte, “ md kesme noktası ile “ ikisini de temizle 'fayda ve' lg kesme noktası ile “ açık-yok ' yardımcı programı ' orta ve büyük ekran boyutunda konumunu değiştirmek için ” öğesi:
< vücut >
< div sınıf = 'h-96 mx-10 p-8 bg-sky-500' >
< img kaynak = 'tailwindcss_img.png' sınıf = 'kayan sol p-3 w-28 h-24' her şey = 'resim' / >
< img kaynak = 'tailwindcss_img.png' sınıf = 'kayan-sağ p-3' her şey = 'resim' / >
< P sınıf = 'metni iki yana yasla sola temizle md: her ikisini de temizle lg: temizle-yok' > Tailwind CSS, içeriğin bir öğenin etrafına sarılmasını kontrol etmek için 'yüzer' yardımcı programlar sağlar.
Bu örnek, Tailwind'de 'clear' yardımcı programıyla kesme noktalarının ve medya sorgularının nasıl kullanılacağını gösterecektir. < / P >
< / div >
< / vücut >
Burada:
- “sola kayan” class, öğeleri kabın sol tarafına kaydırır.
- 'Sağa çık' class, öğeleri kabın sağ tarafına kaydırır.
- “açık sol” class,
öğesini kaptaki sol kayan öğenin altına taşır.
- “md: her ikisini de temizle” class hem sol hem de sağ kayan noktaları temizler ve
öğesini bunların altına orta ekran boyutunda konumlandırır.
- “lg: temizle-yok” class,
öğesine uygulanan herhangi bir temizlemeyi devre dışı bırakır ve öğenin, kabın her iki tarafında büyük bir ekran boyutunda yüzmesine izin verir.
Çıktı
Yukarıdaki çıktıya göre, belirtilen kesme noktaları ve medya sorguları “clear” yardımcı programına başarıyla uygulandı.
Çözüm
Tailwind'deki 'clear' yardımcı programlara kesme noktaları ve medya sorguları uygulamak için istenen değeri '' olarak tanımlayın. temizle-