Our Codester Buyers Should Get Support at support@webimgo.com




Bootstrap 4 ile Mobilde ve Masaüstünde Gösterme ve Gizleme İşlemleri

Bootstrap 4 ile Mobilde ve Masaüstünde Gösterme ve Gizleme İşlemleri

  • Gönderiyi Paylaş:
  • 240

Bootstrap, modern ve duyarlı web siteleri oluşturmak için kullanılan en popüler araçlardan biridir. Bootstrap 4, web sitelerini farklı ekran boyutlarında düzenlemek için kullanabileceğiniz bir dizi sınıf sunar. Bu sınıflar, öğeleri belirli ekran boyutlarında göstermenize veya gizlemenize yardımcı olur.

Ekran boyutlarına göre kullanabileceğiniz sınıflar şunlardır:

  • .d-none: Öğeyi herhangi bir ekran boyutunda gizler.
  • .d-block: Öğeyi herhangi bir ekran boyutunda blok olarak görüntüler.
  • .d-*-block: Öğeyi belirli bir ekran boyutundan itibaren blok olarak görüntüler. Burada * işareti, ekran boyutunu belirtir. Örneğin, d-sm-block sınıfı, küçük ekran boyutlarından itibaren öğeyi blok olarak görüntüler.
  • .d-*-none: Öğeyi belirli bir ekran boyutundan itibaren gizler. Burada * işareti, ekran boyutunu belirtir. Örneğin, d-md-none sınıfı, orta boy ekran boyutlarından itibaren öğeyi gizler.

Aşağıdaki tablo, farklı ekran boyutları için hangi sınıfların kullanılması gerektiğini gösterir: 

Ekran Boyutu Gösterme Gizleme
Heryerde .d-block .d-none
Sadece xs (Mobil) .d-block .d-sm-none .d-none .d-sm-block
Sadece sm (Geniş mobil) .d-none .d-sm-block .d-md-none .d-sm-none .d-md-block
Sadece md (Tablet) .d-none .d-md-block .d-lg-none .d-md-none .d-lg-block
Sadece lg (Dizüstü bilgisayar) .d-none .d-lg-block .d-xl-none .d-lg-none .d-xl-block
Sadece xl (Masaüstü ve üzeri) .d-none .d-xl-block .d-xl-none

Yukarıdaki sınıfları kullanarak web sitenizi farklı ekran boyutları için optimize edebilir ve daha iyi bir kullanıcı deneyimi sunabilirsiniz.

Hosting Satın Al

En Güçlü ve Güvenli Hosting Sahibi Olun. "Siteniz Işık Hızında Açılsın"


Webim Go BTK Onaylı Yer Sağlayıcıdır.
İNCELE
Destek Al

İşiniz İçin En İyi Çözüm Ortağınız Olmaya Hazırız.

TEKLİF AL