Skip to content

B
bootstrap
Commit a19ed6dc authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch 'aria-nav' of https://github.com/kevinSuttle/bootstrap into kevinSuttle-aria-nav

parents 6b6241fe aa454134
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 64 deletions
_includes/nav-main.html
View file @ a19ed6dc
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container"> <div class="container">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a> <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
<div class="nav-collapse collapse bs-navbar-collapse"> <nav class="nav-collapse collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}> <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="{{ page.base_url }}getting-started">Getting started</a> <a href="{{ page.base_url }}getting-started">Getting started</a>
...@@ -25,6 +25,6 @@ ...@@ -25,6 +25,6 @@
<a href="{{ page.base_url }}customize">Customize</a> <a href="{{ page.base_url }}customize">Customize</a>
</li> </li>
</ul> </ul>
</div> </nav>
</div> </div>
</div> </div>
components.html
View file @ a19ed6dc
...@@ -940,6 +940,7 @@ base_url: "../" ...@@ -940,6 +940,7 @@ base_url: "../"
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
...@@ -956,6 +957,7 @@ base_url: "../" ...@@ -956,6 +957,7 @@ base_url: "../"
</ul> </ul>
</li> </li>
</ul> </ul>
</nav>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
...@@ -1020,24 +1022,24 @@ base_url: "../" ...@@ -1020,24 +1022,24 @@ base_url: "../"
<h2 id="navbar-basic">Basic navbar</h2> <h2 id="navbar-basic">Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p> <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> </ul>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> </ul>
</div> </nav>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4> <h4>Make navbars accessible</h4>
...@@ -1049,9 +1051,9 @@ base_url: "../" ...@@ -1049,9 +1051,9 @@ base_url: "../"
<h3 id="navbar-brand">Brand</h3> <h3 id="navbar-brand">Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p> <p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
...@@ -1060,13 +1062,13 @@ base_url: "../" ...@@ -1060,13 +1062,13 @@ base_url: "../"
<h3 id="navbar-nav">Nav links</h3> <h3 id="navbar-nav">Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p> <p>Nav items are simple to add via unordered lists.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li> <li class="disabled"><a href="#">Disabled</a></li>
</ul> </ul>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
...@@ -1080,14 +1082,14 @@ base_url: "../" ...@@ -1080,14 +1082,14 @@ base_url: "../"
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </nav>
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<select name="" id="" class="form-control" style="width: 200px;"> <select name="" id="" class="form-control" style="width: 200px;">
<option value="1">1</option> <option value="1">1</option>
...@@ -1097,17 +1099,17 @@ base_url: "../" ...@@ -1097,17 +1099,17 @@ base_url: "../"
</select> </select>
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </nav>
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<input type="checkbox"> <input type="checkbox">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </nav>
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline"> <label class="checkbox-inline">
...@@ -1115,7 +1117,7 @@ base_url: "../" ...@@ -1115,7 +1117,7 @@ base_url: "../"
</label> </label>
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
...@@ -1128,10 +1130,10 @@ base_url: "../" ...@@ -1128,10 +1130,10 @@ base_url: "../"
<h3 id="navbar-buttons">Buttons</h3> <h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
...@@ -1140,31 +1142,31 @@ base_url: "../" ...@@ -1140,31 +1142,31 @@ base_url: "../"
<h3 id="navbar-text">Text</h3> <h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </nav>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-links">Links</h3> <h3 id="navbar-links">Links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a> <a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div> </nav>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3> <h3 id="navbar-component-alignment">Component alignment</h3>
...@@ -1189,9 +1191,9 @@ base_url: "../" ...@@ -1189,9 +1191,9 @@ base_url: "../"
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-fixed-top" role="navigation"> <nav class="navbar navbar-fixed-top" role="navigation">
... ...
</div> </nav>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
...@@ -1206,7 +1208,7 @@ body { padding-top: 70px; } ...@@ -1206,7 +1208,7 @@ body { padding-top: 70px; }
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3> <h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-fixed-bottom" role="navigation">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
...@@ -1215,12 +1217,12 @@ body { padding-top: 70px; } ...@@ -1215,12 +1217,12 @@ body { padding-top: 70px; }
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> </ul>
</div> </div>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-fixed-bottom" role="navigation">
... ...
</div> </nav>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
...@@ -1235,7 +1237,7 @@ body { padding-bottom: 70px; } ...@@ -1235,7 +1237,7 @@ body { padding-bottom: 70px; }
<h3 id="navbar-static-top">Static top navbar</h3> <h3 id="navbar-static-top">Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;"> <nav class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
...@@ -1244,19 +1246,19 @@ body { padding-bottom: 70px; } ...@@ -1244,19 +1246,19 @@ body { padding-bottom: 70px; }
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> </ul>
</div> </div>
</div> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-static-top" role="navigation"> <nav class="navbar navbar-static-top" role="navigation">
... ...
</div> </nav>
{% endhighlight %} {% endhighlight %}
<h2 id="navbar-responsive">Responsive navbar</h2> <h2 id="navbar-responsive">Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p> <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -1304,7 +1306,7 @@ body { padding-bottom: 70px; } ...@@ -1304,7 +1306,7 @@ body { padding-bottom: 70px; }
</div><!-- /.navbar --> </div><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<div class="container"> <div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content --> <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
...@@ -1323,7 +1325,7 @@ body { padding-bottom: 70px; } ...@@ -1323,7 +1325,7 @@ body { padding-bottom: 70px; }
... ...
</div><!-- /.nav-collapse --> </div><!-- /.nav-collapse -->
</div><!-- /.container --> </div><!-- /.container -->
</div><!-- /.navbar --> </nav><!-- /.navbar -->
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
...@@ -1377,7 +1379,7 @@ body { padding-bottom: 70px; } ...@@ -1377,7 +1379,7 @@ body { padding-bottom: 70px; }
<h2 id="navbar-inverted">Inverted variation</h2> <h2 id="navbar-inverted">Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1421,12 +1423,12 @@ body { padding-bottom: 70px; } ...@@ -1421,12 +1423,12 @@ body { padding-bottom: 70px; }
</ul> </ul>
</div><!-- /.nav-collapse --> </div><!-- /.nav-collapse -->
</div><!-- /.container --> </div><!-- /.container -->
</div><!-- /.navbar --> </nav><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
... ...
</div> </nav>
{% endhighlight %} {% endhighlight %}
</div> </div>
......
javascript.html
View file @ a19ed6dc
...@@ -355,7 +355,7 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -355,7 +355,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<h3>Within a navbar</h3> <h3>Within a navbar</h3>
<div class="bs-example"> <div class="bs-example">
<div id="navbar-example" class="navbar navbar-static" role="navigation"> <nav id="navbar-example" class="navbar navbar-static" role="navigation">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
...@@ -365,7 +365,7 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -365,7 +365,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<div class="nav-collapse collapse bs-js-navbar-collapse"> <div class="nav-collapse collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav" role="navigation"> <ul class="nav navbar-nav">
<li class="dropdown"> <li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
...@@ -493,7 +493,7 @@ $('.dropdown-toggle').dropdown() ...@@ -493,7 +493,7 @@ $('.dropdown-toggle').dropdown()
<h2 id="scrollspy-examples">Example in navbar</h2> <h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example"> <div class="bs-example">
<div id="navbar-example2" class="navbar navbar-static" role="navigation"> <nav id="navbar-example2" class="navbar navbar-static" role="navigation">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
...@@ -511,7 +511,7 @@ $('.dropdown-toggle').dropdown() ...@@ -511,7 +511,7 @@ $('.dropdown-toggle').dropdown()
</li> </li>
</ul> </ul>
</div> </div>
</div> </nav>
</div> </div>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example"> <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4> <h4 id="fat">@fat</h4>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment