bootstrapSwitch bootstrap 的开关组件扩展

bootstrapSwitch的引入文件

bootstrapSwitch的使用基于bootstrap的引用基础上进行使用

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>
复制代码

bootstrapSwitch的html代码

写一个原生的input框就可以了

<input type="checkbox" name="isAdColumn" id="isAdColumn" data-on-text="是" data-off-text="否">
复制代码

bootstrapSwitch的js代码

$("#isAdColumn").bootstrapSwitch();$('#isAdColumn').on('switchChange.bootstrapSwitch',function(event,state){//获取状态console.log(state); if(state){$("#isAdColumn").val(1);}else{$("#isAdColumn").val(0);}});
复制代码

总结

bootstrapSwitch的使用就是这么简单，我觉得博客越简单明了好点，bootstrapSwitch的官方文档地址为 www.bootcss.com/p/bootstrap… 可以了解更多的使用，欢迎大家一起留言探讨

转载于:https://juejin.im/post/5ca1c381e51d456bf9665a75

bootstrapSwitch bootstrap 的开关组件扩展相关推荐

bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
DLUX组件扩展下篇-实践
一.文章目标 1.1目标随着SDN技术的逐步成熟,大量的传统数通厂家和新型的IT厂家,都投入了一定的人员进行相关的产品技术预研.而ODL作为SDN控制器的主要开源项目,自然也成了多数人学习和搭建模拟 ...
bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么一.总结一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
手撸一个Switch开关组件
一.前言手撸系列又来了,这次咱们来撸一个Switch开关组件,废话不多说,咱们立刻发车. 二.使用效果三.实现分析首先我们先不想它的这个交互效果,我们就实现"不合格"时的一个 ...
移动跨平台ReactNative开关组件Switch【15】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
blinker点灯开关组件
文章目录一. 简介二. 组件简绍三. 代码部分一. 简介前面我们说了,用于通过blinker来实现点亮开发板上面的小灯,但是用的开关组件只是按一下打开灯或者再按一下熄灭灯,从app上看不清到 ...
神了！！看完这篇文章我不仅学会了手撸vue三开关组件，还搞懂了父子组件传值
神了!!看完这篇文章我不仅学会了手撸vue三开关组件,还搞懂了父子组件传值引子前置知识什么是vue组件父子组件传值父传子子传父 model选项的引入三开关组件(three-switch) ...
基于log4net的日志组件扩展封装，实现自动记录交互日志 XYH.Log4Net.Extend（微服务监控）...
背景: 随着公司的项目不断的完善,功能越来越复杂,服务也越来越多(微服务),公司迫切需要对整个系统的每一个程序的运行情况进行监控,并且能够实现对自动记录不同服务间的程序调用的交互日志,以及通一个服务或 ...

bootstrapSwitch bootstrap 的开关组件扩展

bootstrapSwitch的引入文件

bootstrapSwitch的html代码

bootstrapSwitch的js代码

总结

bootstrapSwitch bootstrap 的开关组件扩展相关推荐

最新文章

热门文章