Bootstrap 4 ile Mobilde ve Masaüstünde Gösterme ve Gizleme İşlemleri
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-blocksı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-nonesı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.