2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03: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
2017-04-12 16:06:52 +02:00
committed by Mark Otto
parent f2829dd6ea
commit db44e4b311
3 changed files with 39 additions and 39 deletions
+7 -7
View File
@@ -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>