mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-21 13:24:08 +03:00
Input groups overhaul
* Moves input groups CSS into separate file * Moves input groups docs into the Components page * Add support for radios and checkboxes in input groups to fix #8679
This commit is contained in:
Mark Otto
@@ -1533,259 +1533,6 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="forms-input-groups">Input groups</h3>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Tooltips & popovers in input groups require special setting</h4>
|
||||
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</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>
|
||||
{% highlight html %}
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Optional sizes</h3>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-large">@</span>
|
||||
<input type="text" class="form-control input-large" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-small">@</span>
|
||||
<input type="text" class="form-control input-small" placeholder="Username">
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-large">@</span>
|
||||
<input type="text" class="form-control input-large" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-small">@</span>
|
||||
<input type="text" class="form-control input-small" placeholder="Username">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Buttons instead of text</h3>
|
||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||
<form class="bs-example bs-example-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 -->
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<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 -->
|
||||
<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 -->
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Button dropdowns</h3>
|
||||
<p></p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Segmented dropdown groups</h3>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /.input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<!-- Button and dropdown menu -->
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn btn-group">
|
||||
<!-- Button and dropdown menu -->
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="forms-control-sizes">Control sizing</h2>
|
||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user