Bootstrap - Duyarlı yardımcı programlar

Bootstrap, daha hızlı mobil uyumlu geliştirme için birkaç yardımcı sınıf sağlar. Bunlar, büyük, küçük ve orta büyüklükteki cihazlarla birlikte medya sorgusu yoluyla içeriği cihaza göre göstermek ve gizlemek için kullanılabilir.

Bunları idareli kullanın ve aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının. Responsive utilities are currently only available for block and table toggling.

Sınıflar	Cihazlar
.visible-xs	Çok küçük (768 pikselden az) görünür
.visible-sm	Küçük (768 piksele kadar) görünür
.visible-md	Orta (768 piksel - 991 piksel) görünür
.visible-lg	Daha büyük (992 piksel ve üstü) görünür
.hidden-xs	Çok küçük (768 pikselden az) gizli
.hidden-sm	Küçük (768 piksele kadar) gizli
.hidden-md	Orta (768 piksel - 991 piksel) gizli
.hidden-lg	Daha büyük (992 piksel ve üstü) gizli

Baskı Sınıfları

Aşağıdaki tablo baskı sınıflarını listeler. İçeriği yazdırmak üzere değiştirmek için bunları kullanın.

Sınıflar	Yazdır
.visible-print	Evet Görünür
.hidden-print	Yazdırmamak için yalnızca tarayıcı tarafından görülebilir.

Misal

Aşağıdaki örnek, yukarıda listelenen yardımcı sınıfların kullanımını gösterir. Duyarlı yardımcı program sınıflarını test etmek için tarayıcınızı yeniden boyutlandırın veya örneği farklı cihazlara yükleyin.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks , öğenin mevcut görüntü alanınızda görünür olduğunu belirtir.