diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index 64e4bc703970ad6ea6f27b6df60b44eead643910..89482468824770fc620481a83e955e5eba874510 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 19:00:49 PDT 2011
+ * Date: Sat Sep 10 21:06:02 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).
@@ -279,6 +279,88 @@ TODO:
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
+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: #404040;
+}
+.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 {
+ 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;
+ 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;
+}
+.pull-right {
+ float: right;
+}
+.pull-left {
+ float: left;
+}
.row {
zoom: 1;
margin-left: -20px;
@@ -417,88 +499,6 @@ TODO:
.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: "";
- zoom: 1;
- *display: inline;
-}
-.container:after {
- clear: both;
-}
-.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;
- 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;
-}
-.pull-right {
- float: right;
-}
-.pull-left {
- float: left;
-}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
@@ -606,7 +606,7 @@ dl dd {
margin-left: 9px;
}
hr {
- margin: 0 0 19px;
+ margin: 20px 0 19px;
border: 0;
border-bottom: 1px solid #eee;
}
@@ -997,7 +997,7 @@ textarea[readonly] {
padding: 0;
width: 100%;
}
-.inputs-list li label {
+.inputs-list label {
display: block;
float: none;
width: auto;
@@ -1006,20 +1006,23 @@ textarea[readonly] {
text-align: left;
white-space: normal;
}
-.inputs-list li label strong {
+.inputs-list label strong {
color: #808080;
}
-.inputs-list li label small {
+.inputs-list label small {
font-size: 11px;
font-weight: normal;
}
-.inputs-list li ul.inputs-list {
+.inputs-list .inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
}
-.inputs-list li:first-child {
- padding-top: 5px;
+.inputs-list:first-child {
+ padding-top: 6px;
+}
+.inputs-list li + li {
+ padding-top: 2px;
}
.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
margin-bottom: 0;
diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index 7ae5a08dbbe8d2bec241a9e95fd13698bac6a864..01b5fc78a2505ca227d3e253cb6d7c2dabc49f04 100644
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -26,6 +26,20 @@ textarea{overflow:auto;vertical-align:top;}
.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);}
+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:#404040;}
+.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{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;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;}
+.pull-right{float:right;}
+.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;}
@@ -69,20 +83,6 @@ textarea{overflow:auto;vertical-align:top;}
.row .span-two-thirds{width:620px;}
.row .offset-one-third{margin-left:340px;}
.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:"";zoom:1;*display:inline;}
-.container:after{clear:both;}
-.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;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;}
-.pull-right{float:right;}
-.pull-left{float:left;}
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;}
@@ -101,7 +101,7 @@ ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
dl dd{margin-left:9px;}
-hr{margin:0 0 19px;border:0;border-bottom:1px solid #eee;}
+hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;}
@@ -155,10 +155,12 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;border-right-width:1px;border-left-width:0;}
-.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}.inputs-list li label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list li label strong{color:#808080;}
-.inputs-list li label small{font-size:11px;font-weight:normal;}
-.inputs-list li ul.inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
-.inputs-list li:first-child{padding-top:5px;}
+.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
+.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
+.inputs-list label small{font-size:11px;font-weight:normal;}
+.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
+.inputs-list:first-child{padding-top:6px;}
+.inputs-list li+li{padding-top:2px;}
.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
.form-stacked legend{padding-left:0;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 187fc7984c8bd89ddd31b05c23ed5ea395d3b95c..29fdcf3f0cd9883530f688d24855579dc216b0c3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -4,6 +4,7 @@
Bootstrap's documentation styles
Special styles for presenting Bootstrap's documentation and examples
*/
+
/* Body and structure
-------------------------------------------------- */
body {
@@ -16,56 +17,101 @@ section {
section > .row {
margin-bottom: 10px;
}
-#masthead, #footer {
- background-color: #049cd9;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- background-image: -webkit-linear-gradient(#004D9F, #049cd9);
- background-image: -moz-linear-gradient(#004D9F, #049cd9);
- background-image: -o-linear-gradient(top, #004D9F, #049cd9);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
+
+
+/* Jumbotrons
+-------------------------------------------------- */
+.jumbotron {
+ padding-top: 40px;
}
-#masthead div.inner, #footer div.inner {
+.jumbotron .inner {
background: transparent url(../img/grid-18px.png) top center;
padding: 45px 0;
- -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
-}
-#masthead h1,
-#footer h1,
-#masthead p,
-#footer p {
- color: #fff;
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
+ -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
+ box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
-#masthead p a,
-#footer p a {
+.jumbotron h1,
+.jumbotron p {
+ margin-bottom: 9px;
color: #fff;
- font-weight: bold;
-}
-#masthead {
- padding-top: 40px;
-}
-#masthead h1,
-#masthead p {
text-align: center;
- margin-bottom: 9px;
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
-#masthead h1 {
+.jumbotron h1 {
font-size: 54px;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
-#masthead p {
+.jumbotron p {
font-weight: 300;
}
-#masthead p.lead {
+.jumbotron .lead {
font-size: 20px;
line-height: 27px;
}
+.jumbotron p a {
+ color: #fff;
+ font-weight: bold;
+}
+/* Specific jumbotrons
+------------------------- */
+/* main docs page */
+.masthead {
+ background-color: #049cd9;
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
+ background-image: -webkit-linear-gradient(#004D9F, #049cd9);
+ background-image: -moz-linear-gradient(#004D9F, #049cd9);
+ background-image: -o-linear-gradient(top, #004D9F, #049cd9);
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
+}
+/* supporting docs pages */
+.subhead {
+ background-color: #767d80;
+ background-repeat: no-repeat;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
+ background-image: -webkit-linear-gradient(#565d60, #767d80);
+ background-image: -moz-linear-gradient(#565d60, #767d80);
+ background-image: -o-linear-gradient(top, #565d60, #767d80);
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */
+}
+.subhead .inner {
+ padding: 36px 0 27px;
+}
+.subhead h1,
+.subhead p {
+ text-align: left;
+}
+.subhead h1 {
+ font-size: 40px;
+}
+.subhead p a {
+ font-weight: normal;
+}
+
+
+/* Footer
+-------------------------------------------------- */
+.footer {
+ background-color: #eee;
+ padding: 30px 0;
+ text-shadow: 0 1px 0 #fff;
+ border-top: 1px solid #e5e5e5;
+ -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
+ -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
+ box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
+}
+.footer p {
+ color: #555;
+}
+
+
+/* Quickstart section for getting le code
+-------------------------------------------------- */
.quickstart {
background-color: #f5f5f5;
background-repeat: repeat-x;
@@ -127,16 +173,7 @@ section > .row {
white-space: nowrap;
overflow: hidden;
}
-#footer {
- margin-top: 80px;
-}
-#footer p {
- margin-bottom: 0;
- color: rgba(255,255,255,.8)
-}
-#footer p.right {
- float: right;
-}
+
/* Special grid styles
-------------------------------------------------- */
@@ -162,6 +199,8 @@ section > .row {
margin-top: 0;
margin-bottom: 0;
}
+
+
/* Render mini layout previews
-------------------------------------------------- */
.diagram,
@@ -208,18 +247,20 @@ section > .row {
width: 300px;
margin-left: 10px;
}
+
+
/* Topbar special styles
-------------------------------------------------- */
-div.topbar-wrapper {
+.topbar-wrapper {
position: relative;
height: 40px;
margin: 5px 0 15px;
}
-div.topbar-wrapper div.topbar {
+.topbar-wrapper .topbar {
position: absolute;
margin: 0 -20px;
}
-div.topbar-wrapper div.topbar .topbar-inner {
+.topbar-wrapper .topbar .topbar-inner {
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
@@ -227,61 +268,53 @@ div.topbar-wrapper div.topbar .topbar-inner {
border-radius: 4px;
}
-/* Topbar special styles for js
--------------------------------------------------- */
-#bootstrap-js div.topbar-wrapper {
- position: relative;
- height: 40px;
- margin: 5px 0 15px;
+/* Topbar in js docs
+------------------------- */
+#bootstrap-js .topbar-wrapper {
z-index: 1;
}
-
-#bootstrap-js div.topbar-wrapper div.topbar {
+#bootstrap-js .topbar-wrapper .topbar {
position: absolute;
margin: 0 -20px;
}
-
-#bootstrap-js div.topbar-wrapper div.topbar .fill {
+#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-
-#bootstrap-js div.topbar-wrapper .container {
+#bootstrap-js .topbar-wrapper .container {
width: auto;
}
+
/* Popover docs
-------------------------------------------------- */
-div.popover-well {
+.popover-well {
min-height: 160px;
}
-
-div.popover-well div.popover {
+.popover-well .popover {
display: block;
}
-
-div.popover-well div.popover-wrapper {
+.popover-well .popover-wrapper {
width: 50%;
height: 160px;
float: left;
margin-left: 55px;
position: relative;
}
-
-div.popover-well div.popover-menu-wrapper {
+.popover-well .popover-menu-wrapper {
height: 80px;
}
-
img.large-bird {
margin: 5px 0 0 310px;
opacity: .1;
}
+
/* Pretty Print
-------------------------------------------------- */
-PRE.prettyprint {
+pre.prettyprint {
overflow: hidden;
}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index f914b31b2411acaa70267fd175506e9cc1451c66..6f8ad30a2de14754e16cedc803cdcadc06897c36 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -61,7 +61,7 @@
<!-- Masthead (blueprinty thing)
================================================== -->
- <div id="masthead">
+ <header class="jumbotron masthead">
<div class="inner">
<div class="container">
<h1>Bootstrap, from Twitter</h1>
@@ -72,7 +72,7 @@
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
</div><!-- /container -->
</div>
- </div>
+ </header>
<!-- Quickstart options
================================================== -->
@@ -1516,13 +1516,14 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
<div class="row">
<div class="span4">
+ <h2>Getting started</h2>
<p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
+ <hr>
+ <p><a class="btn primary" href="./javascript.html">Skip to Bootstrap plugins »</a></p>
</div>
<div class="span12">
- <h2>Getting started</h2>
- <p>We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either <a href="http://jquery.com/" target="_blank">jQuery</a> or <a href="http://ender.no.de" target="_blank">Ender</a>, but we encourage you to extend and modify them to fit your development needs!</p>
- <h2>Do I need javascript?</h2>
- <p>The short answer is <strong>no</strong>... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
+ <h3>What's included</h3>
+ <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
<table class="zebra-striped">
<thead>
<tr>
@@ -1543,6 +1544,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
</tr>
+ <tr>
+ <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
+ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
+ </tr>
<tr>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
@@ -1557,6 +1562,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr>
</tbody>
</table>
+ <h3>Is javascript necessary?</h3>
+ <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
+ <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
+ <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
</div>
</div>
@@ -1634,34 +1643,13 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
font-weight: @weight;
line-height: @lineHeight;
}
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Georgia", Times New Roman, Times, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
- font-family: "Monaco", Courier New, monospace;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
+ ...
}
</pre>
<h4>Gradients</h4>
<pre class="prettyprint linenums">
#gradient {
- .horizontal (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
- }
+ ...
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
@@ -1673,16 +1661,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@startColor, @endColor); // The standard
}
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
+ ...
}
</pre>
-<h3>Operations and grid system</h3>
+<h3>Operations</h3>
<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
<pre class="prettyprint linenums">
// Griditude
@@ -1691,37 +1674,73 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Grid System
-.container {
- width: @siteWidth;
- margin: 0 auto;
- .clearfix();
-}
+// Make some columns
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
-.offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
-}
</pre>
+
+ <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>
+ <thead>
+ <tr>
+ <th style="width: 120px;">Method</th>
+ <th>Steps</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <tr>
+ <td>Node with makefile</td>
+ <td>
+
+ </td>
+ </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>
+<pre class="prettyprint">
+<link rel="stylesheet/less" href="/path/to/bootstrap.less">
+<script src="/path/to/less.js"></script>
+</pre>
+ <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>Command line</td>
+ <td>
+
+ </td>
+ </tr>
+ <tr>
+ <td>Less Mac app</td>
+ <td>
+ <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+ <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
</section>
+
+
</div><!-- /container -->
- <div id="footer">
- <div class="inner">
- <div class="container">
- <p class="right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
- Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
- </p>
- </div>
+ <footer class="footer">
+ <div class="container">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
+ Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
+ </p>
</div>
- </div>
+ </footer>
</body>
</html>
diff --git a/docs/javascript.html b/docs/javascript.html
index 294f5dbe4bd033a2cab4d5a2f91f1dd5154e4a86..b830e7d64f172e4e7ad040d98b1fb7e96e986115 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -44,6 +44,7 @@
<div class="container">
<h3><a href="#">Bootstrap JS</a></h3>
<ul>
+ <li><a href="#overview">Overview</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li><a href="#scrollspy">ScrollSpy</a></li>
@@ -56,6 +57,20 @@
</div>
</div>
+ <!-- Masthead (blueprinty thing)
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <div class="inner">
+ <div class="container">
+ <h1>Javascript for Bootstrap</h1>
+ <p class="lead">
+ Bring Bootstrap's components to life with new, custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.
+ </p>
+ <p><a href="./index.html">← Back to Bootstrap home</a></p>
+ </div><!-- /container -->
+ </div>
+ </header>
+
<div class="container">
<!-- Modal
@@ -71,7 +86,7 @@
<a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using bootstrap-modal</h2>
+ <h3>Using bootstrap-modal</h3>
<pre class="prettyprint linenums">$('#modal-content').modal(options)</pre>
<h3>Options</h3>
<ul>
@@ -161,7 +176,7 @@ $('#modal-content')
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using boostrap-dropdown.js</h2>
+ <h3>Using boostrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<h3>Method</h3>
<h4>$().dropdown</h4>
@@ -176,7 +191,7 @@ $('#modal-content')
</script>
<div class="topbar-wrapper">
<div id="topbar-example" class="topbar">
- <div class="fill">
+ <div class="topbar-inner">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
@@ -264,7 +279,7 @@ $('#modal-content')
<a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using boostrap-tabs.js</h2>
+ <h3>Using boostrap-tabs.js</h3>
<pre class="prettyprint linenums">$('.tabs').tabs()</pre>
<h3>Method</h3>
<h4>$().tabs or $().pills</h4>
@@ -331,7 +346,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using bootstrap-twipsy.js</h2>
+ <h3>Using bootstrap-twipsy.js</h3>
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
<h3>Options</h3>
<ul>
@@ -386,7 +401,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using boostrap-popover.js</h2>
+ <h3>Using boostrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3>
<ul>
@@ -440,7 +455,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
- <h2>Using bootstrap-alert</h2>
+ <h3>Using bootstrap-alerts.js</h3>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Methods</h3>
<h4>$().alert</h4>
@@ -471,6 +486,18 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
</div>
</section>
- </div>
+
+ </div><!-- /container -->
+
+ <footer class="footer">
+ <div class="container">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
+ Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
+ </p>
+ </div>
+ </footer>
+
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lib/forms.less b/lib/forms.less
index 2ac43177e24851195003cbde457dd33ab83b738e..2333718e053e83da224d10b25da38d581d6d36f3 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -343,31 +343,34 @@ textarea[readonly] {
display: block;
padding: 0;
width: 100%;
- label {
- display: block;
- float: none;
- width: auto;
- padding: 0;
- line-height: @baseline;
- text-align: left;
- white-space: normal;
- strong {
- color: @gray;
- }
- small {
- font-size: @basefont - 2;
- font-weight: normal;
- }
- }
- ul.inputs-list {
- margin-left: 25px;
- margin-bottom: 10px;
- padding-top: 0;
+ }
+ label {
+ display: block;
+ float: none;
+ width: auto;
+ padding: 0;
+ line-height: @baseline;
+ text-align: left;
+ white-space: normal;
+ strong {
+ color: @gray;
}
- &:first-child {
- padding-top: 5px;
+ small {
+ font-size: @basefont - 2;
+ font-weight: normal;
}
}
+ .inputs-list {
+ margin-left: 25px;
+ margin-bottom: 10px;
+ padding-top: 0;
+ }
+ &:first-child {
+ padding-top: 6px;
+ }
+ li + li {
+ padding-top: 2px;
+ }
input[type=radio],
input[type=checkbox] {
margin-bottom: 0;
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index fb50cb221f8b7bcc54c76561e4c86425085f2064..263087b0664c13726a0ab742149f9f3c2c02eaa2 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -4,69 +4,6 @@
* ------------------------------------------------------------------------------------------- */
-// GRID SYSTEM
-// -----------
-
-.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();
- }
-
- // 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; }
-}
-
-
// STRUCTURAL LAYOUT
// -----------------
@@ -76,7 +13,7 @@ html, body {
body {
margin: 0;
#font > .sans-serif(normal,@basefont,@baseline);
- color: @gray;
+ color: @grayDark;
}
// Container (centered, fixed-width layouts)
@@ -134,3 +71,66 @@ a {
.pull-left {
float: left;
}
+
+
+// GRID SYSTEM
+// -----------
+
+.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();
+ }
+
+ // 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
diff --git a/lib/type.less b/lib/type.less
index 55ff809370d8456b460dc0f1a5131d3eb6e69ac0..077ae9d8f71d8313fe678d650a187d00da265486 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -113,7 +113,7 @@ dl {
// Horizontal rules
hr {
- margin: 0 0 19px;
+ margin: 20px 0 19px;
border: 0;
border-bottom: 1px solid #eee;
}