Skip to content
GitLab
Commit 00b7dff3 authored by Mark Otto's avatar Mark Otto
Browse files

overhaul docs CSS since it was scalable, converted docs mastheads and footers... 

overhaul docs CSS since it was scalable, converted docs mastheads and footers to classes and HTML5 elements, add masthead to js docs page but make it slate so it looks cool and stands out
parent 09140276
Hide whitespace changes
Inline Side-by-side
Showing
with 340 additions and 282 deletions
+340 -282
bootstrap-1.3.0.css
+ 93
- 90
View file @ 00b7dff3
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sat Sep 10 15:29:50 PDT 2011 * Date: Sat Sep 10 20:34:52 PDT 2011
*/ */
/* Reset.less /* 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). * 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: ...@@ -279,6 +279,88 @@ TODO:
* Scaffolding * Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates * 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 { .row {
zoom: 1; zoom: 1;
margin-left: -20px; margin-left: -20px;
...@@ -417,88 +499,6 @@ TODO: ...@@ -417,88 +499,6 @@ TODO:
.row .offset-two-thirds { .row .offset-two-thirds {
margin-left: 660px; 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 /* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system * Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------------------- */
...@@ -606,7 +606,7 @@ dl dd { ...@@ -606,7 +606,7 @@ dl dd {
margin-left: 9px; margin-left: 9px;
} }
hr { hr {
margin: 0 0 19px; margin: 20px 0 19px;
border: 0; border: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
...@@ -997,7 +997,7 @@ textarea[readonly] { ...@@ -997,7 +997,7 @@ textarea[readonly] {
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.inputs-list li label { .inputs-list label {
display: block; display: block;
float: none; float: none;
width: auto; width: auto;
...@@ -1006,20 +1006,23 @@ textarea[readonly] { ...@@ -1006,20 +1006,23 @@ textarea[readonly] {
text-align: left; text-align: left;
white-space: normal; white-space: normal;
} }
.inputs-list li label strong { .inputs-list label strong {
color: #808080; color: #808080;
} }
.inputs-list li label small { .inputs-list label small {
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
} }
.inputs-list li ul.inputs-list { .inputs-list .inputs-list {
margin-left: 25px; margin-left: 25px;
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 0; padding-top: 0;
} }
.inputs-list li:first-child { .inputs-list:first-child {
padding-top: 5px; padding-top: 6px;
}
.inputs-list li + li {
padding-top: 2px;
} }
.inputs-list input[type=radio], .inputs-list input[type=checkbox] { .inputs-list input[type=radio], .inputs-list input[type=checkbox] {
margin-bottom: 0; margin-bottom: 0;
......
bootstrap-1.3.0.min.css
+ 21
- 19
View file @ 00b7dff3
...@@ -26,6 +26,20 @@ textarea{overflow:auto;vertical-align:top;} ...@@ -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.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.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);} .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{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;} .row:after{clear:both;}
.row [class*="span"]{display:inline;float:left;margin-left:20px;} .row [class*="span"]{display:inline;float:left;margin-left:20px;}
...@@ -69,20 +83,6 @@ textarea{overflow:auto;vertical-align:top;} ...@@ -69,20 +83,6 @@ textarea{overflow:auto;vertical-align:top;}
.row .span-two-thirds{width:620px;} .row .span-two-thirds{width:620px;}
.row .offset-one-third{margin-left:340px;} .row .offset-one-third{margin-left:340px;}
.row .offset-two-thirds{margin-left:660px;} .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;} 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,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;} 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;} ...@@ -101,7 +101,7 @@ ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;} dl dt{font-weight:bold;}
dl dd{margin-left:9px;} 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;} strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;} em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;} .muted{color:#bfbfbf;}
...@@ -155,10 +155,12 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado ...@@ -155,10 +155,12 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.input-prepend .add-on{*margin-top:1px;} .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 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;} .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{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
.inputs-list li label small{font-size:11px;font-weight:normal;} .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 li ul.inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;} .inputs-list label small{font-size:11px;font-weight:normal;}
.inputs-list li:first-child{padding-top:5px;} .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;} .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{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
.form-stacked legend{padding-left:0;} .form-stacked legend{padding-left:0;}
......
docs/assets/css/docs.css
+ 99
- 69
View file @ 00b7dff3
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
Bootstrap's documentation styles Bootstrap's documentation styles
Special styles for presenting Bootstrap's documentation and examples Special styles for presenting Bootstrap's documentation and examples
*/ */
/* Body and structure /* Body and structure
-------------------------------------------------- */ -------------------------------------------------- */
body { body {
...@@ -16,56 +17,101 @@ section { ...@@ -16,56 +17,101 @@ section {
section > .row { section > .row {
margin-bottom: 10px; margin-bottom: 10px;
} }
#masthead, #footer {
background-color: #049cd9;
background-repeat: no-repeat; /* Jumbotrons
background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); -------------------------------------------------- */
background-image: -webkit-linear-gradient(#004D9F, #049cd9); .jumbotron {
background-image: -moz-linear-gradient(#004D9F, #049cd9); padding-top: 40px;
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 */
} }
#masthead div.inner, #footer div.inner { .jumbotron .inner {
background: transparent url(../img/grid-18px.png) top center; background: transparent url(../img/grid-18px.png) top center;
padding: 45px 0; padding: 45px 0;
-webkit-box-shadow: inset 0 10px 30px rgba(0, 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, 0.3); -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3); box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
#masthead h1,
#footer h1,
#masthead p,
#footer p {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
} }
#masthead p a, .jumbotron h1,
#footer p a { .jumbotron p {
margin-bottom: 9px;
color: #fff; color: #fff;
font-weight: bold;
}
#masthead {
padding-top: 40px;
}
#masthead h1,
#masthead p {
text-align: center; text-align: center;
margin-bottom: 9px; text-shadow: 0 1px 1px rgba(0,0,0,.3);
} }
#masthead h1 { .jumbotron h1 {
font-size: 54px; font-size: 54px;
line-height: 1; line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,.5); text-shadow: 0 1px 2px rgba(0,0,0,.5);
} }
#masthead p { .jumbotron p {
font-weight: 300; font-weight: 300;
} }
#masthead p.lead { .jumbotron .lead {
font-size: 20px; font-size: 20px;
line-height: 27px; 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 { .quickstart {
background-color: #f5f5f5; background-color: #f5f5f5;
background-repeat: repeat-x; background-repeat: repeat-x;
...@@ -127,16 +173,7 @@ section > .row { ...@@ -127,16 +173,7 @@ section > .row {
white-space: nowrap; white-space: nowrap;
overflow: hidden; 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 /* Special grid styles
-------------------------------------------------- */ -------------------------------------------------- */
...@@ -162,6 +199,8 @@ section > .row { ...@@ -162,6 +199,8 @@ section > .row {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
/* Render mini layout previews /* Render mini layout previews
-------------------------------------------------- */ -------------------------------------------------- */
.diagram, .diagram,
...@@ -208,18 +247,20 @@ section > .row { ...@@ -208,18 +247,20 @@ section > .row {
width: 300px; width: 300px;
margin-left: 10px; margin-left: 10px;
} }
/* Topbar special styles /* Topbar special styles
-------------------------------------------------- */ -------------------------------------------------- */
div.topbar-wrapper { .topbar-wrapper {
position: relative; position: relative;
height: 40px; height: 40px;
margin: 5px 0 15px; margin: 5px 0 15px;
} }
div.topbar-wrapper div.topbar { .topbar-wrapper .topbar {
position: absolute; position: absolute;
margin: 0 -20px; margin: 0 -20px;
} }
div.topbar-wrapper div.topbar .topbar-inner { .topbar-wrapper .topbar .topbar-inner {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -227,61 +268,50 @@ div.topbar-wrapper div.topbar .topbar-inner { ...@@ -227,61 +268,50 @@ div.topbar-wrapper div.topbar .topbar-inner {
border-radius: 4px; border-radius: 4px;
} }
/* Topbar special styles for js /* Topbar in js docs
-------------------------------------------------- */ ------------------------- */
#bootstrap-js div.topbar-wrapper { #bootstrap-js .topbar-wrapper .topbar {
position: relative;
height: 40px;
margin: 5px 0 15px;
z-index: 1;
}
#bootstrap-js div.topbar-wrapper div.topbar {
position: absolute; position: absolute;
margin: 0 -20px; margin: 0 -20px;
} }
#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
#bootstrap-js div.topbar-wrapper div.topbar .fill {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
#bootstrap-js .topbar-wrapper .container {
#bootstrap-js div.topbar-wrapper .container {
width: auto; width: auto;
} }
/* Popover docs /* Popover docs
-------------------------------------------------- */ -------------------------------------------------- */
div.popover-well { .popover-well {
min-height: 160px; min-height: 160px;
} }
.popover-well .popover {
div.popover-well div.popover {
display: block; display: block;
} }
.popover-well .popover-wrapper {
div.popover-well div.popover-wrapper {
width: 50%; width: 50%;
height: 160px; height: 160px;
float: left; float: left;
margin-left: 55px; margin-left: 55px;
position: relative; position: relative;
} }
.popover-well .popover-menu-wrapper {
div.popover-well div.popover-menu-wrapper {
height: 80px; height: 80px;
} }
img.large-bird { img.large-bird {
margin: 5px 0 0 310px; margin: 5px 0 0 310px;
opacity: .1; opacity: .1;
} }
/* Pretty Print /* Pretty Print
-------------------------------------------------- */ -------------------------------------------------- */
PRE.prettyprint { pre.prettyprint {
overflow: hidden; overflow: hidden;
} }
\ No newline at end of file
docs/index.html
+ 21
- 16
View file @ 00b7dff3
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<!-- Masthead (blueprinty thing) <!-- Masthead (blueprinty thing)
================================================== --> ================================================== -->
<div id="masthead"> <header class="jumbotron masthead">
<div class="inner"> <div class="inner">
<div class="container"> <div class="container">
<h1>Bootstrap, from Twitter</h1> <h1>Bootstrap, from Twitter</h1>
...@@ -72,7 +72,7 @@ ...@@ -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> <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><!-- /container -->
</div> </div>
</div> </header>
<!-- Quickstart options <!-- Quickstart options
================================================== --> ================================================== -->
...@@ -1516,13 +1516,14 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1516,13 +1516,14 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <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> <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 &raquo;</a></p>
</div> </div>
<div class="span12"> <div class="span12">
<h2>Getting started</h2> <h3>What's included</h3>
<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> <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>
<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>
<table class="zebra-striped"> <table class="zebra-striped">
<thead> <thead>
<tr> <tr>
...@@ -1557,6 +1558,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1557,6 +1558,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr> </tr>
</tbody> </tbody>
</table> </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>
</div> </div>
...@@ -1709,19 +1714,19 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1709,19 +1714,19 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section> </section>
</div><!-- /container --> </div><!-- /container -->
<div id="footer"> <footer class="footer">
<div class="inner"> <div class="container">
<div class="container"> <p class="pull-right"><a href="#">Back to top</a></p>
<p class="right"><a href="#">Back to top</a></p> <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 />
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>.
Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. </p>
</p>
</div>
</div> </div>
</div> </footer>
</body> </body>
</html> </html>
docs/javascript.html
+ 16
- 1
View file @ 00b7dff3
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
<div class="container"> <div class="container">
<h3><a href="#">Bootstrap JS</a></h3> <h3><a href="#">Bootstrap JS</a></h3>
<ul> <ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#modal">Modals</a></li> <li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li> <li><a href="#dropdown">Dropdown</a></li>
<li><a href="#tabs">Tabs</a></li> <li><a href="#tabs">Tabs</a></li>
...@@ -55,6 +56,20 @@ ...@@ -55,6 +56,20 @@
</div> </div>
</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">&larr; Back to Bootstrap home</a></p>
</div><!-- /container -->
</div>
</header>
<div class="container"> <div class="container">
<!-- Modal <!-- Modal
...@@ -175,7 +190,7 @@ $('#modal-content') ...@@ -175,7 +190,7 @@ $('#modal-content')
</script> </script>
<div class="topbar-wrapper"> <div class="topbar-wrapper">
<div id="topbar-example" class="topbar"> <div id="topbar-example" class="topbar">
<div class="fill"> <div class="topbar-inner">
<div class="container"> <div class="container">
<h3><a href="#">Project Name</a></h3> <h3><a href="#">Project Name</a></h3>
<ul> <ul>
......
lib/forms.less
+ 25
- 22
View file @ 00b7dff3
...@@ -343,31 +343,34 @@ textarea[readonly] { ...@@ -343,31 +343,34 @@ textarea[readonly] {
display: block; display: block;
padding: 0; padding: 0;
width: 100%; width: 100%;
label { }
display: block; label {
float: none; display: block;
width: auto; float: none;
padding: 0; width: auto;
line-height: @baseline; padding: 0;
text-align: left; line-height: @baseline;
white-space: normal; text-align: left;
strong { white-space: normal;
color: @gray; strong {
} color: @gray;
small {
font-size: @basefont - 2;
font-weight: normal;
}
}
ul.inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
} }
&:first-child { small {
padding-top: 5px; 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=radio],
input[type=checkbox] { input[type=checkbox] {
margin-bottom: 0; margin-bottom: 0;
......
lib/scaffolding.less
+ 64
- 64
View file @ 00b7dff3
...@@ -4,69 +4,6 @@ ...@@ -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 // STRUCTURAL LAYOUT
// ----------------- // -----------------
...@@ -76,7 +13,7 @@ html, body { ...@@ -76,7 +13,7 @@ html, body {
body { body {
margin: 0; margin: 0;
#font > .sans-serif(normal,@basefont,@baseline); #font > .sans-serif(normal,@basefont,@baseline);
color: @gray; color: @grayDark;
} }
// Container (centered, fixed-width layouts) // Container (centered, fixed-width layouts)
...@@ -134,3 +71,66 @@ a { ...@@ -134,3 +71,66 @@ a {
.pull-left { .pull-left {
float: 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
lib/type.less
+ 1
- 1
View file @ 00b7dff3
...@@ -113,7 +113,7 @@ dl { ...@@ -113,7 +113,7 @@ dl {
// Horizontal rules // Horizontal rules
hr { hr {
margin: 0 0 19px; margin: 20px 0 19px;
border: 0; border: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
......
Supports Markdown
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