rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Backport #30973

Browse Source 
Remove the class `.nav-item` from `.nav-link` inside the non `ul` or `ol` based navs.
This makes the consistency for `.nav-item` (This class will not be required on the `.nav-link`).
`.nav-item` was only required when you use `.nav-fill` or `.nav-justified` on the `.nav`. In other cases, it was redundant. And the purpose of `.nav-item` on `.nav-link`s can be achieved via flexbox utilities as well (Mentioned in the docs also).
This commit is contained in:
XhmikosR 2020-06-09 08:10:42 +03:00
parent 89be07b51f
commit 78a51cb12f
4 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/tests/unit/tab.js
View File

@ -350,15 +350,15 @@ $(function () {
var done = assert.async() var done = assert.async()
var tabsHTML = var tabsHTML =
'<nav class="nav nav-tabs" role="tablist">' + '<nav class="nav nav-tabs" role="tablist">' +
' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' + ' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' + ' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' + ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
'</nav>' + '</nav>' +
'<div class="tab-content">' + '<div class="tab-content">' +
' <div class="tab-pane" id="x-tab1" role="tabpanel">' + ' <div class="tab-pane" id="x-tab1" role="tabpanel">' +
' <nav class="nav nav-tabs" role="tablist">' + ' <nav class="nav nav-tabs" role="tablist">' +
' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' + ' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' +
' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' + ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' +
' </nav>' + ' </nav>' +
' <div class="tab-content">' + ' <div class="tab-content">' +
' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' + ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' +

2
scss/_nav.scss
View File

@ -92,6 +92,7 @@
// //
.nav-fill { .nav-fill {
> .nav-link,
.nav-item { .nav-item {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
@ -99,6 +100,7 @@
} }
.nav-justified { .nav-justified {
> .nav-link,
.nav-item { .nav-item {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;

8
site/docs/4.5/components/navbar.md
View File

@ -157,10 +157,10 @@ And because we use classes for our navs, you can avoid the list-based approach e
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div> </div>
</div> </div>
</nav> </nav>

32
site/docs/4.5/components/navs.md
View File

@ -195,14 +195,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `<a>` elements.
{% capture example %} {% capture example %}
<nav class="nav nav-pills nav-fill"> <nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Much longer nav link</a> <a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
@ -227,14 +227,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. Similar to the `.nav-fill` example using a `<nav>`-based navigation.
{% capture example %} {% capture example %}
<nav class="nav nav-pills nav-justified"> <nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Much longer nav link</a> <a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav> </nav>
{% endcapture %} {% endcapture %}
@ -376,9 +376,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example bd-example-tabs"> <div class="bd-example bd-example-tabs">
<nav> <nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div> </div>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
@ -397,9 +397,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
{% highlight html %} {% highlight html %}
<nav> <nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div> </div>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">