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(){})