Skip to content

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

Merge pull request #12105 from twbs/navbar-containers 

add .container(-fluid) to remaining navbar examples
parents 41257fe7 ae255447
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 264 deletions
docs/components.html
View file @ 9af86923
This diff is collapsed.
docs/examples/navbar/index.html
View file @ 9af86923
...@@ -32,39 +32,41 @@ ...@@ -32,39 +32,41 @@
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar navbar-default" role="navigation"> <div class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <div class="navbar-header">
<span class="sr-only">Toggle navigation</span> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<a class="navbar-brand" href="#">Project name</a> </button>
</div> <a class="navbar-brand" href="#">Project name</a>
<div class="navbar-collapse collapse"> </div>
<ul class="nav navbar-nav"> <div class="navbar-collapse collapse">
<li class="active"><a href="#">Link</a></li> <ul class="nav navbar-nav">
<li><a href="#">Link</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li><a href="#">Link</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li class="dropdown-header">Nav header</li> <li class="divider"></li>
<li><a href="#">Separated link</a></li> <li class="dropdown-header">Nav header</li>
<li><a href="#">One more separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> <li><a href="#">One more separated link</a></li>
</li> </ul>
</ul> </li>
<ul class="nav navbar-nav navbar-right"> </ul>
<li class="active"><a href="./">Default</a></li> <ul class="nav navbar-nav navbar-right">
<li><a href="../navbar-static-top/">Static top</a></li> <li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li> <li><a href="../navbar-static-top/">Static top</a></li>
</ul> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</div><!--/.nav-collapse --> </ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div> </div>
<!-- Main component for a primary marketing message or call to action --> <!-- Main component for a primary marketing message or call to action -->
......
docs/javascript.html
View file @ 9af86923
...@@ -431,51 +431,53 @@ $('#myModal').on('hidden.bs.modal', function (e) { ...@@ -431,51 +431,53 @@ $('#myModal').on('hidden.bs.modal', function (e) {
<h3>Within a navbar</h3> <h3>Within a navbar</h3>
<div class="bs-example"> <div class="bs-example">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header"> <div class="container-fluid">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> <div class="navbar-header">
<span class="sr-only">Toggle navigation</span> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<a class="navbar-brand" href="#">Project Name</a> </button>
</div> <a class="navbar-brand" href="#">Project Name</a>
<div class="collapse navbar-collapse bs-js-navbar-collapse"> </div>
<ul class="nav navbar-nav"> <div class="collapse navbar-collapse bs-js-navbar-collapse">
<li class="dropdown"> <ul class="nav navbar-nav">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<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">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> <li role="presentation" class="divider"></li>
</ul> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</li> </ul>
<li class="dropdown"> </li>
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<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">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> <li role="presentation" class="divider"></li>
</ul> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</li> </ul>
</ul> </li>
<ul class="nav navbar-nav navbar-right"> </ul>
<li id="fat-menu" class="dropdown"> <ul class="nav navbar-nav navbar-right">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <li id="fat-menu" class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<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">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> <li role="presentation" class="divider"></li>
</ul> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</li> </ul>
</ul> </li>
</div><!-- /.nav-collapse --> </ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav> <!-- /navbar-example --> </nav> <!-- /navbar-example -->
</div> <!-- /example --> </div> <!-- /example -->
...@@ -606,29 +608,31 @@ $('#myDropdown').on('show.bs.dropdown', function () { ...@@ -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> <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">
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header"> <div class="container-fluid">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <div class="navbar-header">
<span class="sr-only">Toggle navigation</span> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<a class="navbar-brand" href="#">Project Name</a> </button>
</div> <a class="navbar-brand" href="#">Project Name</a>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> </div>
<ul class="nav navbar-nav"> <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<li><a href="#fat">@fat</a></li> <ul class="nav navbar-nav">
<li><a href="#mdo">@mdo</a></li> <li><a href="#fat">@fat</a></li>
<li class="dropdown"> <li><a href="#mdo">@mdo</a></li>
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<li><a href="#one" tabindex="-1">one</a></li> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#two" tabindex="-1">two</a></li> <li><a href="#one" tabindex="-1">one</a></li>
<li class="divider"></li> <li><a href="#two" tabindex="-1">two</a></li>
<li><a href="#three" tabindex="-1">three</a></li> <li class="divider"></li>
</ul> <li><a href="#three" tabindex="-1">three</a></li>
</li> </ul>
</ul> </li>
</ul>
</div>
</div> </div>
</nav> </nav>
<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">
......
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