diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 144 |
1 files changed, 74 insertions, 70 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 3bceb6751..d7035d661 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -109,7 +109,7 @@ $('#myModal').on('show.bs.modal', function (e) { </div> <div class="bs-callout bs-callout-warning"> <h4>Mobile device caveats</h4> - <p>There are some caveats regarding using modals on mobile devices. <a href="{{ site.baseurl }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p> + <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p> </div> <h3>Static example</h3> @@ -431,51 +431,53 @@ $('#myModal').on('hidden.bs.modal', function (e) { <h3>Within a navbar</h3> <div class="bs-example"> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> - <div class="navbar-header"> - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Project Name</a> - </div> - <div class="collapse navbar-collapse bs-js-navbar-collapse"> - <ul class="nav navbar-nav"> - <li class="dropdown"> - <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"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> - </ul> - </li> - <li class="dropdown"> - <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> - </ul> - </li> - </ul> - <ul class="nav navbar-nav navbar-right"> - <li id="fat-menu" class="dropdown"> - <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> - </ul> - </li> - </ul> - </div><!-- /.nav-collapse --> + <div class="container-fluid"> + <div class="navbar-header"> + <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Project Name</a> + </div> + <div class="collapse navbar-collapse bs-js-navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="dropdown"> + <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"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> + </ul> + </li> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li id="fat-menu" class="dropdown"> + <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.nav-collapse --> + </div><!-- /.container-fluid --> </nav> <!-- /navbar-example --> </div> <!-- /example --> @@ -606,29 +608,31 @@ $('#myDropdown').on('show.bs.dropdown', function () { <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"> <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> - <div class="navbar-header"> - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Project Name</a> - </div> - <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> - <ul class="nav navbar-nav"> - <li><a href="#fat">@fat</a></li> - <li><a href="#mdo">@mdo</a></li> - <li class="dropdown"> - <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> - <li><a href="#one" tabindex="-1">one</a></li> - <li><a href="#two" tabindex="-1">two</a></li> - <li class="divider"></li> - <li><a href="#three" tabindex="-1">three</a></li> - </ul> - </li> - </ul> + <div class="container-fluid"> + <div class="navbar-header"> + <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Project Name</a> + </div> + <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> + <ul class="nav navbar-nav"> + <li><a href="#fat">@fat</a></li> + <li><a href="#mdo">@mdo</a></li> + <li class="dropdown"> + <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> + <li><a href="#one" tabindex="-1">one</a></li> + <li><a href="#two" tabindex="-1">two</a></li> + <li class="divider"></li> + <li><a href="#three" tabindex="-1">three</a></li> + </ul> + </li> + </ul> + </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example"> @@ -795,7 +799,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) {% endhighlight %} <h3>Markup</h3> - <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ site.baseurl }}components#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ site.baseurl }}components#nav-pills">pill styling</a>.</p> + <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p> {% highlight html %} <!-- Nav tabs --> <ul class="nav nav-tabs"> |