diff options
author | m5o <m5o@gmx.com> | 2018-03-14 18:44:38 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-03-14 18:44:38 +0300 |
commit | d01b4eb02560ba67b61b1b2c0496e9f8281c154d (patch) | |
tree | 9c32c81f44be15d729fc8351360921aa1b42e572 /docs/4.0/components/navbar.md | |
parent | 03b7f52e820c80e244479c59c0920c541ee1277b (diff) |
Remove custom example plugin. (#25784)
Diffstat (limited to 'docs/4.0/components/navbar.md')
-rw-r--r-- | docs/4.0/components/navbar.md | 115 |
1 files changed, 69 insertions, 46 deletions
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index 2e69a61298..3e3d1f2773 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> @@ -68,7 +68,8 @@ Here's an example of all the sub-components included in a responsive light-theme </form> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes. @@ -76,7 +77,7 @@ This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilit The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. -{% example html %} +{% capture example %} <!-- As a link --> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> @@ -86,20 +87,22 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as <nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1">Navbar</span> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. -{% example html %} +{% capture example %} <!-- Just an image --> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %} <!-- Image and text --> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> @@ -107,7 +110,8 @@ Adding images to the `.navbar-brand` will likely always require custom styles or Bootstrap </a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Nav @@ -115,7 +119,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> @@ -138,11 +142,12 @@ Active states—with `.active`—to indicate the current page can be applied dir </ul> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} And because we use classes for our navs, you can avoid the list-based approach entirely if you like. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> @@ -157,11 +162,12 @@ And because we use classes for our navs, you can avoid the list-based approach e </div> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> @@ -191,24 +197,26 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap </ul> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Forms Place various form controls and components within a navbar with `.form-inline`. -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} Align the contents of your inline forms with utilities as needed. -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> @@ -216,11 +224,12 @@ Align the contents of your inline forms with utilities as needed. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} Input groups work, too: -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> <div class="input-group"> @@ -231,34 +240,37 @@ Input groups work, too: </div> </form> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light"> <form class="form-inline"> <button class="btn btn-outline-success" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> </form> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### Text Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light"> <span class="navbar-text"> Navbar text with an inline element </span> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} Mix and match with other components and utilities as needed. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> @@ -281,7 +293,8 @@ Mix and match with other components and utilities as needed. </span> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Color schemes @@ -391,23 +404,25 @@ Theming the navbar has never been easier thanks to the combination of theming cl Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement). -{% example html %} +{% capture example %} <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed. -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Placement @@ -415,29 +430,33 @@ Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/uti Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**. -{% example html %} +{% capture example %} <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %} <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %} <nav class="navbar fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed bottom</a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %} <nav class="navbar sticky-top navbar-light bg-light"> <a class="navbar-brand" href="#">Sticky top</a> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Responsive behaviors @@ -451,7 +470,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el With no `.navbar-brand` shown in lowest breakpoint: -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -475,11 +494,12 @@ With no `.navbar-brand` shown in lowest breakpoint: </form> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} With a brand name shown on the left and toggler on the right: -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> @@ -504,11 +524,12 @@ With a brand name shown on the left and toggler on the right: </form> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} With a toggler on the left and brand name on the right: -{% example html %} +{% capture example %} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -533,13 +554,14 @@ With a toggler on the left and brand name on the right: </form> </div> </nav> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} ### 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 %} +{% capture example %} <div class="pos-f-t"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> @@ -553,4 +575,5 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher </button> </nav> </div> -{% endexample %} +{% endcapture %} +{% include example.html content=example %} |