]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d236041)
redo album navbar with new styles
authorMark Otto <markdotto@gmail.com>
Thu, 22 Dec 2016 04:46:05 +0000 (20:46 -0800)
committerMark Otto <markd.otto@gmail.com>
Thu, 22 Dec 2016 21:48:07 +0000 (13:48 -0800)
docs/examples/album/album.css patch | blob | blame | history
docs/examples/album/index.html patch | blob | blame | history

diff --git a/docs/examples/album/album.css b/docs/examples/album/album.css
index 66380c0e60c830b1f5292515a690d5187e74f2ce..1d052298daad27c3699cde9a1a9deb65f843fe4d 100644 (file)
--- a/docs/examples/album/album.css
+++ b/docs/examples/album/album.css
@@ -6,33 +6,6 @@ body {
   margin-bottom: 0;
 }
 
-.navbar-collapse .container-fluid {
-  padding: 2rem 2.5rem;
-  border-bottom: 1px solid #55595c;
-}
-
-.navbar-collapse h4 {
-  color: #818a91;
-}
-
-.navbar-collapse .text-muted {
-  color: #818a91;
-}
-
-.about {
-  float: left;
-  max-width: 30rem;
-  margin-right: 3rem;
-}
-
-.social a {
-  font-weight: 500;
-  color: #eceeef;
-}
-.social a:hover {
-  color: #fff;
-}
-
 .jumbotron {
   padding-top: 6rem;
   padding-bottom: 6rem;
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index ecfa63befc709a139ab71c7e5a1f2fc8a30606ef..237c2e98061e4a20184b59cb676f1bbe6a85afd7 100644 (file)
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -20,26 +20,28 @@
 
   <body>
 
-    <div class="navbar-collapse collapse inverse" id="navbar-header">
-      <div class="container-fluid">
-        <div class="about">
-          <h4>About</h4>
-          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
-        </div>
-        <div class="social">
-          <h4>Contact</h4>
-          <ul class="list-unstyled">
-            <li><a href="#">Follow on Twitter</a></li>
-            <li><a href="#">Like on Facebook</a></li>
-            <li><a href="#">Email me</a></li>
-          </ul>
+    <div class="collapse bg-inverse" id="navbarHeader">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-8 py-4">
+            <h4 class="text-white">About</h4>
+            <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+          </div>
+          <div class="col-sm-4 py-4">
+            <h4 class="text-white">Contact</h4>
+            <ul class="list-unstyled">
+              <li><a href="#" class="text-white">Follow on Twitter</a></li>
+              <li><a href="#" class="text-white">Like on Facebook</a></li>
+              <li><a href="#" class="text-white">Email me</a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-    <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>
+    <div class="navbar navbar-dark bg-inverse navbar-toggleable-sm">
+      <div class="container flex-items-between">
         <a href="#" class="navbar-brand">Album</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button>
       </div>
     </div>
 
Mirror of https://github.com/twbs/bootstrap.git