Bootstrap是一款由Twitter推出的开源前端开发包，功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的，看了按钮的主题样式，也都是Bootstrap的样式风格，比较清新和简单。这款jQuery开关按钮可以满足你不同的应用需求，包括样式、大小等。

在线预览   源码下载

实现的代码。

html代码：

<div class="container">

            <div class="row">

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">State</h2>

                <p>

                  <input id="switch-state" type="checkbox" checked>

                </p>

                <div class="btn-group">

                  <button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>

                  <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>

                  <button type="button" data-switch-get="state" class="btn btn-default">Get</button>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Size</h2>

                <p>

                  <input id="switch-size" type="checkbox" checked data-size="mini">

                </p>

                <div class="btn-group">

                  <button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>

                  <button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>

                  <button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>

                  <button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>

                  <button type="button" data-switch-get="size" class="btn btn-default">Get</button>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Animate</h2>

                <p>

                  <input id="switch-animate" type="checkbox" checked>

                </p>

                <p>

                  <button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-get="animate" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Disabled</h2>

                <p>

                  <input id="switch-disabled" type="checkbox" checked disabled>

                </p>

                <p>

                  <button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Readonly</h2>

                <p>

                  <input id="switch-readonly" type="checkbox" checked readonly>

                </p>

                <p>

                  <button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Indeterminate</h2>

                <p>

                  <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">

                </p>

                <p>

                  <button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Inverse</h2>

                <p>

                  <input id="switch-inverse" type="checkbox" checked data-inverse="true">

                </p>

                <p>

                  <button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>

                  <button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">On Color</h2>

                <p>

                  <input id="switch-onColor" type="checkbox" checked data-on-color="info">

                </p>

                <p class="btn-group">

                  <div class="btn-group">

                    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>

                    <div role="menu" class="dropdown-menu">

                      <li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>

                      <li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>

                      <li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>

                      <li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>

                      <li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>

                    </div>

                  </div>

                  <button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Off Color</h2>

                <p>

                  <input id="switch-offColor" type="checkbox" data-off-color="warning">

                </p>

                <p class="btn-group">

                  <div class="btn-group">

                    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>

                    <div role="menu" class="dropdown-menu">

                      <li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>

                      <li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>

                      <li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>

                      <li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>

                      <li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>

                    </div>

                  </div>

                  <button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>

                </p>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">On Text</h2>

                <p>

                  <input id="switch-onText" type="checkbox" checked data-on-text="Yes">

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <input type="text" data-switch-set-value="onText" value="Yes" class="form-control">

                  </div>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Off Text</h2>

                <p>

                  <input id="switch-offText" type="checkbox" data-off-text="No">

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <input type="text" data-switch-set-value="offText" value="No" class="form-control">

                  </div>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Label Text</h2>

                <p>

                  <input id="switch-labelText" type="checkbox" data-label-text="Label">

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <input type="text" data-switch-set-value="labelText" class="form-control">

                  </div>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Handle Width</h2>

                <p>

                  <input id="switch-handleWidth" type="checkbox" data-handle-width="100">

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">

                  </div>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Label Width</h2>

                <p>

                  <input id="switch-labelWidth" type="checkbox" data-label-width="100">

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">

                  </div>

                </div>

              </div>

              <div class="col-sm-6 col-lg-4">

                <h2 class="h4">Create | Destroy</h2>

                <p>

                  <input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>

                </p>

                <div class="row">

                  <div class="col-sm-6">

                    <button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>

                  </div>

                </div>

              </div>

            </div><br><br>

            <div class="text-center">

              <h2 class="h4">Radio All Off</h2>

              <div class="row">

                <div class="col-sm-6">

                  <h3 class="h5">Disabled</h3>

                  <input type="radio" name="radio1" checked class="switch-radio1">

                  <input type="radio" name="radio1" class="switch-radio1">

                  <input type="radio" name="radio1" class="switch-radio1">

                </div>

                <div class="col-sm-6">

                  <h3 class="h5">Enabled</h3>

                  <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">

                  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">

                  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">

                </div>

              </div><br>

              <div style="text-align:center;clear:both;">

<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

              <hr>

              <h2 class="h4">在模态窗口中显示</h2>

              <button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>

              <div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">

                <div class="modal-dialog">

                  <div class="modal-content">

                    <div class="modal-header">

                      <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                      <div id="modal-switch-label" class="modal-title">Title</div>

                    </div>

                    <div class="modal-body">

                      <input id="switch-modal" type="checkbox" checked>

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

via：http://www.w2bc.com/Article/20900

基于Bootstrap的jQuery开关按钮组合的更多相关文章

  1. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  2. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  3. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  4. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  5. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  6. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  7. 基于Bootstrap、Jquery的自适应导航栏

    css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...

  8. 弹出框一 之 基于bootstrap和jquery的自定义弹出框

    (function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...

  9. 基于Bootstrap的jQuery登录表单

    在线演示 本地下载

随机推荐

  1. 【Python学习笔记】循环和迭代

    for和while基本语法 break和continue else的使用 enumerate和zip在循环中的应用 for和while基本语法 Python中的的循环使用for和while语句来实现, ...

  2. Linux文件系统 (Ubunt)

    Linux 文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储 ...

  3. 项目 erlang启动时死循环

    机子里的otp是新装的 看了一下main 是在util:ensure_started一堆app的时候死讯了, 按照顺序是sasl crypto asn1 public_key ssl 发现是publi ...

  4. 未能加载文件或程序集“Newtonsoft.Json, Version=6.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。

    未能加载文件或程序集“Newtonsoft.Json, Version=6.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个 ...

  5. 第二百三十三天 how can I 坚持

    刚才看了场球,亚冠恒大和迪拜阿尔阿赫利,1:0,刚打开电脑就看到了进球,还是很幸运的. 在家待了一天,阴天,预报明天又中到大雪 啊,下吧.好希望下场大雪啊. 最近一直感觉好累,写代码不容易啊 ,还是因 ...

  6. ACM 数论小结 2014-08-27 20:36 43人阅读 评论(0) 收藏

    断断续续的学习数论已经有一段时间了,学得也很杂,现在进行一些简单的回顾和总结. 学过的东西不能忘啊... 1.本原勾股数: 概念:一个三元组(a,b,c),其中a,b,c没有公因数而且满足:a^2+b ...

  7. unigui TUniTreeView demo

    unit untTree; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  8. python svn

    svn 0.3.36 Downloads ↓ Intuitive Subversion wrapper. Introduction svn is a simple Subversion library ...

  9. Codeforces 706 C. Hard problem (dp)

    题目链接:http://codeforces.com/problemset/problem/706/C 给你n个字符串,可以反转任意一个字符串,反转每个字符串都有其对应的花费ci. 经过操作后是否能满 ...

  10. POJ3345

    http://poj.org/problem?id=3345 大意: 大意是说现在有n个城市来给你投票,你需要至少拿到m个城市的赞成票.想要获得第i个城市的赞成需要花费w[i],有个条件就是某些城市是 ...