diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 253 |
1 files changed, 0 insertions, 253 deletions
@@ -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> |