rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else
This commit is contained in:
Mark Otto
Mark Otto
parent
11ba308b2f
commit
90c5f6230b
|
|
@ -1,4 +1,4 @@
|
|||
<header class="navbar navbar-light navbar-toggleable-md bd-navbar">
|
||||
<header class="navbar navbar-light navbar-expand-md bd-navbar">
|
||||
<nav class="container">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav float-right">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<button class="navbar-toggler" 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>
|
||||
<div class="collapse navbar-toggleable-md" id="navbarCollapse">
|
||||
<div class="collapse navbar-expand-md" id="navbarCollapse">
|
||||
<ul class="nav navbar-nav text-md-center justify-content-md-between">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse mb-4">
|
||||
<a class="navbar-brand" href="#">Top navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="navbar navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Never expand</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
|
@ -45,13 +45,172 @@
|
|||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-inverse">
|
||||
<nav class="navbar navbar-expand navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Expand</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<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="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<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="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Expand at md</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<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="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<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="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xl navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
||||
<button class="navbar-toggler" 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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<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="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -79,14 +238,13 @@
|
|||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-inverse">
|
||||
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
|
@ -115,7 +273,7 @@
|
|||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded rounded">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -142,13 +300,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-toggleable-lg navbar-light bg-faded rounded">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse">
|
||||
<nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
|
||||
The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
|
||||
|
||||
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-toggleable-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
|
||||
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
|
||||
- `.navbar-default` is now `.navbar-light`, though `.navbar-inverse` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`.
|
||||
- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/components/navbar/#color-schemes).
|
||||
- Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="container">
|
||||
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<body>
|
||||
<nav class="navbar navbar-full navbar-dark bg-inverse">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
|
||||
<div class="collapse navbar-expand-md" id="navbarResponsive">
|
||||
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
|
|
|
|||
|
|
@ -127,9 +127,9 @@
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Generate series of `.navbar-toggleable-*` responsive classes for configuring
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-toggleable {
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
|
|
|||
Loading…
Reference in New Issue