如果你想了解更多关于Bootstrap的知识，可以点击：Bootstrap教程
bootstrap是目前比较流行的响应式开发框架，自然可以用于移动端的开发。不过想要移动设备优先，也需要进行一些设置。
bootstrap的环境至少需要3个文件：
●bootstrap.min.css
●jquery.mis.js
●bootstrap.min.js
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
需要注意的是：
bootstrap.min.css
jquery.mis.js
bootstrap.min.js
这三个文件的引入顺序一定不能错乱，一般把
jquery.mis.js
bootstrap.min.js
这两个文件放入HTML网页的最底部，这么做的原因是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器中，通过将视口(viewport)的元属性设置为user-scalable=no，可以禁用缩放功能。如果禁用此缩放功能，则用户滚动屏幕时，网站可能看起来像默认应用程序。这样，我们不推荐所有网站。或者要根据自己的情况来决定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
补充:
meta:
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容