From 17dca542784aaddd8f84cb5a5fa06267d67eba88 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 17:52:39 -0800 Subject: [PATCH] add responsive behaviors section --- docs/components/navbar.md | 78 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/docs/components/navbar.md b/docs/components/navbar.md index e730404be5..b1405b5ba3 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -352,6 +352,84 @@ Navbars can be statically placed (their default behavior), static without rounde {% 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 %} + +{% endexample %} + +With a brand name shown on the left and toggler on the right: + +{% example html %} + +{% 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 %} +
+ + +
+{% endexample %} ## Collapsible content