Skip to main content

布局

使用Bootstrap构建页面的选项,包括全局样式,必不可少的脚手架(scaffolding), 网格系统等。

--本章内容翻译由:樊潇洁友情提供

响应式工具

为了加快“适应移动客户端”的开发,可以使用这些实用工具类,从而实现根据媒体查询条件,基于设备特征,显示或隐藏内容。bootstrap还包括了在打印时决定内容显示与否的实用工具类。

可以试着恰到好处地使用它们,避免滥用它们,从而变成为同一个站点创建一个完全不同的版本。只需要用它们去完成每个设备上呈现的效果。

可用的类

  • 当视口宽度等于或宽于给定的分隔点时,.hidden-*-up类将隐藏该元素。比如说,.hidden-md-up将在中屏、大屏、特大屏视口中隐藏元素。
  • 当视口宽度等于或窄于给定的分隔点时,.hidden-*-down将隐藏该元素,比如说,.hidden-md-down将在特小屏、小屏、中屏视口中隐藏元素。
  • 你可以组合使用.hidden-*-up类以及.hidden-*-down类,以使元素只在一个给定的屏幕尺寸区间内显示。比如说,.hidden-sm-down.hidden-xl-up能使元素只在中屏和大屏视口中显示。使用多个.hidden-*-up类或多个.hidden-*-down类是多余而且无意义的。
  • 当一个元素的可见性不能被表达为一个单独连续的视口尺寸范围时,这些类并不会支持这些比较少见的情况。在这种情况下,你必须改用自定义类。
特小屏设备 手机竖屏(<34em) 小屏设备 手机横屏 (≥34em) 中屏设备 平板电脑 (≥48em) 大屏设备 桌面 (≥62em) 特大屏设备 桌面 (≥75em)
.hidden-xs-down 可见 可见 可见 可见
.hidden-sm-down 可见 可见 可见
.hidden-md-down 可见 可见
.hidden-lg-down 可见
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up 可见
.hidden-md-up 可见 可见
.hidden-lg-up 可见 可见 可见
.hidden-xl-up 可见 可见 可见 可见

打印类

和常规的响应式类相似,用这些来决定哪些内容被打印出来。

Class Browser Print
.visible-print-block 可见
(as display: block)
.visible-print-inline 可见
(as display: inline)
.visible-print-inline-block 可见
(as display: inline-block)
.hidden-print 可见

测试实例

改变你的浏览器的尺寸,或者在不同的设备中载入,以测试响应式实用工具类。

绿色的标签表明这些元素在你当前视口中是可见的

✔ 在特小屏设备中可见 特小屏设备
✔ 在小屏和窄于小屏的设备中可见 小屏和窄于小屏的设备
✔ 在中屏及窄于中屏的设备中可见 中屏和窄于中屏的设备
✔ 在大屏及和于大屏的设备中可见 大屏和窄于大屏的设备
✔ 在小屏和宽于小屏的设备中可见 小屏和宽于宽度的设备
✔ 在中屏和宽于中屏的设备中可见 中屏和宽于中屏的设备
✔ 在大屏和宽于大屏的设备中可见 大屏和宽于大屏的设备
✔ 在特大屏设备中可见 特大屏设备
✔ 你的视口恰好是特小屏 你的设备并非恰好是特小屏
✔ 你的视口恰好是小屏 你的视口并非恰好是小屏
✔ 你的视口恰好是中屏 你的视口并非恰好是小屏
✔ 你的视口恰好是大屏 你的视口并非恰好是大屏
✔ 你的视口恰好是特大屏 你的视口并非恰好是特大屏