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`