Bootstrap hidden sınıfı ile bir div’ i belirli ekran boyutlarında gizleme

Merhabayın, Bootstrap 3′ te hidden ile bir div’ i belirli ekran boyutlarında gizlemeyi öğreneceğiz. Ne yapacağız peki ? Misal bir div var ve bu div etiketinin mobil telefonlarda görünmesini istemiyorsunuz. örneğin ne bileyim sağ tarafa bi kulakçık eklediniz web sitenizde iletişim adında millet tıklasın oraya direk iletişime geçsin istiyorsunuz sizinle ama ekran küçüldükçe bu kulakçık görüntünün önüne geçiyor ya da belli olmuyor dolayısı ile ekran küçüldüğünde bu div’ i abra kadabra ile yok etmek istiyorsunuz.

Bunun için bootstrap 3 te kullanacağımız sınıf hidden- sınıfıdır. Bootstrap 3 te bu sınıf ne işe yarar ? herhangi bir div’ i mobilde, tablette, laptop’ta ya da öküz gibin ekranlarda gizlemeye yarar.

Peki nasıl kullanırız ? çok basit. Bir div’ in sınıfına ek olarak hangi ekranda görünmesini istemiyorsak onun adını 3 kuluvallah bir elam okuyarak anıp “hidden-” in yanına ekliyor ve de “hidden-xs” ya da “hidden-sm” ya da “hidden-md” ya da (yeter ulan ne kadar ya da dedin) “hidden-lg” yazıyoruz. ve yazdığımız ekran boyutunda o div artık gizlenmiş oluyor.

Örneğin :

İşte bu şekilde raadlıkla hangi ekran olursa olsun o div i gizlemiş oluyoruz arkadaşlar. Geçmiş olsun. Ahanda ilacınız.

Erel Çolak

Front-End Developer olarak kendimi geliştiriyorum, HTML5, CSS3, JQuery, Bootstrap Gibi bir çok dille ilgilenmekteyim. WordPress, vBulletin, OpenCart, Moodle ve diğer CMS' ler konusunda aşırı bilgi sahibiyim ve de bu bilgileri elimden geldiğince paylaşıyorum. Trakya Üniversitesi Bilgisayar Öğretmenliği Bölümünü okudum. Şimdilerde özel bir şirkette UI/UX Designer & Front-end developer olarak çalışmaktayım.

You may also like...

Bir cevap yazın