bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结

    //警告框 使用类名 alert
    使用方法：颜色有8个， 需要额外添加类名 alert-primary/success/danger 等
     <div class="container">
       <div class="alert alert-primary">
           // 这里面可以添加额外的内容， 链接，随心所欲等
       </div>
   </div>

   可以关闭的警告框:  使用类名
    close(含有关闭的样式)
    alert-dismissable(定位样式)
    fade show （含有动画效果,两个需要同时添加）
    data-dismiss 是用于js交互的
    使用方法：
    <div class="container">
     <div class="alert alert-warning alert-dismissable">
         这是一个可以关闭的警告框，但是需要以用jquery和bootstrap.js
         <button class="close" data-dismiss="alert">&times;</button>
        </div>
    </div>

    方法： alert（'close'） 需要手动选中dom来主动触发

    事件： close.bs.alert 当close方法执行的时候触发
          closed.bs.alert 当警告框关闭了的时候触发


    // 徽章   使用span badge
    颜色8个  badge-primary/success/info 等 徽章的字体大小取决于父级的大小， 默认大小.75rem
    使用方法： 
     <div class="container">
     <div class="row">
         <div class="badge primary"></div>
     </div>
    </div>

    在按钮中使用徽章：
      <div class="container">
       <div class="row">
         <button class="btn btn-primary">在按钮中使用徽章<span class="badge badge-light">徽章</span></button>
        </div>
     </div>

     胶囊徽章： 使用类名  badge-pill

     链接徽章：只要使用<a class='badge badge-primary'></a>


     // 面包屑导航 使用类名 d-block(默认弹性盒子，所以要变) breadcrumb breadcrumb-items
     使用方法：
     <div class="container">
      <div class="row d-block">
          <nav>
              <ol class="breadcrumb">
                  <li class="breadcrumb-itme"><a href="#">首页</a></li>
                  <li class="breadcrumb-itme"><a href="#">关于我们</a></li>
                  <li class="breadcrumb-itme active">联系我们</li>
              </ol>
          </nav>
      </div>
    </div>
       

    // 按钮 使用标签button 使用类名 btn
    颜色8种 如 btn-primary/success/info 等
    使用方法：
    <div class="container">
       <button class="btn btn-primary">按钮</button>
    </div>

    其他类型的按钮
     <div class="container">

         //a标签按钮 会含有hover的样式
        <a href="*" class="btn btn-primary">a标签按钮</a>

        // 重置按钮
         <button type='reset' class='btn btn-secondary'>重置</button>

         //input按钮
         <input type='button' class='btn btn-primary'>

         // 带边框的按钮 带有边框，hover效果 btn-outline-primary/info 等
          <button class="btn btn-outline-primary">按钮</button>
 
          // 按钮尺寸 使用类名 btn-lg 大按钮  btn 正常按钮  btn-sm 小按钮

          // block 类型按钮  使用类名 btn-block 使用后沾满一行，成为一个块级元素

          // 启用于禁用按钮 a标签使用类名 active（active） disabled(停用) button使用disabled属性

          // 切换按钮的状态 通过data-toggle='button'来实现
          使用方法： 
           <button class='btn btn-primary active' data-toggle='button'></button>
    

    </div>

    // 选项卡的效果
     <div class="row">
      <button class="btn-group btn-group-toggle" data-toggle='buttons'>
         <label class='btn btn-success active'>
             <input type="radio" name='options' checked>Active
         </label>
         <label class='btn btn-success active'>
             <input type="radio" name='options'>Active1
         </label> 
         <label class='btn btn-success active'>
             <input type="radio" name='options'>Active2
         </label>
       </button>
      </div>

    // 按钮组 使用类名btn-group 
     使用方法：
     <div class="row">
      <div class="btn-group">
         <button class="btn btn-primary">第1个按钮</button>
         <button class="btn btn-primary">第2个按钮</button>
         <button class="btn btn-primary">第3个按钮</button>
      </div>
     </div> 

     // 按钮组集合 使用类名 btn-group-toolbar

     // 按钮组大小 btn-group-lg（大）  btn-group（正常） btn-group-sm（小）

     // 下拉菜单 dropdown-toggle(显示下拉三角形)  dropdown-menu dropdown-item
      使用方法
      <div class="btn-group">
        <button class="btn btn-group dropdown-toggle" data-toggle='dropdown'>下拉菜单</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-menu">1下拉菜单</a>
            <a href="#" class="dropdown-menu">下拉菜单2</a>
        </div>
      </div>

    // 按钮组垂直排列 使用类名 btn-group-vertical