Uncategorized

Bootstrap Sadece Mobil ve Masaüstü Gizleme & Gösterme

Yeni nesil web sayfalarında bir içeriği sadece mobilde göstermek veya bir içeriği sadece masaüstünde göstermek isteyebiliriz.Tam tersi istediğimiz içeriyi istediğimiz ekran boyutunda engellemek de isteyebiliri.z

Bootstrap ile display property işlemlerini çok kolay bazı etiketler ile gerçekleştirmemiz mümkündür. Bunun için hazırlanmış bootstrap class yapılarını aşağıda liste olarak paylaştım. Tabloda kullanmak istediğiniz yapıya göre dilediğiniz özellikleri seçebilirsiniz.

 

Ekran BoyutuClass
Heryerde Engeller.d-none
Sadece xs Engeller (Mobil).d-none .d-sm-block
Sadece sm engeller (Geniş mobil).d-sm-none .d-md-block
Sadece md engeller (Tablet).d-md-none .d-lg-block
Sadece lg engeller (Dizüstü Pc).d-lg-none .d-xl-block
Sadece xl engeller (Masaüstü ve üzeri).d-xl-none
Heryerde gösterir.d-block
Sadece xs göster (Mobil).d-block .d-sm-none
Sadece sm gösterir (Geniş mobil).d-none .d-sm-block .d-md-none
Sadece md gösterir (Tablet).d-none .d-md-block .d-lg-none
Sadece lg gösterir (Dizüstü bilgisayar).d-none .d-lg-block .d-xl-none
Sadece xl gösterir (Masaüstü ve üzeri).d-none .d-xl-block

 

Yukarıda gösterilen yardımcı tanımlar yani mobil , masaüstü gibi tanımlar kolaylık sağlamak için verilmiş olup değişkenlikler gösterebilir. Örneğin bir table bir dizüstü pc den daha büyük olabilir.

Yukarıdaki kalıplardan en çok kullanılanlar Sadece XS engelleme veya sadece XS göster seçenekleridir.

Örnek

<div class="d-block  d-sm-none">

        <a href="#"> Whatsapp Sipariş </a>

</div>

 

4.3 10 votes
Article Rating
Subscribe
Bildir
guest
2 Yorum
Eskiler
En Yeniler Beğenilenler
Inline Feedbacks
View all comments
The Karga
3 yıl önce

Adamsın çok işime yaradı teşekkürler…

Burito
Burito
2 yıl önce

Teşekkür ederim. Çok bilgilendirici.. Kullanması baya kolay