mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-18 15:54:26 +01:00
add responsive behaviors section
This commit is contained in:
parent
93fabfa7a4
commit
17dca54278
@ -352,6 +352,84 @@ Navbars can be statically placed (their default behavior), static without rounde
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Responsive behaviors
|
||||
|
||||
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
|
||||
### Toggler
|
||||
|
||||
Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.navbar-toggler-right` modifiers. These are absolutely positioned within the navbar to avoid interference with the collapsed state. You can also use your own styles to position togglers. Below are examples of different toggle styles.
|
||||
|
||||
With no `.navbar-brand` shown in lowest breakpoint:
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||
<a class="navbar-brand" href="#">Hidden brand</a>
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<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 disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-lg-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
With a brand name shown on the left and toggler on the right:
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="nav navbar-nav mt-2 mt-md-0">
|
||||
<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 disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-lg-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### External content
|
||||
|
||||
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
|
||||
|
||||
{% example html %}
|
||||
<div class="pos-f-t">
|
||||
<div class="collapse" id="navbarToggleExternalContent">
|
||||
<div class="bg-inverse text-muted p-4">
|
||||
<h4>Collapsed content</h4>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
</nav>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Collapsible content
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user