zoukankan      html  css  js  c++  java
  • 前端插件之Bootstrap Switch 选择框开关控制

    简介

    Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式

    它是依赖于Bootstrap的一款插件

    下载

    下载地址

    在线引用

    导入

    因为它是依赖于Bootstrap的一款插件,所以,在引入之前要先引入Bootstrap样式

    <link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugin/switch/bootstrap-switch.min.css">
    <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>        
    <script src="/static/plugin/switch/bootstrap-switch.min.js"></script>

    使用

    # 定义一个选择框
    <input type="checkbox" name="test">
    # 给选择框应用样式
    <script type="text/javascript">
            $("[name='test']").bootstrapSwitch();
    </script>

    属性

    除了默认的样式,还可以通过给input框设置属性的方式给它自定义一些样式

    按钮大小

    data-size="..."

    1. Mini  迷你

    2. Small 小号

    3. Normal 正常

    4. Large 大号

    按钮颜色

    data-on-color="..."

    data-off-color="..."

    1. primary 深蓝
    2. info   浅蓝
    3. success 绿色
    4. warning 黄色
    5. danger 红色

    按钮文字

    data-on-text="..."(str类型)

    data-off-text="..."

    按钮宽度

    data-handle-width=".."(int类型)

    label宽度

    data-label-width="..."(int类型)

    只可读

    readonly=""

    禁用

    disabled=""

    更多
  • 相关阅读:
    PHP中的无限级分类
    JS中json数据格式取值实例
    PHP中类的延迟绑定
    电阻
    不能做“没事找抽型”投资者
    Delphi相关文件扩展名介绍
    三极管
    沃伦·巴菲特
    电压,电流,电阻的关系就是欧姆定律
    CnPack 使用的组件命名约定
  • 原文地址:https://www.cnblogs.com/fu-yong/p/8794457.html
Copyright © 2011-2022 走看看