Examples updates (#24898)

* fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
author: Mark Otto <[email protected]> 2018-01-14 16:06:52 -0800
committer: GitHub <[email protected]> 2018-01-14 16:06:52 -0800
commit: e946348eca928fa1c42dbb92c7a612543832dccc (patch)
tree: 14a87eed8416197c156e9090d02f1de604e6cdab /docs/4.0/examples/offcanvas
parent: 4a64592dd8b9e97790533d79350d60291a7d8789 (diff)
download: bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.tar.xz
bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.zip
3 files changed, 163 insertions, 120 deletions
diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html
index f95cf64a5..e03f9f30c 100644
--- a/docs/4.0/examples/offcanvas/index.html
+++ b/docs/4.0/examples/offcanvas/index.html
@@ -7,7 +7,7 @@
     <meta name="author" content="">
     <link rel="icon" href="../../../../favicon.ico">
 
-    <title>Off Canvas Template for Bootstrap</title>
+    <title>Offcanvas template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
     <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
@@ -16,27 +16,30 @@
     <link href="offcanvas.css" rel="stylesheet">
   </head>
 
-  <body>
+  <body class="bg-light">
 
     <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
-      <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">
+      <a class="navbar-brand" href="#">Offcanvas navbar</a>
+      <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+      <div class="navbar-collapse offcanvas-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>
+            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+            <a class="nav-link" href="#">Notifications</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
+            <a class="nav-link" href="#">Profile</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Switch account</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>
+            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
             <div class="dropdown-menu" aria-labelledby="dropdown01">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
@@ -51,75 +54,97 @@
       </div>
     </nav>
 
-    <main role="main" class="container">
+    <div class="nav-scroller bg-white box-shadow">
+      <nav class="nav nav-underline">
+        <a class="nav-link active" href="#">Dashboard</a>
+        <a class="nav-link" href="#">
+          Friends
+          <span class="badge badge-pill bg-light align-text-bottom">27</span>
+        </a>
+        <a class="nav-link" href="#">Explore</a>
+        <a class="nav-link" href="#">Suggestions</a>
+        <a class="nav-link" href="#">Link</a>
+        <a class="nav-link" href="#">Link</a>
+        <a class="nav-link" href="#">Link</a>
+        <a class="nav-link" href="#">Link</a>
+        <a class="nav-link" href="#">Link</a>
+      </nav>
+    </div>
 
-      <div class="row row-offcanvas row-offcanvas-right">
+    <main role="main" class="container">
+      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
+        <img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
+        <div class="lh-100">
+          <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
+          <small>Since 2011</small>
+        </div>
+      </div>
 
-        <div class="col-12 col-md-9">
-          <p class="float-right d-md-none">
-            <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
+      <div class="my-3 p-3 bg-white rounded box-shadow">
+        <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+          <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <strong class="d-block text-gray-dark">@username</strong>
+            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.
           </p>
-          <div class="jumbotron">
-            <h1>Hello, world!</h1>
-            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
-          </div>
-          <div class="row">
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="col-6 col-lg-4">
-              <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-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div><!--/span-->
-          </div><!--/row-->
-        </div><!--/span-->
+        </div>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
+          <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <strong class="d-block text-gray-dark">@username</strong>
+            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.
+          </p>
+        </div>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
+          <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <strong class="d-block text-gray-dark">@username</strong>
+            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.
+          </p>
+        </div>
+        <small class="d-block text-right mt-3">
+          <a href="#">All updates</a>
+        </small>
+      </div>
 
-        <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
-          <div class="list-group">
-            <a href="#" class="list-group-item active">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
-            <a href="#" class="list-group-item">Link</a>
+      <div class="my-3 p-3 bg-white rounded box-shadow">
+        <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <div class="d-flex justify-content-between align-items-center w-100">
+              <strong class="text-gray-dark">Full Name</strong>
+              <a href="#">Follow</a>
+            </div>
+            <span class="d-block">@username</span>
           </div>
-        </div><!--/span-->
-      </div><!--/row-->
-
-      <hr>
-
-    </main><!--/.container-->
-
-    <footer>
-      <p>&copy; Company 2017</p>
-    </footer>
+        </div>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <div class="d-flex justify-content-between align-items-center w-100">
+              <strong class="text-gray-dark">Full Name</strong>
+              <a href="#">Follow</a>
+            </div>
+            <span class="d-block">@username</span>
+          </div>
+        </div>
+        <div class="media text-muted pt-3">
+          <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+            <div class="d-flex justify-content-between align-items-center w-100">
+              <strong class="text-gray-dark">Full Name</strong>
+              <a href="#">Follow</a>
+            </div>
+            <span class="d-block">@username</span>
+          </div>
+        </div>
+        <small class="d-block text-right mt-3">
+          <a href="#">All suggestions</a>
+        </small>
+      </div>
+    </main>
 
     <!-- Bootstrap core JavaScript
     ================================================== -->
@@ -128,6 +153,7 @@
     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
     <script src="../../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../../../dist/js/bootstrap.min.js"></script>
+    <script src="../../../../assets/js/vendor/holder.min.js"></script>
     <script src="offcanvas.js"></script>
   </body>
 </html>
diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css
index 1762cd5c1..bc1650f49 100644
--- a/docs/4.0/examples/offcanvas/offcanvas.css
+++ b/docs/4.0/examples/offcanvas/offcanvas.css
@@ -1,63 +1,80 @@
-/*
- * Style tweaks
- * --------------------------------------------------
- */
 html,
 body {
   overflow-x: hidden; /* Prevent scroll on narrow devices */
 }
+
 body {
-  padding-top: 70px;
-}
-footer {
-  padding: 30px 0;
+  padding-top: 56px;
 }
 
-/*
- * Off Canvas
- * --------------------------------------------------
- */
-@media screen and (max-width: 767.98px) {
-  .row-offcanvas {
-    position: relative;
-    transition: all .25s ease-out;
+@media (max-width: 767.98px) {
+  .offcanvas-collapse {
+    position: fixed;
+    top: 56px; /* Height of navbar */
+    bottom: 0;
+    width: 100%;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    overflow-y: auto;
+    background-color: var(--gray-dark);
+    transition: -webkit-transform .3s ease-in-out;
+    transition: transform .3s ease-in-out;
+    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
   }
-
-  .row-offcanvas-right {
-    right: 0;
+  .offcanvas-collapse.open {
+    -webkit-transform: translateX(-1rem);
+    transform: translateX(-1rem); /* Account for horizontal padding on navbar */
   }
+}
 
-  .row-offcanvas-left {
-    left: 0;
-  }
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
 
-  .row-offcanvas-right .sidebar-offcanvas {
-    right: -100%; /* 12 columns */
-  }
+.nav-scroller .nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  color: rgba(255, 255, 255, .75);
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
 
-  .row-offcanvas-right.active .sidebar-offcanvas {
-    right: -50%; /* 6 columns */
-  }
+.nav-underline .nav-link {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: .875rem;
+  color: var(--secondary);
+}
 
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: -100%; /* 12 columns */
-  }
+.nav-underline .nav-link:hover {
+  color: var(--blue);
+}
 
-  .row-offcanvas-left.active .sidebar-offcanvas {
-    left: -50%; /* 6 columns */
-  }
+.nav-underline .active {
+  font-weight: 500;
+  color: var(--gray-dark);
+}
 
-  .row-offcanvas-right.active {
-    right: 50%; /* 6 columns */
-  }
+.text-white-50 { color: rgba(255, 255, 255, .5); }
 
-  .row-offcanvas-left.active {
-    left: 50%; /* 6 columns */
-  }
+.bg-purple { background-color: var(--purple); }
 
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-    width: 50%; /* 6 columns */
-  }
-}
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
+.lh-100 { line-height: 1; }
+.lh-125 { line-height: 1.25; }
+.lh-150 { line-height: 1.5; }
diff --git a/docs/4.0/examples/offcanvas/offcanvas.js b/docs/4.0/examples/offcanvas/offcanvas.js
index a41847081..bc3e46711 100644
--- a/docs/4.0/examples/offcanvas/offcanvas.js
+++ b/docs/4.0/examples/offcanvas/offcanvas.js
@@ -2,6 +2,6 @@ $(function () {
   'use strict'
 
   $('[data-toggle="offcanvas"]').on('click', function () {
-    $('.row-offcanvas').toggleClass('active')
+    $('.offcanvas-collapse').toggleClass('open')
   })
 })
author	Mark Otto <[email protected]>	2018-01-14 16:06:52 -0800
committer	GitHub <[email protected]>	2018-01-14 16:06:52 -0800
commit	e946348eca928fa1c42dbb92c7a612543832dccc (patch)
tree	14a87eed8416197c156e9090d02f1de604e6cdab /docs/4.0/examples/offcanvas
parent	4a64592dd8b9e97790533d79350d60291a7d8789 (diff)
download	bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.tar.xz bootstrap-e946348eca928fa1c42dbb92c7a612543832dccc.zip