Bootstrap移动设备为优先+响应式图片
2018-03-11 13:38
232 查看
1.Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<!DOCTYPE html><html>
....</html>2.移动设备优先：为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：写在<meta>下方<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">3. 响应式图像：<img src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。.img-responsive { display: block; height: auto; max-width: 100%;}这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block，以块级元素显示。设置 height:auto，相关元素的高度取决于浏览器。设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。如果需要让使用 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
....</html>2.移动设备优先：为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：写在<meta>下方<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">3. 响应式图像：<img src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。.img-responsive { display: block; height: auto; max-width: 100%;}这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block，以块级元素显示。设置 height:auto，相关元素的高度取决于浏览器。设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。如果需要让使用 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- BootStrap 移动设备优先代码
- 移动设备的HTML页面中图片实现滚动加载
- Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。
- 移动设备的HTML页面中图片实现滚动加载
- bootstrap轮播插件carousel图片切换移动速度自定义
- bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
- Bootstrap笔记：移动设备为优先，排版，列表，响应式表格等
- BootStrap ：环境搭建；布局容器；视口：在移动设备上使用，用于比例缩小视口内容；栅格系统；Col-屏幕尺寸-所占栅格数
- Bootstrap--对移动设备友好的布局
- Bootstrap 移动设备 响应式图像
- 编写移动设备名字到图片中设为壁纸
- bootstrap添加移动设备支持
- Bootstrap3 移动设备优先并使用了一些HTML5元素
- 高德地图图片图层瓦片的实现(不是用一张大图，那样容易导致移动设备死机)
- Bootstrap3基础 以移动设备为优先
- LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
- 如何让图片自适应手机等移动设备屏幕大小
- 支持移动设备的图片展示插件
- 在移动设备上放大图片查看图片细节的俩种方法
- 关于移动设备上图片处理于滑动的网站