<!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. Qt解析CSV文件

    最近需要解析Excel文件,于是顺带写了解析CSV的代码 定义数据类型LX::Sheet #ifndef LX_H #define LX_H #include <QString> #inc ...

  2. HDU1059 【DP·二进制数优化】

    题意: 有6种不同价值的物品,然后问你能不能分成两半使得两堆价值相等: 思路: 一共有20000*6=120000 多的价值, 总共背包有20000个,价值最大是120000,看看能不能DP到valu ...

  3. laravel定义全局变量并输出（实例）

    在config目录创建一个 bl.php ,内容如下 <?php return [ 'IND' => "1321232", 'das' => "奥术大师 ...

  4. [模板]manacher

    這麼簡單的算法現在才學...... https://segmentfault.com/a/1190000008484167?utm_source=tag-newest#articleHeader3 h ...

  5. mongodb-CURD

    插入 import pymongo conn = pymongo.MongoClient('mongodb://192.168.10.10:27017') mydb = conn['myDB'] my ...

  6. Codeforces 1139D（推式子+dp）

    题目传送 推公式博客传送 推完式子就是去朴素地求就行了Orz const int maxn = 1e5 + 5; const int mod = 1e9 + 7; int m, mu[maxn], v ...

  7. HDU4089（概率dp）

    题解 要点: 1.转移方程分三段,这个……有点复杂但是还好吧……大概就是求啥设啥,然后只通过可行的状态过来.在纸上记一记. 2.每层里面必须先求dp[i][i],简直就是我求我自己……用类似进制数那种 ...

  8. 正则表达式匹配URL——给URL地址加上<a> 链接

    <?php function replace_url ($content) { if (empty($content)) return; //给URL地址加上 <a> 链接 $pre ...

  9. 学习typescript(二)

    学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...

  10. 实现如下语法的功能：var a = (5).plus(3).minus(6);

    Number.prototype.plus= function(val){ return parseInt(this)+val; }; Number.prototype.minus= function ...