diff options
author | Rohit Sharma <rohit2sharma95@gmail.com> | 2020-06-05 21:57:35 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-06-09 07:48:58 +0300 |
commit | e140ff92ed47a6dfcc6ae68b17fcc9c1732f10de (patch) | |
tree | 69622c799560eb8aa8e6a461f39b59425a3ebfa0 | |
parent | 92a728eae6b0c4f3154c50d8f91fd96a5c07217c (diff) |
Remove .nav-item from .nav-link to make it consistent
- Closes #28423
-rw-r--r-- | js/tests/unit/tab.spec.js | 10 | ||||
-rw-r--r-- | scss/_nav.scss | 2 | ||||
-rw-r--r-- | site/content/docs/5.0/components/navbar.md | 8 | ||||
-rw-r--r-- | site/content/docs/5.0/components/navs.md | 32 |
4 files changed, 27 insertions, 25 deletions
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 8bf172d10d..a08fec20d6 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -470,15 +470,15 @@ describe('Tab', () => { it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '<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 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-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</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-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', + ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>', '</nav>', '<div class="tab-content">', ' <div class="tab-pane" id="x-tab1" role="tabpanel">', ' <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 id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</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-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>', ' </nav>', ' <div class="tab-content">', ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>', diff --git a/scss/_nav.scss b/scss/_nav.scss index 60ad27a553..84d522405f 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -92,6 +92,7 @@ // .nav-fill { + > .nav-link, .nav-item { flex: 1 1 auto; text-align: center; @@ -99,6 +100,7 @@ } .nav-justified { + > .nav-link, .nav-item { flex-basis: 0; flex-grow: 1; diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index bf11527e07..d93d37dc1f 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -168,10 +168,10 @@ And because we use classes for our navs, you can avoid the list-based approach e </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> - <a class="nav-item nav-link active" aria-current="page" href="#">Home</a> - <a class="nav-item nav-link" href="#">Features</a> - <a class="nav-item nav-link" href="#">Pricing</a> - <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + <a class="nav-link active" aria-current="page" href="#">Home</a> + <a class="nav-link" href="#">Features</a> + <a class="nav-link" href="#">Pricing</a> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </div> </div> </div> diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md index ba82902426..f05a5763da 100644 --- a/site/content/docs/5.0/components/navs.md +++ b/site/content/docs/5.0/components/navs.md @@ -187,14 +187,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif </ul> {{< /example >}} -When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. +When using a `<nav>`-based navigation. {{< example >}} <nav class="nav nav-pills nav-fill"> - <a class="nav-item nav-link active" aria-current="page" href="#">Active</a> - <a class="nav-item nav-link" href="#">Much longer nav link</a> - <a class="nav-item nav-link" href="#">Link</a> - <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> + <a class="nav-link" href="#">Much longer nav link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> {{< /example >}} @@ -217,14 +217,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ </ul> {{< /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 >}} <nav class="nav nav-pills nav-justified"> - <a class="nav-item nav-link active" aria-current="page" href="#">Active</a> - <a class="nav-item nav-link" href="#">Much longer nav link</a> - <a class="nav-item nav-link" href="#">Link</a> - <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> + <a class="nav-link" href="#">Much longer nav link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> {{< /example >}} @@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or <div class="bd-example"> <nav> <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-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-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 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" 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-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <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 >}} <nav> <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-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-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 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" 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-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> |