0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

Use more appropriate structure for site navigation

Use the structure as documented in
http://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content
- wrapping both the toggle and the navigation in a `<nav>`, using a
`<ul>` for the navigation items
This commit is contained in:
Patrick H. Lauke 2015-12-24 18:24:59 +00:00
parent 5a06173a53
commit 88064925a4

View File

@ -24,6 +24,7 @@
</nav>
{% endcomment %}
<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
@ -33,13 +34,26 @@
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<ul class="nav 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>
</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>
</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>
</li>
<li class="nav-item">
<a class="nav-item 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>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
</li>
</ul>
</div>
</nav>
</header>