markdownify input group
This commit is contained in:
Mark Otto
parent
5904bacbb3
commit
7d3ad78fc7
|
|
@ -3,123 +3,73 @@ layout: page
|
|||
title: Input group
|
||||
---
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="input-groups" class="page-header">Input groups</h1>
|
||||
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.
|
||||
|
||||
<p class="lead">Extend form controls by adding 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 a single <code>.form-control</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-warning">
|
||||
<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>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Don't mix with other components</h4>
|
||||
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
|
||||
</div>
|
||||
|
||||
<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-warning">
|
||||
<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>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Don't mix with other components</h4>
|
||||
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
|
||||
</div>
|
||||
## Basic example
|
||||
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
|
||||
|
||||
<h2 id="input-groups-basic">Basic example</h2>
|
||||
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
|
||||
<p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
|
||||
<p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
|
||||
<form class="bs-example bs-example-form" role="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 %}
|
||||
**We do not support multiple add-ons on a single side.**
|
||||
|
||||
**We do not support multiple form-controls in a single input group.**
|
||||
|
||||
{% example html %}
|
||||
<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>
|
||||
{% endhighlight %}
|
||||
{% endexample %}
|
||||
|
||||
<h2 id="input-groups-sizing">Sizing</h2>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
<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="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 input-group-sm">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
## Sizing
|
||||
|
||||
Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
|
||||
|
||||
{% example html %}
|
||||
<div class="input-group input-group-lg">
|
||||
<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">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes and radio addons
|
||||
|
||||
<h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
|
||||
<p>Place any checkbox or radio option within an input group's addon instead of text.</p>
|
||||
<form class="bs-example bs-example-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 -->
|
||||
<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>
|
||||
{% highlight html %}
|
||||
Place any checkbox or radio option within an input group's addon instead of text.
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
|
|
@ -127,43 +77,24 @@ title: Input group
|
|||
<input type="checkbox">
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div>
|
||||
</div>
|
||||
<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 -->
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Button addons
|
||||
|
||||
<h2 id="input-groups-buttons">Button addons</h2>
|
||||
<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-secondary" 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-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
|
|
@ -171,56 +102,22 @@ title: Input group
|
|||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
|
||||
<p></p>
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu" role="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-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="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 -->
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
## Buttons with dropdowns
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
|
|
@ -233,10 +130,10 @@ title: Input group
|
|||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
|
@ -249,66 +146,51 @@ title: Input group
|
|||
<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 %}
|
||||
|
||||
<h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="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-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="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>
|
||||
</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">
|
||||
<!-- Button and dropdown menu -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% endexample %}
|
||||
|
||||
## Segmented buttons
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="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>
|
||||
</div>
|
||||
<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-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue