================字体图标(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的官方文档,比较详细