From 71d80af89d5d6f1ba606fcdf1c6442af151a5963 Mon Sep 17 00:00:00 2001
From: Alex Chamberlain <alex@alexchamberlain.co.uk>
Date: Wed, 30 Nov 2011 22:00:02 +0000
Subject: [PATCH] CSS and Example for menus in the footer.
---
bootstrap.css | 64 +++++++++++++++++++++++++++++++++++++++++---
bootstrap.min.css | 28 ++++++++++---------
examples/hero.html | 12 ++++++++-
lib/bootstrap.less | 3 ++-
lib/footer-menu.less | 16 +++++++++++
lib/scaffolding.less | 30 +++++++++------------
6 files changed, 116 insertions(+), 37 deletions(-)
create mode 100644 lib/footer-menu.less
diff --git a/bootstrap.css b/bootstrap.css
index 4c4d85aa9e..d97656e2d4 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Nov 25 21:33:58 PST 2011
+ * Date:
*/
html, body {
margin: 0;
@@ -257,45 +257,76 @@ a:hover {
.row:after {
clear: both;
}
-[class*="span"] {
+.span1 {
display: inline;
float: left;
margin-left: 20px;
-}
-.span1 {
width: 60px;
}
.span2 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 140px;
}
.span3 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 220px;
}
.span4 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 300px;
}
.span5 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 380px;
}
.span6 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 460px;
}
.span7 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 540px;
}
.span8 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 620px;
}
.span9 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 700px;
}
.span10 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 780px;
}
.span11 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 860px;
}
.span12 {
+ display: inline;
+ float: left;
+ margin-left: 20px;
width: 940px;
}
.offset1 {
@@ -2431,6 +2462,31 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
+footer.menu {
+ margin-left: -20px;
+ zoom: 1;
+}
+footer.menu:before, footer.menu:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+footer.menu:after {
+ clear: both;
+}
+footer.menu > ul {
+ margin: 0px;
+ padding-bottom: 20px;
+ list-style: none;
+ display: inline;
+ float: left;
+ margin-left: 20px;
+ width: 140px;
+}
+footer.menu > ul > li:first-child {
+ text-weight: bold;
+}
@media (max-width: 480px) {
.container {
width: auto;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 2a802744cf..97da93eedd 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -37,19 +37,18 @@ a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a:
.show{display:block;}
.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;}
.row:after{clear:both;}
-[class*="span"]{display:inline;float:left;margin-left:20px;}
-.span1{width:60px;}
-.span2{width:140px;}
-.span3{width:220px;}
-.span4{width:300px;}
-.span5{width:380px;}
-.span6{width:460px;}
-.span7{width:540px;}
-.span8{width:620px;}
-.span9{width:700px;}
-.span10{width:780px;}
-.span11{width:860px;}
-.span12{width:940px;}
+.span1{display:inline;float:left;margin-left:20px;width:60px;}
+.span2{display:inline;float:left;margin-left:20px;width:140px;}
+.span3{display:inline;float:left;margin-left:20px;width:220px;}
+.span4{display:inline;float:left;margin-left:20px;width:300px;}
+.span5{display:inline;float:left;margin-left:20px;width:380px;}
+.span6{display:inline;float:left;margin-left:20px;width:460px;}
+.span7{display:inline;float:left;margin-left:20px;width:540px;}
+.span8{display:inline;float:left;margin-left:20px;width:620px;}
+.span9{display:inline;float:left;margin-left:20px;width:700px;}
+.span10{display:inline;float:left;margin-left:20px;width:780px;}
+.span11{display:inline;float:left;margin-left:20px;width:860px;}
+.span12{display:inline;float:left;margin-left:20px;width:940px;}
.offset1{margin-left:100px;}
.offset2{margin-left:180px;}
.offset3{margin-left:260px;}
@@ -350,4 +349,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.media-grid li{display:inline;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
+footer.menu{margin-left:-20px;zoom:1;}footer.menu:before,footer.menu:after{display:table;*display:inline;content:"";zoom:1;}
+footer.menu:after{clear:both;}
+footer.menu>ul{margin:0px;padding-bottom:20px;list-style:none;display:inline;float:left;margin-left:20px;width:140px;}footer.menu>ul>li:first-child{text-weight:bold;}
@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/examples/hero.html b/examples/hero.html
index d84eb88434..96f05b0ff6 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -69,7 +69,17 @@
</div>
</div>
- <footer>
+ <footer class="menu">
+ <ul>
+ <li>Bootstrap</li>
+ <li><a href="http://twitter.github.com/bootstrap">Homepage</a></li>
+ </ul>
+ <ul>
+ <li>Example Menu</li>
+ <li><a href="#">Item 1</a></li>
+ <li><a href="#">Item 2</a></li>
+ <li><a href="#">Item 3</a></li>
+ </ul>
<p>© Company 2011</p>
</footer>
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index ffad359130..ca706ddc8f 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -34,6 +34,7 @@
@import "twipsy.less";
@import "popovers.less";
@import "media-grids.less";
+@import "footer-menu.less";
// Responsive
-@import "responsive.less";
\ No newline at end of file
+@import "responsive.less";
diff --git a/lib/footer-menu.less b/lib/footer-menu.less
new file mode 100644
index 0000000000..ee25063d88
--- /dev/null
+++ b/lib/footer-menu.less
@@ -0,0 +1,16 @@
+footer.menu {
+ .row;
+ > ul {
+ margin: 0px;
+ padding-bottom: @gridGutterWidth;
+ list-style: none;
+
+ .span2;
+
+ > li {
+ &:first-child {
+ text-weight: bold;
+ }
+ }
+ }
+}
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 3e231aae5e..ab3ab164f2 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -87,25 +87,19 @@ a {
.clearfix();
}
-// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
-// Credit to @dhg for the idea
-[class*="span"] {
- .gridColumn();
-}
-
// Default columns
-.span1 { .columns(1); }
-.span2 { .columns(2); }
-.span3 { .columns(3); }
-.span4 { .columns(4); }
-.span5 { .columns(5); }
-.span6 { .columns(6); }
-.span7 { .columns(7); }
-.span8 { .columns(8); }
-.span9 { .columns(9); }
-.span10 { .columns(10); }
-.span11 { .columns(11); }
-.span12 { .columns(12); }
+.span1 { .gridColumn(); .columns(1); }
+.span2 { .gridColumn(); .columns(2); }
+.span3 { .gridColumn(); .columns(3); }
+.span4 { .gridColumn(); .columns(4); }
+.span5 { .gridColumn(); .columns(5); }
+.span6 { .gridColumn(); .columns(6); }
+.span7 { .gridColumn(); .columns(7); }
+.span8 { .gridColumn(); .columns(8); }
+.span9 { .gridColumn(); .columns(9); }
+.span10 { .gridColumn(); .columns(10); }
+.span11 { .gridColumn(); .columns(11); }
+.span12 { .gridColumn(); .columns(12); }
// Offset column options
.offset1 { .offset(1); }
--
GitLab