add .container(-fluid) to remaining navbar examples for consistency/accuracy

follow-up to 93a4d6cc5e
This commit is contained in:
Chris Rebert 2014-01-05 12:55:03 -08:00
parent 41257fe794
commit ae255447f2
3 changed files with 284 additions and 264 deletions

View File

@ -1270,6 +1270,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@ -1319,10 +1320,12 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@ -1372,6 +1375,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% endhighlight %}
@ -1391,6 +1395,7 @@ 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>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
@ -1408,6 +1413,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
</div>
{% highlight html %}
@ -1434,6 +1440,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>Add the <code>.navbar-btn</code> class to <code>&lt;button&gt;</code> elements not residing in a <code>&lt;form&gt;</code> to vertically center them in the navbar.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
<span class="sr-only">Toggle navigation</span>
@ -1446,6 +1453,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<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>
</nav>
</div>
{% highlight html %}
@ -1461,6 +1469,7 @@ 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>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
<span class="sr-only">Toggle navigation</span>
@ -1473,6 +1482,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</div>
</nav>
</div>
{% highlight html %}
@ -1484,6 +1494,7 @@ 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>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
<span class="sr-only">Toggle navigation</span>
@ -1496,6 +1507,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<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>
</nav>
</div>
{% highlight html %}
@ -1637,6 +1649,7 @@ body { padding-bottom: 70px; }
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
@ -1656,6 +1669,7 @@ body { padding-bottom: 70px; }
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- /example -->
{% highlight html %}

View File

@ -32,6 +32,7 @@
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
@ -65,6 +66,7 @@
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<!-- Main component for a primary marketing message or call to action -->

View File

@ -431,6 +431,7 @@ $('#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="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>
@ -476,6 +477,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav> <!-- /navbar-example -->
</div> <!-- /example -->
@ -606,6 +608,7 @@ $('#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="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>
@ -630,6 +633,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>