<!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 input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Bootstrap"/>
</div><br />
<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-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Bootstrap" />
</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历练实例:分页的大小

    分页的大小 下面的实例演示了上表中所讨论的 class .pagination-* 的用法: <!DOCTYPE html><html><head><meta ...

  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历练实例:按钮组大小

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

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

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

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

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

  8. Bootstrap历练实例:带徽章的列表组

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

  9. Bootstrap历练实例:默认的列表组

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

随机推荐

  1. HDU5880【AC自动机】

    题意: 给出n个字符串,再给出一个字符串,把之前出现过的字符串全部变成* 思路: AC自动机,Trie树上存的值是一个字符串的长度,也就是往前的长度,然后倒着处理一遍. 感想: 第三题AC自动机,本来 ...

  2. [Xcode 实际操作]九、实用进阶-(21)使用“调试视图”查看各界面元素的层次顺序

    目录:[Swift]Xcode实际操作 本文将演示如何在程序运行期间,查看模拟器各界面元素的层次顺序. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import ...

  3. ubuntu 14 安装XML::Simple 模块

    最近需要用到perl 来解析xml 文件,从网上搜索了一下,大部分都建议使用XML::Simple 模块来解析,这里记录一下安装过程 方法一: 直接使用CPAN 来安装模块 $ perl -MCPAN ...

  4. 转 java ClassLoader

    http://blog.csdn.net/xyang81/article/details/7292380 http://www.ibm.com/developerworks/cn/java/j-lo- ...

  5. swap(2018.10.16)

    题意:给定一个{0,1,2,3,-,n-1}的排列 p. 一个{0,1,2 ,-,n-2}的排列 q 被认为是优美的排列, 当且仅当 q 满足下列条件 对排列 s={0,1,2,3,...,n-1}进 ...

  6. python如何用pip安装模块

    pip去python官网下载 我想写的是安装后怎么做,假设我们要安装pymysql模块 在python交互式模式中运行pip install pymysql 会抛出 语法错误,不知为何. 此时应该找到 ...

  7. 关于java和python同时使用rabbitmq时队列同名问题的探讨

    问题引出: 我们知道,进程之间是不能直接通信的,但是今天学习rabbitmq时发现一个奇怪的问题,即当我开启rabbitmq,用java写好的代码给rabbitmq发送完消息后并没有急着使用java去 ...

  8. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  9. ARP数据包

    结构ether_header定义了以太网帧首部:结构arphdr定义了其后的5个字段,其信息用于在任何类型的介质上传送ARP请求和回答:ether_arp结构除了包含arphdr结构外,还包含源主机和 ...

  10. python+selenium问题随记

    1.用PhantomJS跑程序,莫名遇到有些元素的text不能读取,后来发现,PhantomJS运行时也需要最大化,不是全屏模式的话也和界面浏览器一样会造成压盖无法读取信息,开始以为是PhantomJ ...