rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2013-08-11 13:15:52 -07:00
commit a19ed6dcc1
3 changed files with 66 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/nav-main.html
View File

@ -1,4 +1,4 @@
<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 @@
<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 @@
<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>

88
components.html
View File

@ -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: "../"
</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: "../"
<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: "../"
<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: "../"
<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: "../"
<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: "../"
</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: "../"
</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: "../"
<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: "../"
<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: "../"
</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; }
<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; }
<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; }
<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; }
<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; }
</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; }
... ...
</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; }
<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; }
</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>

8
javascript.html
View File

@ -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 () {
<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()
<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()
</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>