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

简介: 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的官方文档,比较详细


相关文章
|
12月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
97 1
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
123 0
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
106 0
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
|
9天前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
9天前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `&lt;a&gt;`、`&lt;button&gt;` 或 `&lt;input&gt;` 元素。
Bootstrap5 按钮5
加载按钮示例:通过添加不同的类,可以创建带有加载动画的按钮,包括旋转加载和增长加载效果,同时支持禁用状态。