mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-22 13:13:03 +02:00
v5: Simplify navbars by requiring containers (#29339)
* v5: Simplify navbars by requiring containers * Update migration docs for navbar
This commit is contained in:
Mark Otto
GitHub
@@ -21,7 +21,10 @@
|
|||||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between; // space out brand from logo
|
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
|
// Because flex properties aren't inherited, we need to redeclare these first
|
||||||
// few properties so that content nested within behave properly.
|
// few properties so that content nested within behave properly.
|
||||||
@@ -149,24 +152,6 @@
|
|||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
&#{$infix} {
|
&#{$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) {
|
@include media-breakpoint-up($next) {
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|||||||
@@ -833,7 +833,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
|
|||||||
// Navbar
|
// Navbar
|
||||||
|
|
||||||
$navbar-padding-y: $spacer / 2 !default;
|
$navbar-padding-y: $spacer / 2 !default;
|
||||||
$navbar-padding-x: $spacer !default;
|
$navbar-padding-x: null !default;
|
||||||
|
|
||||||
$navbar-nav-link-padding-x: .5rem !default;
|
$navbar-nav-link-padding-x: .5rem !default;
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ toc: true
|
|||||||
Here's what you need to know before getting started with the navbar:
|
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 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.
|
- 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 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.
|
- 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,38 +37,40 @@ Here's an example of all the sub-components included in a responsive light-theme
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
|
||||||
Dropdown
|
Dropdown
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
<li><hr class="dropdown-divider"></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-lg-0">
|
<form class="form-inline my-2 my-lg-0">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<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>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -82,12 +84,16 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
|
|||||||
{{< example >}}
|
{{< example >}}
|
||||||
<!-- As a link -->
|
<!-- As a link -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- As a heading -->
|
<!-- As a heading -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
<div class="container-fluid">
|
||||||
|
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -96,19 +102,23 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
|
|||||||
{{< example >}}
|
{{< example >}}
|
||||||
<!-- Just an image -->
|
<!-- Just an image -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">
|
<div class="container">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
|
<a class="navbar-brand" href="#">
|
||||||
</a>
|
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<!-- Image and text -->
|
<!-- Image and text -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">
|
<div class="container-fluid">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
|
<a class="navbar-brand" href="#">
|
||||||
Bootstrap
|
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
|
||||||
</a>
|
Bootstrap
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -120,25 +130,27 @@ Active states—with `.active`—to indicate the current page can be applied dir
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
</button>
|
||||||
<ul class="navbar-nav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<li class="nav-item active">
|
<ul class="navbar-nav">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<li class="nav-item active">
|
||||||
</li>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Features</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Features</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -147,16 +159,18 @@ And because we use classes for our navs, you can avoid the list-based approach e
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
</button>
|
||||||
<div class="navbar-nav">
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||||
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
<div class="navbar-nav">
|
||||||
<a class="nav-item nav-link" href="#">Features</a>
|
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
<a class="nav-item nav-link" href="#">Pricing</a>
|
<a class="nav-item nav-link" href="#">Features</a>
|
||||||
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-item nav-link" href="#">Pricing</a>
|
||||||
|
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -166,32 +180,34 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
</button>
|
||||||
<ul class="navbar-nav">
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||||
<li class="nav-item active">
|
<ul class="navbar-nav">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<li class="nav-item active">
|
||||||
</li>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Features</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Features</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
<li class="nav-item dropdown">
|
</li>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
|
<li class="nav-item dropdown">
|
||||||
Dropdown link
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
|
||||||
</a>
|
Dropdown link
|
||||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
</a>
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
</ul>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -202,10 +218,12 @@ Place various form controls and components within a navbar with `.form-inline`.
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<form class="form-inline">
|
<div class="container-fluid">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<form class="form-inline">
|
||||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
</form>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -213,11 +231,13 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<a class="navbar-brand">Navbar</a>
|
<div class="container-fluid">
|
||||||
<form class="form-inline">
|
<a class="navbar-brand">Navbar</a>
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<form class="form-inline">
|
||||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
</form>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -225,14 +245,16 @@ Input groups work, too:
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<form class="form-inline">
|
<div class="container-fluid">
|
||||||
<div class="input-group">
|
<form class="form-inline">
|
||||||
<div class="input-group-prepend">
|
<div class="input-group">
|
||||||
<span class="input-group-text" id="basic-addon1">@</span>
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text" id="basic-addon1">@</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -240,10 +262,12 @@ Various buttons are supported as part of these navbar forms, too. This is also a
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<form class="form-inline">
|
<div class="container-fluid">
|
||||||
<button class="btn btn-outline-success" type="button">Main button</button>
|
<form class="form-inline">
|
||||||
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
|
<button class="btn btn-outline-success" type="button">Main button</button>
|
||||||
</form>
|
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -253,9 +277,11 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<span class="navbar-text">
|
<div class="container-fluid">
|
||||||
Navbar text with an inline element
|
<span class="navbar-text">
|
||||||
</span>
|
Navbar text with an inline element
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -263,25 +289,27 @@ Mix and match with other components and utilities as needed.
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar w/ text</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar w/ text</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarText">
|
</button>
|
||||||
<ul class="navbar-nav mr-auto">
|
<div class="collapse navbar-collapse" id="navbarText">
|
||||||
<li class="nav-item active">
|
<ul class="navbar-nav mr-auto">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<li class="nav-item active">
|
||||||
</li>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Features</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Features</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
</ul>
|
</li>
|
||||||
<span class="navbar-text">
|
</ul>
|
||||||
Navbar text with an inline element
|
<span class="navbar-text">
|
||||||
</span>
|
Navbar text with an inline element
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -292,87 +320,93 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
|||||||
|
|
||||||
<div class="bd-example">
|
<div class="bd-example">
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Features</a>
|
<a class="nav-link" href="#">Features</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">About</a>
|
<a class="nav-link" href="#">About</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Features</a>
|
<a class="nav-link" href="#">Features</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">About</a>
|
<a class="nav-link" href="#">About</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
|
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Features</a>
|
<a class="nav-link" href="#">Features</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">About</a>
|
<a class="nav-link" href="#">About</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
|
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -392,21 +426,23 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
|||||||
|
|
||||||
## Containers
|
## 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 >}}
|
{{< example >}}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
{{< /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 >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<div class="container">
|
<div class="container-md">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -420,25 +456,33 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Default</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Default</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar fixed-top navbar-light bg-light">
|
<nav class="navbar fixed-top navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Fixed top</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed top</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar fixed-bottom navbar-light bg-light">
|
<nav class="navbar fixed-bottom navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Fixed bottom</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed bottom</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar sticky-top navbar-light bg-light">
|
<nav class="navbar sticky-top navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Sticky top</a>
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Sticky top</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
@@ -456,26 +500,28 @@ With no `.navbar-brand` shown in lowest breakpoint:
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<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">
|
<div class="container-fluid">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
</button>
|
||||||
<a class="navbar-brand" href="#">Hidden brand</a>
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
<a class="navbar-brand" href="#">Hidden brand</a>
|
||||||
<li class="nav-item active">
|
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<li class="nav-item active">
|
||||||
</li>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link" href="#">Link</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link" href="#">Link</a>
|
||||||
<li class="nav-item">
|
</li>
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<li class="nav-item">
|
||||||
</li>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</ul>
|
</li>
|
||||||
<form class="form-inline my-2 my-lg-0">
|
</ul>
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<form class="form-inline my-2 my-lg-0">
|
||||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
</form>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -484,27 +530,29 @@ With a brand name shown on the left and toggler on the right:
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-lg-0">
|
<form class="form-inline my-2 my-lg-0">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search">
|
<input class="form-control mr-sm-2" type="search" placeholder="Search">
|
||||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -513,27 +561,29 @@ With a toggler on the left and brand name on the right:
|
|||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<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">
|
<div class="container-fluid">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
||||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-lg-0">
|
<form class="form-inline my-2 my-lg-0">
|
||||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
<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>
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
@@ -550,8 +600,10 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="navbar navbar-dark bg-dark">
|
<nav class="navbar navbar-dark bg-dark">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
|
<div class="container-fluid">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|||||||
@@ -6,183 +6,195 @@ extra_css:
|
|||||||
---
|
---
|
||||||
|
|
||||||
<nav class="navbar navbar-dark bg-dark">
|
<nav class="navbar navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Never expand</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Never expand</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Always expand</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Always expand</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search">
|
<input class="form-control" type="text" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Expand at sm</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown03">
|
<div class="dropdown-menu" aria-labelledby="dropdown03">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search">
|
<input class="form-control" type="text" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Expand at md</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Expand at md</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown04">
|
<div class="dropdown-menu" aria-labelledby="dropdown04">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search">
|
<input class="form-control" type="text" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Expand at lg</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown05">
|
<div class="dropdown-menu" aria-labelledby="dropdown05">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search">
|
<input class="form-control" type="text" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">Expand at xl</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown06">
|
<div class="dropdown-menu" aria-labelledby="dropdown06">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="form-inline my-2 my-md-0">
|
<form class="form-inline my-2 my-md-0">
|
||||||
<input class="form-control" type="text" placeholder="Search">
|
<input class="form-control" type="text" placeholder="Search">
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -259,72 +271,12 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
<div class="container-fluid">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown08">
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
|
||||||
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||||
<ul class="navbar-nav mr-auto">
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown09">
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="form-inline my-2 my-md-0">
|
|
||||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
|
||||||
<ul class="navbar-nav">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
||||||
@@ -336,8 +288,8 @@ extra_css:
|
|||||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdown10">
|
<div class="dropdown-menu" aria-labelledby="dropdown08">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
@@ -345,6 +297,72 @@ extra_css:
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdown09">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="form-inline my-2 my-md-0">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdown10">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main role="main">
|
<main role="main">
|
||||||
|
|||||||
@@ -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.
|
- 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
|
||||||
|
|
||||||
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
|
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
|
||||||
|
|||||||
Reference in New Issue
Block a user