1、什么是bootstrap?
bootstrap是当前最流行的前端框架,其目的是为了让web开发更敏捷,特点就是灵活简洁,代码优雅,美观大方。
注: 使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式
2、如何快速使用一个第三方框架
1、下载第三方框架文档
2、引入文档
3、利用文档的使用方式使用文档。
3、基础的bootstrap模板及解释
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><!--设置当前HTML文件的字符编码-->
<!--“edge值可以改。设置浏览器的兼容模式版本(让IE使用最新的渲染引擎工作)”-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--声明当前网页在移动端浏览器中展示的相关设置
视口的作用:在移动浏览器中,当页面超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
视口的宽度可以通过meta标签来设置
其他属性;
width:视口的宽度
initial-scale:初始化缩放---确保网页加载时,是以1:1的比例呈现,不会有任何的缩放
user-scasble:是否允许用户缩放
minimum-scale:最小缩放
maximum-scale:最大缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"><!--initial-scale=1.0----就是视口初始化大小不缩放-->
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>bootstrap</title>
<!-- Bootstrap 引入bootstrap核心样式表文件 -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--条件注释:【如果当前浏览器版本小于IE9,则后面那两个脚本就会被加载出来。如果当前版本大于IE9,则注释就真的是注释了】-->
<!--让浏览器可以识别html5的新标签-->
<!--响应式【让低版本浏览器可以使用css3的媒体查询(响应式)】-->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/main.css">
<!--
/*一块板,可设置宽度且居中。
响应式布局:【何为响应式:就是界面会根据设备的不同而自动调整,可以根据设备的宽度变化而变化。bootstrap提供的一个响应式容器。】
*/
-->
</head>
--------------------------------------------------------------------------------------------------------
//基础的bootstrap模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
</head>
<body></body>
</html>
4、条件注释
条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
5、第三方依赖
jQuery: bootstrap框架中的所有JS组件都依赖于jQuery实现
**html5shiv:**让低版本的浏览器可以识别HTML5的新标签,如header、footer、section等。
**respond:**让低版本浏览器可以支持CSS的媒体查询功能
6、媒体查询(media query)
@media (判断条件(针对于当前窗口的判断)){
/*这里的代码只有当判断条件满足时才会执行*/
}
@media (min-width: 768px) and (max-width: 992px) {
/*这里的代码只有当(min-width: 1280px)满足时才会执行*/
.container {
width: 750px;
}
}
**section:**相互之间无牵连的部分。
**bootstrap中的fonts字体:**就是本地没有的web字体。