<!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. MFC中Radio Button使用方法

    先为对话框加上2个radio button,分别是Radio1和Radio2. 问题1:如何让Radio1或者Radio2默认选上?如何知道哪个被选上了? 关键是选上,“默认”只要放在OnInitDi ...

  2. Weekly Contest 78-------->811. Subdomain Visit Count (split string with space and hash map)

    A website domain like "discuss.leetcode.com" consists of various subdomains. At the top le ...

  3. Codeforces 358D【DP】

    思路:  dp[i][0] 代表取的时候左边没有 dp[i][1] 代表取的时候右边没有 dp[i][2] 代表取的时候左右都没有 dp[i][3] 代表取的时候左右都有 然后自己转移吧= =. 注意 ...

  4. 面向对象-mixin设计模式的应用（多继承应用场景）

    什么是设计模式? 设计模式只是一种开发思想.不是什么固定的格式. 前人的好的思想,我们后人拿过来用! mixin设计模式: 1.mixin设计迷失可以在不对类的内容的修改前提下,扩展类的功能(添加父类 ...

  5. Windows 2008 R2 如何安装.net framework 3.5

    服务器中安装sql server2012 ,  安装过程中提示没有此 “ Framework 3.5.1 功能 ” , 是不是很尴尬 于是简单记录安装 Framework 3.5.1 功能的步骤 一. ...

  6. socket模拟服务器，客户端下载东西（ftp）

    服务端(ftp_server.py) import hashlib,socket,os server = socket.socket() server.bind(("localhost&qu ...

  7. 牛客寒假6-B.煤气灶

    链接:https://ac.nowcoder.com/acm/contest/332/B 题意: 小j开始打工,准备赚钱买煤气灶. 第一天,小j的工资为n元,之后每天他的工资都比前一天多d元. 已知煤 ...

  8. UVa-11582：Colossal Fibonacci Numbers!（模算术）

    这是个开心的题目,因为既可以自己翻译,代码又好写ヾ(๑╹◡╹)ﾉ" The i’th Fibonacci number f(i) is recursively defined in the f ...

  9. 1-28Map简介

    Map接口概述 除了Collection之外,常用的集合还有Map接口,里面常用的实现类图如下: map中的元素是以键-值的方式存在的,通过键可以获取到值,键是不可以重复的,跟地图比较像,通过一个坐标 ...

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

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