BootStrap: 跨设备网格系统区别

Bootstrap 网格系统如何跨多个设备工作
超小设备手机(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)
网格行为一直堆叠以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
Bootstrap 响应式实用工具

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换,Div和Table

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面 (≥992px)大屏幕 桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏
注意点:
  1. .visible-xs-*即为:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
  2. 为所有xs,sm,md,lg同时设定.visible和.hidden,当屏幕处于超小时,.visible可见,.hidden不可见,其他的sm,md,lg的hidden可见,即:当处于特定屏幕大小时.visible才起作用,否则就是.hidden起作用

发表评论