mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-30 12:24:19 +01:00
updated fluid example to not use floated sidebar and instead use position absolute; not ideal, but it works in most cases
This commit is contained in:
Mark Otto
parent
35793d98e7
commit
b62475a22e
13
bootstrap.css
vendored
13
bootstrap.css
vendored
@ -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: Wed Oct 19 23:10:57 PDT 2011
|
||||
* Date: Wed Oct 19 23:49:47 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -201,7 +201,6 @@ body {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.container:after {
|
||||
clear: both;
|
||||
@ -217,13 +216,14 @@ body {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.container-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.container-fluid > .sidebar {
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
.container-fluid > .content {
|
||||
@ -259,7 +259,6 @@ a:hover {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
@ -598,7 +597,6 @@ form .clearfix:before, form .clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
form .clearfix:after {
|
||||
clear: both;
|
||||
@ -1612,7 +1610,6 @@ a.menu:after, .dropdown-toggle:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.tabs:after, .pills:after {
|
||||
clear: both;
|
||||
@ -2199,7 +2196,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.modal-footer:after {
|
||||
clear: both;
|
||||
@ -2398,7 +2394,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.media-grid:after {
|
||||
clear: both;
|
||||
|
||||
16
bootstrap.min.css
vendored
16
bootstrap.min.css
vendored
@ -22,18 +22,18 @@ input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
|
||||
textarea{overflow:auto;vertical-align:top;}
|
||||
html,body{background-color:#ffffff;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;}
|
||||
.container:after{clear:both;}
|
||||
.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;}
|
||||
.container-fluid:after{clear:both;}
|
||||
.container-fluid>.sidebar{float:left;width:220px;}
|
||||
.container-fluid>.sidebar{position:absolute;top:0;left:20px;width:220px;}
|
||||
.container-fluid>.content{margin-left:240px;}
|
||||
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;}
|
||||
.pull-right{float:right;}
|
||||
.pull-left{float:left;}
|
||||
.hide{display:none;}
|
||||
.show{display:block;}
|
||||
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;}
|
||||
.row:after{clear:both;}
|
||||
.row>[class*="span"]{display:inline;float:left;margin-left:20px;}
|
||||
.span1{width:40px;}
|
||||
@ -106,7 +106,7 @@ code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
|
||||
form{margin-bottom:18px;}
|
||||
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
|
||||
form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;}
|
||||
form .clearfix:after{clear:both;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
|
||||
label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
|
||||
@ -257,7 +257,7 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten
|
||||
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover,.topbar .dropdown-menu a.hover,.dropdown-menu a.hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
|
||||
.tabs,.pills{margin:0 0 18px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.tabs,.pills{margin:0 0 18px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
|
||||
@ -324,7 +324,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
|
||||
.modal-body{padding:15px;}
|
||||
.modal-body form{margin-bottom:0;}
|
||||
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;}
|
||||
.modal-footer:after{clear:both;}
|
||||
.modal-footer .btn{float:right;margin-left:5px;}
|
||||
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:12000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
|
||||
@ -347,7 +347,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.label.warning{background-color:#f89406;}
|
||||
.label.success{background-color:#46a546;}
|
||||
.label.notice{background-color:#62cffc;}
|
||||
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;}
|
||||
.media-grid:after{clear:both;}
|
||||
.media-grid li{display:inline;}
|
||||
.media-grid a{float:left;padding:4px;margin:0 0 18px 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;}
|
||||
|
||||
@ -1115,6 +1115,7 @@
|
||||
<span class="add-on">@</span>
|
||||
<input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
|
||||
</div>
|
||||
<span class="help-block">Here's some help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
|
||||
@ -6,32 +6,31 @@
|
||||
// Clearfix for clearing floats like a boss h5bp.com/q
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
&:after {
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
.center-block() {
|
||||
display: block;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
.size(@height: 5px, @width: 5px) {
|
||||
height: @height;
|
||||
width: @width;
|
||||
height: @height;
|
||||
width: @width;
|
||||
}
|
||||
.square(@size: 5px) {
|
||||
.size(@size, @size);
|
||||
.size(@size, @size);
|
||||
}
|
||||
|
||||
// Input placeholder text
|
||||
@ -112,27 +111,27 @@
|
||||
|
||||
// Transitions
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
-ms-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
transition: @transition;
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
-ms-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
.background-clip(@clip) {
|
||||
-webkit-background-clip: @clip;
|
||||
-moz-background-clip: @clip;
|
||||
background-clip: @clip;
|
||||
-webkit-background-clip: @clip;
|
||||
-moz-background-clip: @clip;
|
||||
background-clip: @clip;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@columnCount, @columnGap: 20px) {
|
||||
-webkit-column-count: @columnCount;
|
||||
-moz-column-count: @columnCount;
|
||||
-webkit-column-count: @columnCount;
|
||||
-moz-column-count: @columnCount;
|
||||
column-count: @columnCount;
|
||||
-webkit-column-gap: @columnGap;
|
||||
-moz-column-gap: @columnGap;
|
||||
-moz-column-gap: @columnGap;
|
||||
column-gap: @columnGap;
|
||||
}
|
||||
|
||||
@ -140,11 +139,11 @@
|
||||
#translucent {
|
||||
.background(@color: @white, @alpha: 1) {
|
||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
||||
}
|
||||
.border(@color: @white, @alpha: 1) {
|
||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
.border(@color: @white, @alpha: 1) {
|
||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and allerts
|
||||
@ -210,8 +209,8 @@
|
||||
|
||||
// Opacity
|
||||
.opacity(@opacity: 100) {
|
||||
filter: e(%("alpha(opacity=%d)", @opacity));
|
||||
-khtml-opacity: @opacity / 100;
|
||||
-moz-opacity: @opacity / 100;
|
||||
opacity: @opacity / 100;
|
||||
filter: e(%("alpha(opacity=%d)", @opacity));
|
||||
-khtml-opacity: @opacity / 100;
|
||||
-moz-opacity: @opacity / 100;
|
||||
opacity: @opacity / 100;
|
||||
}
|
||||
@ -29,7 +29,9 @@ body {
|
||||
padding-right: 20px;
|
||||
.clearfix();
|
||||
> .sidebar {
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
// TODO in v2: rename this and .popover .content to be more specific
|
||||
|
||||
Loading…
Reference in New Issue
Block a user