root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/components.html
View File

@ -1270,6 +1270,7 @@ 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">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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> </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">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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> </li>
</ul> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> </nav>
{% endhighlight %} {% 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> <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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span> <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> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</div> </div>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% 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> <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"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
<span class="sr-only">Toggle navigation</span> <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"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
<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> </div>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% 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> <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">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
<span class="sr-only">Toggle navigation</span> <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"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </div>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% 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> <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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
<span class="sr-only">Toggle navigation</span> <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"> <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> <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>
{% highlight html %} {% highlight html %}
@ -1637,6 +1649,7 @@ 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">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> <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> <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 %}

2
docs/examples/navbar/index.html
View File

@ -32,6 +32,7 @@
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar navbar-default" role="navigation"> <div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
@ -65,6 +66,7 @@
<li><a href="../navbar-fixed-top/">Fixed top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </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 -->

4
docs/javascript.html
View File

@ -431,6 +431,7 @@ $('#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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<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">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
@ -476,6 +477,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
</li> </li>
</ul> </ul>
</div><!-- /.nav-collapse --> </div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav> <!-- /navbar-example --> </nav> <!-- /navbar-example -->
</div> <!-- /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> <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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
@ -630,6 +633,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
</li> </li>
</ul> </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">
<h4 id="fat">@fat</h4> <h4 id="fat">@fat</h4>