Bootstrap switch开关使用教程

本文介绍 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>
  16.     <!--
  17.         这里放HTML代码
  18.     -->
  19.     <!--jQuery-->
  20.     <script th:src="@{/common/jquery/jquery.min.js}"></script>
  21.     <!--Bootstrap 必备js文件-->
  22.     <script th:src="@{/common/bootstrap/v3/js/bootstrap.min.js}"></script>
  23.     <!--Bootstrap switch必备js文件-->
  24.     <script th:src="@{/common/bootstrap/v3/js/bootstrap-switch.min.js}"></script>
  25.     <script type="text/javascript">
  26.      <!--
  27.         这里放js代码
  28.      -->
  29.     </script>
  30. </body>
  31. </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>
  效果图      

发表评论

目前评论:1