diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index 3e58427498..ee57571fb7 100644 --- a/bootstrap-1.3.0.css +++ b/bootstrap-1.3.0.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 Sep 10 14:46:06 PDT 2011 + * Date: Sat Sep 10 15:29:50 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). @@ -176,6 +176,8 @@ textarea { .clearfix:before, .clearfix:after { display: table; content: ""; + zoom: 1; + *display: inline; } .clearfix:after { clear: both; @@ -284,6 +286,8 @@ TODO: .row:before, .row:after { display: table; content: ""; + zoom: 1; + *display: inline; } .row:after { clear: both; @@ -433,11 +437,14 @@ body { .container:before, .container:after { display: table; content: ""; + zoom: 1; + *display: inline; } .container:after { clear: both; } .container-fluid { + position: relative; padding-left: 20px; padding-right: 20px; zoom: 1; @@ -445,6 +452,8 @@ body { .container-fluid:before, .container-fluid:after { display: table; content: ""; + zoom: 1; + *display: inline; } .container-fluid:after { clear: both; @@ -457,6 +466,16 @@ body { min-width: 700px; max-width: 1180px; margin-left: 240px; + zoom: 1; +} +.container-fluid > .content:before, .container-fluid > .content:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.container-fluid > .content:after { + clear: both; } .hide { display: none; @@ -645,7 +664,7 @@ code { pre { background-color: #f5f5f5; display: block; - padding: 17px; + padding: 8.5px; margin: 0 0 18px; line-height: 18px; font-size: 12px; @@ -1534,6 +1553,8 @@ a.menu:after, .dropdown-toggle:after { .pills:after { display: table; content: ""; + zoom: 1; + *display: inline; } .tabs:after, .pills:after { clear: both; @@ -2011,6 +2032,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .modal-footer:before, .modal-footer:after { display: table; content: ""; + zoom: 1; + *display: inline; } .modal-footer:after { clear: both; @@ -2175,3 +2198,26 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .fade.in { opacity: 1; } +.label { + padding: 1px 3px 2px; + background-color: #bfbfbf; + font-size: 9.75px; + font-weight: bold; + color: #ffffff; + text-transform: uppercase; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.label.important { + background-color: #c43c35; +} +.label.warning { + background-color: #f89406; +} +.label.success { + background-color: #46a546; +} +.label.notice { + background-color: #62cffc; +} diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css index 5ef9a22c08..873268391f 100644 --- a/bootstrap-1.3.0.min.css +++ b/bootstrap-1.3.0.min.css @@ -19,14 +19,14 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} -.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} +.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";zoom:1;*display:inline;} .clearfix:after{clear:both;} .center-block{display:block;margin-left:auto;margin-right:auto;} .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} +.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row:after{clear:both;} .row [class*="span"]{display:inline;float:left;margin-left:20px;} .row .span1{width:40px;} @@ -71,12 +71,13 @@ textarea{overflow:auto;vertical-align:top;} .row .offset-two-thirds{margin-left:660px;} html,body{background-color:#fff;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;} -.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";} +.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} -.container-fluid{padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";} +.container-fluid{position:relative;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;} .container-fluid:after{clear:both;} .container-fluid>.sidebar{float:left;width:220px;} -.container-fluid>.content{min-width:700px;max-width:1180px;margin-left:240px;} +.container-fluid>.content{min-width:700px;max-width:1180px;margin-left:240px;zoom:1;}.container-fluid>.content:before,.container-fluid>.content:after{display:table;content:"";zoom:1;*display:inline;} +.container-fluid>.content:after{clear:both;} .hide{display:none;} .show{display:block;} a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;} @@ -109,7 +110,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c address{display:block;line-height:18px;margin-bottom:18px;} code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:17px;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;} +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;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;} form .clearfix{margin-bottom:18px;} @@ -222,7 +223,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 #fff;}.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:#fff;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 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} +.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} .tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{background-color:#eee;border-bottom:1px solid #ddd;text-decoration:none;} @@ -277,7 +278,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal-header{border-bottom:1px solid #eee;padding:5px 15px;} .modal-body{padding:15px;} -.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;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";} +.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;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} .modal-footer:after{clear:both;} .modal-footer .btn{margin-left:5px;} .twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;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;} @@ -296,3 +297,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label.warning{background-color:#f89406;} +.label.success{background-color:#46a546;} +.label.notice{background-color:#62cffc;} diff --git a/docs/index.html b/docs/index.html index 8a250e1e93..3afdebd846 100644 --- a/docs/index.html +++ b/docs/index.html @@ -137,10 +137,11 @@

What's included

Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

@@ -575,6 +576,124 @@ + + + +
+
+

Code

+

+ <code> + <pre> +

+

Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.

+
+
+

Presenting code

+

Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <pre> element. For inline code, use the <code> element.

+ + + + + + + + + + + + + + + + + + + + + +
ElementResult
<code>In a line of text like this, your wrapped code will look like this >html< element.
<pre> +
<div>
+  <h1>Heading</h1>
+  <p>Something right here...</p>
+</div>
+

Note: Be sure to keep code within pre tags as close to the left as possible; it will render all tabs.

+
<pre class="prettyprint"> +

Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.

+
<div>
+  <h1>Heading</h1>
+  <p>Something right here...</p>
+</div>
+

Download google-code-prettify and view the readme for how to use.

+
+
+
+ + +
+
+

Inline labels

+

Call attention to or flag any phrase in your body text.

+

+ <span class="label"> +

+
+
+

Label anything

+

Ever needed one of those fancy New! or Important flags when writing code? Well, now you have them. Here's what's included by default:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelResult
+ <span class="label">Default</span> + + Default +
+ <span class="label success">New</span> + + New +
+ <span class="label warning">Warning</span> + + Warning +
+ <span class="label important">Important</span> + + Important +
+ <span class="label notice">Notice</span> + + Notice +
+
+
+ diff --git a/examples/fluid.html b/examples/fluid.html index 539b801c63..f613b0ebb3 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -70,11 +70,10 @@
-
-

Hello, world!

-

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-

Learn more »

-
+
+
a
+
b
+
diff --git a/lib/patterns.less b/lib/patterns.less index 3e0f56209b..53ad3f991d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -900,7 +900,7 @@ input[type=submit].btn { } -// Pattern Animations +// PATTERN ANIMATIONS // ------------------ .fade { @@ -909,4 +909,22 @@ input[type=submit].btn { &.in { opacity: 1; } +} + + +// LABELS +// ------ + +.label { + padding: 1px 3px 2px; + background-color: @grayLight; + font-size: @basefont * .75; + font-weight: bold; + color: @white; + text-transform: uppercase; + .border-radius(3px); + &.important { background-color: #c43c35; } + &.warning { background-color: @orange; } + &.success { background-color: @green; } + &.notice { background-color: lighten(@blue, 25%); } } \ No newline at end of file diff --git a/lib/preboot.less b/lib/preboot.less index dffeb64bf9..1ac8ca91c5 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -58,9 +58,12 @@ // Clearfix for clearing floats like a boss h5bp.com/q .clearfix { zoom: 1; - &:before, &:after { + &:before, + &:after { display: table; content: ""; + zoom: 1; + *display: inline; } &:after { clear: both; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 88f1139ef7..fb50cb221f 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -86,6 +86,7 @@ body { // Fluid layouts (left aligned, with sidebar, min- & max-width content) .container-fluid { + position: relative; padding-left: 20px; padding-right: 20px; .clearfix(); @@ -98,6 +99,7 @@ body { min-width: 700px; max-width: 1180px; margin-left: 240px; + .clearfix(); } } diff --git a/lib/type.less b/lib/type.less index c0c706462c..55ff809370 100644 --- a/lib/type.less +++ b/lib/type.less @@ -173,7 +173,7 @@ code { pre { background-color: #f5f5f5; display: block; - padding: @baseline - 1; + padding: (@baseline - 1) / 2; margin: 0 0 @baseline; line-height: @baseline; font-size: 12px;