三十一、响应式之了解响应式网页特点，如何使用 BootStrap 框架开发响应式网页响应式网页顾名思义就是一套代码能够兼

响应式网页顾名思义就是一套代码能够兼容不同的屏幕设备。

媒体查询

根据条件的不同，设置不同的 css 样式，这样不论设备的宽度如何变化，都有差异化样式与其匹配。

媒体特性常用写法：max-width、min-width

示例：

书写顺序

推荐书写顺序：min-width（从小到大）、max-width（从大到小）

示例：默认网页背景是灰色；屏幕宽度在 768 - 992 之间的网页背景是浅绿色；屏幕宽度在 992 - 1200 之间的网页背景是浅蓝色；大于 1200 的网页背景是黄色

对于以上需求，我们可以利用坐标轴来分析：

<!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>
    <style>
      @media (min-width: 768px) {
        body {
          background-color: lightgreen;
        }
      }
      @media (min-width: 992px) {
        body {
          background-color: lightblue;
        }
      }
      @media (min-width: 1200px) {
        body {
          background-color: yellow;
        }
      }
    </style>
  </head>
  <body>
  </body>
</html>

BootStrap 框架

BootStrap 是基于框架开发的，效率高、稳定性也高，它是将常见的效果进行统一封装后形成的一套代码。

中文网站地址：Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

点击右上角的 下载 BootStrap ，下载 生产文件 ，等我们熟悉框架后，可以下载源码研究

使用 BootStrap 框架快速布局响应式网页

将下载文件解压后，引入 BootStrap 提供的 CSS 代码：

调用类，就可以使用 BootStrap 提供的样式了，例如 container 是响应式布局版心类：

再以 table 为例，在搜索栏输入 “table” ，就会出现对应的组件，按照示例使用就可以了，也可以加入我们自己写的样式：

<!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>
  <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.min.css">
  <style>
    table{
      width: 350px !important;
      height: 200px;
    }
  </style>
</head>
<body>
  <table class="table table-striped table-bordered table-hover">
    <tr>
      <td>12</td>
      <td>34</td>
      <td>12</td>
      <td>34</td>
    </tr>
    <tr>
      <td>47</td>
      <td>75</td>
      <td>12</td>
      <td>34</td>
    </tr>
    <tr>
      <td>12</td>
      <td>34</td>
      <td>12</td>
      <td>34</td>
    </tr>
    <tr>
      <td>47</td>
      <td>75</td>
      <td>12</td>
      <td>34</td>
    </tr>
  </table>
</body>
</html>

目前 BootStrap 更新到 V5 版本，如果需要使用响应式布局，直接打开官方文档，按照需要的组件布局即可。