Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Örnek Arama: Html renkler , php veri tabanı bağlantısı

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 Boyutu Class
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>

 

0 0 vote
Article Rating
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments