rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18662 from patrickhlauke/docs-collapse-accessibility-patch1

Browse Source 
Docs: accessibility fix-up of collapsible content navbar, change site-wide main navbar
This commit is contained in:
Mark Otto 2016-01-03 19:14:14 -08:00
commit 09c3942986
2 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/_includes/nav-home.html
View File

@ -24,22 +24,36 @@
</nav>
{% endcomment %}
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
&#9776;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
<nav class="nav navbar-nav">
<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-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-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-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
</div>
<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;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="bd-main-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>
</li>
</ul>
</div>
</nav>
</header>

16
docs/components/navbar.md
View File

@ -240,16 +240,16 @@ Navbars can be statically placed (their default behavior), static without rounde
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
{% example html %}
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
{% endexample %}
@ -257,7 +257,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">