<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的模拟单选按钮的更多相关文章

  1. bootstrap框架下 单选按钮组的选中以及取值问题

    1.业务功能:四个按钮只能选中一个,且默认选择水准4 先看代码. <div class="btn-group" data-toggle="buttons" ...

  2. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  3. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  4. html单选按钮用jQuery中prop()方法设置

    模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...

  5. boostrap插件

    第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...

  6. bootstrap3-javascript插件- 慕课笔记

    bootstrap支持的js插件 说明:文中内容系本人在某网站学习笔记,本着本站禁止推广的原则,在此就不著明学习站点的名称及地址.其实开博客的目的也就是为了方便记录学习,因为平时本地的记录太多丢三落四 ...

  7. css3 选择器(三)

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  8. kibana去掉丑陋的basic验证框,用自定义验证代替。

    最近在改写kibana,碰到了验证登录的问题.问题是这样子的,nginx设置了basic认证,然后客户端访问kibana的时候总是会弹出登录框,输入用户名和密码,现在要改写这个登陆框,用bootstr ...

  9. bootstrap4中文版(纯手工翻译)

    1初步开始 1.1依赖 这个仓储包含一系列基于bootstrap标识和css样式的原生angular2指令.所以是不需要依赖jq和bootstrap.js的.只需要以下依赖即可: Angular(需要 ...

随机推荐

  1. Informatic 使用过程中的问题

    1.database driver error ORA-12154 1)检查监听是否启动 2)是否在tnsnames.ora中配置

  2. UVA1194 Machine Schedule

    题目地址:UVA1194 Machine Schedule 二分图最小覆盖模型的要素 每条边有两个端点,二者至少选择一个.简称 \(2\) 要素. \(2\) 要素在本题中的体现 每个任务要么在 \( ...

  3. V4L2开发要点【转】

    转自:https://blog.csdn.net/mr_raptor/article/details/7441141 首先来看 Read/Write ,如果 VIDIOC_QUERYCAP 调用返回的 ...

  4. python异步编程模块asyncio学习(二)

    尽管asyncio应用通常作为单线程运行,不过仍被构建为并发应用.由于I/O以及其他外部事件的延迟和中断,每个协程或任务可能按一种不可预知的顺序执行.为了支持安全的并发执行,asyncio包含了thr ...

  5. 消息队列:JMS之基本概念介绍

    摘要:The Java Message Service (JMS) API is a messaging standard that allows application components bas ...

  6. 微信小程序-聊天列表-角标

    <div class="list-body" bindtap='openChat' data-Obj='{{oitem}}'> <!-- 头像 --> &l ...

  7. 004_LVS及haproxy

    一.lvs工作在哪层(新浪面试题) http://blog.chinaunix.net/uid-346158-id-2131163.html 二.四层.七层负载均衡的区别 所谓四层就是基于IP+端口的 ...

  8. maven项目导入war包

    导入war包,使用war包中的类和静态资源(css,js,包含jsp等) A项目是被导入的war工程,B项目是需要A项目的一个工程. 在<build>中 <resources> ...

  9. Laravel - Union + Paginate at the same time? and another problem----1222 The used SELECT statements have a different number of columns (SQL: (select count(*) as aggregate from

    ### 这是这几天,碰到的一个比较头疼的问题 使用union all联合查询,同时laravel 生成分页,但发生报错? QueryException : SQLSTATE The used from ...

  10. 【原创】大叔经验分享(29)cdh5使用已存在的metastore数据库部署hive

    cdh5.16.1使用的hive版本是hive-1.1.0+cdh5.16.1+1431,详见:https://www.cloudera.com/documentation/enterprise/re ...