<!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. BZOJ3289【莫队算法+树状数组+离散化】

    思路: 区间逆序数即是交换次数. 逆序数,可以用树状数组吧. 怎么处理区间变换的时候求逆序数啊.. 这里分成左边的增/删,右边的增/删 因为是按时序插入, 所以左边增,增一个数,计算:ans+=sun ...

  2. 如何将含有byte数据项的结构存入MongoDb

    我们知道MongoDb不支持byte(BsonType中根本没有定义byte), 但是在实际生产环境中数据结构(特别是远古时代的数据结构)往往包含byte数据项. 这时候无法保存原有的数据结构,一般会 ...

  3. 可以提升3倍开发效率的 Intellij IDEA快捷键大全汇总(2019)

    整理了一下IDEA的常用快捷键,可以打印出来或者弄成图片设置为桌面,为广大的程序员们节省更多的时间去谈恋爱. 常用快捷键1 Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式 ...

  4. PostgreSQL - N''和::bpchar

    N''的效果和::bpchar效果类似,都表示定长字符串.比如下边的sql: select n'233' as num; select '233'::bpchar as num; select '23 ...

  5. java数据结构----带权图

    1.带权图:要引入带权图,首先要引入最小生成树,当所有的边拥有相同的权值时.问题变得简单了,算法可以选择任意一条边加入最小生成树.但是当边有不同的权值时,需要用一些算法决策来选择正确的边. 2.带权图 ...

  6. java数据结构----数组篇

    1.数组作为java常用的数据结构之一,使用相对简单,下图展示了数组常用操作在允许和不允许重复值的情况下的比较次数 2.进行封装后的代码: package com.cn.higharray; /** ...

  7. UItableView动态行高 用这两句实现（可以自己计算数据来实现，一般在model中计算）

    // 动态行高 self.tableView.rowHeight = UITableViewAutomaticDimension; // 预估行高 self.tableView.estimatedRo ...

  8. [洛谷P2186] 小Z的栈函数

    题目链接: 传送门 题目分析: 大模拟,先得存操作,然后再处理每个数-- 有一个小优化,在处理操作的时候顺便判一下最后栈里是不是有且仅有一个数,但A完了才想起来,所以就算了-- 总之就是个模拟题--没 ...

  9. centos7版本对比之前版本的部分命令差异

    centos7版本下的命令和之前的centos版本的命令有些许不同,最近在电脑上用VBox安装了一个centos7版本.在做一些网卡配置和安装mysql的时候遇到了一些问题.在这里总结跟大家分享下. ...

  10. Python + request接口测试中Cookie和Session的获取和使用

    Cookie和Session的简单理解  由于Http协议是无状态的,所以产生了cookie和session进行状态的管理. 从哪里来,在哪里,到哪里去: --> Cookie是由服务端生成,存 ...