bootstrap重新设计checkbox样式
文章采集于: https://www.cnblogs.com/GumpYan/p/7845445.html#undefined
在原文基础上修改了勾勾的内容,直接采用bootstrap字体库。修改了横向布局的内间距,让两项之间有距离好看一点点。没了。代码看下面。
1、将checkbox原来的样式改成新的样式
checkbox原来的样式
checkbox新的样式
2.思路:
(1)首先,将checkbox的id与label的for关联起来
(2)将原来的checkbox用opacity:0隐藏起来,用新设计的checkbox覆盖在原来的checkbox的位置
(3)将新的checkbox与原来的checkbox的checked事件关联起来
(4)将remember me的字体样式改变一下,同时加上一个样式:鼠标移动到字体上变成手形
源码:
html文件
<div class="col-sm-8 ">
<div class="checkbox-custom checkbox-default">
<input type="checkbox" id="RememberMe">
<label for="RememberMe">Remember Me</label>
</div>
</div>
CSS
.checkbox-custom {
position: relative;
padding: 0 15px 0 25px;
margin-bottom: 7px;
margin-top:;
display: inline-block;
}
/*
将初始的checkbox的样式改变
*/
.checkbox-custom input[type="checkbox"] {
opacity:;/*将初始的checkbox隐藏起来*/
position: absolute;
cursor: pointer;
z-index:;
margin: -6px 0 0 0;
top: 50%;
left: 3px;
}
/*
设计新的checkbox,位置
*/
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left:;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
/*
点击初始的checkbox,将新的checkbox关联起来
*/
.checkbox-custom input[type="checkbox"]:checked +label:after {
position: absolute;
display: inline-block;
font-family: 'Glyphicons Halflings';
content: "\e013";
top: 42%;
left: 3px;
margin-top: -5px;
font-size: 11px;
line-height:;
width: 16px;
height: 16px;
color: #333;
}
.checkbox-custom label {
cursor: pointer;
line-height: 1.2;
font-weight: normal;/*改变了rememberme的字体*/
margin-bottom:;
text-align: left;
}
bootstrap重新设计checkbox样式的更多相关文章
- bootstrap重新设计按钮样式
1.将btn的样式换成以下的样式 2.思路: (1)将原来的btn样式设置color:#FFF,同时text-shadow设置,这样原来的btn样式就会变淡了,后面再加上新的样式就可以覆盖掉 注意:要 ...
- bootstrap table 自定义checkbox样式
//css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
- Bootstrap基本CSS样式
一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...
随机推荐
- ccsu小助手
CCSU小助手 队名:瓜队 组员:钟文兴.周畅.吉刘磊.唐仲勋 宣言:We are a team at any time! 团队项目描述: 内容:“生活在长大”: 目标:为了方便对学校不了解的学生能够 ...
- 通过一个例子学习Kubernetes里的PersistentVolumeClaim的用法
Kubernetes的pod本身是无状态的(stateless),生命周期通常比较短,只要出现了异常,Kubernetes就会自动创建一个新的Pod来代替它. 而容器产生的数据,会随着Pod消亡而自动 ...
- URI和URL有什么区别
URI 是从虚拟根路径开始的URL是整个链接如URL http://zhidao.baidu.com/question/68016373.html URI 是/question/68016373.ht ...
- Vim中 ctags 跳转直接跳到第一个匹配行的问题
意图 用ctags搜索代码时, 用 ctrl + ] 后,只有一个匹配项直接跳转,有多个则列出所有匹配项选择跳转 问题 在 vim 中使用 ctags 是一个很令人舒服的事情,但有时一些默认的配置和不 ...
- Python map/reduce/filter/sorted函数以及匿名函数
1. map() 函数的功能: map(f, [x1,x2,x3]) = [f(x1), f(x2), f(x3)] def f(x): return x*x a = map(f, [1, 2, 3, ...
- 关于Unix哲学
http://www.ruanyifeng.com/blog/2009/06/unix_philosophy.html 这几天,我在看Unix,发现很多人在谈"Unix哲学",也就 ...
- C++设计模式实现--訪问者(Visitor)模式
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/L_Andy/article/details/36896645 一. 訪问者模式 定义:表示一个作用于 ...
- 前端:Bootstrap框架
一,bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...
- 表达式过滤器 lowercase
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- o'Reill的SVG精髓(第二版)学习笔记——第四章
第四章:基本形状 4.1线段 SVG可以使用<line>元素画出一条直线段.使用时只需要指定线段起止点的x和y坐标即可.指定坐标时可以不带单位,此时会使用用户坐标,也可以带上单位,如em. ...