Bootstrap 响应式实用工具

来源:互联网 发布:角色数据库设计 编辑:程序博客网 时间:2024/06/06 19:48

Bootstrap 提供了类似于栅格系统的辅助类,以便更好的实现对移动设备友好的开发。这些就是针对对不同屏幕 块级元素的可见和隐藏。对不同屏幕的分类完全类似于 栅格系统的 class 分类

.visible-xs-* 超小屏幕手机 (<768px)可见 其余屏幕隐藏
.visible-sm-* 小屏幕平板 (≥768px) 可见 其余屏幕隐藏
.visible-md-* 中等屏幕桌面(≥992px)可见 其余屏幕隐藏
.visible-lg-* 大屏幕桌面 (≥1200px可见 其余屏幕隐藏
.hidden-xs 超小屏幕手机 (<768px)隐藏 其余屏幕可见
.hidden-sm 小屏幕平板 (≥768px) 隐藏 其余屏幕可见
.hidden-md 中等屏幕桌面(≥992px)隐藏 其余屏幕可见
.hidden-lg 大屏幕桌面 (≥1200px)隐藏 其余屏幕可见

从3.2.0开始 出现了不同屏幕下针对 css的 display属性的变体

.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

以上的 * 这里不多做解释,上面说的很清楚了