Merge pull request #20947 from bardiharborow/examples

Normalize examples and update where relevant.
twbs · Oct 25, 2016 · f11f630 · f11f630
2 parents ee47abd + ba49d70
commit f11f630
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 43 deletions.
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
@@ -4,6 +4,7 @@
     <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">
@@ -35,7 +36,7 @@ <h4>Contact</h4>
         </div>
       </div>
     </div>
-    <div class="navbar navbar-static-top navbar-dark bg-inverse">
+    <div class="navbar navbar-full navbar-static-top navbar-dark bg-inverse">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a href="#" class="navbar-brand">Album</a>

diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css
@@ -3,6 +3,7 @@
 /* Padding below the footer and lighter body text */
 
 body {
+  padding-top: 3rem;
   padding-bottom: 3rem;
   color: #5a5a5a;
 }

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-static-top navbar-light bg-faded">
+    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
       <a href="#" class="navbar-brand">Carousel</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">

diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
@@ -27,35 +27,35 @@ <h1>Bootstrap grid examples</h1>
       <h3>Five grid tiers</h3>
       <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
 
-<div class="row">
-  <div class="col-xs-4">.col-xs-4</div>
-  <div class="col-xs-4">.col-xs-4</div>
-  <div class="col-xs-4">.col-xs-4</div>
-</div>
-
-<div class="row">
-  <div class="col-sm-4">.col-sm-4</div>
-  <div class="col-sm-4">.col-sm-4</div>
-  <div class="col-sm-4">.col-sm-4</div>
-</div>
-
-<div class="row">
-  <div class="col-md-4">.col-md-4</div>
-  <div class="col-md-4">.col-md-4</div>
-  <div class="col-md-4">.col-md-4</div>
-</div>
-
-<div class="row">
-  <div class="col-lg-4">.col-lg-4</div>
-  <div class="col-lg-4">.col-lg-4</div>
-  <div class="col-lg-4">.col-lg-4</div>
-</div>
-
-<div class="row">
-  <div class="col-xl-4">.col-xl-4</div>
-  <div class="col-xl-4">.col-xl-4</div>
-  <div class="col-xl-4">.col-xl-4</div>
-</div>
+      <div class="row">
+        <div class="col-xs-4">.col-xs-4</div>
+        <div class="col-xs-4">.col-xs-4</div>
+        <div class="col-xs-4">.col-xs-4</div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-4">.col-sm-4</div>
+        <div class="col-sm-4">.col-sm-4</div>
+        <div class="col-sm-4">.col-sm-4</div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <div class="row">
+        <div class="col-lg-4">.col-lg-4</div>
+        <div class="col-lg-4">.col-lg-4</div>
+        <div class="col-lg-4">.col-lg-4</div>
+      </div>
+
+      <div class="row">
+        <div class="col-xl-4">.col-xl-4</div>
+        <div class="col-xl-4">.col-xl-4</div>
+        <div class="col-xl-4">.col-xl-4</div>
+      </div>
 
       <h3>Three equal columns</h3>
       <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
@@ -135,7 +135,7 @@ <h3>Mixed: mobile, tablet, and desktop</h3>
       <hr>
 
       <h3>Column clearing</h3>
-      <p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
+      <p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
       <div class="row">
         <div class="col-xs-6 col-sm-3">
           .col-xs-6 .col-sm-3
@@ -164,10 +164,8 @@ <h3>Offset, push, and pull resets</h3>
         <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
       </div>
 
-
     </div> <!-- /container -->
 
-
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->

diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-static-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">

diff --git a/docs/examples/jumbotron/jumbotron.css b/docs/examples/jumbotron/jumbotron.css
@@ -1,4 +1,4 @@
 /* Move down content because we have a fixed navbar that is 50px tall */
 body {
-  padding-bottom: 2rem;
+  padding-top: 2rem;
 }
diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
@@ -74,7 +74,6 @@ <h4>Subheading</h4>
 
     </div> <!-- /container -->
 
-
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->

diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html
@@ -4,6 +4,7 @@
     <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">
@@ -21,12 +22,12 @@
 
     <div class="pos-f-t">
       <div class="collapse" id="navbar-header">
-        <div class="container-fluid bg-inverse p-1">
+        <div class="container-fluid bg-inverse text-white pt-1">
           <h3>Collapsed content</h3>
           <p>Toggleable via the navbar brand.</p>
         </div>
       </div>
-      <div class="navbar navbar-light bg-faded navbar-static-top">
+      <div class="navbar navbar-light bg-faded">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
       </div>
     </div>

diff --git a/docs/examples/navbar-top-fixed/navbar-top-fixed.css b/docs/examples/navbar-top-fixed/navbar-top-fixed.css
@@ -1,5 +1,5 @@
+/* Show it is fixed to the top */
 body {
-  /* Show it's not fixed to the top */
   min-height: 75rem;
-  padding-top: 6rem;
+  padding-top: 4.5rem;
 }
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
@@ -4,6 +4,7 @@
     <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">
@@ -20,12 +21,12 @@
   <body>
 
     <div class="collapse" id="navbar-header">
-      <div class="container-fluid bg-inverse p-1">
+      <div class="container-fluid bg-inverse text-white pt-1">
         <h3>Collapsed content</h3>
         <p>Toggleable via the navbar brand.</p>
       </div>
     </div>
-    <div class="navbar navbar-light bg-faded navbar-static-top mb-1">
+    <div class="navbar navbar-light bg-faded mb-1">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
     </div>