diff options
author | Geremia Taglialatela <tagliala.dev@gmail.com> | 2017-04-12 17:06:52 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2017-05-28 01:21:49 +0300 |
commit | db44e4b311317ef760f8412cc33c84146959b248 (patch) | |
tree | daf89d9f3d96fab2276ff368ec6969c5681a494e /js/tests | |
parent | f2829dd6ea10d1af7e451397f7228087cff95b8a (diff) |
Update nav and navbar HTML markup
According to the docs, you just need to apply the `navbar-nav` to an
`<ul>` tag in a list-based navbar. In fact, `navbar-nav` seems to
override all the css properties set by `nav`.
Also, `nav-item` class should be used only for `<li>` tags, or in
conjunction with `<a>` tags to entirely avoid the list-based approach.
This commit removes the redundant `nav` class from `navbar-nav` `<ul>`
tags, moves `nav-item` from `<a>` tags to `<li>` tags and properly
adds `nav-item` class to `<li>` tags where missing.
Refs:
* https://v4-alpha.getbootstrap.com/components/navs/
* https://v4-alpha.getbootstrap.com/components/navbar/#nav
Diffstat (limited to 'js/tests')
-rw-r--r-- | js/tests/unit/scrollspy.js | 62 | ||||
-rw-r--r-- | js/tests/visual/modal.html | 2 |
2 files changed, 32 insertions, 32 deletions
diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index ed84cc794a..a6a72e7a67 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -53,8 +53,8 @@ $(function () { + '<div class="topbar-inner">' + '<div class="container" id="ss-target">' + '<ul class="nav">' - + '<li><a href="#masthead">Overview</a></li>' - + '<li><a href="#detail">Detail</a></li>' + + '<li class="nav-item"><a href="#masthead">Overview</a></li>' + + '<li class="nav-item"><a href="#detail">Detail</a></li>' + '</ul>' + '</div>' + '</div>' @@ -98,8 +98,8 @@ $(function () { + '<div class="topbar-inner">' + '<div class="container" id="ss-target">' + '<ul class="nav">' - + '<li><a href="#masthead">Overview</a></li>' - + '<li><a href="#detail">Detail</a></li>' + + '<li class="nav-item"><a href="#masthead">Overview</a></li>' + + '<li class="nav-item"><a href="#detail">Detail</a></li>' + '</ul>' + '</div>' + '</div>' @@ -140,10 +140,10 @@ $(function () { var sectionHTML = '<div id="header" style="height: 500px;"></div>' + '<nav id="navigation" class="navbar">' - + '<ul class="nav navbar-nav">' - + '<li class="active"><a class="nav-link" id="one-link" href="#one">One</a></li>' - + '<li><a class="nav-link" id="two-link" href="#two">Two</a></li>' - + '<li><a class="nav-link" id="three-link" href="#three">Three</a></li>' + + '<ul class="navbar-nav">' + + '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>' + + '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>' + + '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>' + '</ul>' + '</nav>' + '<div id="content" style="height: 200px; overflow-y: auto;">' @@ -173,8 +173,8 @@ $(function () { var navbarHtml = '<nav class="navbar">' + '<ul class="nav">' - + '<li><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' - + '<li><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' + + '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' + + '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' + '</ul>' + '</nav>' var contentHtml = @@ -285,9 +285,9 @@ $(function () { var done = assert.async() var navbarHtml = '<nav id="navigation" class="navbar">' + '<ul class="nav">' - + '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>' + + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' + '<ul class="nav">' - + '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + '</ul>' + '</li>' + '</ul>' @@ -406,10 +406,10 @@ $(function () { var sectionHTML = '<div id="header" style="height: 500px;"></div>' + '<nav id="navigation" class="navbar">' - + '<ul class="nav navbar-nav">' - + '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>' - + '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>' - + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>' + + '<ul class="navbar-nav">' + + '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' + + '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' + + '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' + '</ul>' + '</nav>' $(sectionHTML).appendTo('#qunit-fixture') @@ -447,10 +447,10 @@ $(function () { var sectionHTML = '<div id="header" style="height: 500px;"></div>' + '<nav id="navigation" class="navbar">' - + '<ul class="nav navbar-nav">' - + '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>' - + '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>' - + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>' + + '<ul class="navbar-nav">' + + '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' + + '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' + + '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' + '</ul>' + '</nav>' $(sectionHTML).appendTo('#qunit-fixture') @@ -490,11 +490,11 @@ $(function () { var navbarHtml = '<nav class="navbar">' + '<ul class="nav">' - + '<li><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' - + '<li><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' - + '<li><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' - + '<li><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' - + '<li><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' + + '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' + + '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' + + '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' + + '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' + + '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' + '</ul>' + '</nav>' var contentHtml = @@ -538,9 +538,9 @@ $(function () { var $navbar = $( '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' + '<ul class="nav">' - + '<li><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>' - + '<li><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>' - + '<li><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>' + + '<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>' + + '<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>' + + '<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>' + '</ul>' + '</nav>' ) @@ -582,9 +582,9 @@ $(function () { var $navbar = $( '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' + '<ul class="nav">' - + '<li><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>' - + '<li><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>' - + '<li><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>' + + '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>' + + '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>' + + '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>' + '</ul>' + '</nav>' ) diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 90b814e674..def62b031f 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -17,7 +17,7 @@ <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> <div class="collapse navbar-expand-md" id="navbarResponsive"> <a class="navbar-brand" href="#">This shouldn't jump!</a> - <ul class="nav navbar-nav"> + <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> |