From: Andrew Murphy Date: Wed, 18 Oct 2017 17:26:33 +0000 (+0100) Subject: #24373 : Documentation/Navbar : Refer to utility classes used. Hidden when printing... X-Git-Tag: v4.0.0-beta.2~32 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ad77ea7ae0dbbe305f1126320be6852479353a2b;p=thirdparty%2Fbootstrap.git #24373 : Documentation/Navbar : Refer to utility classes used. Hidden when printing. (#24380) * Refer to utility classes uses. Add Printing section refer to (not navbar) classes used for newbies navbars don't print, so add example of a print-only alternative * typos, add links typo in {% example %} add links to component pages * grammar * Add a dropdown with divider to the main example * change id name to stop travis error I assume id="camelCase" is the standard for id names, rather than the clearly superior id="underscore_words" * review changes still like to emphasise the foreign utility classes in the main example bg-light's name is self explanatory (so its obvious where to look it up), but mr-sm-2's name isn't at first * review changes * grammar * .fixed-top/bottom don't reserve space on the screen ... as they are position:fixed. better wording welcome * copyediting - rewrite utils line and link to the utils pages - restore the paragraphs to the placement section - fix formatting and grammar --- diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index f303aa2bca..5856ea54c6 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -12,8 +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. -- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes. +- Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class. - Ensure accessibility by using a ` {% endexample %} +This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/color/) (`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. + ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. @@ -395,11 +409,13 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).** +Use our [position utilities]({{ site.baseurl }}/docs/{{ site.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 ``) 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)**. {% example html %} {% endexample %}