概念：

1）Container容器是窗口布局的最基本元素，BootStrap推荐所有的样式都定义在.container或.container-fluid容器之中。
2）这是启用整个栅格系统的前置条件
3）图示
超小屏幕、小屏幕（次小屏）、中等屏幕（宅屏）、大屏幕（桌面显示器）、超大屏幕（大桌面显示器）

图片.png

代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=no">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" rel="stylesheet" href="../resource/bootstrap/css/bootstrap.min.css">
  8.     <script src="../resource/jquery-3.4.1.min.js"></script>
  9.     <script src="../resource/bootstrap/js/bootstrap.min.js"></script>
  10.     <title>BootStrap布局</title>
  11.     <style>
  12.         /* 超小屏幕 Extra small */
  13.         @media (max-width: 575px) {
  14.             .container-self{
  15.                 background-color: rosybrown;
  16.                 width: 100%; /*对应图示比率*/
  17.             }
  18.         }
  19.         /* 小屏幕 Small */
  20.         @media (min-width: 576px) and (max-width: 767px) {
  21.             .container-self{
  22.                 background-color: slategray;
  23.                 width: 540px; /*对应图示比率*/
  24.             }
  25.         }
  26.         /* 中等屏幕 Medium */
  27.         @media (min-width: 768px) and (max-width: 991px) {
  28.             .container-self{
  29.                 background-color: gold;
  30.                 width: 720px; /*对应图示比率*/
  31.             }
  32.         }
  33.         /* 大屏幕 Large */
  34.         @media (min-width: 992px) and (max-width: 1199px) {
  35.             .container-self{
  36.                 background-color: blue;
  37.                 width: 960px; /*对应图示比率*/
  38.             }
  39.         }
  41.         /* 超大屏幕 Extra large */
  42.         @media (min-width: 1200px) {
  43.             .container-self{
  44.                 background-color: purple;
  45.                 width: 1140px; /*对应图示比率*/
  46.             }
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="container" style="background-color: red; height: 100px;">流式容器</div>
  52.     <div class="container-fluid" style="background-color: sandybrown; height: 100px; margin-top: 50px;">固定宽的流式容器</div>
  53.     <div class="container-self" style="height: 100px; margin: 0 auto;">自定义容器</div>
  54. </body>
  55. </html>

样式：

图片.png
图片.png
图片.png

代码文件：

Bootstrap布局.html