From 5fb2c666acfd5e7d2f134d2cb5b65b828102c5a9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 7 Jan 2012 01:59:53 -0800
Subject: [PATCH] update the fluid examples to use new classes and clear the
floats properly from sidebar
---
bootstrap.css | 24 ++++++++++++--------
bootstrap.min.css | 11 +++++-----
docs/upgrading.html | 5 +++++
examples/fluid-reverse.html | 6 +++--
examples/fluid.html | 44 +++++++++++++++++++------------------
lib/scaffolding.less | 22 ++++++++++---------
6 files changed, 65 insertions(+), 47 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 411bc9c438..2f57e5f95c 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: Sat Jan 7 01:22:18 PST 2012
+ * Date: Sat Jan 7 01:58:07 PST 2012
*/
html, body {
margin: 0;
@@ -209,21 +209,27 @@ body {
.fluid-container:after {
clear: both;
}
-.fluid-sidebar-left, .fluid-sidebar-right {
+.fluid-sidebar {
width: 220px;
+ margin: 0 20px 18px;
}
-.fluid-sidebar-left {
+.sidebar-left {
+ padding-left: 260px;
+}
+.sidebar-right {
+ padding-right: 260px;
+}
+.sidebar-left .fluid-sidebar {
float: left;
+ margin-left: -240px;
}
-.fluid-sidebar-right {
+.sidebar-right .fluid-sidebar {
float: right;
+ margin-right: -240px;
}
.fluid-content {
- margin-left: 240px;
-}
-.fluid-container.reverse .fluid-content {
- margin-left: 0;
- margin-right: 240px;
+ float: left;
+ width: 100%;
}
a {
font-weight: inherit;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index fb036b6a08..9996dc3183 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -25,11 +25,12 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
.container:after{clear:both;}
.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;}
.fluid-container:after{clear:both;}
-.fluid-sidebar-left,.fluid-sidebar-right{width:220px;}
-.fluid-sidebar-left{float:left;}
-.fluid-sidebar-right{float:right;}
-.fluid-content{margin-left:240px;}
-.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;}
+.fluid-sidebar{width:220px;margin:0 20px 18px;}
+.sidebar-left{padding-left:260px;}
+.sidebar-right{padding-right:260px;}
+.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;}
+.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;}
+.fluid-content{float:left;width:100%;}
a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;}
.pull-right{float:right;}
.pull-left{float:left;}
diff --git a/docs/upgrading.html b/docs/upgrading.html
index c84cba1232..d22fa8c27f 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -102,6 +102,11 @@
<li>Added button bar options</li>
</ul>
</li>
+ <li>Examples
+ <ul>
+ <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
+ </ul>
+ </li>
</ul>
<!--
<li>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index 8df7311816..61aa08de99 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -42,8 +42,8 @@
</div>
</div>
- <div class="fluid-container reverse">
- <div class="fluid-sidebar-right">
+ <div class="fluid-container sidebar-right">
+ <div class="fluid-sidebar">
<div class="well">
<h5>Sidebar</h5>
<ul>
@@ -116,6 +116,8 @@
</div>
</div>
+ <hr>
+
<footer>
<p>© Company 2011</p>
</footer>
diff --git a/examples/fluid.html b/examples/fluid.html
index 66e07c82ed..bba78a329b 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -42,29 +42,29 @@
</div>
</div>
- <div class="fluid-container">
- <div class="fluid-sidebar-left">
- <div class="well">
- <h5>Sidebar</h5>
- <ul>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
+ <div class="fluid-container sidebar-left">
+ <div class="fluid-sidebar">
+ <div class="well side-nav">
+ <h5 class="nav-label">Sidebar</h5>
+ <ul class="nav-group">
+ <li class="active"><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
</ul>
- <h5>Sidebar</h5>
- <ul>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
+ <h5 class="nav-label">Sidebar</h5>
+ <ul class="nav-group">
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
</ul>
- <h5>Sidebar</h5>
- <ul>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
+ <h5 class="nav-label">Sidebar</h5>
+ <ul class="nav-group">
+ <li><a class="nav-item" href="#">Link</a></li>
+ <li><a class="nav-item" href="#">Link</a></li>
</ul>
</div>
</div>
@@ -116,6 +116,8 @@
</div>
</div>
+ <hr>
+
<footer>
<p>© Company 2011</p>
</footer>
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index d75adba56b..f454b2e91d 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -29,21 +29,23 @@ body {
padding-right: 20px;
.clearfix();
}
+
// Sidebars (left and right options)
-.fluid-sidebar-left,
-.fluid-sidebar-right {
+.fluid-sidebar {
width: 220px;
+ margin: 0 20px 18px;
}
-.fluid-sidebar-left { float: left; }
-.fluid-sidebar-right { float: right; }
+.sidebar-left { padding-left: 260px; }
+.sidebar-right { padding-right: 260px; }
+
+// Float the sidebars accordingly
+.sidebar-left .fluid-sidebar { float: left; margin-left: -240px; }
+.sidebar-right .fluid-sidebar { float: right; margin-right: -240px; }
+
// The main content area
.fluid-content {
- margin-left: 240px;
-}
-// Reverse layout for sidebar on right
-.fluid-container.reverse .fluid-content {
- margin-left: 0;
- margin-right: 240px;
+ float: left;
+ width: 100%;
}
--
GitLab