<!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. android调用其他apk的activity

    <img src="https://img-blog.csdn.net/20160322114625025" alt="" />启动另一个apk的工 ...

  2. 第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页

    下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点 ...

  3. [Noip模拟题]统计方案​

    题目并不难,想一下就会了,我真的智商持续下降,取模情况下做除法我都没想到逆元. 总之想到逆元就好写了,还是\(meet\ in\ the\ middle\)裸题,数组开不下用\(hash/map\)存 ...

  4. A - Wireless Network

    #include <cstdio> #include <algorithm> #include <cstring> #include <iostream> ...

  5. Mysql 开启 Slow 慢查询

    1:登录数据库查看是否已经开启了Slow慢查询: mysql> show variables like 'slow_query%'; 2:开启Mysql slow日志: 默认情况下slow_qu ...

  6. Python-7-字典方法

    clear 删除所有字典项 >>> d = {} >>> d['name'] = 'Gumby' >>> d['age'] = 42 >&g ...

  7. saltstack_API接口

    1 介绍 saltstack部署完后,要和master交互,就需要使用/usr/bin/salt这个工具.but..我不想手动到salt服务器上去执行这个命令,而是让web工具来调用salt. sal ...

  8. getAnnotation为null的坑

    在写一个基于SpringAOP的权限控制的. 自己定义了一个注解,然后逻辑代码需要通过获取自定义注解的一个属性来进行权限控制. 下面简单上一下关键代码: 自定义注解: @Documented //有关 ...

  9. AtCoder D - 高橋君と見えざる手 / An Invisible Hand 简单思维题

    http://arc063.contest.atcoder.jp/tasks/arc063_b 因为每次都是选取最大值,那么用dp[i]表示第i个数结尾能得到最大是多少. 其实就是用a[i]去减去左边 ...

  10. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...