rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Remove .nav-item from .nav-link to make it consistent

Browse Source 
- Closes #28423
This commit is contained in:
Rohit Sharma 2020-06-06 00:27:35 +05:30 committed by XhmikosR
parent 92a728eae6
commit e140ff92ed
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.spec.js
View File

@ -470,15 +470,15 @@ describe('Tab', () => {
it('should handle nested tabs', done => { it('should handle nested tabs', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<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/content/docs/5.0/components/navbar.md
View File

@ -168,10 +168,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" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</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>
</div> </div>

32
site/content/docs/5.0/components/navs.md
View File

@ -187,14 +187,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif
</ul> </ul>
{{< /example >}} {{< /example >}}
When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. When using a `<nav>`-based navigation.
{{< example >}} {{< example >}}
<nav class="nav nav-pills nav-fill"> <nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link active" aria-current="page" 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>
{{< /example >}} {{< /example >}}
@ -217,14 +217,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
</ul> </ul>
{{< /example >}} {{< /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.
{{< example >}} {{< example >}}
<nav class="nav nav-pills nav-justified"> <nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link active" aria-current="page" 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>
{{< /example >}} {{< /example >}}
@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example"> <div class="bd-example">
<nav> <nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> <div class="nav nav-tabs mb-3" 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">
@ -381,9 +381,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">