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(需要 ...
随机推荐
- SQL Server - SQL语言组成 (DML、DDL、DCL、DQL的区别)
转载自:https://www.cnblogs.com/dato/p/7049343.html 作者:Dato.zeng --------------------------------------- ...
- Shell-删除误解压的文件
我意外在/var/www/html/,而不是/home/projects/www/current下解压了一个tarball.它搞乱了/var/www/html下的文件,你甚至不知道哪些是误解压出来的. ...
- LwIP Application Developers Manual12---Configuring lwIP
1.前言 2.LwIP makefiles With minimal features C_SOURCES = \ src/api/err.c \ src/core/init.c \ src/core ...
- Go语言中的结构体 (struct)
Golang官方称Go语言的语法相对Java语言而言要简洁很多,但是简洁背后也灵活了很多,所以很多看似很简单的代码上的细节稍不注意就会产生坑.本文主要对struct结构体的相关的语法进行总结和说明. ...
- 查询设备的IP地址/掩码/MAC/网关
import commands, sys import platform from _utils.patrol2 import run_cmd, data_format, report_format ...
- python中常用模块
OS模块 python编程时,经常和文件.目录打交道,这是就离不了os模块.os模块包含普遍的操作系统功能,与具体的平台无关os.name()——判断现在正在实用的平台,Windows 返回 ‘nt' ...
- Android应用内嵌cocos2dx游戏项目
cocos2dx的Android环境搭建(Windows/Mac) 我用的cocos2dx3.15版本的. 以下步骤是在Windows平台执行的. 创建Cocos2d-x项目 将刚才下载的cocos2 ...
- centos6.5中部署Zeppelin并配置账号密码验证
centos6.5中部署Zeppelin并配置账号密码验证1.安装JavaZeppelin支持的操作系统如下图所示.在安装Zeppelin之前,你需要在部署的服务器上安装Oracle JDK 1.7或 ...
- LabVIEW中下拉列表和枚举的区别(两点)
第一:如图,在表示法上,下拉列表表示的数据范围要大,枚举只能是U32,U16, U8 第二:在vi的动态调用过程中,常用下拉列表,因为枚举控件不能动态的增加或者减少项目,而下拉列表则可以.
- MYSQL事务处理失效原因
mysql有多种存储引擎,有些版本(mysql5.5.5以前默认是MyISAM,mysql5.5.5以后默认是InnoDB)安装时默认的存储引擎是MyISAM,而MyISAM存储引擎是不支持事务处理的 ...