bootstrap 插件 字体图标库 按钮库 日期插件

 ================字体图标（3.x的版本可以使用250个免费，4.x不可以使用）======================
        使用方法：
        外部引用 bootstrap css,引入字体文件，font文件夹
        //glypicon 基础样式
        <span class="glypicon glyphicon-heart"></span>

        设置大小和背景 和文字的设置方式一样

        按钮里面引用
        <button class="btn-primary">
            <span class="glypicon glyphicon-star"></span>
        </button>


        4.x不可以使用， 使用的方法如下：
        使用第三方字体图标库： 阿里图标库
        使用方法：
        1. 下载使用
        2.打开iconfont.html 里面有说明使用方法

      ===================按钮库=====================
      buttons库： button.css
      使用方法：
       <div class="contanier">
         <div class="row">
             <div class="col">
                 <button class="button">默认样式</button>
                 <button class="button button-round">圆角样式</button>
                 <button class="button button-pill">胶囊样式</button>
                 <button class="button button-square">方型样式</button>
                 <button class="button button-box">圆角</button>
                 <button class="button button-circle">圆星</button>
                </div>
         </div>
     </div>

     尺寸： 使用下面的类名
     微小尺寸： button-tiny
     小尺寸： button-small
     正常尺寸： button
     大尺寸： button-large
     特大尺寸： button-jumbo
     巨大尺寸： button-giant

     边框：使用类名button-boder

     3D按钮: 使用类名 button-3d

     突起样式： 使用类名button-raised

     长阴影：使用类名 button-shadow-right/left 两个方向

     光晕效果：使用类名button-glow

     下拉菜单按钮：
     <div class="row">
        <div class="col">
            <div class="button-dropdown" data-toggle=dropdown>
                // 这里需要引入button 的js
                <button class="button button-rounded">城市</button>
                <ul class="button-dropdown-list">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    按钮组： 外部使用 button-group ,子级使用多个按钮， 就变成按钮组了

    堆叠效果: 使用类名 button-block

    表单按钮：
    可以使用a标签， button, 或者是 input:type=button

    文字样式： 使用类名
     大写： button-upcase
     小写： button-lower
     首字母大写： button-capitalize
     转大写值比较小： button-capitalize-small

     ==============================日期事件选择器插件=====================
     DateTime Picker(只能使用bootstrap3.x)
     需要引用里面的js 和css 还有jq
     使用方法：
      <div class="container">
        <div class="row">
            <div class="col">
                <div class="form-group form-inline">
                    <label for="dateTime"></label>
                    <input type="text" class="form-control datetime" id=dateTime>
                    <script>
                        // 初始化日历
                        $('.datetime').datetimepicker();
                    </script>
                </div>
            </div>
        </div>
    </div>

    日期格式化：
    在datetimepicker({
        formate:''
    })
    值有： yyyy-mm-dd yyyy-mm-dd hh:ii  yyyy-mm-ddThh:ii yyyy-mm-dd hh:ii:ss 等

    配置项：
    weekStart:0  星期是从星期几开始（0-6）
    startDate:   起始日期是多少 默认没有， 使用了这个参数， 该值以前的都选不到
    endDate: 结束日期是啥 与上面的startDate 对立
    daysOfWeekDisable:[]  周几不能被选择到 一个数组
    autoclose: true 当选择到日期后是否自动关闭日期选择器
    startView:2   日期选择器首先选择的试图 可以是数字或者字符串 0=hour 1=day 2=month 3=year 4=
    miniview:0  最低能够选择到的日期试图
    maxview:4  最高能选择到的日期试图
    todayBtn: false 是否显示回到今天的按钮
    todayHighlight: false 今天的日期是否需要高亮， 没有用
    keyboardNavigation: true 是否可以通过键盘来选择日期
    language： 'en-CN' 选择语言,默认是英语， 需要引入对应语言js的包
    minuteStep: '5' 最小分钟的间隔
    pickPosition: 'bottom-right' 日期选择的弹出的位置
    showMeridian: 'false' 在日期界面上是否显示上午和下午

    方法：

    // 初始化日期插件
    $('').datatimepicker({})

    // 默认显示
    $('').datatimepicker('show')

    // 隐藏选择日期框
    $('').datatimepicker('hide')

    // 设置起始日期
    $('').datatimepicker('setStartDate','2019-10-01')
    
    // 设置结束日期
    $('').datatimepicker('setEndDate','2019-10-01')

    // 设置星期几不能被选中
    $('').datatimepicker('setDayOfWeekDisabled',[1,2])


    事件

    日期选择器显示
    $('').on('show',function{}) 

     日期选择器隐藏
    $('').on('hide',function{})

    日期发生改变
    $('').on('changeDate',function{}) 
    
    月份发生改变
    $('').on('changeMonth',function{}) 
    
    年发生改变
    $('').on('changeYear',function{})




    ===================bootstrap可以使用的日期选择框=================
    使用layui 里面的layDate,可以用于bootstrap4.x里面
    使用laydate.js 即可
    使用方法： 看layui的官方文档，比较详细