<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<form role="form">
<div class="row">
<div style="padding:100px 100px 10px">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" />Go
</span>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<input type="checkbox" />Go
</span>
</div>

</div>
</div>
</div>
<div style="padding:100px 100px 10px">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" />Go
</span>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<input type="radio" />Go
</span>
</div>
</div>
</div>
</form>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀的更多相关文章

  1. bootstrap复选框和单选按钮

    复选框和单选按钮标签包含在<Label>标签中<div class="checkbox"> <label><input type=&quo ...

  2. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

  3. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  5. spring mvc：常用标签库(文本框，密码框，文本域，复选框，单选按钮，下拉框隐藏于，上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  6. 有关下拉列表、复选框、单选按钮、iframe等jquery处理方法

    1.jquery验证复选框互斥选项,代码如下: //验证复选框中的互斥选项 function checkData(name, val1, val2){ //获取所有checkbox值 var chec ...

  7. Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio

    Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问 ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

随机推荐

  1. HDU3038【种类并查集】

    题意: 给出m组区间[a,b],以及其区间的和,问有矛盾的有几组: 思路: 种类并查集. 主要是几个关系:同类元素的关系,父亲与儿子的关系,不同类元素的关系: 我们可以类似看作一个前缀和,sum[x] ...

  2. laravel 遍历循环

    @foreach($xxx as $k=>$y) {{$y->id}} @endforeach

  3. vr的延迟和渲染效率优化与Nvidia VRWorks

    http://blog.csdn.net/leonwei/article/details/50966071 vr现在正处于风生水起的阶段,但是vr的性能一直是大问题,最主要的问题就是响应延迟,玩家改变 ...

  4. 51nod1640(kruscal)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 题意:中文题诶- 思路:kruscal 题目要求是在边权 ...

  5. IT兄弟连 JavaWeb教程 Servlet会话跟踪 创建Cookie

    Tomcat作为Web服务器,对Cookie提供了良好的支持.那么,运行在Tomcat的Servlet该如何访问Cookie呢?幸运的是,Servlet无需直接和HTTP请求或响应中的原始Cookie ...

  6. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  7. PAT甲级——1130 Infix Expression （25 分)

    1130 Infix Expression (25 分)(找规律.中序遍历) 我是先在CSDN上面发表的这篇文章https://blog.csdn.net/weixin_44385565/articl ...

  8. Java EE学习笔记（六）

    初识MyBatis 1.MyBatis的定义 1).MyBatis(前身是iBatis)是一个支持普通SQL查询.存储过程以及高级映射的持久层框架. 2).MyBatis框架也被称之为ORM(Obje ...

  9. Hive_Hive的安装

    嵌入模式不推荐使用. 本地模式多用于开发和测试. 远程模式多用于生产环境.

  10. 关于ViewPager高度自适应（随着pager页的高度改变Viewpager的高度）

    该博客借鉴的是某位大神的博客 我只是写一下用后感和总结 博客链接地址 http://blog.csdn.net/qq_34972666/article/details/52386999?locatio ...