diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/navbar.md | 50 |
1 files changed, 0 insertions, 50 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 60e9b695c..8fc97684f 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -430,53 +430,3 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher </nav> </div> {% endexample %} - -## Collapsible content - -Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. - -{% example html %} -<nav class="navbar navbar-light bg-faded"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse" id="exCollapsingNavbar"> - <div class="bg-inverse text-muted p-1"> - <h4>Collapsed content</h4> - <span class="text-muted">Toggleable via the navbar brand.</span> - </div> - </div> -</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-light bg-faded"> - <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-md" id="navbarResponsive"> - <a class="navbar-brand" href="#">Navbar</a> - <ul class="nav navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> - </li> - </ul> - <form class="form-inline float-lg-right"> - <input class="form-control" type="text" placeholder="Search"> - <button class="btn btn-outline-success" type="submit">Search</button> - </form> - </div> -</nav> -{% endexample %} |
