update justified nav to use justified navbar; remove safari bug warning given flexbox...

diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index a757a5c9a82b2a6e18c07c302b96dd0ab479002f..73c44352799c183d8c1027674fc7d32d231fcd70 100644 (file)
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -22,19 +22,38 @@
 
     <div class="container">
 
-      <!-- The justified navigation menu is meant for single line per list item.
-           Multiple lines will require custom code not provided by Bootstrap. -->
       <div class="masthead">
         <h3 class="text-muted">Project name</h3>
-        <nav>
-          <ul class="nav nav-justified">
-            <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Downloads</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
-          </ul>
+
+        <nav class="navbar navbar-light bg-faded rounded mb-3">
+          <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+          <div class="collapse navbar-toggleable-md" id="navbarCollapse">
+            <ul class="nav navbar-nav text-md-center flex-items-md-between">
+              <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="#">Projects</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Services</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Downloads</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">About</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>
+          </div>
         </nav>
       </div>
 
@@ -48,8 +67,7 @@
       <!-- Example row of columns -->
       <div class="row">
         <div class="col-lg-4">
-          <h2>Safari bug warning!</h2>
-          <p class="text-danger">As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
+          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
         </div>
@@ -76,6 +94,10 @@
     <!-- 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>

diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css
index bd28e271e356b978e3395b024d7c743ef4bb1ac7..fdec2a433458f3269af068e1b33dd2a5dadee01b 100644 (file)
--- a/docs/examples/justified-nav/justified-nav.css
+++ b/docs/examples/justified-nav/justified-nav.css
@@ -19,85 +19,18 @@ body {
   font-size: 21px;
 }
 
-/* add .nav-justified, see: https://github.com/twbs/bootstrap/issues/18653 */
-.nav-justified {
-  width: 100%;
-}
-.nav-item {
-  float: none;
-}
-.nav-link {
-  width: 100%;
-  margin-bottom: 5px;
-  text-align: center;
+.navbar {
+  background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
+  border: 1px solid #e5e5e5;
 }
 
 @media (min-width: 768px) {
-  .nav-item {
-    display: table-cell;
-    width: 1%;
+  .navbar-nav {
+    display: flex;
   }
-  .nav-link {
-    margin-bottom: 0;
-  }
-}
 
-/* Customize the nav-justified links to be fill the entire space of the .navbar */
-
-.nav-justified {
-  background-color: #eee;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-.nav-link {
-  padding-top: 15px;
-  padding-bottom: 15px;
-  margin-bottom: 0;
-  font-weight: bold;
-  color: #777;
-  text-align: center;
-  background-color: #e5e5e5; /* Old browsers */
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5),to(#e5e5e5));
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
-  background-repeat: repeat-x; /* Repeat the gradient */
-  border-bottom: 1px solid #d5d5d5;
-}
-.nav-link.active,
-.nav-link.active:hover,
-.nav-link.active:focus {
-  background-color: #ddd;
-  background-image: none;
-  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
-          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
-}
-.nav-item:first-child .nav-link {
-  border-radius: 5px 5px 0 0;
-}
-.nav-item:last-child .nav-link {
-  border-radius: 0 0 5px 5px;
-}
-
-@media (min-width: 768px) {
-  .nav-justified {
-    max-height: 52px;
-  }
-  .nav-link {
-    border-right: 1px solid #d5d5d5;
-    border-left: 1px solid #fff;
-  }
-  .nav-item:first-child .nav-link {
-    border-left: 0;
-    border-radius: 5px 0 0 5px;
-  }
-  .nav-item:last-child .nav-link {
-    border-right: 0;
-    border-radius: 0 5px 5px 0;
+  .navbar-nav .nav-item {
+    flex: 1 0 auto;
   }
 }