Selamlar siz bootstrap değil aslında css öğrenmeniz gerekiyor, bootstrap sadece bir framework, sizin istedikleriniz css ve javasicript.
bootstrap bir css framework'tür fakat arkadaşın dediği örneklerdeki herşeyi yapan bir framework'tür.
Visible & Hidden örnekleri
http://getbootstrap.com/css/#responsive-utilities
Aslında çok karışık bir durum yoktur.
Bootstrap'ta 4 tip ekran genişliğine göre işlem vardır
*-xs-* -> Extra small (Ekstra Küçük) 0px < XS < 768px
*-sm-* -> Small (Küçük) 768px <= XS < 992px
*-md-* -> Medium (Orta) 992px <= XS < 1200px
*-lg-* -> Large (Büyük) 1200px <= XS < ∞
üsteki tabloya göre gizleme, gösterme yapılabiliyor.
.visible-xs -> Sadece xs ebatlarında görünecek bir alan için kullanılır
.visible-sm -> Sadece sm ebatlarında görünecek bir alan için kullanılır
.visible-md -> Sadece md ebatlarında görünecek bir alan için kullanılır
.visible-lg -> Sadece lg ebatlarında görünecek bir alan için kullanılır
.hidden-xs -> Sadece xs ebatlarında gizlenecek alan için kullanılır.
.hidden-sm -> Sadece sm ebatlarında gizlenecek alan için kullanılır.
.hidden-md -> Sadece md ebatlarında gizlenecek alan için kullanılır.
.hidden-lg -> Sadece lg ebatlarında gizlenecek alan için kullanılır.
İhtiyacınız olanı belirleyip belli kombinasyonlar oluşturmanız gerekmektedir.
Örnek Medium ebatlarından küçük ekranda gizlenmesini istediğiniz bir alan var ise;
<div class="col-md-6 hidden-sm hidden-xs"></div> kullanılabileceği gibi
<div class="col-md-6 visible-md-6 visible-lg-6"></div> şeklinde de kullanılabilir.
Dikkat etmen gereken şey medium ve large ebatlarında görünecek ise her iki ebatıda yazman gerekiyor. eğer sadece medium yazarsan large ekranlarda da gözükmeyecektir.
Talep doğrultusunda mantık çerçevesine göre ihtiyacın olanı kullanabilirsin.
Örnek sadece xs ebatlarında gizlenecek bir alan için;
<div class="col-md-6 visible-lg visible-md visible-sm"></div> şeklinde yazmak yerine
<div class="col-md-6 hidden-xs"></div> şeklinde yazmak daha mantıklı olacaktır.
Tablolarda en kullanışlı olan şey ise table-responsive class'ı dır.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
şeklinde yazıldığından büyük tablolarda kaydırma çubuğu çıkarak görüntü bozulmasını engelliyor.
Yukarıdaki gibi birçok özelliği içinde barındırıyor bootstrap.
Html ve css öğrenmeden yapılamasa da bunları öğrendikten sonra ekstra olarak bootstrap'ta öğrenmesi gerekiyor. İşleri kolaylaştıran onlarca satır css hazırlamaktan ve js kodları içinde debelenmekten kurtaran çok güzel bir sistemdir.
Bu arada vaktim oldukça soran olursa elimden geldikçe yazmaya çalışırım.