Bu makale, Tailwind CSS'de satır kılavuzuna kesme noktaları ve ortam sorguları uygulama yöntemini örneklendirecektir.
Tailwind'de Satır Izgarasında Kesme Noktaları ve Medya Sorguları Nasıl Uygulanır?
Tailwind'de satır kılavuzuna kesme noktaları ve ortam sorguları uygulamak için bir HTML programı yapın. Ardından, “ kullanarak çeşitli ekran boyutları için satır sayısını tanımlayın. sm ”, “ md ' veya ' lg kesme noktaları “ ile ızgara satırları-
Pratik uygulamayı keşfedelim:
Adım 1: HTML Programında Satır Izgarasıyla Kesme Noktalarını ve Medya Sorgularını Kullanın
Bir HTML programı oluşturun ve farklı ekran boyutları için satır sayısını “ ile tanımlayın. ızgara satırları-
< vücut >
< div sınıf = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col boşluk-3 m-3 metin merkezi' >
< div sınıf = 'bg-teal-500 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 p-5' > 2 < / div >
< div sınıf = 'bg-teal-500 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 p-5' > 4 < / div >
< div sınıf = 'bg-teal-500 p-5' > 5 < / div >
< div sınıf = 'bg-teal-500 p-5' > 6 < / div >
< div sınıf = 'bg-teal-500 p-5' > 7 < / div >
< div sınıf = 'bg-teal-500 p-5' > 8 < / div >
< div sınıf = 'bg-teal-500 p-5' > 9 < / div >
< div sınıf = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / vücut >
Burada:
- “ Kafes ” sınıfı, bir ızgara düzeni oluşturmak için kullanılır.
- “ ızgara-satırları-2 ” sınıfı, kılavuzun eşit boyutta 2 satıra sahip olması gerektiğini belirtir.
- “ md:ızgara satırları-3 ” sınıfı, ızgarayı orta ekran boyutunda 3 eşit boyutlu satıra dönüştürür.
- “ lg:ızgara satırları-5 ” sınıfı, ızgarayı büyük ekran boyutunda 5 eşit boyutlu satıra dönüştürür.
- “ grid-flow-col ” sınıfı, ızgara öğelerini yatay olarak sütunlara yerleştirir.
- “ boşluk-3 ” sınıfı, her ızgara öğesi arasında 3 birimlik bir boşluk ayarlar.
- “ m-3 ” sınıfı, ızgara kabının etrafına 3 birimlik bir kenar boşluğu uygular.
- “ metin merkezi ” sınıfı, her ızgara öğesinin metnini merkeze ayarlar.
- “ bg-teal-500 ” sınıfı, deniz mavisi rengini ızgara öğelerinin arka planına ayarlar.
- “ p-5 ” sınıfı, alt öğenin içindeki içeriğe 5 birimlik bir dolgu ekler
öğeler.
2. Adım: Çıktıyı Doğrulayın
Kesme noktalarının ve ortam sorgularının satır kılavuzuna uygulandığından emin olmak için ekran boyutunu değiştirerek HTML web sayfasını görüntüleyin:
Yukarıdaki çıktıda ekran boyutuna göre satır sayısının değiştiği görülmektedir. Bu, kesme noktalarının ve ortam sorgularının satır kılavuzuna başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de satır kılavuzuna kesme noktaları ve ortam sorguları uygulamak için çeşitli ekran boyutları için satır sayısını ' sm ”, “ md ' veya ' lg kesme noktaları “ ile ızgara satırları-
' araçlar. Ardından, ekran boyutunu değiştirerek web sayfasındaki değişiklikleri sağlayın. Bu makale, Tailwind CSS'de satır kılavuzuna kesme noktaları ve ortam sorguları uygulama yöntemini örneklemiştir.