diff options
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 308 |
1 files changed, 308 insertions, 0 deletions
diff --git a/components.html b/components.html index 1f685c2db..2b0d96bc0 100644 --- a/components.html +++ b/components.html @@ -477,6 +477,314 @@ base_url: "../" + + <!-- Input groups + ================================================== --> + <div class="bs-docs-section"> + <div class="page-header"> + <h1 id="input-groups">Input groups</h1> + </div> + <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 <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-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> + + <h2 id="input-groups-basic">Basic input group</h2> + <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 %} + + <h2 id="input-groups-sizes">Optional sizes</h2> + <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 %} + + + <h2 id="input-groups-checkboxes-radios">Checkboxes and radio buttons</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 %} +<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 %} + + + <h2 id="input-groups-buttons">Buttons instead of text</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-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 %} + + <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2> + <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 %} + + <h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2> + <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 %} + + + + <!-- Navs ================================================== --> <div class="bs-docs-section"> |