mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
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
This commit is contained in:
Geremia Taglialatela
Mark Otto
parent
f2829dd6ea
commit
db44e4b311
@ -35,24 +35,24 @@
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
<a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
<a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
<a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
<a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -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>'
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user