相信你在很多的网站页面上都看见过这样的输入框:
这样的输入框我们通过原生的手写css也能实现,但是使用Bootstrap的输入框组会让你实现起来更加简便。
实现在输入框前后添加元素的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框组</title>
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container" style="width: 300px;margin-top: 20px">
<form action="#">
<div class="input-group form-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
<span class="input-group-addon">$</span>
</div>
</form>
</div>
</body>
</html>
使用input-group,轻松在输入框前后添加文本或者按钮元素,使用方法如下:
1.用一个<div class="input-group">包裹住输入框input按钮。
2.给input加上class="form-control"样式。
3.在input的前/后添加一个<span class="input-group-addon"><span>,在span中添加文本或者其他元素。
如:左右边添加文本(效果如上图中第一个输入框所示):
<div class="input-group form-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
<span class="input-group-addon">$</span>
</div>
左边添加复选框:
<div class="input-group form-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control">
</div>
左边添加单选按钮:
<div class="input-group form-group">
<span class="input-group-addon">
<input type="radio"/>
</span>
<input type="text" class="form-control"/>
</div>
右边添加按钮(注意这时我们不再是在span中添加class .input-group-addon样式,而是添加input-group-btn。 <div class="input-group form-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-primary">搜索</button>
</span>
</div>
这样的组件很多情况下都会用到,比如说商城的搜索框等,我们可以通过改变button的颜色等样式来适应项目的需求。
本文参考资料来自:http://www.runoob.com/bootstrap/bootstrap-input-groups.html