Bootstrap Switch 使用教程

Bootstrap Switch 使用教程

bootstrap-switch项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-switch

1. 项目目录结构及介绍

Bootstrap Switch 是一个基于 Bootstrap 框架的插件，用于将复选框（checkboxes）和单选按钮（radio buttons）转换成切换开关（toggle switches）。在克隆或下载项目后，你可能会看到以下基本的目录结构：

bootstrap-switch/
├── css/
│   └── bootstrap-switch.css       # 主题样式文件
├── js/
│   └── bootstrap-switch.js        # 插件主JavaScript文件
└── dist/
    ├── css/
    │   └── bootstrap-switch.min.css  # 压缩后的主题样式文件
    └── js/
        └── bootstrap-switch.min.js   # 压缩后的插件主JavaScript文件

说明：

• css 文件夹包含了未压缩的样式表。
• js 文件夹存储了未压缩的 JavaScript 插件代码。
• dist 文件夹包含了压缩过的 CSS 和 JS 文件，适合生产环境使用。

2. 项目的启动文件介绍

Bootstrap Switch 的使用并不涉及特定的启动文件，因为它不是一个服务器端的应用。它是一个客户端库，主要通过引入 CSS 和 JavaScript 文件来实现功能。在 HTML 页面中，你需要引入以下依赖：

<!-- 引入Bootstrap基础CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- 引入Bootstrap Switch CSS -->
<link href="bootstrap-switch/css/bootstrap-switch.css" rel="stylesheet">

<!-- 引入jQuery -->
<script src="jquery.js"></script>
<!-- 引入Bootstrap JS -->
<script src="bootstrap/js/bootstrap.js"></script>
<!-- 引入Bootstrap Switch JS -->
<script src="bootstrap-switch/js/bootstrap-switch.js"></script>

然后，你需要初始化对应的输入元素才能激活 Bootstrap Switch 功能：

<input type="checkbox" name="my-checkbox" checked>
<script>
$("[name='my-checkbox']").bootstrapSwitch();
</script>

3. 项目的配置文件介绍

Bootstrap Switch 并不提供单独的配置文件，但可以通过数据属性（data attributes）和 JavaScript 方法对控件进行配置。例如，你可以设置开关的状态、颜色等：

<input type="checkbox" name="my-checkbox" checked data-on="primary" data-off="info">

也可以通过 JavaScript API 修改这些配置：

// 切换状态
$("#my-checkbox").bootstrapSwitch('toggleState');

// 设置状态为关闭
$("#my-checkbox").bootstrapSwitch('setState', false);

// 销毁开关
$("#my-checkbox").bootstrapSwitch('destroy');

更多配置选项和方法可以参考其官方文档。

这就是 Bootstrap Switch 的基本使用。通过以上步骤，你应该能够在你的网页上创建并操作这些美观的切换开关了。

bootstrap-switch项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-switch