Bootstrap基本模板
Bootstrap简介
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。它的座右铭就是：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
为什么要使⽤Bootstrap?
1. ⽣态圈⽕，不断地更新迭代；
2. 提供⼀套美观⼤⽅地界⾯组件；
3. 提供⼀套优雅的 HTML+CSS 编码规范；
4. 让我们的 Web 开发更简单，更快捷；
【注意】使⽤ Bootstrap 并不代表不⽤写 CSS 样式，⽽是不⽤写绝⼤多数⼤家都会⽤到的样式。Bootstrap基本模板介绍
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 设置浏览器的兼容模式版本(让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>微⾦所</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 ⽀持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页⾯拖拽到浏览器中）访问页⾯时 Respond.js 不起作⽤ -->
<!-- 条件注释的作⽤：
判断条件满⾜时，就会执⾏注释中的HTML代码
条件不满⾜时，就会当做注释
-->
<!--
html5hiv: 让浏览器可以识别HTML5的新标签
respond:  让低版本浏览器可以使⽤css3的媒体查询
-->
<!-- [if lt IE 9]>
<script src="lib/html5shiv/html5shiv.js"></script>
<script src="lib/respond/respond.src.js"></script>
<![endif] -->
bootstrap项目
<!-- ⾃⼰写的CSS⽂件 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- 必须引⼊，位置必须这样 -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- ⾃⼰写的js⽂件 -->
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
模板中移动端所⽤到的属性介绍
1. width：视⼝的宽度    width=device-width  => 视⼝的宽度随着设备的宽度进⾏响应式变化。
2. initial-scale：初始化缩放
3. user-scalable：是否允许⽤户⾃⾏缩放（值：yes/no; 1/0）
4. minimum-scale：最⼩缩放，⼀般设置了⽤户不允许缩放，就没必要设置最⼩和最⼤缩放
5. maximum-scale：最⼤缩放
视⼝的介绍
在移动浏览器中，当页⾯宽度超出设备，浏览器内部虚拟的⼀个页⾯容器，将页⾯容器缩放到设备这么⼤，然后进⾏展⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。