bootstrap系列之响应式布局及相关的visible-sm、hidden-xs等的使用

响应式布局：响应式工具不能用于table元素，而且 本身就不支持

响应式布局需要在处添加如下语句：

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }

/*默认*/
@media (min-width: 980px){...}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

响应式布局辅助class：

class.png

以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏

class	设备
.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 及以上）隐藏

打印类

使用这些切换打印内容

class	打印
.visible-print	可见 可打印
.hidden-print	只对浏览器可见 不可打印

实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类

   
   
   
   


  

   

      

         特别小型
         ✔ 在特别小型设备上可见
      
      

         小型
         ✔ 在小型设备上可见
      
      

      

         中型
         ✔ 在中型设备上可见
      
      

         大型
         ✔ 在大型设备上可见
      

  

测试结果：

visible-lg.png

visible-xs.png

参考资料:http://blog.csdn.net/amohan/article/details/51480790
参考资料:http://caibaojian.com/bootstrap/scaffolding.html#responsive