Bootstrap - 響應式實用程式

Bootstrap 提供了一些方便的輔助類，用於更快速地進行移動端友好開發。這些類可以結合大型、小型和中型裝置，透過媒體查詢在不同裝置上顯示和隱藏內容。

謹慎使用這些類，避免建立同一網站的完全不同版本。響應式實用程式目前僅適用於塊和表格切換。

類	裝置
.visible-xs	超小螢幕（小於 768px）可見
.visible-sm	小螢幕（最大 768 px）可見
.visible-md	中螢幕（768 px 到 991 px）可見
.visible-lg	大螢幕（992 px 及以上）可見
.hidden-xs	超小螢幕（小於 768px）隱藏
.hidden-sm	小螢幕（最大 768 px）隱藏
.hidden-md	中螢幕（768 px 到 991 px）隱藏
.hidden-lg	大螢幕（992 px 及以上）隱藏

列印類

下表列出了列印類。將這些類用於切換列印內容。

類	列印
.visible-print	是可見
.hidden-print	僅對瀏覽器可見，不對列印可見。

示例

以下示例演示瞭如何使用上面列出的輔助類。調整瀏覽器大小或在不同裝置上載入示例以測試響應式實用程式類。

線上演示

<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>

複選標記表示元素在您當前的視口中可見。

列印頁面