rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

update the fluid examples to use new classes and clear the floats properly from sidebar

Browse Source
This commit is contained in:
Mark Otto 2012-01-07 01:59:53 -08:00
parent 45d671d97f
commit 5fb2c666ac
6 changed files with 65 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
bootstrap.css vendored
View File

@ -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;

11
bootstrap.min.css vendored
View File

@ -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;}

5
docs/upgrading.html
View File

@ -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>

6
examples/fluid-reverse.html
View File

@ -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>&copy; Company 2011</p>
</footer>

44
examples/fluid.html
View File

@ -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>&copy; Company 2011</p>
</footer>

22
lib/scaffolding.less
View File

@ -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%;
}