---
- <!-- Glyphicons
- ================================================== -->
- <div class="bs-docs-section">
- <div class="page-header">
- <h1 id="glyphicons">Glyphicons</h1>
- </div>
-
- <h2 id="glyphicons-glyphs">Available glyphs</h2>
- <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
- <div class="bs-glyphicons">
- <ul class="bs-glyphicons-list">
- {% for iconClassName in site.data.glyphicons %}
- <li>
- <span class="glyphicon {{ iconClassName }}"></span>
- <span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
- </li>
- {% endfor %}
- </ul>
- </div>
+<!-- Glyphicons
+================================================== -->
+<div class="bs-docs-section">
+ <h1 id="glyphicons" class="page-header">Glyphicons</h1>
+
+ <h2 id="glyphicons-glyphs">Available glyphs</h2>
+ <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
+ <div class="bs-glyphicons">
+ <ul class="bs-glyphicons-list">
+ {% for iconClassName in site.data.glyphicons %}
+ <li>
+ <span class="glyphicon {{ iconClassName }}"></span>
+ <span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
- <h2 id="glyphicons-how-to-use">How to use</h2>
- <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
- <div class="bs-callout bs-callout-danger">
- <h4>Don't mix with other components</h4>
- <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p>
- </div>
+ <h2 id="glyphicons-how-to-use">How to use</h2>
+ <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
+ <div class="bs-callout bs-callout-danger">
+ <h4>Don't mix with other components</h4>
- <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
++ <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p>
+ </div>
{% highlight html %}
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}
- <!-- Button Groups
- ================================================== -->
- <div class="bs-docs-section">
- <div class="page-header">
- <h1 id="btn-groups">Button groups</h1>
- </div>
- <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
+<!-- Button Groups
+================================================== -->
+<div class="bs-docs-section">
+ <h1 id="btn-groups" class="page-header">Button groups</h1>
- <div class="bs-callout bs-callout-warning">
- <h4>Tooltips & popovers in button groups require special setting</h4>
- <p>When using tooltips or popovers on elements within a <code>.btn-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>
+ <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
- <div class="bs-callout bs-callout-info">
- <h3 id="btn-groups-single">Basic example</h3>
- <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
- <div class="bs-example">
- <div class="btn-group" style="margin: 9px 0 5px;">
- <button type="button" class="btn btn-default">Left</button>
- <button type="button" class="btn btn-default">Middle</button>
- <button type="button" class="btn btn-default">Right</button>
- </div>
++ <div class="bs-callout bs-callout-warning">
+ <h4>Tooltips & popovers in button groups require special setting</h4>
+ <p>When using tooltips or popovers on elements within a <code>.btn-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>
+
+ <h3 id="btn-groups-single">Basic example</h3>
+ <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
+ <div class="bs-example">
+ <div class="btn-group" style="margin: 9px 0 5px;">
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
+ </div>
{% highlight html %}
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
{% endhighlight %}
++ <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>
- <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>
+ <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 %}
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
</form>
{% endhighlight %}
-
<div class="bs-callout bs-callout-warning">
- <h4>Mobile device caveats</h4>
-
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
- </div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Mobile device caveats</h4>
+ <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+ </div>
- <div class="bs-callout bs-callout-danger">
- <div class="bs-callout bs-callout-warning">
- <h4>Always add labels</h4>
- <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
- </div>
++ <div class="bs-callout bs-callout-warning">
+ <h4>Always add labels</h4>
+ <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
+ </div>
- <h2 id="navbar-buttons">Buttons</h2>
- <p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
- <div class="bs-example">
- <nav class="navbar navbar-default" role="navigation">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
- <button type="button" class="btn btn-default navbar-btn">Sign in</button>
- </div>
+ <h2 id="navbar-buttons">Buttons</h2>
+ <p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
+ <div class="bs-example">
+ <nav class="navbar navbar-default" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
</div>
- </nav>
- </div>
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
+ <button type="button" class="btn btn-default navbar-btn">Sign in</button>
+ </div>
+ </div>
+ </nav>
+ </div>
{% highlight html %}
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
{% endhighlight %}
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endhighlight %}
+ <div class="bs-callout bs-callout-warning">
+ <h4>Don't mix form groups with input groups</h4>
+ <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+ </div>
- <h2 id="forms-inline">Inline form</h2>
- <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
- <div class="bs-callout bs-callout-danger">
- <h4>Requires custom widths</h4>
- <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
- </div>
- <div class="bs-callout bs-callout-warning">
- <h4>Always add labels</h4>
- <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
- </div>
- <div class="bs-example">
- <form class="form-inline" role="form">
- <div class="form-group">
- <label class="sr-only" for="exampleInputEmail2">Email address</label>
- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
- </div>
- <div class="form-group">
- <label class="sr-only" for="exampleInputPassword2">Password</label>
- <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Remember me
- </label>
- </div>
- <button type="submit" class="btn btn-default">Sign in</button>
- </form>
- </div><!-- /example -->
+ <h2 id="forms-inline">Inline form</h2>
+ <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
+ <div class="bs-callout bs-callout-danger">
+ <h4>Requires custom widths</h4>
+ <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
+ </div>
- <div class="bs-callout bs-callout-danger">
++ <div class="bs-callout bs-callout-warning">
+ <h4>Always add labels</h4>
+ <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
+ </div>
+ <div class="bs-example">
+ <form class="form-inline" role="form">
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputEmail2">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+ </div>
+ <div class="form-group">
+ <label class="sr-only" for="exampleInputPassword2">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ <button type="submit" class="btn btn-default">Sign in</button>
+ </form>
+ </div><!-- /example -->
{% highlight html %}
<form class="form-inline" role="form">
<div class="form-group">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
- <div class="bs-callout bs-callout-warning">
- <div class="bs-callout bs-callout-info">
- <h4>Responsive images</h4>
- <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
- </div>
-
++ <div class="bs-callout bs-callout-info">
+ <h4>Responsive images</h4>
+ <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div>
+</div>
- <!-- Helpers
- ================================================== -->
- <div class="bs-docs-section">
- <div class="page-header">
- <h1 id="helper-classes">Helper classes</h1>
- </div>
- <h3 id="helper-classes-colors">Contextual colors</h3>
- <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
- <div class="bs-example">
- <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
- <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
- <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
- </div>
+<!-- Helpers
+================================================== -->
+<div class="bs-docs-section">
+ <h1 id="helper-classes" class="page-header">Helper classes</h1>
+
+ <h3 id="helper-classes-colors">Contextual colors</h3>
+ <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
+ <div class="bs-example">
+ <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+ <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+ <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+ <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+ </div>
{% highlight html %}
<p class="text-muted">...</p>
<p class="text-primary">...</p>
projects / thirdparty / bootstrap.git / commitdiff
