mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

collapsing navbar tools

Browse Source
This commit is contained in:
Mark Otto
2015-04-16 18:50:32 -07:00
parent 11f37681ef
commit 605990400e
11 changed files with 63 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/navbar.md
+19 -3
View File
@@ -155,15 +155,31 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
{% example html %}
<div class="collapse" id="navbar-header">
<div class="collapse" id="exCollapsingNavbar">
<div class="inverse p-a">
<h3>Collapsed content</h3>
<h4>Collapsed content</h4>
<p>Toggleable via the navbar brand.</p>
</div>
</div>
<nav class="navbar navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
&#9776;
</button>
</nav>
{% endexample %}
For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
{% example html %}
<nav class="navbar navbar-default">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<h4>Collapsed on xs devices</h4>
<p>Toggleable via the navbar brand.</p>
</div>
</nav>
{% endexample %}