bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结

输入框组： from-group input-group
    // 前置带icon
    input-group-prepend  input-group-text
    使用方法：
     <div class="container">
        <div class="form-row">
            <div class="col">
                <div class="form-group input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="text" name="" class="from-control" id="">
            </div>
        </div>
    </div>
    // 后置带icon, 需要在前面放input
    input-group-append  input-group-text
    // 大小（总共3个尺寸）
    input-group-lg 大尺寸
    input-group 正常尺寸
    input-group-sm 小尺寸
   // 大屏幕组件 
   使用类名 jumbotron
   使用方法：
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">Hello world</h1>
                    <p class="lead">lead 引言，中心思想</p>
                    <hr class="my-4">
                    <p>detail</p>
                    <button class="btn btn-primary"></button>
                </div>
            </div>
        </div>
    </div>
    // 全屏展示：
     使用类名 jumbotron-fluid 在使用jumbotron的同时使用 jumbotron-fluid的类名
   // 列表组  list-group list-group-item
   使用方法:
   <div class="container">
        <div class="row">
            <div class="col">
                <ul class="list-group">
                    // active 是当前被选中的
                    <li class="list-group-item active">red</li>
                    <li class="list-group-item">green</li>
                    <li class="list-group-item">black</li>
                    <li class="list-group-item">yellow</li>
                    // disabled 是禁用
                    <li class="list-group-item disabled">pink</li>
                </ul>
            </div>
        </div>
    </div>
    // 使列表组里面要有hover的状态 
    // 前提是使用a标签和button标签， 然后使用类名 list-group-item-action
    // 去掉四周的边框
    在list-group 中在添加 类名 list-group-flush
    // 添加背景色 使用类名 list-group-item-* (* 代表的是primary success 等)
    在每一列中使用 list-group-item-success 或者其他的
    // 列表组里面使用徽章
    在每一列中使用徽章就行
    使用方法：
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="list-group">
                    // d-flex justify-content-between align-items-conter 弹性和模型 两端居中对齐
                    <li class="list-group-item d-flex justify-content-between align-items-conter">red
                        // 使用徽章
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
   // 自定义内容
   需要有a标签包裹
   // 选项卡
   例子如下：
   <div class="row mt-5">
     <div class="col-4">
         <div class="list-group">
             <a href="#list-home" class="list-group-item list-grouup-action active" data-toggle="list">Home</a>
             <a href="#list-company" class="list-group-item list-grouup-action" data-toggle="list">Company</a>
             <span data-target="#list-company" class="list-group-item list-grouup-action" data-toggle="list">Address</a>
            </div>
     </div>
     <div class="col-8">
         <div class="tab-content">
             // 这里的id 对应上面的a标签的href 或者是span标签的data-target  fade show 是淡入淡出
             <div class="tab-pane fade show active" id="list-home">Home pane</div>
             <div class="tab-pane fade show" id="list-company">Company pane</div>
             <div class="tab-pane fade show" id="list-address">Address pane</div>
         </div>
     </div>
 </div>
  列表组的js 方法:
  // 设置选中第几项
  $('').tab('show')
  // 列表组的事件
  // 找到某一项要显示的时候触发
  $().on('show.sb.tab',function(){})
  // 找到某一项显示完全的时候触发 执行完transition的时候触发
  $().on('shown.sb.tab',function(){})
  // 找到某一项要隐藏的时候触发
  $().on('hide.sb.tab',function(){})
  // 找到某一项显示隐藏的时候触发 执行完transition的时候触发
  $().on('hidden.sb.tab',function(){})