bootstrap常见样式

• container有padding-left,padding-right:15px
  row有margin-left,margin-right:-15px
  所以container跟row一起用就会抵消内外边距
  col有padding-left,padding-right:15px
  row就相当于flex，尺寸在达到col-sm的时候才有水平排列（display:flex）的效果

<div class="container">
  <div class="row">
    <div class="col">发过火</div>
    <div class="col">发过火</div>
    <div class="w-100"></div>
    <div class="col">发过火</div>
  </div>
  <div class="row">
    <div class="col-sm">发过火</div>
    <div class="col-sm">发过火</div>
    <div class="col-sm">发过火</div>
  </div>
</div>

• 让row中的元素分两行显示,w-100就是width:100%

<div class="row">
    <div class="col">多少</div>
    <div class="w-100"></div>
    <div class="col">水电费</div>
  </div>

• col-6占12分之6，其他两个平均分配剩余空间

<div class="row">
      <div class="col">发过火</div>
      <div class="col-8">发过火</div>
      <div class="col">发过火</div>
    </div>

• col-auto的宽度由内容决定，其他两个平均分配剩余空间

<div class="row">
  <div class="col">发过火</div>
  <div class="col-auto">发过火</div>
  <div class="col">发过火</div>
</div>

• 尺寸满足md才可以flex水平，小于md就是垂直

<div class="row">
  <div class="col">发过火</div>
  <div class="col-md-auto">发过火</div>
  <div class="col">发过火</div>
</div>

• no-gutters,去掉row的默认margin-left,right:15px
  
  坍缩进去了,是由于container的padding造成的
• 水平右对齐

<div class="row justify-content-end">
  <div class="col-auto">发过火</div>
  <div class="col-auto">发过火</div>
</div>

• align-items-center
  让子元素垂直居中
• align-self-end
  让自己位于父元素的垂直end位置
• my-5相当于mt-5和mb-5,也就是y轴方向的margin(mx-5是x轴的)
  
• mx-n5，这里的n就是负数的意思
  
• py-5，y是y轴方向上，相当于padding-top,padding-bottom
• mx-auto居中，d-block：display:block;
• bg-primary,primary背景（浅蓝）
  text-light，light字体颜色（接近白色）
• btn-group-lg的权重比btn-sm大(调节按钮大小)

<div class="btn-group btn-group-lg">
 <div class="btn btn-primary btn-sm ">sdf</div>
</div>

• ustify-content-between，align-items-center
• text-muted灰色字体
• 边框btn-outline-secondary是按钮的样式，所以要跟 btn 组合使用
• overflow-auto,bg-dark,text-white
• w-50 width:50%而p-2是padding(多少rem，也不是2rem)
  
• font-italic斜体font-weight-bold粗体
• d-md-block尺寸在md以上才有display:block样式；d-none 即display:none
• mb-2 margin-bottom
• strong 加粗
  em斜体
• shadow-sm,shadow-lg大阴影，小阴影
• pb-4 padding-bottom
• 外边框包括字体的颜色

<div class="btn btn-outline-primary">

• disabled多加了一个透明度
• rounded-pill胶囊按钮
• bg-light浅色背景
• ml-md-2 margin-left在尺寸达到md情况下的的样式