mirror of https://github.com/twbs/bootstrap.git
add .container(-fluid) to remaining navbar examples for consistency/accuracy
follow-up to 93a4d6cc5e
This commit is contained in:
Chris Rebert
parent
41257fe794
commit
ae255447f2
|
|
@ -1270,108 +1270,112 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav class="navbar navbar-default" role="navigation">
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li class="active"><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 class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu">
|
<ul class="dropdown-menu" role="menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">One more separated link</a></li>
|
<li><a href="#">One more separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="navbar-form navbar-left" role="search">
|
<form class="navbar-form navbar-left" role="search">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type="text" class="form-control" placeholder="Search">
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-default">Submit</button>
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu" role="menu">
|
<ul class="dropdown-menu" role="menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav class="navbar navbar-default" role="navigation">
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li class="active"><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 class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">One more separated link</a></li>
|
<li><a href="#">One more separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="navbar-form navbar-left" role="search">
|
<form class="navbar-form navbar-left" role="search">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type="text" class="form-control" placeholder="Search">
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-default">Submit</button>
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
@ -1391,22 +1395,24 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||||
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
|
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav 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="#bs-example-navbar-collapse-2">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
</div>
|
||||||
<form class="navbar-form navbar-left" role="search">
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
||||||
<div class="form-group">
|
<form class="navbar-form navbar-left" role="search">
|
||||||
<input type="text" class="form-control" placeholder="Search">
|
<div class="form-group">
|
||||||
</div>
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
<button type="submit" class="btn btn-default">Submit</button>
|
</div>
|
||||||
</form>
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1434,17 +1440,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||||
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
|
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav 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="#bs-example-navbar-collapse-3">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
|
</div>
|
||||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
|
||||||
|
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1461,17 +1469,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||||
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></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><p></code> tag for proper leading and color.</p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav 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="#bs-example-navbar-collapse-4">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
|
</div>
|
||||||
<p class="navbar-text">Signed in as Mark Otto</p>
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
|
||||||
|
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1484,17 +1494,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||||
<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">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav 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="#bs-example-navbar-collapse-5">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
|
</div>
|
||||||
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
|
||||||
|
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1637,25 +1649,27 @@ body { padding-bottom: 70px; }
|
||||||
<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">
|
||||||
<nav class="navbar navbar-inverse" role="navigation">
|
<nav class="navbar navbar-inverse" role="navigation">
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
|
<div class="navbar-header">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
|
||||||
<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="#">Brand</a>
|
</button>
|
||||||
</div>
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
|
||||||
<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><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
</div><!-- /example -->
|
</div><!-- /example -->
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
||||||
|
|
|
||||||
|
|
@ -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 () {
|
||||||
<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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue