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=""

    更多
  • 相关阅读:
    简单的进度条程序
    python装饰器
    冒泡,递归
    实现随机验证码
    三木运算,三元运算
    set()集合
    list()列表
    python3.5 Str类型与bytes类型转换
    说说编码与转义的区别
    Java 中字符编码相关的问题解析
  • 原文地址:https://www.cnblogs.com/fu-yong/p/8794457.html
Copyright © 2011-2022 走看看