rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

navbar callouts cleanup

Browse Source 
Move all callouts to be adjacent to each other
Combine JS-related callouts into a single callout
This commit is contained in:
Chris Rebert 2014-11-11 21:22:27 -08:00
parent ff386147ce
commit b87370c28f
1 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/_includes/components/navbar.html
View File

@ -15,13 +15,18 @@
</ol> </ol>
</div> </div>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Requires JavaScript</h4> <h4>Requires JavaScript plugin</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p> <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4> <h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p> <p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div> </div>
<div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
@ -134,16 +139,6 @@
</nav> </nav>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
<h2 id="navbar-brand-image">Brand image</h2> <h2 id="navbar-brand-image">Brand image</h2>
<p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p> <p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>