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用户指南》，并全部在 GitHub 上开源。

Bootstrap 支持的设备类型相关推荐

html支持移动端吗,bootstrap支持手机端吗？
bootstrap支持手机端.Bootstrap的响应式CSS能够自适应于台式机.平板电脑和手机:且自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式. bootstrap响应式布局 ...
bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇某 ...
1.3、Bootstrap V4自学之路------起步---浏览器支持
为什么80%的码农都做不了架构师?>>> 支持的浏览器 Bootstrap 支持所有的主流浏览器和平台的最新的.稳定的版本. 在 Windows 中, **我们支持 Inter ...
Bootstrap基本结构
响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本. 优点:面对不同分辨率设备灵活性强,能够 ...
4.4、Bootstrap V4自学之路------组件---表单
为什么80%的码农都做不了架构师?>>> 表单控件下面是一个Bootstrap支持的表控件以及自定义类的完整列表.额外的文档对每个组都是可用的. 类作用支持的变量 .fo ...
bootstrap -- css -- 表格
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. < ...
bootstrap 横铺行_Bootstrap 排版
Bootstrap 排版 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特 ...
bootstrap的php写在哪里,bootstrap用什么编辑器写
现在有不少商业活动是基于网站导向的,因此,网站设计至关重要.除了网站的布局,对不同浏览器和设备的兼容性也很重要,如手机,平板电脑等,这也是网络和UI开发人员最大的关注点之一. 你需要有一个高效的工具, ...
Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...

Bootstrap 支持的设备类型

Bootstrap 支持的设备类型相关推荐

最新文章

热门文章