<!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-addon">@</span>
<input type="text" class="form-control" placeholder="Bootstrap"/>
</div><br />
<div class="input-group">
<input type="button" class="form-control" />
<span class="input-group-addon">.00</span>
</div><br />
<div class="input-group">
<span class="input-group-addon">￥</span>
<input type="text" class="form-control" />
<span class="input-group-addon">.00</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历练实例：按钮组大小

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

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

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

  4. bootstrap历练实例：按钮作为输入框组前缀或后缀

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

  5. Bootstrap历练实例：向列表组添加内容

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

  6. Bootstrap历练实例：向列表组添加链接

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

  7. Bootstrap历练实例：带徽章的列表组

    向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...

  8. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

  9. Bootstrap历练实例：带列表组的面板

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

随机推荐

  1. 小程序接收from表单数据（实例）

    html部分 <form bindsubmit='sub'> <view class="con"> <view class="con-nr& ...

  2. [Xcode 实际操作]九、实用进阶-(31)为IAP(支付方式)内购功能的具体实现和测试

    目录:[Swift]Xcode实际操作 本文将演示如何为IAP(支付方式)内购功能的具体实现和测试. 内购是苹果市场上的一种常见的盈利方式. 在项目中确保已经安装了第三方库[Pod],双击[Podfi ...

  3. Django (六) 视图 views

    views 1. 视图及HttpRequest 和HttpResponse Django中的视图主要用来接受Web请求,并做出响应. 视图的本质就是一个Python中的函数 视图的响应分为两大类 1) ...

  4. mysql 巧用存储过程

    根据距离排序 CREATE DEFINER=`ln` PROCEDURE `Proc_4`(IN `lon1` double,IN `lat1` double,IN `PageStart` int,I ...

  5. eclipse打开jsp的方式怎么设置成默认

    https://jingyan.baidu.com/article/4ae03de34137be3eff9e6b93.html

  6. 使用高性能Pipelines构建.NET通讯程序

    .NET Standard支持一组新的API,System.Span, System.Memory,还有System.IO.Pipelines.这几个新的API极大了提升了.NET程序的效能,将来.N ...

  7. 20180401 lambda表达式

    ##lambda表达式:替代简单函数用 (反而增加了代码阅读难度,不建议使用) def fg(a1,a2): return a1+a2 qq = lambda a1,a2 : a1+a2 a1 = 1 ...

  8. mysql join操作

    join的类型 1．  内联结:将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结. 2．  外联结:分为外左联结和外右联结. 案例背景 create table java (name ...

  9. MD5加密的方法

    #region MD5加密 /// <summary> /// MD5加密 /// </summary> /// <param name="strPwd&quo ...

  10. MVC ef 连接数据库

    1.创建数据库 2.创建表 <pre name="code" class="sql">CREATE TABLE [dbo].[Student]( [ ...