Bootstrap switch开关使用教程

avatar 2018年02月18日22:07:46 6 4081 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
本文介绍 bootstrapSwitch 的基本用法。


一、下载 Bootstrap 和 Bootstrap-switch


Bootstrap 下载地址：点此

Bootstrap switch 下载地址：点此


二、引用Bootstrap switch 必备的文件

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>Bootstrap switch使用</title>
  10.     <!--Bootstrap 必备css文件-->
  11.     <link rel="stylesheet" th:href="@{/common/bootstrap/v3/css/bootstrap.min.css}">
  12.     <!--Bootstrap switch必备css文件-->
  13.     <link rel="stylesheet" th:href="@{/common/bootstrap/v3/css/bootstrap-switch.min.css}">
  14. </head>
  15. <body>
  17.     <!--
  18.         这里放HTML代码
  19.     -->
  22.     <!--jQuery-->
  23.     <script th:src="@{/common/jquery/jquery.min.js}"></script>
  24.     <!--Bootstrap 必备js文件-->
  25.     <script th:src="@{/common/bootstrap/v3/js/bootstrap.min.js}"></script>
  26.     <!--Bootstrap switch必备js文件-->
  27.     <script th:src="@{/common/bootstrap/v3/js/bootstrap-switch.min.js}"></script>
  30.     <script type="text/javascript">
  31.      <!--
  32.         这里放js代码
  33.      -->
  34.     </script>
  36. </body>
  37. </html>


三、开始使用


1、简单的例子

HTML
  1. <div class="switch" id="statusSwitch" data-on="info" data-off="success">
  2.         <input type="checkbox" checked/>
  3. </div>



JS
  1.  <script type="text/javascript">
  2.         $(function () {
  3.             $('#statusSwitch input').bootstrapSwitch();
  4.         })
  5. </script>



效果图







历史上的今天
二月
18日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0