Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#24373 : Documentation/Navbar : Refer to utility classes used. Hidden when printing. #24380

Merged
merged 11 commits into from
Oct 18, 2017
Merged

#24373 : Documentation/Navbar : Refer to utility classes used. Hidden when printing. #24380

Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
35dcdce
Refer to utility classes uses. Add Printing section
aavmurphy Oct 15, 2017
9e54ca5
typos, add links
aavmurphy Oct 15, 2017
1b254cc
grammar
aavmurphy Oct 15, 2017
784a4da
Add a dropdown with divider to the main example
aavmurphy Oct 15, 2017
42bb5f5
change id name to stop travis error
aavmurphy Oct 16, 2017
2f4b52e
Merge branch 'v4-dev' into v4-dev
aavmurphy Oct 16, 2017
8825856
review changes
aavmurphy Oct 16, 2017
a96f762
review changes
aavmurphy Oct 16, 2017
1723d27
grammar
aavmurphy Oct 17, 2017
304bffb
.fixed-top/bottom don't reserve space on the screen
aavmurphy Oct 18, 2017
f76b748
copyediting
mdo Oct 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion docs/4.0/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ Navbars come with built-in support for a handful of sub-components. Choose from
- `.navbar-text` for adding vertically centered strings of text.
- `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
Here's an example of all the sub-components.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert the changes to this section, and instead let's add a mention to the how it works list:

Use spacing and flexbox utility classes for sub-component alignment.

- the navbar is light-themed
- it's responsive - it automatically collapses at the `lg` (large) breakpoint.
- some additional utility classes are used: e.g. `bg-light` ([colors]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/)), `my-2, mr-sm-2, ...` ([spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/)).

{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Expand All @@ -46,6 +49,17 @@ Here's an example of all the sub-components included in a responsive light-theme
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/action">Action</a>
<a class="dropdown-item" href="/another_action">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://www.example.com/something_else_here">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
Expand Down Expand Up @@ -536,3 +550,16 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
</nav>
</div>
{% endexample %}

## Printing
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should also be a note in the how it works section. The rest of this isn't relevant to the navbar itself and can be covered by the display utilities docs.

Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar.


Navbars are not printed. If you use the navbar for your site's branding, you can add a print-only alternative.

See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) and [float]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) utilities for an explanation of the classes

{% example html %}
<div class="d-none d-print">
<!-- logo, name -->
<div class="float-right"><small>url</small></div>
</div>
{% endexample %}