<!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. HDU1598【最小生成树拓展】

    参考自 http://www.cnblogs.com/nanke/archive/2012/02/13/2350008.html PS: 没想到最小生成树的kruskal算法从小到大枚举边,然后MAX ...

  2. OPENGL_单位长度对应屏幕像素

    gluPerspective(GLdouble fovy,GLdouble aspect,GLdouble zNear,GLdouble zFar) fovy:视角,指定视景体的视野的角度,以度数为单 ...

  3. hyperledger fabric 1.0.5 分布式部署 (四)

    chaincode 的开发 作者在hyperledger fabric 1.0.5 分布式部署 (三)中向读者介绍了如何开发fabric 的chaincode,那么实际上chaincode 还有其他的 ...

  4. c++中初始化列表的初始化变量顺序问题

    例题来看:请问下面程序打印出的结果是什么? #include <iostream> #include <string> using namespace std; class b ...

  5. C# 面向对象之继承

    Object是所有类的基类 1.在C#中一个类可以继承另一个类(密封类除外,静态类是密封的不能被继承); 2.被继承的类被成为基类(父类);继承的类被成为派生类(子类); 3.子类将获得父类除构造函数 ...

  6. UVA10129:Play on Words(欧拉回路)

    Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has to s ...

  7. centos7安装mysql5.7 使用yum

    https://blog.csdn.net/z13615480737/article/details/78906598 使用yum,比较简单,不用考虑版本依赖问题

  8. Vue全家桶开发笔记

    state 中没有属性的情况下,新增属性不会触发mutations修改. 例: commit('change', { c: 3, d: 4, }); state: { test: { a: 1, b: ...

  9. Autofac框架使用遇到的问题

    1) 安全透明方法“Autofac.Integration.Mvc.RegistrationExtensions.RegisterControllers(Autofac.ContainerBuilde ...

  10. 使用express4.x版、Jade模板以及mysql重写《nodejs开发指南》微博实例

    最近阅读<nodejs开发指南>一书,书是不错的,然而其微博代码示例用的是express3.x,用些过时了,运行代码出现不少bug(我电脑安的是express4.x),于是用express ...