Bootstrap下载,搭建网页(1)
1.官网下载
英文网站: http://getbootstrap.com/
中文网站:http://bootcss.com/
2.下载解压
3.创建一个网页
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
4.如果不想下载Bootstrap,可以采用这样引入
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
5.为了让Bootstrap开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1">
参数说明:
1.width属性控制设备的宽度,假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为device-width,可以确保它能正确呈现在不同设备上。
2.initial-scale=1确保网页加载是,以1:1的比例呈现,不会有任何的缩放
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1.0,user-scalable=no">
3.user-scalable=no,在移动设备浏览器上,可以兼职用其缩放功能
4.maximum-scale=1.0,user-scalable=no通常情况下一起使用,这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。