T-Bootstrap-day02-辅助类、栅格布局

二.BootStrap

4. 列表相关(列表组)
   1. 去除标识项
      类：list-unstyled—内容list-sytle:none；padding-left: 0;
   2. 生成列表组
      ul的类list-group ，定义了：弹性，y轴等
      li的类list-group-item 定义了：边框—第一项和最后一项带圆角等
      .list-group-item-danger/warning/info 设置列表项的颜色
      .active 激活项（蓝色高亮）
      .disabled 禁用项（背景透明）

      <ul class="list-unstyled list-group">
          <li class="list-group-item list-group-item-danger active">电锯惊魂</li>
          <li class="list-group-item list-group-item-warning">行尸走肉</li>
          <li class="list-group-item list-group-item-info disabled">死神来了</li>
          <li class="list-group-item list-group-item-success">下水道的美人鱼</li>
          <li class="list-group-item list-group-item-primary ">饥饿站台</li>
      </ul>
      

5. 表格相关的样式
   基本类： table 设置了：宽度100% th,td的上边框等
   table-bordered 给table添加边框，给table下的th td添加边框
   table-danger/warning.. ：表格背景色
   .table-striped 给奇数行，添加一层0.05透明度的黑纱
   .table-hover 给鼠标悬停的行，添加一层0.075透明度的黑纱

三.辅助类—所有元素都能用类

1. 边框
   设置边框的基本类
   .border 设置4个方向边框
   .border-top/right/bottom/left 单独设置某一个方向边框
   清除边框
   .border-0 清除4个方向边框
   .border-top/right/bottom/left-0 单独清除某个方向边框
   .border-info/warning/danger... 设置边框颜色（需要先设置border基本类）
2. 浮动
   float-*-left/right/none *代表:sm/md/lg/xl
   父元素解决高度坍塌 .clearfix

   .clearfix::after {
         display: block;
         clear: both;
         content: "";
       } 
   

3. 显示效果
   .visible 设置：visibility:visible
.invisible 设置：visibility:hidden
4. 背景色
   bg-danger/info/warning...
5. 圆角
   rounded 设置4个角0.25rem圆角
   rounded-top/right/bottom/left 设置某一个方向的两个圆角
   ounded-circle 50%的圆角
   rounded-0 清除圆角
6. 内外边距
   1. 外边距：
      m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto
*:sm/md/lg/xl
      0:0
      1:0.25rem
      2:0.5rem
      3:1rem
      4:1.5rem
      5:3rem
   2. 内边距：
      p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 没有auto
7. 尺寸
   w-25/50/75/100
h-25/50/75/100

四.栅格布局grid（重点）

1. web页面中的布局，一般分为三种

   table布局	div+css布局	Boot封装的栅格布局
   简单，容易控制	语义正确，渲染效率高	简单，容易控制，语义正确，渲染效率高，支持响应式
   语义错误，渲染效率低	控制起来很麻烦	复杂页面不适合使用栅格

2. 栅格的使用
   把每一个布局，都看成一行，每一行分成12份，用12份来控制子元素的宽度
   div.row 弹性，x主轴，可换行 左右-15px外边距
   div.col-n n:1~12 左右+15px内边
3. 响应式栅格
   col-*-n *:sm/md/lg/xl n:1~12
   注意：每一个col自带左右15px内边距，经常要清空
   no-gutters ：可以清除row的-15px外边距和col的15px的内边距

   ---

   练习
   lg- 3:6:3 md- 3:9 右侧display:none 手写媒体查询 sm:12:12:12
   

   ---

4. 列偏移
   offset-*-1/2/3/4/5/6/7/8/9/10/11 *：sm/md/lg/xl
5. 不带数字的col类
   自动根据数量平分整个row
   而且，数量可以超过12个，取决于内容大小