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;}

时间: 2024-11-07 16:00:36

bootstrap的模拟单选按钮的相关文章

bootstrap.js学习笔记

模态弹出框 Bootstrap框架中的模态弹出框,分别运用了"modal"."modal-dialog"和"modal-content"样式,而弹出窗真正的内容都放置在"modal-content"中,其主要又包括三个部分:  ? 弹出框头部,一般使用"modal-header"表示,主要包括标题和关闭按钮  ? 弹出框主体,一般使用"modal-body"表示,弹出框的主要内容 ? 弹

Bootstrap按钮插件

前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载的状态 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了 [注意]如果不

玩转Bootstrap(JS插件篇)

模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下(或见右侧代码编辑器28-29行): <!-导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js&qu

boostrap插件

第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 1.一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下:

抽取Zabbix的图形整合到自己后台

大家应该都知道Zabbix的图是可以通过接口获取出来的,例如CPU性能图 把这图拖到新窗口可以看到这张图的地址:http://xxxxx.xxxx.com/chart2.php?graphid=78730&period=3600&stime=20160729160437&updateProfile=1&profileIdx=web.screens&profileIdx2=78730&sid=979aa31695be988f&width=1772&am

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s

css模拟Bootstrap响应式布局——栅格

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap.加油!飞燕草 1 <style type="text/css"> 2 #containe

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdowns模拟Select■  Input Groups■  Thumbnails■  Panels■  Wells □ Page Header Page Header是指页面最顶部. <div class="page-header"> <h1>超级球迷</h1&

CSS进阶之模拟Bootstrap网格布局

目前暂时实现效果,容后面整理心得,先贴上源代码. <!DOCTYPE html> <html> <head> <title>demo bootstrap</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> <!-- <script type="text