脚本宝典收集整理的这篇文章主要介绍了bootstrap是响应式吗，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

如果你想了解更多关于bootstrap的知识们可以点击：Bootstrap教程

什么是响应式web设计？

　　响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

响应式web设计工作原理？

　　为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

深入研究响应式web设计的css？

　　我们将通过 'bootstrap-responsive.css' 的学习，来了解"响应式设计"是如何实现细微差别的。在这之前，您必须在网页的头部区域加入下面这行代码：

　　视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。

　　width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率。

inITial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。

　　当然，您必须添加 Bootstrap 的响应式 CSS，如下所示：

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

　　现在，如果您查找响应式 CSS 文件，您会发现，在一些公共的声明后边（从行号 10 到 22），有各种以 '@media' 开始的区域。这就是如何编写适用于各种设备的样式。

　　第一个区域以 '@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。

　　第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。

　　第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

　　下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。

　　最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。

　　所以，这样样式表的基本作用就是，通过使用 ';min-width' 和 'max-width' 属性，来根据设备的最大宽度和最小宽度决定使用的样式。

解释

　　为了让布局更具响应性，Bootstrap 做了三件事情：

　　1. 修改了网格中列的宽度。

　　2. 只要有需要，它就使用堆栈元素，而不是浮动元素。如果您还不清楚什么是堆栈元素，下面来自 w3.org 的表单可能会提供一些帮助：

　　根元素（htML）形成了堆栈上下文的根，其他堆栈上下文通过任意定位的元素生成（包括相对定位元素，有一个 'z-index' 的计算值，而不是 'auto'）。堆栈上下文相对与包含的块不是必需的。

　　3.要正确地渲染标题和文字它们的尺寸。

更快的开发对移动设备友好的布局。

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。

.visible-phone，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上隐藏不可见，这是默认的。

.visible-tablet，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。

.visible-desktop，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。

.hidden-phone，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上可见，这是默认的。

.hidden-tablet，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。

.hidden-desktop，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。

以上就是bootstrap是响应式吗的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的bootstrap是响应式吗全部内容，希望文章能够帮你解决bootstrap是响应式吗所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。