快捷導(dǎo)航

bootstrap輸入框組代碼分享

更新時間：2016年06月07日 10:03:50 投稿：mrr

Bootstrap 支持的另一個特性，輸入框組,輸入框組擴展自表單控件.下面小編給大家介紹bootstrap輸入框組的代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧

Bootstrap 支持的另一個特性，輸入框組。輸入框組擴展自表單控件。使用輸入框組，可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。

向輸入域添加前綴和后綴的內(nèi)容

<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>

復(fù)選框和單選插件作為輸入框組的前綴或者后綴元素

<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">下拉菜單標(biāo)題</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">下拉菜單標(biāo)題</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輸入框組代碼分享，希望對大家有所幫助！

您可能感興趣的文章: