bootstrap 工具类名总结 适合初学者

// 边框
    添加边框 使用类名 border(四周加上边框) border-top border-left border-bottom border-right
    去掉边框 使用类名 border-0(删除四周的边框)  border-top-0  border-left-0  border-bottom-0  border-right-0
    边框颜色 使用类名 在使用border的类名上 在添加 border-primary border-secondary  bordder-info border-success 等
    边框圆角 使用类名 在使用border的类名上 添加 rounded（设置四周） rounded-top(上边两个) rounded-bottom（下面两个） rounded-right(右边两个) rounded-left(左边两个)  但是无法设置圆角的大小
  // 颜色
     文本颜色总共13种： 都是使用根节点的颜色，但是加上前缀 text- ,如： text-primary, text-danger 等  
     文本颜色可以用于a标签的颜色， hover的时候下划线也会变成对应的颜色
     背景颜色总共10个，使用的也是根节点里面的颜色，加上浅醉 bg-  如：bg-primary bg-dark等
  // 显示 使用d-{display的值}（bootstrap4.x） (bootstrap 3.x 使用 visiable-{breakpoint}-block)
     d-inline(display:inline) 显示为行级元素
     d-block(display:block) 显示为块级元素
     d-inline-block(display: inline-block) 显示为行级块元素 
     d-flex（display: flex） 显示为弹性盒模型
     实现只在某个尺寸下显示，其他尺寸下隐藏， 分为两个部分， 比他大和比他小的此村都隐藏
     d-{breakpoint}-block: 在啥屏幕下面显示
     d-{breakpoint}-none: 在啥屏幕下隐藏
     d-none: 隐藏不满足条件的通用类
     <div class="col d-xl-block d-none">只在超大屏幕下显示</div>
     <div class="col d-lg-block d-none d-xl-none">只在大屏下显示，超大屏和其他屏幕隐藏</div>
     <div class="col d-md-block d-none d-lg-none">只在中等屏幕下显示</div>
     <div class="col d-none d-sm-block d-md-none">只在小屏幕下显示，其他屏幕隐藏</div>
     <div class="col d-sm-none">只在超小屏幕下显示</div>
    //在各种尺寸下隐藏（bootstrap4.x） (bootstrap 3.x 使用 hidden-{breakpoint}-block)
     <div class="col d-xl-none">在超大屏幕1200px隐藏</div>
     <div class="col d-lg-none d-xl-block">大屏992px中隐藏</div>
     <div class="col d-md-none d-lg-block">在中等屏幕768px中隐藏</div>
     <div class="col d-sm-none d-md-block">在小屏中576px隐藏</div>
     <div class="col d-none d-sm-block">在超小屏幕中小于576px隐藏，其他显示</div>
    //在打印中显示 （bootstrap4.x） (bootstrap 3.x 使用 visiable-print-block)
     <div class="col d-none d-print">在打印的时候显示，一般用于版权</div>
 =================flex 弹性盒模型=================
     d-flex（display: flex）: 变成弹性盒模
     d-inline-flex(display:inline-flex): 变成行弹性盒模型   
     // 变成响应式弹性盒模型 d-{breakpoint}-flex/inline-flex
      <div class="row">
          <div class="col d-lg-flex">在大屏上使用弹性盒模型</div>
      </div>
      // 子元素的排列方向（2种， 水平，垂直）
         1.水平正序  flex-row
         2.水平倒叙  flex-row-reverse
         3.垂直正序  flex-column
         4.垂直倒叙  flex-column-reverse
         使用方法：
         <div class="row flex-row"> //这里不需要使用 d-flex ，因为已经是弹性盒模型了
            <div class="col">第1列</div>
            <div class="col">第2列</div>
         </div>
     // 响应式的排序方式 使用 flex-{breakpoint}-row/column/row-reverse/column-reverse
     // 子元素的对齐方式（2种， 水平（主轴） 垂直（交叉轴））
          主轴： 左对齐 justify-content-start(justify-content: start)
                 右对齐 justify-content-end(justify-content: end)
                 居中对齐 justify-content-center(justify-content: center)
                 左右两端对齐 justify-content-between(justify-content: between)
                 分散居中对齐 justify-content-around(justify-content: around)
                 主轴的响应式： justify-content-{breakpoint}-*
          交叉轴： 顶对齐  align-items-start （align-items: start）
                  底对齐  align-items-end （align-items: end）      
                  居中对齐  align-items-center （align-items: center）      
                  第一行基线  align-items-baseline （align-items: baseline）      
                  沾满对齐  align-items-stretch （align-items: stretch）  // 当子级没有设置高度的时候， 沾满父级所有高度
                  交叉轴的响应式： align-items-{breakpoint}-* 
     // 多行对齐， 对于单行无效
                 顶对齐 align-content-start(align-content: start)
                 底对齐 align-content-end(align-content: end)
                 居中对齐 align-content-center(align-content: center)
                 上下两端对齐 align-content-between(align-content: between)
                 上下居中对齐 align-content-around(align-content: around)
                 上下沾满对齐  align-content-stretch （align-content: stretch）  // 当子级没有设置高度的时候， 沾满父级所有高度
                 多行的响应式： align-content-{breakpoint}-*
     // 元素自身的对齐方式  顶对齐  align-self-start（align-self: start）
                           底对齐  align-self-end（align-self: end）  
                           居中对齐  align-self-center（align-self: center）  
                           基线对齐  align-self-baseline（align-self: baseline）  
                           沾满对齐  align-self-stretch（align-self: stretch）
                           自身对齐的响应式： align-self-{breakpoint}-*  
     // 填充 弹性盒模型没有设置宽高，是由内容自动撑开  
      flex-fill: 瓜分剩余空间， 填在谁身上，那就给谁
      使用方法：  
          <div class="row">
            <div class="info flex-fill">第1列</div>
            <div class="info ">第2列</div>  // 剩余空间被第一列和第三例平分
            <div class="info flex-fill">第3列</div>
          </div>   
       填充的响应式 ： flex-{breakpoint}-fill
     // 伸缩值  1. flex-grow-*(* 为扩展比例， 数字为0不扩展  数字为1 表示扩展)  伸的响应式 flex-grow-{breakpoint}-0/1
                2. flex-shrink-*(* 为收缩比列， 数字为0不收缩  数字为1 表示收缩)  收缩的响应式 flex-shrink-{breakpoint}-0/1
     // 自动间距： 右侧 mr-auto(margin-right: auto) 
                  左侧 ml-auto(margin-left: auto)   
                  底部 mb-auto(margin-bottom: auto)        
                  上部 mt-auto(margin-top: auto) 
                  // 没有响应式
     // wrap 是否换行
       flex-nowrap(flex-wrap: nowrap) 不换行             
       flex-wrap(flex-wrap: wrap) 换行（默认是换行的）             
       flex-wrap-reverse(flex-wrap: wrap-reverse) 倒叙换行（默认是换行的）
       响应式：flex-{breakpoint}-wrap
    // 排序 order-*(*代表数字，0开始到11  只有所有都给order的时候才会按照这个顺序来排序) 
       排序响应式： order-{breakpoint}-*  
 ==========================浮动================================
 // 浮动（4.x）  pull-left, pull-right(3.x版本)
 float-left(float: left) 左浮动
 float-right(float: right) 右浮动
 使用方法： 
 <div class="row border d-block"> 
   <div class="float-left">左浮动</div>// 这样写的浮动是没有用的，因为bootstrap中的row, 是一个弹性盒模型，所以要变成块级元素
   <div class="folat-right">右浮动</div>
 </div>
 float-none: 不浮动， 添加该类名后，使得当前盒子保持正常的文档流
 使用方法：
  <div class="row border">
   <div class="col">
     <div class="float-left">左浮动</div>
     <div class="float-right">右浮动</div>
     <div class="float-left float-none">不浮动</div> // 改div就不会脱离正常的文档流了
   </div>
 </div>
 响应式的浮动： float-{breakpoint}-left/right
 清除浮动：clearfix 使用在父级上清除浮动， 正常文档流
 关闭图标 close 
 使用方法：
 <div class="row">
  <button type="button" class="close">
    <span>&times;</span>
  </button>
