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 :
<div class="col-md-12 col-sm-6 hidden-xs"> div içeriği </div>
İşte bu şekilde raadlıkla hangi ekran olursa olsun o div i gizlemiş oluyoruz arkadaşlar. Geçmiş olsun. Ahanda ilacınız.