bootstrap的模拟单选按钮
<div class="btn-group" data-toggle="buttons" id="radio">
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">Sedan
</label>
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">Coupe
</label>
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">Truck
</label>
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">Van
</label>
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">SUV
</label>
<label class="mt10 mr5 w140 btn bdr-0 bdc-C4C4C4 c-7D809C fw600">
<input type="radio" name="style_radio">Luxury
</label>
</div>
.btn.active, .btn:active{
background-color: #4BE4CC;
color: #FFF;
border: 1px solid #FFF;
}
.mt10{
margin-top: 10px;
}
.mr5{
margin-right: 5px;
}
.w140{
width: 140px;
}
.bdr-0{
border-radius: 0;
}
.bdc-C4C4C4{
background-color: #C4C4C4;
}
.c-7D809C{
color: #7D809C
}
.fw600{
font-weight: 600;
}


bootstrap的模拟单选按钮的更多相关文章
- bootstrap框架下 单选按钮组的选中以及取值问题
1.业务功能:四个按钮只能选中一个,且默认选择水准4 先看代码. <div class="btn-group" data-toggle="buttons" ...
- Bootstrap按钮插件
前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...
- bootstrap 支持的JavaScript插件
一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...
- html单选按钮用jQuery中prop()方法设置
模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...
- boostrap插件
第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...
- bootstrap3-javascript插件- 慕课笔记
bootstrap支持的js插件 说明:文中内容系本人在某网站学习笔记,本着本站禁止推广的原则,在此就不著明学习站点的名称及地址.其实开博客的目的也就是为了方便记录学习,因为平时本地的记录太多丢三落四 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- kibana去掉丑陋的basic验证框,用自定义验证代替。
最近在改写kibana,碰到了验证登录的问题.问题是这样子的,nginx设置了basic认证,然后客户端访问kibana的时候总是会弹出登录框,输入用户名和密码,现在要改写这个登陆框,用bootstr ...
- bootstrap4中文版(纯手工翻译)
1初步开始 1.1依赖 这个仓储包含一系列基于bootstrap标识和css样式的原生angular2指令.所以是不需要依赖jq和bootstrap.js的.只需要以下依赖即可: Angular(需要 ...
随机推荐
- DataGrid列中加入CheckBox 全选 点击Header全选 和 只操作选中部分 功能的实现
先写个效果 中午接着写 反正没人看 只是给自己记录
- 记录一下putty的pscp的用法【转】
转自 记录一下putty的pscp的用法 - 刘荣星的博客 https://www.liurongxing.com/how-use-the-putty-and-pscp.html 以前一直用Secu ...
- sumafan:python爬虫多线程爬取数据小练习(附答案)
抓取 https://www.cnbeta.com/ 首页中新闻内容页网址, 抓取内容例子: https://hot.cnbeta.com/articles/game/825125 将抓取下来的内容页 ...
- BZOJ3224/LOJ104 普通平衡树 treap(树堆)
您需要写一种数据结构,来维护一些数,其中需要提供以下操作:1. 插入x2. 删除x(若有多个相同的数,因只删除一个)3. 查询x的排名(若有多个相同的数,因输出最小的排名)4. 查询排名为x的数5. ...
- libunistring-0.9.9
Introduction to libunistring Text files are nowadays usually encoded in Unicode, and may consist of ...
- 012_k8s专题系列一之进入容器日常op
一.下面列出如何进入正在运行的k8s容器 <1> kubectl get pods #查看所有正在运行的pod NAME READY STATUS RESTARTS AGE nginx-5 ...
- linux 新机器的配置(git + nodejs+ mongodb)
安装nodejs: wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz tar xvf node-v6.9.5-linux ...
- 前端 ---BOM的介绍
BOM的介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的 ...
- Ex4_21 最短路径算法可以应用于货币交易领域..._第十二次作业
(a) 建立一个有向图G(V,E),每个顶点表示一种货币,两个顶点之间的边权的大小ex[u][v]表示两种货币之间的汇率,若要找一个最有利的兑换序列,把货币s兑换成货币t,即在若干种兑换序列中选择 ...
- Confluence 6 考虑使用自定义 CSS
CSS 的知识储备 如果你没有有关 CSS 的相关知识,请参考页面 CSS Resources section 中的内容.当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS ...