Bootstrap组件 - 输入框组
2017-06-14 本文已影响206人
蝴蝶结199007
知识点
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为
.input-group赋予.input-group-addon或.input-group-btn类，可以给.form-control的前面或后面添加额外的元素。
Tips：这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式；
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持；
不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。
向 .form-control 添加前缀或后缀元素的步骤如下：
· 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
· 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
· 把该 <span> 放置在 <input> 元素的前面或者后面。
基本实例
在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。
我们不支持在单个输入框组中添加多个表单控件。
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
尺寸
为 .input-group 添加相应的尺寸类：
.input-group-lg
.input-group-sm
.input-group-xs
实践
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件-输入框组</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--基本的输入框组-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="line"></div>
<!--做一个邮箱地址的组合-->
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" value="" name="" placeholder="邮箱地址" class="form-control" aria-label=""/>
<span class="input-group-addon">@</span>
<div class="input-group-btn">
<button type="button" value="" name="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
163.com
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">162.com</a></li>
<li><a href="#">qq.com</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
