<!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 style="padding:100px 100px 10px">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control" />
</div>
<br />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default">按钮</button>
</span>
</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历练实例:基本输入框组

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

  2. Bootstrap 历练实例 - 按钮(Button)插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  3. Bootstrap历练实例:向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  4. Bootstrap历练实例:向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  5. Bootstrap历练实例:带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  6. bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀

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

  7. Bootstrap历练实例:输入框组的大小

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

  8. Bootstrap历练实例:垂直的按钮组

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

  9. Bootstrap历练实例:按钮组大小

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

随机推荐

  1. ThinkPHP3.2.3学习笔记5---模板(一)

    一.模板简介 此文中的学习笔记部分资料是来自于thinkphp官方文档,http://document.thinkphp.cn/manual_3_2.html#template 本章的内容主要讲述了如 ...

  2. Root Motion深度解析[Unity]

    http://blog.csdn.net/cubesky/article/details/39478207 在很多动画当中,模型的位置.角度往往会发生变化,我们需要决定是否将模型再动画中发生的这些变换 ...

  3. 全球首款iOS模拟器出炉!在违法的边缘疯狂试探

    对于许多智能手机用户,特别是手游玩家来说,在手机屏幕的方寸之间进行操作显然并非特别方便,而且在多年之前,由于手机配置不足,也导致了用PC来玩手游的需求不断涌现.彼时,BlueStacks及夜神等一众A ...

  4. python中的计时器:timeit模块

    python中的计时器:timeit模块 (1) timeit - 通常在一段程序的前后都用上time.time()然后进行相减就可以得到一段程序的运行时间,不过python提供了更强大的计时库:ti ...

  5. 异步加载js文件的方法

    # 异步加载js文件 - js的加载默认是同步的,因为js是单线程执行,只能完成一件再执行下一件. - 一些外部引入的js文件可以因为文件太大,在加载资源的过程中会影响dom元素的加载,影响了用户体验 ...

  6. 110 Balanced Binary Tree 平衡二叉树

    给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过 1.案例 1:给出二叉树 [3,9,20,null,null,15,7] ...

  7. css水平垂直居中块整理

    1.绝对定位+负margin 兼容性很好,但需要指定子块的高度和宽度,以及负margin .wp{ position: relative; width: 200px; height: 200px; b ...

  8. yii2 加载静态资源

    1.在 assets/AppAsset 里定义方法 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright ( ...

  9. 搭建高可用mongodb集群—— 副本集

    转自:http://www.lanceyan.com/tech/mongodb/mongodb_repset1.html 在上一篇文章<搭建高可用MongoDB集群(一)——配置MongoDB& ...

  10. Magento 0元订单 支付方式 -- Magento 0 Subtotal Payment Method

    需求 现有购物网站支持2种支付方式,但是考虑到会出现如下情况: 在一个优惠活动中,假如有一些订单的总金额为0, 那么这些订单就不必跳转到支付网关,现有支付方式无法处理此种情况. 分析 当custome ...