Bootstrap v.4 hidden ve visible kullanımı
Bootstrapta yapılan son güncellemeyle birlikte yeni bootsrapta yani bootstrap v.4’te görünürlük sınıfları hidden ve visible sınıfları kalktı. Öncelikle hidden ve visible sınıfının ne olduğunu açıkladıktan sonra güncellenen bootstrap’ta kaldırılan bu görünürlük sınıflarının yerine artık ne kullanacağımızı aktaracağız. Gelişe diğer güncellemeler için de blog sayfamızı sürekli takip edin.
Hidden ve Visible neden kullanılır?
Hidden ve visible bootstrapte duyarlı görünürlük sınıflarıdır.
Duyarlı görünürlük sınıfından kastedilen ekranlara(mobil,tablet,masaüstü) duyarlı
görünürlüktür. Daha basitçe anlatmak gerekirse eklediğiniz bir nesnenin
masaüstü ekranlarda görünmesini istiyor fakat mobil ekranlarda görünmesini istemiyorsanız
burada hidden ve visible sınıfaları kullanılır. Hidden-xs şeklinde yazılan bir
komut masaüstü ekranlarda gizle anlamına gelirken visible xs komutu yalnızca
mobil ekranlarda göster anlamına gelmektedir. Fakat şu an artık bu kullanımlar
değişti ve hidden-visible sınıfları kaldırıldı.
Bootstrap v.4 duyarlı
ekran kullanımı
Güncel bootstrap kullanımında bir öğeyi bazı ekranlarda
gizlemek istiyorsanız “d-*” ekran sınıflarını kullanmanız gerekecek. Örneğin
mobil ekranlarda görünmesini istemediğiniz nesne için “d-xs-none “ komutu kullanılacak.
Komutların eski
sürümden güncel hale geçişteki değişimleri
* `hidden-xs-down` = `d-none d-sm-block`
* `hidden-sm-down` = `d-none d-md-block`
* `hidden-md-down` = `d-none d-lg-block`
* `hidden-lg-down` = `d-none d-xl-block`
* `hidden-xl-down` = `d-none` (her zaman gizli)
* `hidden-xs-up` = `d-none` (her zaman gizli)
* `hidden-sm-up` = `d-sm-none`
* `hidden-md-up` = `d-md-none`
* `hidden-lg-up` = `d-lg-none`
* `hidden-xl-up` = `d-xl-none`
* `hidden-xs` (sadece) = `d-none d-sm-block`
* `hidden-sm` (sadece) = `d-block d-sm-none d-md-block`
* `hidden-md` (sadece) = `d-block d-md-none d-lg-block`
* `hidden-lg` (sadece) = `d-block d-lg-none d-xl-block`
* `hidden-xl` (sadece) = `d-block d-xl-none`
* `visible-xs` (sadece) = `d-block d-sm-none`
* `visible-sm` (sadece) = `d-none d-sm-block d-md-none`
* `visible-md` (sadece) = `d-none d-md-block d-lg-none`
* `visible-lg` (sadece) = `d-none d-lg-block d-xl-none`
* `visible-xl` (sadece) = `d-none d-xl-block`