bootstrap 組件之分頁 提示框 提示工具組件

 分頁： 
    外部引用： 只需要引用css 即可
    使用方法: 使用類名pagination 每一個li使用 page-item
    列如：
    <ul class="pagination">
        // disable 禁用
        <li class="page-item disable"><a href="#" class="page-link">上一頁</a></li>
        // active 激活
        <li class="page-item active"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">下一頁</a></li>
        // 使用圖標
        <li class="page-item"><a href="#" class="page-link"><span>$raquo;</span></a></li>
    </ul>

    // 尺寸:
    pagination-lg 大尺寸 在pagination後面使用
    pagination 正常尺寸 在pagination後面使用
    pagination-sm 小尺寸 在pagination後面使用

    // 對齊：
    justify-content-start: 左對齊
    justify-content-center: 居中對齊
    justify-content-end: 右對齊


   提示框：對主要按鈕進行說明
   外部引用： 3個js 1個css
   使用方法：
   <div class="container">
        <div class="row">
            <div class="col">
                <button class="btn btn-danger" data-toggle='popover' title='提示框的標題' data-content='提示框的內容'>提示框</button>
                <script>
                    // 初始化提示框必須寫這個  data-toggle="popover" 選中的是所有的提示框
                    $(function () {
                        $('[data-toggle="popover"]').popover();
                    })
                </script>
            </div>
        </div>
    </div>

    // 4個彈出方向
    使用屬性 data-placement='top' 可以在上面顯示
            data-placement='right' 可以在右側顯示
            data-placement='bottom' 可以在下面顯示
            data-placement='left' 可以在左側顯示

    // 收回， 默認收回是需要從新點擊button
     使用屬性 data-trigger='focus' 這樣就可以點擊展開後， 在點擊任意地方就可以收回彈框
     
    // 禁用提示框
    直接在按鈕里加上一個 屬性 disabled

    // 禁用的按鈕需要彈出提示框，需要在外面彈出一層
    <span class="d-inlin-block" data-trigger='hover' data-toggle='popover' title="標題" data-content='內容'>
        <button class="btn btn-primary" style="pointer-events: none;">禁用按鈕彈出提示框</button>
    </span>

    // 屬性
    data-animation='' 默認true 過渡效果
    data-container='string' 默人 body 提示框添加的父級位置
    data-delay='' 顯示的事件，可以是對象或者字符串，對象的話需要有顯示時間和隱藏時間
    data-html='' 默認true 是否顯示html代碼，格式化
    data-placement='right' 顯示的位置， top left bottom
    data-template='' 彈出框的結構，一般不動
    data-offset='0' 提示框向右偏移的大小

    // 方法與事件
    方法：
    // 顯示提示框
    $('').popover('show')
     // 隱藏提示框
    $('').popover('hide')
    // 顯示或者隱藏，兩個狀態切換
    $('').popover('toggle')
    // 添加提示框
    $('').popover('enable')
    // 取消提示框的功能
    $('').popover('disable')
    // 切換是否有提示框功能
    $('').popover('toggleEnabled')

    事件
    // 提示框要顯示了
    $('').on('show.bs.popover',function(){})
    // 提示框完全顯示
    $('').on('shown.bs.popover',function(){})
    // 提示框要隱藏了
    $('').on('hide.bs.popover',function(){})
    // 提示框完全隱藏
    $('').on('hidden.bs.popover',function(){})
    // 提示框插入到dom的時候調用
    $('').on('insert.bs.popover',function(){})

// 提示工具
 <div class="container">
        <div class="row">
            <div class="col">
                <button class="btn btn-info" data-toggle='tooltip' title='提示工具顯示的標題' data-placement='right'>顯示提示框工具</button>
                <script>
                    // 初始化提示框工具
                    $(function(){
                        $('[data-toggle="tooltip"]').tooltip();
                    })
                </script>
            </div>
        </div>
    </div>

 // 方向：
 data-placement='top' 上面   
 data-placement='right' 右邊   
 data-placement='left' 左邊   
 data-placement='bottom' 下面   

 // 自定義html
 使用屬性 data-html='true'

 // 也可以禁用顯示， 需要在外面添加一個層，把交互添加到這個層上

 // 屬性
 data-animation='true' 是否動畫
 data-container='body' 父節點掛在的位置
 data-delay='' 顯示的事件
 data-html='' 自定義html

 // 方法與事件 和上面的提示框一模一樣只是把popover 改成tooltip

方法：
    // 顯示提示框
    $('').tooltip('show')
     // 隱藏提示框
    $('').tooltip('hide')
    // 顯示或者隱藏，兩個狀態切換
    $('').tooltip('toggle')
    // 添加提示框
    $('').tooltip('enable')
    // 取消提示框的功能
    $('').tooltip('disable')
    // 切換是否有提示框功能
    $('').tooltip('toggleEnabled')

    事件
    // 提示框要顯示了
    $('').on('show.bs.tooltip',function(){})
    // 提示框完全顯示
    $('').on('shown.bs.tooltip',function(){})
    // 提示框要隱藏了
    $('').on('hide.bs.tooltip',function(){})
    // 提示框完全隱藏
    $('').on('hidden.bs.tooltip',function(){})
    // 提示框插入到dom的時候調用
    $('').on('insert.bs.tooltip',function(){})