bootstrap switch样式修改与多列等间距布局
先以一张图开启今天的随笔
今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap switch的用法。
官网地址 http://www.bootcss.com/p/bootstrap-switch/
首先在bootstrap框架环境下引入bootstrap-switch.min.css和bootstrap-switch.min.js,或者bootstrap-switch.css和bootstrap-switch.js,需要注意的是支撑包中的css有针对bootstrap2和bootstrap3的,放在两个文件夹中,rel="stylesheet"记得加上,我就给傻逼的忘了,被自己坑了好久...
然后添加html
<div class="device-switch switch">
<input type="checkbox" checked/>
</div>
再初始化
$('.device-switch input').bootstrapSwitch({
onColor: "success",//项目需要,用了绿色
offColor: "default"
}).bootstrapSwitch('state', true);//按钮默认打开
有一些属性可以在html里指定,也可以在js中初始化,但是我设置大小属性的时候都没有效果,目前还没有找到原因,因为后面要改样式,就暂时没有深究。
然后我花了一个上午修改bootstrap switch的样式,没有什么捷径,就是用谷歌的开发者工具查看元素样式,一点一点尝试。
放上买家秀和卖家秀对比
修改前:
修改后:
这个买家秀还不错吧,嘻嘻
switch的简化结构大概是这样的
现在是开的状态,点击关闭后是这样
关闭的时候里面的块会左滑,显示off部分,所以我主要将边框改成圆角,并运用margin的负值将白色、灰色块左移,以填补圆角产生的背景空缺
至于里面的块具体移动多少,目前还没有明白它的计算机制,修改后的长度现在是可行的。
上代码:
.switch{display:inline-block;} .bootstrap-switch{border-radius:22px; width: 52px !important;height: 22px !important; } .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label { padding:0px; font-size: 12px; display: inline-block; } .bootstrap-switch .bootstrap-switch-label { width:42px !important; height: 22px; border-radius:11px !important; position:relative; } .bootstrap-switch .bootstrap-switch-handle-on{ width: 52px !important; margin-right: -22px; padding-right: 22px; } .bootstrap-switch .bootstrap-switch-handle-off{ width: 52px !important; border-radius: 11px; margin-left: -11px; padding-right: 2px; position:relative; color:#fff !important; }
需要注意的是z-index在某些情况下会失效:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
代码中突然出现的position:relative就是为了解决这个问题
关于多列等间距均匀布局(最左边和最右边不留间隔),对这个疑惑已久,
三列均匀布局:
由于项目用了bootstrap,直接用了它的栅格布局,并修改了padding值,给左边的块margin-left取负值,具体数值根据padding值决定,右边则让margin-right取负值,修改后如上图下半部分的效果,最左边和最右边的间隔没有了。
但是这种方法还不是很好,左边和右边的可视区域宽度都改变了,这些多列布局还有很多疑惑,等研究清楚了再更新。
flex布局可以做到平均分配空间,但是间隔还是没搞定,留下没有技术的泪。
刚刚发现bootstrap已经解决了这个问题,row配合col-*-*就可以了
bootstrap switch样式修改与多列等间距布局的更多相关文章
- ExtJS控件样式修改及美化
Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- django-pagination 样式修改
默认 django-pagination 样式: 使用bootstrap后样式: (有些瑕疵,下面来完善一下) 修改后: 效果还不错吧.那么讲下如何修改. 首先找到其源码: (路径:site-pac ...
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- 前端基础(十):Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- mysql修改列名和列类型
MySQL中修改列名或列的数据类型 (2012-04-03 08:59:25) 转载▼ 标签: mysql 修改列名 修改列数据类型 it 分类: 数据库 参考下面链接中的语法 http://dev. ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- 帝国cms 列表页分页样式修改美化【2】
上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...
随机推荐
- [Java123] JavaBean
https://stackoverflow.com/questions/3295496/what-is-a-javabean-exactly A JavaBean is just a standard ...
- virtualbox+vagrant学习-4-Vagrantfile-1-简介
Vagrantfile Vagrantfile的主要功能是描述项目所需的机器类型,以及如何配置和提供这些机器.之所以称为Vagrantfiles,是因为文件的实际文本文件名是Vagrantfile(除 ...
- c++ 堆和栈以及区别
c++中内存分成5个区:堆.栈.自由存储区.全局\静态存储区.常量存储区 栈是一种连续存储的数据结构,具有先进后出的性质.堆是一种非连续的树形存储数据结构,每个节点有一个值,整棵树是经过排序的,特点是 ...
- java的重载 和重写
请看如下代码: 父类: public class FU { public void show(){ System.out.println("this is fu!"); } } 子 ...
- Handlebars模板引擎
介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模 ...
- P1474 货币系统 Money Systems
题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,5,10,20 或 25,50, 和 100的单 ...
- 小H和密码
链接:https://www.nowcoder.com/acm/contest/72/B来源:牛客网 题目描述 小H在击败怪兽后,被一个密码锁挡住了去路 密码锁由N个转盘组成,编号为1 ...
- ExcelVBA实现一键生成word文字报告及批量操作[原创]
在很多工作中,经常需要写一些类似的报告,使用同一个模板,只是里面的数据不同,人工操作工程量大且容易出错,如果能用程序直接实现可以省去不少麻烦. 本文使用ExcelVBA实现,主要思路是使用word邮件 ...
- JS window.onload 和模拟document.ready.
hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh ttttttttttttt 注意观察 事件执行的 先后顺序. 总的来说,window.onload()方法是必须等到页面内包括图片的 ...
- python基础学习1-网络爬虫程序中的代理IP设置
#!/usr/bin/env python # -*- coding:utf-8 -*-网络爬虫代理 import urllib.request import random url="htt ...