Bootstrap2用户指南
2.5.2 支持的设备类型
阅读(

Bootstrap基础

Bootstrap框架

全局样式

默认栅格系统

流式栅格系统

Bootstrap布局

响应式设计

启用响应式布局

支持的设备类型

为了适用不同的屏幕宽度,Bootstrap 使用 CSS 的媒体查询(media query)来检测浏览器视口的宽度。然后,再根据条件加载相应的样式表。

Bootstrap 内部支持 5 种不同的布局,最大布局中每一列的宽度为 70px,而常规布局中每一列宽度是 60px。在适合平板电脑的布局中,列宽缩小为 42px,再窄一点,每一列就会流动起来,变成在垂直方向上堆叠且都与视口同宽。

Bootstrap 所支持的几个media queries都放在了一个文件中,可以让你的项目更灵活的去适应不同设备和屏幕分辨率。见表 2‑1。

表 2‑1 支持的设备
类型 布局宽度 列宽 列间隙宽度
大屏幕 大于等于 1200px 70px 30px
默认 大于等于 980px 60px 20px
平板 大于等于 768px 42px 20px
手机到平板 小于等于 767px 流式列,无固定宽度
手机 小于等于 480px 流式列,无固定宽度

Bootstrap 的媒体查询允许基于视口大小移动、显示或隐藏内容。下面的媒体查询用来创建 Bootstrap 网格系统中的关键分界点:

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

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验