mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

v4: Flexbox nav options (#21201)

Browse Source 
* Add some flexbox nav components
  - Includes .nav-justified for inline, tab, and pill nav components
  - Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit
This commit is contained in:
Mark Otto
2016-11-25 17:46:13 -08:00
committed by GitHub
parent f2b98f6b2c
commit d315c9499d
2 changed files with 114 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/navs.md
+92 -4
View File
@@ -16,7 +16,9 @@ Navigation available in Bootstrap share general markup and styles, from the base
If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
## Base nav
## Examples
### Base nav
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**.
@@ -48,7 +50,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
</nav>
{% endexample %}
## Inline
### Inline
Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
@@ -80,7 +82,7 @@ The same works for a navigation built with lists.
</ul>
{% endexample %}
## Tabs
### 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).
@@ -101,7 +103,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
</ul>
{% endexample %}
## Pills
### Pills
Take that same HTML, but use `.nav-pills` instead:
@@ -210,6 +212,92 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</ul>
{% endexample %}
## Flexbox variations
When in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), tabbed and pilled navigation components gain access to additional nav styles. **These aren't available in default Bootstrap** due to a bug in table styles and responsive behavior.
### Justified nav
Create equal-width links in a navigation component by adding `.nav-justified` to a `.nav` component. This works with the inline, tab, and pill variants.
Using the inline nav:
{% example html %}
<ul class="nav nav-inline nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<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 disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
You can also use it on tabs:
{% example html %}
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<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 disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
And pills, too:
{% example html %}
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<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 disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
### Centered nav
Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
{% example html %}
<ul class="nav nav-inline d-flex flex-items-xs-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<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 disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.