1、基本模板
<html lang="zh-CN"> <head> <!--HTML的字符编码--> <meta charset="utf-8"> <!--设置浏览器的兼容模式，适应最新版本的浏览器引擎的渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--用于页面在窗口中的显示设置，通常称作“视口”--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap基本模板认识</title> <!-- Bootstrap --> <link href='lib/bootstrap/css/bootstrap.css' rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--条件注释：如果满足这个条件，就去执行里边的代码，不满足，就当做注释在那儿放着--> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="lib/jQuery/jquery-3.2.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="lib/bootstrap/js/bootstrap.min.js"></script> </body> </html>
2、视口详解
3、布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>
4、媒体查询的语法
/*媒体查询的语法：@media(条件判断){执行的代码块}*/
@media (min- 768px) {
.container{
750px;
}
}
@media (min-992px ) {
.container{
970px;
}
@media (min-1200px ) {
.container{
1170px;
}
}