bootstrap输入框组代码分享

前端技术 2023/08/09 JavaScript

Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

向输入域添加前缀和后缀的内容

<div style=\"padding: 100px 100px 10px;\">
<form class=\"bs-example bs-example-form\" role=\"form\">
<div class=\"input-group input-group-lg\">
<span class=\"input-group-addon\">@</span>
<input type=\"text\" class=\"form-control\" placeholder=\"twitterhandle\">
</div>
<br>
<div class=\"input-group\">
<input type=\"text\" 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>
</form>
</div>

复选框和单选插件作为输入框组的前缀或者后缀元素

<div style=\"padding: 100px 100px 10px;\">
<form class=\"bs-example bs-example-form\" role=\"form\">
<div class=\"row\">
<div class=\"col-lg-6\">
<div class=\"input-group\">
<span class=\"input-group-addon\">
<input type=\"checkbox\">
</span>
<input type=\"text\" class=\"form-control\">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class=\"col-lg-6\">
<div class=\"input-group\">
<span class=\"input-group-addon\">
<input type=\"radio\">
</span>
<input type=\"text\" class=\"form-control\">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>

按钮作为输入框组的前缀或者后缀元素

<div style=\"padding: 100px 100px 10px;\">
<form class=\"bs-example bs-example-form\" role=\"form\">
<div class=\"row\">
<div class=\"col-lg-6\">
<div class=\"input-group\">
<span class=\"input-group-btn\">
<button class=\"btn btn-default\" type=\"button\">
Go!
</button>
</span>
<input type=\"text\" class=\"form-control\">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class=\"col-lg-6\">
<div class=\"input-group\">
<input type=\"text\" class=\"form-control\">
<span class=\"input-group-btn\">
<button class=\"btn btn-default\" type=\"button\">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>
class=\"input-group-btn\"
<div class=\"input-group\">
<div class=\"input-group-btn\">
<button type=\"button\" class=\"btn btn-default 
dropdown-toggle\" data-toggle=\"dropdown\">
下拉菜单 
<span class=\"caret\"></span>
</button>
<ul class=\"dropdown-menu\">
<li><a href=\"#\">功能</a></li>
<li><a href=\"#\">另一个功能</a></li>
<li><a href=\"#\">其他</a></li>
<li class=\"divider\"></li>
<li><a href=\"#\">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
<input type=\"text\" class=\"form-control\">
</div><!-- /input-group -->
<div class=\"input-group\">
<div class=\"input-group-btn\">
<button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\">
<span class=\"glyphicon glyphicon-music\"></span> GO
<span class=\"caret\"></span>
</button>
<ul class=\"dropdown-menu\">
<li class=\"dropdown-header\">下拉菜单标题</li>
<li><a href=\"#\">A</a></li>
<li class=\"divider\"><</li>
<li><a href=\"#\">B</a></li>
</ul> 
</div>
<input type=\"text\" class=\"form-control\"> 
</div>
<br>
<div class=\"input-group\">
<div class=\"input-group-btn\">
<button type=\"button\" class=\"btn btn-primary\">
<span class=\"glyphicon glyphicon-music\"></span> GO
</button> 
<button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\">
<span class=\"caret\"></span>
</button>
<ul class=\"dropdown-menu\">
<li class=\"dropdown-header\">下拉菜单标题</li>
<li><a href=\"#\">A</a></li>
<li class=\"divider\"><</li>
<li><a href=\"#\">B</a></li>
</ul> 
</div>
<input type=\"text\" class=\"form-control\"> 
</div>
<br>

以上所述是小编给大家介绍的bootstrap输入框组代码分享，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/615

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案