前端基础(十):Bootstrap Switch 选择框开关控制
简介
Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式
它是依赖于Bootstrap的一款插件
下载
导入
因为它是依赖于Bootstrap的一款插件,所以,在引入之前要先引入Bootstrap样式
<link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugin/switch/bootstrap-switch.min.css">
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugin/switch/bootstrap-switch.min.js"></script>
使用
# 定义一个选择框
<input type="checkbox" name="test">
# 给选择框应用样式
<script type="text/javascript">
$("[name='test']").bootstrapSwitch();
</script>
属性
除了默认的样式,还可以通过给input框设置属性的方式给它自定义一些样式
按钮大小
data-size="..."
Mini 迷你
Small 小号
Normal 正常
Large 大号
按钮颜色
data-on-color="..."
data-off-color="..."
- primary 深蓝
- info 浅蓝
- success 绿色
- warning 黄色
- danger 红色
按钮文字
data-on-text="..."(str类型)
data-off-text="..."
按钮宽度
data-handle-width=".."(int类型)
label宽度
data-label-width="..."(int类型)
只可读
readonly=""
禁用
disabled=""
更多
前端基础(十):Bootstrap Switch 选择框开关控制的更多相关文章
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 前端基础 之 Bootstrap框架
浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...
- 前端基础之Bootstrap
1. 页面加载完之后才执行的JS代码 1. DOM方式 window.onload = function(){} 2. jQuery方式 ...
- 前端基础之Bootstrap介绍
bootstrap简介 http://v3.bootcss.com/ Bootstrap优点: 下载: Bootstrap引入 <meta name="viewport" ...
- 8.Java基础_if-else和switch选择语句
/* 选择语句(基本与C++相同) if-else语句: 格式一: if(关系式){ 语句体; } 格式二: if(关系式){ 语句体; } else{ 语句体; } 格式三: if(关系式){ 语句 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:选择框(Select)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap <基础十九>分页
Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- Bootstrap<基础十六> 导航元素
Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...
随机推荐
- jenkins通过ssh登不上远程主机
https://blog.csdn.net/cdnight/article/details/81078191 就是需要切换jenkins用户,用jenkins用户生产的秘钥拷到其他主机上
- Redux 视频教程
视频地址:http://www.imooc.com/learn/744
- 在图中寻找最短路径-----深度优先算法C++实现
求从图中的任意一点(起点)到另一点(终点)的最短路径,最短距离: 图中有数字的点表示为图中的不同海拔的高地,不能通过:没有数字的点表示海拔为0,为平地可以通过: 这个是典型的求图中两点的最短路径:本例 ...
- 如何创建spring web 工程(maven工程)
1.在项目资源管理器右键,New-Spring Starter Project 2.设置一些参数 3.点击Next,然后勾选两个选项 4.点击finish
- 能力不足的C++开发会欺辱能力不足C#开发
能力不足的C++开发会欺辱能力不足C#开发 我被C++开发欺辱的岁月 前言 人被压迫了,为什么不斗争?——鲁迅 作为一个C#开发者,我经历了,也见证了很多同行饱受C++开发的歧视和欺辱. 而且,这 ...
- HIVE配置mysql metastore
HIVE配置mysql metastore hive中除了保存真正的数据以外还要额外保存用来描述库.表.数据的数据,称为hive的元数据.这些元数据又存放在何处呢? 如果不修改配置hive ...
- PYTHON 100days学习笔记008-3:输入和输出
目录 Day008-03:Python3 输入和输出 1.输出格式美化 1.1 str.format()用法 1.2 旧式字符串格式化 2.读取键盘输入 3.读和写文件 4.文件对象的方法 4.1 f ...
- Spark和Scala当中的collect方法的用法和例子
[学习笔记] collect: 收集一个弹性分布式数据集的所有元素到一个数组中,这样便于我们观察,毕竟分布式数据集比较抽象.Spark的collect方法,是Action类型的一个算子,会从远程集群拉 ...
- RSA 非对称加密原理(小白也能看懂哦~)
来源. https://blog.csdn.net/jijianshuai/article/details/80582187 RSA 加密原理 步骤 说明 描述 备注 1 找出质数 P .Q - 2 ...
- Linux IO模式以及select poll epoll详解
一 背景 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network ...