Bootstrap hakkında çok basit ve kısa bir bilgiyi bu yazımda aktarmak istiyorum. Mobil cihazların durumu ortada ve bazen web sitelerini hızlı açmakta oldukça zorlanıyor. Biz web geliştiricileri ise bu durumu minimuma indirmek amacıyla bazı elementleri mobil sürüme kapatıyoruz. Bu arada bu class’ları sadece divlere değil, herhangi bir elemente de uygulayabilir siniz.. Aşağıdaki class’lar mobilde divleri gizlemenize veya bazı divleri sadece mobilde göstermenizi sağlayacaktır.
“hidden-xs” class’ını kullanarak istediğimiz divi mobilde gizleyebiliriz.
“visible-xs-block” class’ını kullanarak, istediğimiz bir divi sadece mobil cihazlara gösterebiliriz.
Elinizde bir reklam kodu veya mobil kullanıcılarınız telefonlarında açamayacağı büyüklükte resim, video gibi akıllı telefonları yoran kodları gizlemek istiyorsanız aslında çok basit bir kodumuz mevcut. Bir kaç css kodu ile çok bilginiz olmasa daha yapabileceğiniz bu işlem şöyle yapılıyor. Örneğin elimizde reklam kodu var bunu sadece masaüstü kullanıcılarına göstermek istiyoruz. (Not : Bunun tam tersi de mevcut yani sadece mobil kullanıcılarınızın div etiketini görmesi içinde yapabilirsiniz. )
@media screen and (max-width: 600px) { .nomobile { visibility: hidden; clear: both; float: right; margin: 5px auto; width: 22%; height: auto; display: none; // Önemli olan nokta burası burayı kaldırırsanız sadece mobile için görüntülenir. } } |
Buradaki en önemli nokta display:none; kodu olup mobil ekranda çıkmasını istiyorsanız bu etiketi kaldırmanız yeterlidir.
Mobil Kullanıcılardan div etiketini gizlemek
Mobil Kullanıcılardan div etiketini gizlemek
daha sayfanızda gizlemek istediğiniz bölümü
|
Mobil Kullanıcılardan div etiketini gizle
Burada illa div tagında kullanma zorunluluğu yoktur.
|
etiketleri arasına bile alabilirsiniz.
Aklınıza takılan bir yer varsa konuda belirtmeniz yeterli olacaktır.
