Skip to content

B
bootstrap
Commit e255b4f5 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

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

parents 173be3f1 2674210f
Hide whitespace changes
Inline Side-by-side
Showing with 342 additions and 212 deletions
bootstrap-1.3.0.css
View file @ e255b4f5
......@@ -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 22:46:48 PDT 2011
* Date: Sun Sep 11 19:59:57 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).
......@@ -374,129 +374,129 @@ a:hover {
.row:after {
clear: both;
}
.row [class*="span"] {
[class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.row .span1 {
.span1 {
width: 40px;
}
.row .span2 {
.span2 {
width: 100px;
}
.row .span3 {
.span3 {
width: 160px;
}
.row .span4 {
.span4 {
width: 220px;
}
.row .span5 {
.span5 {
width: 280px;
}
.row .span6 {
.span6 {
width: 340px;
}
.row .span7 {
.span7 {
width: 400px;
}
.row .span8 {
.span8 {
width: 460px;
}
.row .span9 {
.span9 {
width: 520px;
}
.row .span10 {
.span10 {
width: 580px;
}
.row .span11 {
.span11 {
width: 640px;
}
.row .span12 {
.span12 {
width: 700px;
}
.row .span13 {
.span13 {
width: 760px;
}
.row .span14 {
.span14 {
width: 820px;
}
.row .span15 {
.span15 {
width: 880px;
}
.row .span16 {
.span16 {
width: 940px;
}
.row .span17 {
.span17 {
width: 1000px;
}
.row .span18 {
.span18 {
width: 1060px;
}
.row .span19 {
.span19 {
width: 1120px;
}
.row .span20 {
.span20 {
width: 1180px;
}
.row .span21 {
.span21 {
width: 1240px;
}
.row .span22 {
.span22 {
width: 1300px;
}
.row .span23 {
.span23 {
width: 1360px;
}
.row .span24 {
.span24 {
width: 1420px;
}
.row .offset1 {
.offset1 {
margin-left: 80px;
}
.row .offset2 {
.offset2 {
margin-left: 140px;
}
.row .offset3 {
.offset3 {
margin-left: 200px;
}
.row .offset4 {
.offset4 {
margin-left: 260px;
}
.row .offset5 {
.offset5 {
margin-left: 320px;
}
.row .offset6 {
.offset6 {
margin-left: 380px;
}
.row .offset7 {
.offset7 {
margin-left: 440px;
}
.row .offset8 {
.offset8 {
margin-left: 500px;
}
.row .offset9 {
.offset9 {
margin-left: 560px;
}
.row .offset10 {
.offset10 {
margin-left: 620px;
}
.row .offset11 {
.offset11 {
margin-left: 680px;
}
.row .offset12 {
.offset12 {
margin-left: 740px;
}
.row .span-one-third {
.span-one-third {
width: 300px;
}
.row .span-two-thirds {
.span-two-thirds {
width: 620px;
}
.row .offset-one-third {
.offset-one-third {
margin-left: 340px;
}
.row .offset-two-thirds {
.offset-two-thirds {
margin-left: 660px;
}
/* Typography.less
......@@ -692,13 +692,13 @@ fieldset legend {
padding-left: 150px;
font-size: 19.5px;
line-height: 1;
*margin: 0 0 5px 145px;
color: #404040;
*padding: 0 0 5px 145px;
/* IE6-7 */
*line-height: 1.5;
/* IE6-7 */
color: #404040;
}
form .clearfix {
margin-bottom: 18px;
......@@ -771,6 +771,9 @@ input[type=button], input[type=reset], input[type=submit] {
select, input[type=file] {
height: 27px;
line-height: 27px;
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
}
textarea {
height: auto;
......@@ -880,6 +883,70 @@ select.xxlarge {
textarea.xxlarge {
overflow-y: auto;
}
input.span1, textarea.span1, select.span1 {
width: 30px;
margin-left: 0;
}
input.span2, textarea.span2, select.span2 {
width: 90px;
margin-left: 0;
}
input.span3, textarea.span3, select.span3 {
width: 150px;
margin-left: 0;
}
input.span4, textarea.span4, select.span4 {
width: 210px;
margin-left: 0;
}
input.span5, textarea.span5, select.span5 {
width: 270px;
margin-left: 0;
}
input.span6, textarea.span6, select.span6 {
width: 330px;
margin-left: 0;
}
input.span7, textarea.span7, select.span7 {
width: 390px;
margin-left: 0;
}
input.span8, textarea.span8, select.span8 {
width: 450px;
margin-left: 0;
}
input.span9, textarea.span9, select.span9 {
width: 510px;
margin-left: 0;
}
input.span10, textarea.span10, select.span10 {
width: 570px;
margin-left: 0;
}
input.span11, textarea.span11, select.span11 {
width: 630px;
margin-left: 0;
}
input.span12, textarea.span12, select.span12 {
width: 690px;
margin-left: 0;
}
input.span13, textarea.span13, select.span13 {
width: 750px;
margin-left: 0;
}
input.span14, textarea.span14, select.span14 {
width: 810px;
margin-left: 0;
}
input.span15, textarea.span15, select.span15 {
width: 870px;
margin-left: 0;
}
input.span16, textarea.span16, select.span16 {
width: 930px;
margin-left: 0;
}
input[disabled],
select[disabled],
textarea[disabled],
......@@ -1237,10 +1304,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
color: #ffffff;
text-decoration: none;
}
.topbar .brand, .topbar h3 {
.topbar h3 {
position: relative;
}
.topbar .brand a, .topbar h3 a {
.topbar h3 a, .topbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
......@@ -2252,7 +2319,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.media-grid li {
display: inline;
}
.media-grid .thumbnail {
.media-grid a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
......@@ -2264,12 +2331,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-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 .thumbnail:hover {
.media-grid a img {
display: block;
}
.media-grid a:hover {
border-color: #0069d6;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.media-grid img {
display: block;
}
bootstrap-1.3.0.min.css
View file @ e255b4f5
......@@ -42,47 +42,47 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.pull-left{float:left;}
.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;}
.row .span2{width:100px;}
.row .span3{width:160px;}
.row .span4{width:220px;}
.row .span5{width:280px;}
.row .span6{width:340px;}
.row .span7{width:400px;}
.row .span8{width:460px;}
.row .span9{width:520px;}
.row .span10{width:580px;}
.row .span11{width:640px;}
.row .span12{width:700px;}
.row .span13{width:760px;}
.row .span14{width:820px;}
.row .span15{width:880px;}
.row .span16{width:940px;}
.row .span17{width:1000px;}
.row .span18{width:1060px;}
.row .span19{width:1120px;}
.row .span20{width:1180px;}
.row .span21{width:1240px;}
.row .span22{width:1300px;}
.row .span23{width:1360px;}
.row .span24{width:1420px;}
.row .offset1{margin-left:80px;}
.row .offset2{margin-left:140px;}
.row .offset3{margin-left:200px;}
.row .offset4{margin-left:260px;}
.row .offset5{margin-left:320px;}
.row .offset6{margin-left:380px;}
.row .offset7{margin-left:440px;}
.row .offset8{margin-left:500px;}
.row .offset9{margin-left:560px;}
.row .offset10{margin-left:620px;}
.row .offset11{margin-left:680px;}
.row .offset12{margin-left:740px;}
.row .span-one-third{width:300px;}
.row .span-two-thirds{width:620px;}
.row .offset-one-third{margin-left:340px;}
.row .offset-two-thirds{margin-left:660px;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
.span1{width:40px;}
.span2{width:100px;}
.span3{width:160px;}
.span4{width:220px;}
.span5{width:280px;}
.span6{width:340px;}
.span7{width:400px;}
.span8{width:460px;}
.span9{width:520px;}
.span10{width:580px;}
.span11{width:640px;}
.span12{width:700px;}
.span13{width:760px;}
.span14{width:820px;}
.span15{width:880px;}
.span16{width:940px;}
.span17{width:1000px;}
.span18{width:1060px;}
.span19{width:1120px;}
.span20{width:1180px;}
.span21{width:1240px;}
.span22{width:1300px;}
.span23{width:1360px;}
.span24{width:1420px;}
.offset1{margin-left:80px;}
.offset2{margin-left:140px;}
.offset3{margin-left:200px;}
.offset4{margin-left:260px;}
.offset5{margin-left:320px;}
.offset6{margin-left:380px;}
.offset7{margin-left:440px;}
.offset8{margin-left:500px;}
.offset9{margin-left:560px;}
.offset10{margin-left:620px;}
.offset11{margin-left:680px;}
.offset12{margin-left:740px;}
.span-one-third{width:300px;}
.span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;}
.offset-two-thirds{margin-left:660px;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
......@@ -112,7 +112,7 @@ code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospa
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;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;}
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;}
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;}
......@@ -122,7 +122,7 @@ input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#fff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;}
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
textarea{height:auto;}
.uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
:-moz-placeholder{color:#bfbfbf;}
......@@ -140,6 +140,22 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;}
input.span1,textarea.span1,select.span1{width:30px;margin-left:0;}
input.span2,textarea.span2,select.span2{width:90px;margin-left:0;}
input.span3,textarea.span3,select.span3{width:150px;margin-left:0;}
input.span4,textarea.span4,select.span4{width:210px;margin-left:0;}
input.span5,textarea.span5,select.span5{width:270px;margin-left:0;}
input.span6,textarea.span6,select.span6{width:330px;margin-left:0;}
input.span7,textarea.span7,select.span7{width:390px;margin-left:0;}
input.span8,textarea.span8,select.span8{width:450px;margin-left:0;}
input.span9,textarea.span9,select.span9{width:510px;margin-left:0;}
input.span10,textarea.span10,select.span10{width:570px;margin-left:0;}
input.span11,textarea.span11,select.span11{width:630px;margin-left:0;}
input.span12,textarea.span12,select.span12{width:690px;margin-left:0;}
input.span13,textarea.span13,select.span13{width:750px;margin-left:0;}
input.span14,textarea.span14,select.span14{width:810px;margin-left:0;}
input.span15,textarea.span15,select.span15{width:870px;margin-left:0;}
input.span16,textarea.span16,select.span16{width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
......@@ -199,7 +215,8 @@ table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.topbar a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
.topbar .brand,.topbar h3{position:relative;}.topbar .brand a,.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
.topbar h3{position:relative;}
.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;}
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.topbar form.pull-right{float:right;}
......@@ -308,5 +325,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.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:after{clear:both;}
.media-grid li{display:inline;}
.media-grid .thumbnail{float:left;padding:4px;margin:0 0 20px 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 .thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
.media-grid img{display:block;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 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;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
docs/assets/css/docs.css
View file @ e255b4f5
......@@ -203,7 +203,6 @@ section > .row {
/* Render mini layout previews
-------------------------------------------------- */
.diagram,
.mini-layout {
border: 1px solid #ddd;
-webkit-border-radius: 6px;
......@@ -213,10 +212,6 @@ section > .row {
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
box-shadow: 0 1px 2px rgba(0,0,0,.075);
}
.diagram {
height: 140px;
padding: 4px;
}
.mini-layout {
height: 340px;
margin-bottom: 20px;
......
docs/index.html
View file @ e255b4f5
......@@ -40,7 +40,7 @@
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<h3><a href="#">Bootstrap</a></h3>
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
......@@ -151,18 +151,17 @@
<div class="span12">
<h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
<div class="row">
<div class="span4">
<a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit"></a>
</div>
<div class="span4">
<a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a>
</div>
<div class="span4">
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
</div>
</div>
<ul class="media-grid">
<li>
<a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
</li>
<li>
<a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
</li>
<li>
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
</li>
</ul>
</div>
<div class="span4">
<h3>Theming Bootstrap</h3>
......@@ -717,59 +716,59 @@
<h4>Large</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
</ul>
<h4>Medium</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a>
</li>
</ul>
<h4>Small</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
<a href="#">
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a>
</li>
</ul>
......@@ -1186,11 +1185,34 @@
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Form field sizes</h2>
<p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
<p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
</div>
<div class="span12">
<form action="">
<div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
<div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
<div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
<div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
<div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
<div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
<div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
<div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
<div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
<div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
<div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
</form>
</div>
</div>
<div class="row">
<div class="span4">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<h3>Example buttons</h3>
......@@ -1764,7 +1786,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h2>Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
<table>
<table class="zebra-striped">
<thead>
<tr>
<th style="width: 120px;">Method</th>
......@@ -1772,7 +1794,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>Node with makefile</td>
<td>
......@@ -1784,7 +1805,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr>
<td>Javascript</td>
<td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and your Bootstrap code) in the <code>head</code>.</p>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
......@@ -1795,9 +1816,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<tr>
<td>Command line</td>
<td>
<p>If you already have the less command line tool installed you can simply run the following command:</p>
<p>If you already have the less command line tool installed, simply run the following command:</p>
<pre>$ lessc ./lib/bootstrap.less > bootstrap-1.3.0.css</pre>
<p>Be sure to include the <code>--compress</code> flag in that command if you're trying to save some bytes!
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
</td>
</tr>
<tr>
......
lib/forms.less
View file @ e255b4f5
......@@ -19,9 +19,9 @@ fieldset {
padding-left: 150px;
font-size: @basefont * 1.5;
line-height: 1;
*margin: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
color: @grayDark;
*padding: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
}
}
......@@ -105,8 +105,9 @@ input[type=submit] {
select,
input[type=file] {
height: @baseline * 1.5;
height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseline * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
textarea {
......@@ -183,6 +184,7 @@ form div.error {
}
// Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
......@@ -223,6 +225,34 @@ textarea.xxlarge {
overflow-y: auto;
}
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
margin-left: 0;
}
input,
textarea,
select {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
&.span3 { .formColumns(3); }
&.span4 { .formColumns(4); }
&.span5 { .formColumns(5); }
&.span6 { .formColumns(6); }
&.span7 { .formColumns(7); }
&.span8 { .formColumns(8); }
&.span9 { .formColumns(9); }
&.span10 { .formColumns(10); }
&.span11 { .formColumns(11); }
&.span12 { .formColumns(12); }
&.span13 { .formColumns(13); }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); }
&.span16 { .formColumns(16); }
}
// Disabled and read-only inputs
input[disabled],
select[disabled],
......
lib/patterns.less
View file @ e255b4f5
......@@ -33,19 +33,19 @@
// Website name
// h3 left for backwards compatibility
.brand,
h3 {
position: relative;
a {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
}
h3 a,
.brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
// Plain text in topbar
......@@ -941,19 +941,19 @@ input[type=submit].btn {
li {
display: inline;
}
.thumbnail {
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
img {
display: block;
}
}
lib/scaffolding.less
View file @ e255b4f5
......@@ -79,58 +79,58 @@ a {
.row {
.clearfix();
margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
[class*="span"] {
.gridColumn();
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
[class*="span"] {
.gridColumn();
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 660px; }
}
\ No newline at end of file
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 660px; }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment