--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../favicon.ico">
+
+ <title>Navbar Template for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="navbar.css" rel="stylesheet">
+ </head>
+
+ <body>
+
+ <nav class="navbar navbar-dark bg-inverse">
+ <div class="navbar-container">
+ <div class="navbar-item">
+ <a class="navbar-brand" href="#">Default</a>
+ </div>
+ <ul class="navbar-item nav navbar-nav">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+ <nav class="navbar navbar-dark bg-inverse">
+ <div class="navbar-container">
+ <div class="navbar-item">
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <a class="navbar-brand" href="#">Responsive</a>
+ </div>
+
+ <div class="collapse navbar-toggleable-md" id="navbarResponsive">
+ <ul class="navbar-item navbar-item-primary nav navbar-nav">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </div>
+ </nav>
+
+ <nav class="navbar navbar-dark bg-inverse">
+ <div class="navbar-container">
+ <div class="navbar-item navbar-item-primary">
+ <a class="navbar-brand mr-2" href="#">Primary</a>
+ <ul class="nav navbar-nav d-inline-block">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ </div>
+
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+ <nav class="navbar navbar-dark bg-inverse">
+ <div class="navbar-container navbar-container-justified">
+ <div class="navbar-item">
+ <a class="navbar-brand" href="#">Justified & Centered nav</a>
+ </div>
+ <ul class="navbar-item nav navbar-nav text-md-center">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+
+
+
+ <div class="container">
+ <nav class="navbar navbar-light navbar-rounded bg-faded">
+ <div class="navbar-container">
+ <div class="navbar-item">
+ <a class="navbar-brand" href="#">Default</a>
+ </div>
+ <ul class="navbar-item nav navbar-nav">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+ <nav class="navbar navbar-light navbar-rounded bg-faded">
+ <div class="navbar-container">
+ <div class="navbar-item">
+ <a class="navbar-brand" href="#">Primary</a>
+ </div>
+ <ul class="navbar-item navbar-item-primary nav navbar-nav">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-xs-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+ <nav class="navbar navbar-light navbar-rounded bg-faded">
+ <div class="navbar-container navbar-container-justified">
+ <div class="navbar-item">
+ <a class="navbar-brand" href="#">Justified & Centered nav</a>
+ </div>
+ <ul class="navbar-item nav navbar-nav text-md-center">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="navbar-item form-inline text-md-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+
+
+ <hr>
+ old
+ <hr>
+
+
+ <nav class="navbar navbar-light bg-faded">
+ <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <div class="collapse navbar-toggleable" id="navbar-header">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <ul class="nav navbar-nav">
+ <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="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="form-inline float-right">
+ <input class="form-control mb-2 mb-md-0" type="text" placeholder="Search">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ </div>
+ </nav> <!-- /navbar -->
+
+ <!-- Main component for a primary marketing message or call to action -->
+ <div class="jumbotron">
+ <h1>Navbar example</h1>
+ <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</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>
+ </p>
+ </div>
+
+ </div> <!-- /container -->
+
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
+ <script src="../../dist/js/bootstrap.min.js"></script>
+ <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+ <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
+ </body>
+</html>
.navbar {
position: relative;
+ // padding: $navbar-padding-y $navbar-padding-x;
+ // @include clearfix;
+
+ // @include media-breakpoint-up(sm) {
+ // @include border-radius($navbar-border-radius);
+ // }
+}
+
+.navbar-container {
+ @include media-breakpoint-up(sm) {
+ display: table;
+ width: 100%;
+
+ // .navbar-container-justified
+ &-justified {
+ table-layout: fixed;
+ }
+ }
+}
+
+.navbar-item {
+ display: block;
padding: $navbar-padding-y $navbar-padding-x;
- @include clearfix;
+ // padding: .5rem .75rem;
+ vertical-align: middle;
+
+ @include media-breakpoint-up(sm) {
+ display: table-cell;
+ white-space: nowrap;
+
+ // .navbar-item-primary
+ &-primary {
+ width: 99%;
+
+ ~ .navbar-item {
+ width: 1%;
+ }
+ }
+ }
+}
+
+.navbar-nav {
+ // .nav-item {
+ // display: block;
+ // }
+
+ .nav-link {
+ display: block;
+ padding: .425rem .5rem;
+ }
@include media-breakpoint-up(sm) {
- @include border-radius($navbar-border-radius);
+ .nav-item {
+ display: inline-block;
+ }
}
}
+.navbar-toggler-left {
+ position: absolute;
+ // top: $navbar-padding-y;
+ left: $navbar-padding-x;
+}
+
+.navbar-toggler-right {
+ position: absolute;
+ // top: $navbar-padding-y;
+ right: $navbar-padding-x;
+}
+
+
+// .navbar-collapse-sm
+
+
// Navbar alignment options
//
// bottom of the page.
// A static, full width modifier with no rounded corners.
-.navbar-full {
- z-index: $zindex-navbar;
-
- @include media-breakpoint-up(sm) {
- @include border-radius(0);
- }
-}
+// .navbar-full {
+// z-index: $zindex-navbar;
+//
+// @include media-breakpoint-up(sm) {
+// @include border-radius(0);
+// }
+// }
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
//
.navbar-brand {
- float: left;
- padding-top: $navbar-brand-padding-y;
- padding-bottom: $navbar-brand-padding-y;
- margin-right: 1rem;
+ // float: left;
+ // padding-top: $navbar-brand-padding-y;
+ // padding-bottom: $navbar-brand-padding-y;
+ // margin-right: 1rem;
+ display: inline-block;
+ padding: .25rem .5rem;
font-size: $font-size-lg;
line-height: inherit;
//
// Custom navbar navigation built on the base `.nav` styles.
-.navbar-nav {
- .nav-item {
- float: left;
- }
-
- .nav-link {
- display: block;
- padding-top: .425rem;
- padding-bottom: .425rem;
-
- + .nav-link {
- margin-left: 1rem;
- }
- }
-
- .nav-item + .nav-item {
- margin-left: 1rem;
- }
-}
+// .navbar-nav {
+// .nav-item {
+// float: left;
+// }
+//
+// .nav-link {
+// display: block;
+// padding-top: .425rem;
+// padding-bottom: .425rem;
+//
+// + .nav-link {
+// margin-left: 1rem;
+// }
+// }
+//
+// .nav-item + .nav-item {
+// margin-left: 1rem;
+// }
+// }
// Dark links against a light background
.navbar-light {
@include clearfix;
@include media-breakpoint-down($breakpoint) {
- .navbar-brand {
- display: block;
- float: none;
- margin-top: .5rem;
- margin-right: 0;
- }
+ // .navbar-brand {
+ // display: block;
+ // float: none;
+ // margin-top: .5rem;
+ // margin-right: 0;
+ // }
.navbar-nav {
- margin-top: .5rem;
- margin-bottom: .5rem;
+ // margin-top: .5rem;
+ // margin-bottom: .5rem;
.dropdown-menu {
position: static;
float: none;
}
- .nav-item {
- float: none;
- margin-left: 0;
- }
+ // .nav-item {
+ // float: none;
+ // margin-left: 0;
+ // }
}
}
@include media-breakpoint-up($next) {
- display: block !important;
+ display: table-cell !important;
+ width: 100%;
}
}
}
projects / thirdparty / bootstrap.git / commitdiff
