mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-22 14:19:46 +01:00
Merge branch 'navbar-tweaks' into v4-docs-streamlined
This commit is contained in:
Mark Otto
commit
51b00ea833
@ -16,7 +16,7 @@ The navbar is a wrapper that positions branding, navigation, and other elements
|
||||
|
||||
Here's what you need to know before getting started with the navbar:
|
||||
|
||||
- Navbars require a wrapping `.navbar` and [color scheme](#color-schemes) classes.
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-toggleable-*` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
||||
- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
@ -28,25 +28,24 @@ Read on for an example and list of supported sub-components.
|
||||
|
||||
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
|
||||
|
||||
- `.navbar-brand` for your company, product, or project name
|
||||
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
|
||||
- `.navbar-brand` for your company, product, or project name.
|
||||
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns).
|
||||
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
|
||||
- Inline forms with `.float-` utilities for form controls and components.
|
||||
- `.form-inline` for any form controls and actions.
|
||||
- `.navbar-text` for adding vertically centered strings of text.
|
||||
- `.form-inline` for form controls and more.
|
||||
- `.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.
|
||||
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `md` (medium) breakpoint.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -109,13 +108,13 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
|
||||
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="nav navbar-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -136,13 +135,13 @@ Active states—with `.active`—to indicate the current page can be applied dir
|
||||
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="nav navbar-nav">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#">Features</a>
|
||||
<a class="nav-item nav-link" href="#">Pricing</a>
|
||||
@ -155,13 +154,13 @@ And because we use classes for our navs, you can avoid the list-based approach e
|
||||
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="nav navbar-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -250,13 +249,13 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
|
||||
Mix and match with other components and utilities as needed.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar w/ text</a>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -279,14 +278,14 @@ Mix and match with other components and utilities as needed.
|
||||
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -307,14 +306,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -335,14 +334,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light navbar-toggleable-md" style="background-color: #e3f2fd;">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light" style="background-color: #e3f2fd;">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -384,7 +383,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -393,7 +392,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
||||
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable-*` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
@ -433,13 +432,13 @@ Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.na
|
||||
With no `.navbar-brand` shown in lowest breakpoint:
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<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>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||
<a class="navbar-brand" href="#">Hidden brand</a>
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -461,14 +460,14 @@ With no `.navbar-brand` shown in lowest breakpoint:
|
||||
With a brand name shown on the left and toggler on the right:
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="nav navbar-nav mt-2 mt-md-0">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
|
||||
@ -35,14 +35,6 @@ body {
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
margin-right: .25rem;
|
||||
margin-left: .25rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<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>
|
||||
|
||||
@ -19,14 +19,14 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
|
||||
<ul class="nav nav-pills">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -65,7 +65,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item</a>
|
||||
</li>
|
||||
@ -80,7 +80,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item again</a>
|
||||
</li>
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
|
||||
@ -20,13 +20,13 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<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>
|
||||
|
||||
@ -20,13 +20,13 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<a class="navbar-brand" href="#">Top navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<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>
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
@ -61,7 +61,7 @@
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleContainer">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
@ -93,8 +93,8 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleCenteredNav">
|
||||
<ul class="nav navbar-nav text-md-center">
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav">
|
||||
<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>
|
||||
@ -124,7 +124,7 @@
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="containerNavbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
@ -143,7 +143,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
@ -155,8 +155,8 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="containerNavbarCenter">
|
||||
<ul class="nav navbar-nav text-md-center">
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter">
|
||||
<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>
|
||||
@ -184,7 +184,7 @@
|
||||
<p>This example is a quick exercise to illustrate how the navbar and it's contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-fixed-top navbar-inverse bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-toggleable-md">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-fixed-top">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="nav navbar-nav">
|
||||
<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>
|
||||
|
||||
@ -21,13 +21,13 @@
|
||||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav mt-2 mt-lg-0">
|
||||
<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>
|
||||
|
||||
@ -161,6 +161,7 @@ linters:
|
||||
- flex-order
|
||||
- flex-pack
|
||||
- align-items
|
||||
- align-self
|
||||
- justify-content
|
||||
- float
|
||||
- width
|
||||
|
||||
@ -1,4 +1,16 @@
|
||||
// Wrapper and base class
|
||||
// Contents
|
||||
//
|
||||
// Navbar
|
||||
// Navbar brand
|
||||
// Navbar nav
|
||||
// Navbar text
|
||||
// Navbar divider
|
||||
// Responsive navbar
|
||||
// Navbar position
|
||||
// Navbar themes
|
||||
|
||||
|
||||
// Navbar
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
@ -6,21 +18,181 @@
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
//
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
margin-right: $navbar-padding-x;
|
||||
font-size: $font-size-lg;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav
|
||||
//
|
||||
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
}
|
||||
|
||||
|
||||
// Navbar divider
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-divider {
|
||||
float: left;
|
||||
width: $border-width;
|
||||
padding-top: $navbar-divider-padding-y;
|
||||
padding-bottom: $navbar-divider-padding-y;
|
||||
margin-right: $navbar-padding-x;
|
||||
margin-left: $navbar-padding-x;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
//
|
||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||
|
||||
// Button for toggling the navbar when in it's collapsed state
|
||||
.navbar-toggler {
|
||||
align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
|
||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
line-height: 1;
|
||||
background: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background: no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Use `position` on the toggler to prevent it from being auto placed as a flex
|
||||
// item and allow easy placement.
|
||||
.navbar-toggler-left {
|
||||
position: absolute;
|
||||
left: $navbar-padding-x;
|
||||
}
|
||||
|
||||
.navbar-toggler-right {
|
||||
position: absolute;
|
||||
right: $navbar-padding-x;
|
||||
}
|
||||
|
||||
// Generate series of `.navbar-toggleable-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-toggleable {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Navbar alignment options
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.nav-link {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For nesting containers, have to redeclare for alignment purposes
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-collapse {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar position
|
||||
//
|
||||
// Display the navbar across the entirety of the page or fixed it to the top or
|
||||
// bottom of the page.
|
||||
@ -49,94 +221,9 @@
|
||||
}
|
||||
|
||||
|
||||
// Navbar themes
|
||||
//
|
||||
// Brand/project name
|
||||
//
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
margin-right: $navbar-padding-x;
|
||||
font-size: $font-size-lg;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
float: left;
|
||||
width: $border-width;
|
||||
padding-top: $navbar-divider-padding-y;
|
||||
padding-bottom: $navbar-divider-padding-y;
|
||||
margin-right: $navbar-padding-x;
|
||||
margin-left: $navbar-padding-x;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
}
|
||||
|
||||
|
||||
// Navbar toggle
|
||||
//
|
||||
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
||||
// Bootstrap JavaScript plugin.
|
||||
|
||||
.navbar-toggler {
|
||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
line-height: 1;
|
||||
background: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background: no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
//
|
||||
// Custom navbar navigation built on the base `.nav` styles.
|
||||
|
||||
.navbar-nav {
|
||||
flex-grow: 10; // high number to force alignment
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for switching between navbars with light or dark background.
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
@ -235,63 +322,3 @@
|
||||
color: $navbar-inverse-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar toggleable
|
||||
//
|
||||
// Custom override for collapse plugin in navbar.
|
||||
|
||||
// Placed at the end of the file so it can override some CSS properties
|
||||
.navbar-toggleable {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
// For nesting containers, have to redeclare for alignment purposes
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-collapse {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user