启用响应式特性
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
注意！ Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。
关于响应式Bootstrap
Media queries允许在一些条件基础上自定义CSS 例如：—ratios、widths、display type, etc— 但通常都是围绕着 min-width 和 max-width 这两者。
- 修改栅格系统中列的宽度
- 需要的时候, 用堆叠元素代替浮动
- 调整标题和文本的大小以便适合各种设备
谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。
被支持的设备
Bootstrap 所支持的几个media queries都放在了一个文件中， 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括：
| 类型 | 布局宽度 | 列宽 | 间隙宽度 |
|---|---|---|---|
| 大屏幕 | 大于等于1200px | 70px | 30px |
| 默认 | 大于等于980px | 60px | 20px |
| 平板 | 大于等于768px | 42px | 20px |
| 手机到平板 | 小于等于767px | 流式列，无固定宽度 | |
| 手机 | 小于等于480px | 流式列，无固定宽度 | |
/* 大屏幕 */
@media (min- 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min- 768px) and (max- 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max- 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max- 480px) { ... }
响应式布局辅助class
为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。
| Class | 手机767px 及以下 | 平板979px 到 768px | 电脑默认 |
|---|---|---|---|
.visible-phone |
显示 | 隐藏 | 隐藏 |
.visible-tablet |
隐藏 | 显示 | 隐藏 |
.visible-desktop |
隐藏 | 隐藏 | 显示 |
.hidden-phone |
隐藏 | 显示 | 显示 |
.hidden-tablet |
显示 | 隐藏 | 显示 |
.hidden-desktop |
显示 | 显示 | 隐藏 |