rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-03 03:29:21 +01:00
Code Issues Actions Packages Releases Activity

markdownify input group

Browse Source
This commit is contained in:
Mark Otto 2014-07-13 01:12:02 -07:00
parent 5904bacbb3
commit 7d3ad78fc7
1 changed files with 102 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
docs/components/input-group.md
View File

@ -3,10 +3,7 @@ layout: page
title: Input group title: Input group
--- ---
<div class="bs-docs-section"> 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`.
<h1 id="input-groups" class="page-header">Input groups</h1>
<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"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
@ -21,12 +18,15 @@ title: Input group
<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> <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>
## Basic example
<h2 id="input-groups-basic">Basic example</h2> Place one add-on or button on either side of an input. You may also place one on both sides of an input.
<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> **We do not support multiple add-ons on a single side.**
<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"> **We do not support multiple form-controls in a single input group.**
{% example html %}
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
@ -42,28 +42,13 @@ title: Input group
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> {% endexample %}
{% 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"> ## Sizing
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group"> 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.
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
<h2 id="input-groups-sizing">Sizing</h2> {% example html %}
<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"> <div class="input-group input-group-lg">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
@ -78,28 +63,13 @@ title: Input group
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
</form> {% endexample %}
{% highlight html %}
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group"> ## Checkboxes and radio addons
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm"> Place any checkbox or radio option within an input group's addon instead of text.
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
{% endhighlight %}
{% example html %}
<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="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@ -107,43 +77,24 @@ title: Input group
<input type="checkbox"> <input type="checkbox">
</span> </span>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"> <span class="input-group-addon">
<input type="radio"> <input type="radio">
</span> </span>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
</div><!-- /.row --> </div>
</form> {% endexample %}
{% highlight html %}
<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 -->
{% endhighlight %}
## Button addons
<h2 id="input-groups-buttons">Button addons</h2> 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.
<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"> {% example html %}
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@ -151,42 +102,22 @@ title: Input group
<button class="btn btn-secondary" type="button">Go!</button> <button class="btn btn-secondary" type="button">Go!</button>
</span> </span>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button> <button class="btn btn-secondary" type="button">Go!</button>
</span> </span>
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
</div><!-- /.row --> </div>
</form> {% endexample %}
{% highlight html %}
<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 -->
{% endhighlight %}
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2> ## Buttons with dropdowns
<p></p>
<form class="bs-example bs-example-form" role="form"> {% example html %}
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@ -199,10 +130,10 @@ title: Input group
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
@ -215,48 +146,15 @@ title: Input group
<li class="divider"></li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div>
</div><!-- /input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
</div><!-- /.row --> </div>
</form> {% endexample %}
{% 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-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 -->
{% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented buttons</h2> ## Segmented buttons
<form class="bs-example bs-example-form" role="form">
{% example html %}
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@ -274,8 +172,8 @@ title: Input group
</ul> </ul>
</div> </div>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div><!-- /.input-group --> </div>
</div><!-- /.col-lg-6 --> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
@ -292,23 +190,7 @@ title: Input group
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </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 %}
</div> </div>
{% endexample %}