mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Add a docsref shortcode.

Browse Source 
This allows for the build to fail if a reference isn't found.
This commit is contained in:
XhmikosR
2019-02-04 12:22:02 +02:00
parent 23ddfa99a3
commit 5d6e896ebb
45 changed files with 111 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/components/navbar.md
+5 -5
View File
@@ -12,9 +12,9 @@ Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use our [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) and [flex](/docs/{{< param docs_version >}}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display](/docs/{{< param docs_version >}}/utilities/display/) utility class.
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{< docsref "/utilities/display" >}}) utility class.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
{{< callout info >}}
@@ -74,7 +74,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</nav>
{{< /example >}}
This example uses [color](/docs/{{< param docs_version >}}/utilities/colors/) (`bg-light`) and [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
### Brand
@@ -210,7 +210,7 @@ Place various form controls and components within a navbar with `.form-inline`.
</nav>
{{< /example >}}
Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities](/docs/{{< param docs_version >}}/utilities/flex/) as needed to adjust this behavior.
Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
<nav class="navbar navbar-light bg-light">
@@ -415,7 +415,7 @@ When the container is within your navbar, its horizontal padding is removed at b
## Placement
Use our [position utilities](/docs/{{< param docs_version >}}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.