mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Remove custom example plugin. (#25784)

Browse Source
This commit is contained in:
m5o
2018-03-14 16:44:38 +01:00
committed by XhmikosR
parent 03b7f52e82
commit d01b4eb025
41 changed files with 923 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/navbar.md
+69 -46
View File
@@ -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 %}