</div>
图像替换： 用于seo, text-hide 用于隐藏文字
 使用方法：
 // 图片代替文字， 搜索引擎看到的是bootstrap这个文字， 用户看到的是图片 更好用于seo
 <div class="row">
   <h1 class="text-hide" style="background-image: url('xxx');">bootstrap</h1>
 </div>
 内容溢出：overflow-auto/hidden  overflow-auto一个显示滚动条， overflow-hiden 一个隐藏滚动条
 定位 
   position-static 没有定位 默认值
   position-relative 相对定位
   position-absolute 绝对定位
   position-fixed   固定定位
   position-sticky  黏性定位  
   sticky-top  粘性置顶 需要放在第一层才会生效  兼容性有问题
   fixed-top  固定在顶部
   fixed-bottom 固定在底部
 阴影：
   shawdow-none: 没有阴影
   shawdow-sm: 小阴影
   shawdow: 正常阴影
   shadow-lg: 大阴影 
 尺寸：
   宽度：
   w-25(width:25%)
   w-50(width:50%)
   w-75(width:75%)
   w-100(width:100%)
   w-auto(width:auto)
   高度：
   h-25(height:25%)
   h-50(height:50%)
   h-75(height:75%)
   h-100(height:100%)
   h-auto(height:auto 有内容撑开) 
   最大宽度：
   mw-100(max-width: 100%)
   最大高度：
   mh-100(max-height: 100%, 最大的高不能超过父级的高度)
   间距：
    m: margin 
    t： top
    b: bottom
    r: right
    l: left
    p: padding
    x： right left
    y: top  bottom   
    数字是从auto, 0 -5 m和p 可以和其他的随意组合
    例如： mt-1(margin-top: .5rem)等
    间距的响应式： {property}{sides}-{breakpoint}-{size}  如：my-lg-0;
    ==================文本===================
    对齐方式
     text-justify 两端对齐
     text-right  居右对齐
     text-left  居左对齐
     text-center 居中对齐
     响应式 text-{breakpoint}-right/left/center/justify
     大小写转换
     text-lowercase 变成小写
     text-uppercase 变成大写
     text-capitalize 首字母大写
     溢出
     text-nowrap: 不换行
     text-truncate : 单行超出打点显示
     字体加粗，斜体
     font-weight-blod 粗体
     font-weight-normal 正常
     font-weight-light 更细的字体
     font-italic 倾斜字体
     text-monospacce 等宽字体
  可见性
    visible（display: visible）： 可以看见
    invisible(display: invisible)： 看不见，但是占据空间
    d-none(disable: none): 隐藏，空间不占用