rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

v5: Simplify navbars by requiring containers (#29339)

Browse Source 
* v5: Simplify navbars by requiring containers

* Update migration docs for navbar
This commit is contained in:
Mark Otto 2019-10-27 20:26:52 -07:00 committed by GitHub
parent 23c3cdbd43
commit 9c7bc1a111
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 574 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scss/_navbar.scss
View File

@ -21,7 +21,10 @@
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x;
padding-top: $navbar-padding-y;
padding-right: $navbar-padding-x; // default: null
padding-bottom: $navbar-padding-y;
padding-left: $navbar-padding-x; // default: null
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
@ -149,24 +152,6 @@
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
%container-navbar-expand-#{$breakpoint} {
padding-right: 0;
padding-left: 0;
}
> .container,
> .container-fluid {
@extend %container-navbar-expand-#{$breakpoint};
}
@each $size, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($size, $container-max-widths)} {
@extend %container-navbar-expand-#{$breakpoint};
}
}
}
@include media-breakpoint-up($next) {
flex-flow: row nowrap;
justify-content: flex-start;

2
scss/_variables.scss
View File

@ -833,7 +833,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-x: $spacer !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;

60
site/content/docs/4.3/components/navbar.md
View File

@ -11,7 +11,7 @@ toc: true
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 fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
- 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.
- 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.
@ -37,6 +37,7 @@ Here's an example of all the sub-components included in a responsive light-theme
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -70,6 +71,7 @@ Here's an example of all the sub-components included in a responsive light-theme
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{{< /example >}}
@ -82,12 +84,16 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
{{< example >}}
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
{{< /example >}}
@ -96,19 +102,23 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{{< example >}}
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</div>
</nav>
{{< /example >}}
{{< example >}}
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</div>
</nav>
{{< /example >}}
@ -120,6 +130,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -140,6 +151,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
</li>
</ul>
</div>
</div>
</nav>
{{< /example >}}
@ -147,6 +159,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -159,6 +172,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
{{< /example >}}
@ -166,6 +180,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -193,6 +208,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
</li>
</ul>
</div>
</div>
</nav>
{{< /example >}}
@ -202,10 +218,12 @@ Place various form controls and components within a navbar with `.form-inline`.
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<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>
</div>
</nav>
{{< /example >}}
@ -213,11 +231,13 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<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>
</div>
</nav>
{{< /example >}}
@ -225,6 +245,7 @@ Input groups work, too:
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
@ -233,6 +254,7 @@ Input groups work, too:
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</div>
</nav>
{{< /example >}}
@ -240,10 +262,12 @@ Various buttons are supported as part of these navbar forms, too. This is also a
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<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>
</div>
</nav>
{{< /example >}}
@ -253,9 +277,11 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
{{< /example >}}
@ -263,6 +289,7 @@ Mix and match with other components and utilities as needed.
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -283,6 +310,7 @@ Mix and match with other components and utilities as needed.
Navbar text with an inline element
</span>
</div>
</div>
</nav>
{{< /example >}}
@ -292,6 +320,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -317,9 +346,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -345,9 +376,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -373,6 +406,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
@ -392,21 +426,23 @@ Theming the navbar has never been easier thanks to the combination of theming cl
## Containers
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).
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). Note that an inner container is still required.
{{< example >}}
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
{{< /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.
Use any of the responsive containers to change how wide the content in your navbar.
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
@ -420,25 +456,33 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
{{< example >}}
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
{{< /example >}}
@ -456,6 +500,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
</button>
@ -477,6 +522,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{{< /example >}}
@ -484,6 +530,7 @@ With a brand name shown on the left and toggler on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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">
<span class="navbar-toggler-icon"></span>
@ -506,6 +553,7 @@ With a brand name shown on the left and toggler on the right:
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{{< /example >}}
@ -513,6 +561,7 @@ With a toggler on the left and brand name on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
</button>
@ -535,6 +584,7 @@ With a toggler on the left and brand name on the right:
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{{< /example >}}
@ -550,8 +600,10 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
{{< /example >}}

18
site/content/docs/4.3/examples/navbars/index.html
View File

@ -6,6 +6,7 @@ extra_css:
---
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -35,9 +36,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Always expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -56,9 +59,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -88,9 +93,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -120,9 +127,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -152,9 +161,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -184,6 +195,7 @@ extra_css:
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@ -259,6 +271,7 @@ extra_css:
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -284,10 +297,12 @@ extra_css:
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -317,9 +332,11 @@ extra_css:
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -345,6 +362,7 @@ extra_css:
</li>
</ul>
</div>
</div>
</nav>
<main role="main">

4
site/content/docs/4.3/migration.md
View File

@ -110,6 +110,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
### Navbars
- All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.
### Pagination
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.