Bootstrap 是当下最流行的前端框架(界面工具集)。 是一个用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。格式如下:
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
Bootstrap 的第三方依赖的库:
jQuery:Bootstrap框架中的所有JS组件都依赖于jQuery实现,jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式;点击打开链接下载html5shiv:让低版本浏览器可以识别HTML5的新标签,如header、footer、section等;点击打开链接下载
respond:让低版本浏览器可以支持CSS媒体查询功能。点击打开链接下载
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置当前HTML文件的字符编码-->
<meta charset="UTF-8">
<!--compatible兼容的,设置浏览器的兼容模式版本(让IE使用最新的渲染引擎工作)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--声明当前网页在移动端浏览器展示的相关设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap基本的HTML模板</title>
<!--引入Bootstrap核心样式表文件-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if It IE 9]>
<script src="html5shiv/html5shiv.min.js"></script>
<script src="Respond/respond.min.js"></script>
<![endif]-->
<!--自己写的CSS样式文件放head最下面-->
</head>
<body>
<div><h1>Hello!</h1></div>
<!-- Bootstrap的所有JS组件都是依赖jQuery的,所以必须放在前边-->
<script src="jquery/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<!--自己写的js文件放在body最下面-->
</body>
</html>
Compatible 兼容的<meta http-equiv="X-UA-Compatible" content="IE=edge">
此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档,模式Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1),也不允许用户手动缩放。
width——viewport的宽度
height——viewport的高度
initial-scale——初始的缩放比例
minimum-scale——允许用户缩放到的最小比例
maximum-scale——允许用户缩放到的最大比例
user-scalable——用户是否可以手动缩放,值可取yes/no,默认yes,表示允许用户缩放,设置为no,表示不允许缩放。
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。