响应式布局是PC端的一种灵活的布局方式，可以在不同宽度下显示不同的样式。
媒体查询
/* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */
@media (min-width:768px){
body {
background-color: #6cf;
}
}
/* 视口宽度大于等于992px 小于等于1199px， 网页背景色是绿色 #0a0 */
@media (min-width:992px){
body {
background-color: #0a0;
}
}
/* 视口宽度大于等于1200px， 网页背景色是橙色 orange */
@media (min-width:1200px) {
body {
background-color: orange;
}
}
利用媒体查询可以实现在不同宽度的网页下，背景颜色的改变。
利用link属性引入不同宽度下的css
语法：
<link rel="stylesheet" href="./992.css" media="(min-width:992px)">
<link rel="stylesheet" href="./1200.css" media="(min-width:1200px)">
隐藏
利用媒体查询实现：在指定宽度下，对盒子的隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>隐藏</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
}
.left {
width: 300px;
height: 600px;
background-color: antiquewhite;
}
.right {
flex: 1;
height: 600px;
background-color: skyblue;
}
@media (max-width:992px) {
.left {
display: none;
}
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
媒体查询：隐藏
bootstrap基本使用
bootstrap是推特公司推出的一款快速开发页面的框架，里面有现成的CSS跟JS库，可以直接复制、修改使用，以达到快速开发页面的需要。一般公司 都使用V3版本。
网址：https://v3.bootcss.com/
如何使用bootstrap？
1.打开https://v3.bootcss.com/，下载bootstrap，把下载好的文件解压好放在项目的根目录下。
2.引入bootstrap的css以及js文件
注意：引入bootstrap的js文件前，先引入jquery.js文件，不然bootstrap的js文件不会生效，因为bootstrap的js是继续jquery.js写的。
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />
js文件写在body最下面
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
1.版心体验：
container 是bootstrap提供的版心的类名
container-fluid 是bootstrap提供的通栏的类名
row 是bootstrap提供给版心或者通栏使用的，目的就是为了清除设置好的内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 1.引入bootstrap的css文件 -->
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />
<style>
.box {
height: 60px;
background-color: skyblue;
}
.box1 {
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<!-- container 是bootstrap提供的版心的类名 -->
<div class="box container">法外狂徒---张三</div>
<!-- container-fluid 是bootstrap提供的通栏的类名 -->
<div class="box container-fluid">
<div class="box1 container">通栏</div>
</div>
<div class="box container">
<!-- row 是bootstrap提供给版心或者通栏使用的，目的就是为了清除设置好的内边距 -->
<div class="row">123</div>
</div>
</body>
</html>
bootstrap版心
2.栅格系统
栅格系统的封装：媒体查询+百分比布局（宽度百分比）+浮动
需求:
大屏 lg 1200px以上，和中屏 md 992px-1200px: 一行排列4个内容;
小屏 sm 768px-9：一行排列2个内容；
超小屏 xs 小于768px：一行排列1个内容
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>栅格系统</title>
<link
rel="stylesheet"
href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"
/>
<style>
div {
height: 50px;
background-color: skyblue;
border: 5px solid orange;
font-size: 30px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="col-md-3 col-sm-6">1</div>
<div class="col-md-3 col-sm-6">2</div>
<div class="col-md-3 col-sm-6">3</div>
<div class="col-md-3 col-sm-6">4</div>
</body>
</html>
栅格系统
下面的按钮/表格/表单/字体图标/路径导航/轮播图都不需要再写了，原理都是bootstrap的源码复制粘贴，改值。
案例：使用bootstrap实现腾讯全端页面快速布局
代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>腾讯全端</title>
<!-- 1.引入ico图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 2.引入第三方资源 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
<!-- 3.引入自己的css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-default navbar-fixed-top mynav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<!-- 插入logo图片 -->
<img src="./images/logo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Tweb Conf</a></li>
<li><a href="#">SuperStar</a></li>
<li><a href="#">Web前端</a></li>
<li><a href="#">关于</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide mycarousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./uploads/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="./uploads/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="./uploads/banner_3.jpg" alt="...">
</div>
<div class="item">
<img src="./uploads/banner_4.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 4.js的引入 -->
<script src="./lib/js/jquery.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.mynav {
background-color: transparent;
border: none;
}
.mynav .navbar-nav {
margin-top: 18px;
}
.mynav .navbar-nav li a {
color: #ffffffa6;
}
@media (max-width: 992px) {
.mynav {
background-color: #26282c;
height: 70px;
}
.mynav .navbar-collapse {
background-color: #26282c;
border: none;
box-shadow: none;
}
}
.mycarousel .item img {
height: 400px;
width: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.mycarousel .item img {
height: 250px;
width: 100%;
object-fit: cover;
}
body {
padding-top: 70px;
}
}
腾讯全端
