移动web第7天-----响应式布局

响应式布局是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;
  }
}

效果图：

腾讯全端