怎样让bootstrap是什么设计的页面在手机端也能响应式自适应

点击联系发帖人 时间：2016-11-22 13:02

bootstrap是什么

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

在你的文档中引用其他来源的内容。

标识普通的提示信息或动作

标识警告或需要用户注意

标识危险或潜在的带来负面影响的动作

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来。

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

表单布局实例中展示了其所支持的标准表单控件。

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考。

支持多行文本的表单控件。可根据需要改变 rows 属性。

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

默认外观（堆叠在一起）

如果需要 <label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。

在本文档中，我们为上面实例中的输入框赋予了自定义的样式，用于演示 .form-control 元素的 :focus 状态。

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

仅适用一个 mixin 就可以在一个声明中使用所有 CSS3 所提供的动画属性，其他 mixin 用于设置单个属性。

为所有浏览器设置透明度，并为IE8提供 filter 备用滤镜。

为表单控件中每个文本域提供占位符（Placeholder）文本的颜色。

通过CSS在一个单独的元素中生成列。

便于把任何两种颜色变成背景渐变色。想要使他更高级些，可以设置一个direction（方向），使用三种颜色，也可以使用径向（radial）渐变。使用一个mixin（混入），你就可以得到所有需要的前缀语法。

你也可以为标准的里两颜色线性渐变指定角度：

如果你需要一个条纹风格的渐变，这也很容易。只要指定一个颜色，我们将该颜色半透明的条纹覆盖其上。

再来试试三种颜色。利用此 mixin ，并为其设置第一种颜色、第二种颜色、第二种颜色的色标（例如 25%），还有第三种颜色：

实用工具 mixin 用于与不相关的 CSS 结合以达到特定目的或任务。

让元素在其父元素中水平居中。需要设置 width 或 max-width 属性。

用于方便的指定对象的尺寸。

方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为 (both)，即垂直、水平都可以调整。

视网膜屏幕（Retina）下的图片

通过指定两个图片路径和 @1x 图片尺寸，Bootstrap 还提供了对 @2x 媒体查询的支持。 如果你的页面上有很多图片，建议在一个单独的媒体查询中手工编写针对视网膜屏幕的 CSS 代码。

虽然 Bootstrap 是基于 Less 构建的，我们还提供了一套代码。我们将这个版本放在单独的 GitHub 仓库中进行维护，并通过脚本处理源码更新。

由于 Sass 移植版存放于单独的仓库，并针对不同的使用群体，这个项目中的内容与 Bootstrap 主项目有很大不同。这也是为了保证 Sass 移植版与更多基于 Sass 的系统相兼容。

请访问来了解这些文件。

关于如何安装并使用 Bootstrap 的 Sass 移植版，请参考。此仓库中包含了最新的源码以及如何与 Rails、Compass 以及标准 Sass 项目一同使用的详细信息。

}

bootstrap3中会为一个元素设置不同的类

媒体查询后会根据当前的分辨率选择合适的类进行渲染，这样就实现了响应式了

建站宝盒做的都是响应式

}

用iframe嵌入另一个页面的某个部分，bootstrap如何响应式布局

用iframe嵌入另一个页面的某个部分，由于只需要某个部分，所以设置了宽高来限制，这样的话，用bootstrap如何实现响应式布局？

不能用限定宽高，首先你获取的页面也是要自适应的，然后动态获取页面的宽度，高度，如果定死的话就不能自适应了。

}

奇偶密码网