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