diff options
| author | Mark Otto <[email protected]> | 2015-11-29 19:38:44 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-11-29 19:38:44 -0800 |
| commit | 389a284766ece0ae48efa7155054727cb9e9a8c2 (patch) | |
| tree | 5186490dae2dd1d3174263f6ce3777b4e70f0971 /docs/components | |
| parent | 1a30d12525965488bb57b83a191b402fdae25f74 (diff) | |
| download | bootstrap-389a284766ece0ae48efa7155054727cb9e9a8c2.tar.xz bootstrap-389a284766ece0ae48efa7155054727cb9e9a8c2.zip | |
fixes #18295. improve .nav-inline usefulness and document the classes as well
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/navs.md | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/docs/components/navs.md b/docs/components/navs.md index bea1109ce..aeac3ed3a 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l </nav> {% endexample %} +## Inline + +Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line. + +{% example html %} +<nav class="nav nav-inline"> + <a class="nav-link active" href="#">Active</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Another link</a> + <a class="nav-link disabled" href="#">Disabled</a> +</nav> +{% endexample %} + +The same works for a navigation build with lists. + +{% example html %} +<ul class="nav nav-inline"> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Another link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> +</ul> +{% endexample %} + ## Tabs Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior). |