diff options
| author | Mark Otto <[email protected]> | 2013-10-17 14:53:50 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-10-17 14:53:50 -0700 |
| commit | 4c043b7d5f3f9d1f7c4ebe1e82c77b29d282fc39 (patch) | |
| tree | 78c0abc8582aea2fab7b66b3a3ec78c140474782 /components.html | |
| parent | bb30f6355a6ef9507b6ee65c820febb857bc6dfc (diff) | |
| parent | 70d85be3b79f16eda4e21d533e6e7436d2273c7f (diff) | |
| download | bootstrap-4c043b7d5f3f9d1f7c4ebe1e82c77b29d282fc39.tar.xz bootstrap-4c043b7d5f3f9d1f7c4ebe1e82c77b29d282fc39.zip | |
Merge pull request #11096 from twbs/navbar-button-docs
Resolves #10923
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/components.html b/components.html index b4040dbe9..dbe981c2a 100644 --- a/components.html +++ b/components.html @@ -2133,15 +2133,15 @@ base_url: "../" </nav> {% endhighlight %} -<div class="bs-callout bs-callout-danger"> - <h4>Plugin dependency</h4> - <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p> -</div> + <div class="bs-callout bs-callout-danger"> + <h4>Plugin dependency</h4> + <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p> + </div> -<div class="bs-callout bs-callout-warning"> - <h4>Make navbars accessible</h4> - <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> -</div> + <div class="bs-callout bs-callout-warning"> + <h4>Make navbars accessible</h4> + <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> + </div> <h2 id="navbar-forms">Forms</h2> @@ -2177,14 +2177,14 @@ base_url: "../" </form> {% endhighlight %} -<div class="bs-callout bs-callout-danger"> - <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-danger"> + <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>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p> + <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="navbar-header"> @@ -2205,6 +2205,10 @@ base_url: "../" <button type="button" class="btn btn-default navbar-btn">Sign in</button> {% endhighlight %} + <div class="bs-callout bs-callout-warning"> + <h4>Context-specific usage</h4> + <p>Like the standard <a href="{{ page.base_url }}css#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p> + </div> <h2 id="navbar-text">Text</h2> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> |