底层基于媒体查询 ，Bootstra v4.0的版本使用的弹性盒模型，v3.0的版本使用的flex布局也就是流式布局

初始化

  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-sm">
  4.       One of three columns
  5.     </div>
  6.     <div class="col-sm">
  7.       Two of three columns
  8.     </div>
  9.     <div class="col-sm">
  10.       Three of three columns
  11.     </div>
  12.   </div>
  13. </div

Containers

Container 有两个个类型
1，Container
width不是固定值，会根据用户屏幕尺寸进行变化
2，Container -fluid
width百分百，继承body的width
当满足多个媒体特性的时候会取最大值做为container宽高

Grid options

image.png
如上图 在boostrap v4.3的版本中，有五个响应层都有其对应的 Class prefix
五个响应层为 Extra large 超大屏 **Large 大屏 Medium中等屏 Small 小屏 **Extra small超小屏
第一行 媒体查询中的媒体特性的条件
第二行 当满足媒体特性的条件时，container的宽度
第三 其对应的类名
第四行 每行支持的列数
第五行 padding 0 15px
第六行 是否支持嵌套
第七行 列的排序
在boostrap v3.3的版本中**
image.png
3.3的版本中响应层只有4个想对于4.3.3的版本少啦一个，container的宽度也有变化

  1. div class="col-xl-12">第一列</div>

如上面的代码，当满足于>= 1200px container的宽度为1140px col-xl 为响应层的缩写，后面的跟的数字是占据多少列，最大12列
当一行多列，且溢出时，自动换行
当一行一列，且溢出时，使用默认样式

实例代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  8.         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  9.     <title></title>
  10.     <style>
  11.         body{
  12.             padding-bottom: 1000px;
  13.         }
  14.         .row div{
  15.             height: 100px;
  16.             background: green;
  17.             border: 1px solid #000;
  18.             color: #fff;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="container">
  25.         <div class="row">
  26.             <div class="col-xl-3">xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸<1200的时候，一行只能设置1列</div>
  27.             <div class="col-xl-3"></div>
  28.             <div class="col-xl-3"></div>
  29.             <div class="col-xl-3"></div>
  30.         </div>
  31.         <div class="row mt-5">
  32.             <div class="col-lg-4">lg为大屏。屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列</div>
  33.             <div class="col-lg-4"></div>
  34.             <div class="col-lg-4"></div>
  35.         </div>
  36.         <div class="row mt-5">
  37.             <div class="col-md-6">md为中等屏。屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列</div>
  38.             <div class="col-md-6"></div>
  39.         </div>
  40.         <div class="row mt-5">
  41.             <div class="col-sm-3">sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列</div>
  42.             <div class="col-sm-3"></div>
  43.             <div class="col-sm-3"></div>
  44.             <div class="col-sm-3"></div>
  45.         </div>
  46.         <div class="row mt-5">
  47.             <div class="col-4">col为超小屏。屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列，当其缩小后，不会换行，而是自行伸缩</div>
  48.             <div class="col-4"></div>
  49.             <div class="col-4"></div>
  50.         </div>
  52.         <!-- 设置等宽列，平分宽度，通过.col的class去设置 -->
  53.         <div class="row mt-5">
  54.             <div class="col">等宽列</div>
  55.             <div class="col">等宽列</div>
  56.             <div class="col">等宽列</div>
  57.             <div class="col">等宽列</div>
  58.             <div class="col">等宽列</div>
  59.             <div class="col">等宽列</div>
  60.             <div class="col">等宽列</div>
  61.         </div>
  63.         <!-- 设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行 -->
  64.         <div class="row mt-5">
  65.             <div class="col">等宽列1</div>
  66.             <div class="col">等宽列2</div>
  67.       <--! 独占一行，由于自己的css规定啦div的样式，将其高度与border不然其显示-->
  68.             <div class="w-100" style="height: auto;border: none;"></div>    
  69.             <div class="col">等宽列3</div>
  70.             <div class="col">等宽列4</div>
  71.         </div>
  72.     </div>
  73. </body>
  75. </html>