bootstrap-switch使用实例
2016-01-08 13:29
651 查看
1.引入js,css文件
这些文件需要到bootstrap官网中下载
2.html代码
3.调用switch 的 js文件使之生效
4.效果如下
更多样式与效果请看bootstrap官方文档
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-switch.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-switch.min.js"></script>
这些文件需要到bootstrap官网中下载
2.html代码
<label class="control-label" for="push">是否同时推送</label> <div class="switch" style="height:30px;"> <input id="push" type="checkbox"/> </div>
3.调用switch 的 js文件使之生效
$(document).ready(function(){ $("#push").bootstrapSwitch({ onText:'推送', offText:'不推送' }); });
4.效果如下
更多样式与效果请看bootstrap官方文档
相关文章推荐
- bootstrap 学习之路——开始篇
- bootstrap datetimepicker bug 页面产生滚动会错位
- Bootstrap导航栏
- Bootstrap框架深化学习
- bootstrap主要内容:列表、表格、表单、按钮、文本显示和辅助类
- 深入理解BootStrap -- js插件概览(API)18
- 深入理解BootStrap -- 面板(panel)17
- 深入理解BootStrap -- 列表组(list-group)16
- 深入理解BootStrap -- 媒体对象(media)15
- BootStrap 模态框禁用空白处点击关闭
- bootstrap记录
- BootStrap中关于input-group的问题(未解决)
- Bootstrap导航元素
- bootstrap栅格布局,第一次成功
- bootstrap学习笔记--bootstrap排版类的使用
- bootstrap学习笔记--bootstrap布局方式
- 使用bootstrap navbar-inner背景色在ie9以下不显示问题
- Bootstrap输入框组
- bootstrap弹出框居中
- bootstrap学习笔记--bootstrap布局方式