clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 04:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

Browse Source
This commit is contained in:
Jacob Thornton 2011-09-10 16:51:03 -07:00
commit 57a8672b77
8 changed files with 211 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
bootstrap-1.3.0.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 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;
}

21
bootstrap-1.3.0.min.css vendored
View File

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

121
docs/index.html
View File

@ -137,10 +137,11 @@
<h3>What's included</h3>
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
<ul>
<li><span class="label">New in 1.3</span> Javascript plugins</li>
<li>All original .less files</li>
<li>Fully compiled and minified CSS</li>
<li>Complete styleguide documentation</li>
<li>Example page template (more to come soon)</li>
<li>Three example pages with different Bootstrap layouts</li>
</ul>
</div>
</div><!-- /row -->
@ -575,6 +576,124 @@
</dl>
</div>
</div><!-- /row -->
<!-- Code -->
<div class="row">
<div class="span4">
<h2>Code</h2>
<p>
<code>&lt;code&gt;</code>
<code>&lt;pre&gt;</code>
</p>
<p>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.</p>
</div>
<div class="span12">
<h3>Presenting code</h3>
<p>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 <code>&lt;pre&gt;</code> element. For inline code, use the <code>&lt;code&gt;</code> element.</p>
<table class="zebra-striped">
<thead>
<tr>
<th style="width: 190px;">Element</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;code&gt;</code></td>
<td>In a line of text like this, your wrapped code will look like this <code>&gt;html&lt;</code> element.</td>
</tr>
<tr>
<td><code>&lt;pre&gt;</code></td>
<td>
<pre>&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt;
&lt;/div&gt;</pre>
<p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
</td>
</tr>
<tr>
<td><code>&lt;pre class="prettyprint"&gt;</code></td>
<td>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
<pre class="prettyprint">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt;
&lt;/div&gt;</pre>
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
<!-- Labels -->
<div class="row">
<div class="span4">
<h2>Inline labels</h2>
<p>Call attention to or flag any phrase in your body text.</p>
<p>
<code>&lt;span class="label"&gt;</code>
</p>
</div>
<div class="span12">
<h3>Label anything</h3>
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
<table class="zebra-striped">
<thead>
<tr>
<th style="width: 50%;">Label</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
<td>
<span class="label">Default</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
</td>
<td>
<span class="label success">New</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
</td>
<td>
<span class="label warning">Warning</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
</td>
<td>
<span class="label important">Important</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label notice"&gt;Notice&lt;/span&gt;</code>
</td>
<td>
<span class="label notice">Notice</span>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section>

9
examples/fluid.html
View File

@ -70,11 +70,10 @@
</div>
<div class="content">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>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.</p>
<p><a class="btn primary large">Learn more &raquo;</a></p>
</div>
<div class="row">
<div class="span4">a</div>
<div class="span12">b</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span6">

20
lib/patterns.less
View File

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

5
lib/preboot.less
View File

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

2
lib/scaffolding.less
View File

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

2
lib/type.less
View File

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