rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '21jumpst' into 2.1.0-wip

Browse Source
This commit is contained in:
Mark Otto 2012-07-07 00:48:15 -07:00
commit 7cc916d137
27 changed files with 894 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -830,7 +830,7 @@
}
.page-header h1 small {
display: block;
line-height: 18px;
line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
@ -882,10 +882,10 @@
position: static;
}
.navbar-fixed-top {
margin-bottom: 18px;
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 18px;
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
@ -905,7 +905,7 @@
}
.nav-collapse .nav {
float: none;
margin: 0 0 9px;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
@ -941,7 +941,7 @@
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #222222;
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
@ -975,10 +975,10 @@
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

386
docs/assets/css/bootstrap.css vendored
View File

@ -158,8 +158,8 @@ textarea {
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
@ -544,19 +544,19 @@ a:hover {
}
p {
margin: 0 0 9px;
margin: 0 0 10px;
}
p small {
font-size: 11px;
font-size: 12px;
color: #999999;
}
.lead {
margin-bottom: 18px;
margin-bottom: 20px;
font-size: 20px;
font-weight: 200;
line-height: 27px;
line-height: 30px;
}
h1,
@ -565,9 +565,10 @@ h3,
h4,
h5,
h6 {
margin: 0;
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 1;
color: inherit;
text-rendering: optimizelegibility;
}
@ -584,70 +585,60 @@ h6 small {
}
h1 {
font-size: 30px;
line-height: 36px;
}
h1 small {
font-size: 18px;
font-size: 36px;
line-height: 40px;
}
h2 {
font-size: 30px;
line-height: 40px;
}
h3 {
font-size: 24px;
line-height: 40px;
}
h4 {
font-size: 18px;
line-height: 20px;
}
h5 {
font-size: 14px;
line-height: 20px;
}
h6 {
font-size: 12px;
line-height: 20px;
}
h1 small {
font-size: 24px;
line-height: 36px;
}
h2 small {
font-size: 18px;
}
h3 {
font-size: 18px;
line-height: 27px;
}
h3 small {
font-size: 14px;
}
h4,
h5,
h6 {
line-height: 18px;
}
h4 {
h4 small {
font-size: 14px;
}
h4 small {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 11px;
color: #999999;
text-transform: uppercase;
}
.page-header {
padding-bottom: 17px;
margin: 18px 0;
margin: 20px 0 19px;
border-bottom: 1px solid #eeeeee;
}
.page-header h1 {
line-height: 1;
}
ul,
ol {
padding: 0;
margin: 0 0 9px 25px;
margin: 0 0 10px 25px;
}
ul ul,
@ -666,7 +657,7 @@ ol {
}
li {
line-height: 18px;
line-height: 20px;
}
ul.unstyled,
@ -676,12 +667,12 @@ ol.unstyled {
}
dl {
margin-bottom: 18px;
margin-bottom: 20px;
}
dt,
dd {
line-height: 18px;
line-height: 20px;
}
dt {
@ -689,7 +680,7 @@ dt {
}
dd {
margin-left: 9px;
margin-left: 10px;
}
.dl-horizontal dt {
@ -707,7 +698,7 @@ dd {
}
hr {
margin: 18px 0;
margin: 20px 0;
border: 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
@ -737,7 +728,7 @@ abbr.initialism {
blockquote {
padding: 0 0 0 15px;
margin: 0 0 18px;
margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
@ -745,12 +736,12 @@ blockquote p {
margin-bottom: 0;
font-size: 16px;
font-weight: 300;
line-height: 22.5px;
line-height: 25px;
}
blockquote small {
display: block;
line-height: 18px;
line-height: 20px;
color: #999999;
}
@ -780,9 +771,9 @@ blockquote:after {
address {
display: block;
margin-bottom: 18px;
margin-bottom: 20px;
font-style: normal;
line-height: 18px;
line-height: 20px;
}
small {
@ -796,8 +787,8 @@ cite {
code,
pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 12px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
color: #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -813,10 +804,10 @@ code {
pre {
display: block;
padding: 8.5px;
margin: 0 0 9px;
font-size: 12.025px;
line-height: 18px;
padding: 9.5px;
margin: 0 0 10px;
font-size: 12.950000000000001px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
@ -830,7 +821,7 @@ pre {
}
pre.prettyprint {
margin-bottom: 18px;
margin-bottom: 20px;
}
pre code {
@ -846,7 +837,7 @@ pre code {
}
form {
margin: 0 0 18px;
margin: 0 0 20px;
}
fieldset {
@ -859,16 +850,16 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
margin-bottom: 30px;
font-size: 21px;
line-height: 40px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
legend small {
font-size: 13.5px;
font-size: 15px;
color: #999999;
}
@ -877,9 +868,9 @@ input,
button,
select,
textarea {
font-size: 13px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
line-height: 20px;
}
input,
@ -912,11 +903,11 @@ input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: 18px;
height: 20px;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
font-size: 14px;
line-height: 20px;
color: #555555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -1326,9 +1317,9 @@ select:focus:required:invalid:focus {
}
.form-actions {
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
padding: 19px 20px 20px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
*zoom: 1;
@ -1378,7 +1369,7 @@ textarea::-webkit-input-placeholder {
.help-block {
display: block;
margin-bottom: 9px;
margin-bottom: 10px;
}
.help-inline {
@ -1404,7 +1395,7 @@ textarea::-webkit-input-placeholder {
position: relative;
margin-bottom: 0;
*margin-left: 0;
font-size: 13px;
font-size: 14px;
vertical-align: middle;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
@ -1429,12 +1420,12 @@ textarea::-webkit-input-placeholder {
.input-append .add-on {
display: inline-block;
width: auto;
height: 18px;
height: 20px;
min-width: 16px;
padding: 4px 5px;
font-size: 13px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
@ -1592,16 +1583,16 @@ input.search-query {
}
.control-group {
margin-bottom: 9px;
margin-bottom: 10px;
}
legend + .control-group {
margin-top: 18px;
margin-top: 20px;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
margin-bottom: 18px;
margin-bottom: 20px;
*zoom: 1;
}
@ -1635,7 +1626,7 @@ legend + .control-group {
}
.form-horizontal .help-block {
margin-top: 9px;
margin-top: 10px;
margin-bottom: 0;
}
@ -1652,13 +1643,13 @@ table {
.table {
width: 100%;
margin-bottom: 18px;
margin-bottom: 20px;
}
.table th,
.table td {
padding: 8px;
line-height: 18px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
@ -2571,7 +2562,7 @@ table .span24 {
.dropdown-menu .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
@ -2583,7 +2574,7 @@ table .span24 {
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
@ -2711,7 +2702,7 @@ table .span24 {
float: right;
font-size: 20px;
font-weight: bold;
line-height: 18px;
line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
@ -2737,11 +2728,11 @@ button.close {
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
padding: 4px 14px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height: 18px;
font-size: 14px;
line-height: 20px;
*line-height: 20px;
color: #333333;
text-align: center;
@ -2767,9 +2758,9 @@ button.close {
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
@ -2816,9 +2807,9 @@ button.close {
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled,
@ -2835,7 +2826,7 @@ button.close {
.btn-large {
padding: 9px 14px;
font-size: 15px;
font-size: 16px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@ -2848,8 +2839,8 @@ button.close {
.btn-small {
padding: 5px 9px;
font-size: 11px;
line-height: 16px;
font-size: 12px;
line-height: 18px;
}
.btn-small [class^="icon-"] {
@ -2858,8 +2849,8 @@ button.close {
.btn-mini {
padding: 2px 6px;
font-size: 11px;
line-height: 14px;
font-size: 12px;
line-height: 16px;
}
.btn-primary,
@ -2893,17 +2884,17 @@ button.close {
}
.btn-primary {
background-color: #0074cc;
*background-color: #0055cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
@ -2912,13 +2903,13 @@ button.close {
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0055cc;
*background-color: #004ab3;
background-color: #0044cc;
*background-color: #003bb3;
}
.btn-primary:active,
.btn-primary.active {
background-color: #004099 \9;
background-color: #003399 \9;
}
.btn-warning {
@ -3038,17 +3029,17 @@ button.close {
}
.btn-inverse {
background-color: #414141;
background-color: #363636;
*background-color: #222222;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
background-image: -webkit-linear-gradient(top, #555555, #222222);
background-image: -o-linear-gradient(top, #555555, #222222);
background-image: linear-gradient(top, #555555, #222222);
background-image: -moz-linear-gradient(top, #555555, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
background-image: -webkit-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(top, #444444, #222222);
background-image: linear-gradient(top, #444444, #222222);
background-image: -moz-linear-gradient(top, #444444, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff222222', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
@ -3112,8 +3103,8 @@ input[type="submit"].btn.btn-mini {
}
.btn-toolbar {
margin-top: 9px;
margin-bottom: 9px;
margin-top: 10px;
margin-bottom: 10px;
}
.btn-toolbar .btn-group {
@ -3134,16 +3125,16 @@ input[type="submit"].btn.btn-mini {
.btn-group > .btn,
.btn-group > .dropdown-menu {
font-size: 13px;
font-size: 14px;
}
.btn-group > .btn-mini,
.btn-group > .btn-small {
font-size: 11px;
font-size: 12px;
}
.btn-group > .btn-large {
font-size: 15px;
font-size: 16px;
}
.btn-group > .btn:first-child {
@ -3235,7 +3226,7 @@ input[type="submit"].btn.btn-mini {
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0055cc;
background-color: #0044cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
@ -3345,7 +3336,7 @@ input[type="submit"].btn.btn-mini {
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
margin-bottom: 20px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
@ -3359,7 +3350,7 @@ input[type="submit"].btn.btn-mini {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
line-height: 20px;
}
.alert-success {
@ -3396,7 +3387,7 @@ input[type="submit"].btn.btn-mini {
}
.nav {
margin-bottom: 18px;
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
@ -3419,7 +3410,7 @@ input[type="submit"].btn.btn-mini {
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
line-height: 20px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
@ -3460,7 +3451,7 @@ input[type="submit"].btn.btn-mini {
.nav-list .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
@ -3510,7 +3501,7 @@ input[type="submit"].btn.btn-mini {
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
line-height: 20px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
@ -3775,7 +3766,7 @@ input[type="submit"].btn.btn-mini {
.navbar {
*position: relative;
*z-index: 2;
margin-bottom: 18px;
margin-bottom: 20px;
overflow: visible;
}
@ -3783,17 +3774,17 @@ input[type="submit"].btn.btn-mini {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(top, #222222, #111111);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@ -3908,8 +3899,8 @@ input[type="submit"].btn.btn-mini {
font-weight: normal;
line-height: 1;
color: #ffffff;
background-color: #626262;
border: 1px solid #151515;
background-color: #515151;
border: 1px solid #040404;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
@ -3999,7 +3990,7 @@ input[type="submit"].btn.btn-mini {
.navbar .nav > li > a {
float: none;
padding: 10px 12px 11px;
padding: 10px 15px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
@ -4014,7 +4005,7 @@ input[type="submit"].btn.btn-mini {
display: inline-block;
padding: 4px 10px 4px;
margin: 5px 5px 6px;
line-height: 18px;
line-height: 20px;
}
.navbar .btn-group {
@ -4034,7 +4025,7 @@ input[type="submit"].btn.btn-mini {
.navbar .nav .active > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #222222;
background-color: #111111;
}
.navbar .divider-vertical {
@ -4042,8 +4033,8 @@ input[type="submit"].btn.btn-mini {
height: 40px;
margin: 0 9px;
overflow: hidden;
background-color: #222222;
border-right: 1px solid #333333;
background-color: #111111;
border-right: 1px solid #222222;
}
.navbar .nav.pull-right {
@ -4057,17 +4048,17 @@ input[type="submit"].btn.btn-mini {
padding: 7px 10px;
margin-right: 5px;
margin-left: 5px;
background-color: #1f1f1f;
*background-color: #151515;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#151515));
background-image: -webkit-linear-gradient(top, #262626, #151515);
background-image: -o-linear-gradient(top, #262626, #151515);
background-image: linear-gradient(top, #262626, #151515);
background-image: -moz-linear-gradient(top, #262626, #151515);
background-color: #0e0e0e;
*background-color: #040404;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(top, #151515, #040404);
background-image: -moz-linear-gradient(top, #151515, #040404);
background-repeat: repeat-x;
border-color: #151515 #151515 #000000;
border-color: #040404 #040404 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff262626', endColorstr='#ff151515', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@ -4079,8 +4070,8 @@ input[type="submit"].btn.btn-mini {
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
background-color: #151515;
*background-color: #080808;
background-color: #040404;
*background-color: #000000;
}
.navbar .btn-navbar:active,
@ -4187,21 +4178,25 @@ input[type="submit"].btn.btn-mini {
-------------------------------------------------- */
.navbar-subnav .navbar-inner {
padding: 0;
background-color: #f6f6f6;
background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1);
background-image: linear-gradient(top, #f9f9f9, #f1f1f1);
background-color: #f9f9f9;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(top, #ffffff, #f1f1f1);
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-repeat: repeat-x;
border: 1px solid #e5e5e5;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff1f1f1', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-subnav .divider-vertical {
background-color: #f1f1f1;
border-right-color: #ffffff;
}
.navbar-subnav .nav > li > a {
color: #0088cc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@ -4214,7 +4209,10 @@ input[type="submit"].btn.btn-mini {
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
background-color: #e5e5e5;
background-color: #eee;
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
}
.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
@ -4223,6 +4221,23 @@ input[type="submit"].btn.btn-mini {
border-bottom-color: #0088cc;
}
.navbar-subnav .search-query {
background-color: #fff;
border-color: #ccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-subnav .search-query:focus,
.navbar-subnav .search-query.focused {
padding: 4px 9px;
border: 1px solid rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.navbar-subnav .nav .open > a {
color: #005580;
}
@ -4263,7 +4278,7 @@ input[type="submit"].btn.btn-mini {
.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
margin: 0 0 20px;
list-style: none;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
@ -4299,8 +4314,8 @@ input[type="submit"].btn.btn-mini {
}
.pagination {
height: 36px;
margin: 18px 0;
height: 40px;
margin: 20px 0;
}
.pagination ul {
@ -4325,7 +4340,7 @@ input[type="submit"].btn.btn-mini {
.pagination span {
float: left;
padding: 0 14px;
line-height: 34px;
line-height: 38px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
@ -4375,7 +4390,7 @@ input[type="submit"].btn.btn-mini {
}
.pager {
margin-bottom: 18px;
margin-bottom: 20px;
margin-left: 0;
text-align: center;
list-style: none;
@ -4842,21 +4857,21 @@ input[type="submit"].btn.btn-mini {
.thumbnails > li {
float: left;
margin-bottom: 18px;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnail {
display: block;
padding: 4px;
line-height: 1;
line-height: 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);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
}
a.thumbnail:hover {
@ -4875,11 +4890,12 @@ a.thumbnail:hover {
.thumbnail .caption {
padding: 9px;
color: #555555;
}
.label,
.badge {
font-size: 10.998px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
@ -5154,7 +5170,7 @@ a.badge:hover {
}
.accordion {
margin-bottom: 18px;
margin-bottom: 20px;
}
.accordion-group {
@ -5185,7 +5201,7 @@ a.badge:hover {
.carousel {
position: relative;
margin-bottom: 18px;
margin-bottom: 20px;
line-height: 1;
}
@ -5315,7 +5331,7 @@ a.badge:hover {
.hero-unit p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
line-height: 30px;
color: inherit;
}

187
docs/assets/css/docs.css
View File

@ -26,17 +26,6 @@ body {
margin: 0 auto;
}
/* Increase docs base type size and line-heights */
body {
line-height: 20px;
}
p {
margin-bottom: 15px;
}
li {
line-height: 25px;
}
/* Code in headings */
h3 code {
font-size: 14px;
@ -49,7 +38,6 @@ h3 code {
-------------------------------------------------- */
.navbar {
font-size: 13px;
}
/* Change the docs' brand */
@ -86,7 +74,7 @@ section {
/* Faded out hr */
hr.soften {
height: 1px;
margin: 54px 0;
margin: 70px 0;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
@ -159,7 +147,7 @@ hr.soften {
font-size: 12px;
}
.quick-links {
min-height: 30px;
height: 20px;
margin: 0;
padding: 0;
list-style: none;
@ -169,15 +157,10 @@ hr.soften {
min-height: 0;
}
.quick-links li {
display: inline;
display: inline-block;
margin: 0 8px;
color: #999;
}
.quick-links .github-btn,
.quick-links .tweet-btn,
.quick-links .follow-btn {
position: relative;
top: 5px;
line-height: 1;
}
@ -185,33 +168,32 @@ hr.soften {
/* Marketing section of Overview
-------------------------------------------------- */
.marketing .row {
margin-bottom: 9px;
}
.marketing h1 {
margin: 40px 0 10px;
font-size: 40px;
font-weight: 300;
.marketing {
text-align: center;
}
.marketing h1 {
margin: 60px 0 10px;
font-size: 60px;
font-weight: 400;
line-height: 1;
letter-spacing: -1px;
}
.marketing h2 {
font-weight: 300;
}
font-weight: 400;
`}
.marketing p {
margin: 5px 10px 15px 0;
}
.marketing .bs-icon {
float: left;
margin: 7px 10px 0 0;
opacity: .8;
color: #555;
}
.marketing .marketing-byline {
margin-bottom: 30px;
margin-bottom: 40px;
font-size: 20px;
font-weight: 300;
line-height: 25px;
color: #999;
text-align: center;
}
.marketing img {
display: block;
margin: 0 auto 20px;
}
@ -220,8 +202,8 @@ hr.soften {
-------------------------------------------------- */
.footer {
padding: 40px 0;
margin-top: 49px;
padding: 70px 0;
margin-top: 70px;
border-top: 1px solid #e5e5e5;
}
.footer p {
@ -405,7 +387,7 @@ h2 + .row {
/* Example sites showcase */
.example-sites {
margin-left: 20px;
xmargin-left: 20px;
}
.example-sites img {
max-width: 100%;
@ -441,6 +423,9 @@ h2 + .row {
margin-left: 0;
list-style: none;
}
.the-icons li {
line-height: 25px;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25);
}
@ -775,3 +760,123 @@ form.bs-docs-example {
float: none;
}
}
.navbar-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.jumbo {
padding: 80px 0;
margin: -60px 0 60px;
background-color: #222;
color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #c9cabc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9cabc), color-stop(100%,#68686d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */
background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #803353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#803353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#803353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#803353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#803353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#803353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#803353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
xborder-bottom: 1px solid #68686d;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.jumbo h1 {
font-size: 120px;
font-weight: ;
line-height: 1;
margin: 0 0 10px;
letter-spacing: -2px;
}
.jumbo p {
margin-bottom: 30px;
font-size: 40px;
font-weight: 200;
line-height: 1.25;
}
.jumbo .btn {
font-size: 24px;
padding: 14px 24px;
font-weight: 200;
border: 0;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
}
.jumbo .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
}
.jumbo-links {
margin: 0;
list-style: none;
}
.jumbo-links li {
display: inline;
padding: 0 10px;
color: rgba(255,255,255,.25);
}
.jumbo-links a {
color: #fff;
color: rgba(255,255,255,.5);
}
.jumbo-links a:hover {
color: #fff;
}
.jumbo-buttons {
padding: 20px 0;
margin-top: -60px;
text-align: center;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
}
@media (max-width: 480px) {
body {
padding-top: 0;
}
.jumbo {
margin: -20px -20px ;
padding: 40px 25px;
}
.jumbo h1 {
font-size: 72px;
}
.jumbo p {
font-size: 20px;
}
}

BIN
docs/assets/img/bs-docs-bootstrap-features.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
docs/assets/img/bs-docs-responsive-illustrations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/assets/img/bs-docs-twitter-github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/assets/img/grid-baseline-20px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 B

4
docs/assets/js/application.js
View File

@ -45,8 +45,8 @@
// fix sub nav on scroll
var $win = $(window)
, $nav = $('.navbar-subnav')
, navTop = $('.navbar-subnav').length && $('.navbar-subnav').offset().top - 40
, $nav = $('.subhead .navbar-subnav')
, navTop = $('.subhead .navbar-subnav').length && $('.subhead .navbar-subnav').offset().top - 40
, isFixed = 0
processScroll()

7
docs/base-css.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

179
docs/components.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
@ -1254,6 +1247,63 @@
<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
<hr class="bs-docs-separator">
<h2>Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
</section>
@ -1679,53 +1729,67 @@
<h2>Default thumbnails</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
</div>
<h2>Highly customizable</h2>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
</ul>
</div>
<h3>Why use thumbnails</h3>
<p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
@ -1740,9 +1804,9 @@
<p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;li class="span4"&gt;
&lt;a href="#" class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;/a&gt;
&lt;/li&gt;
...
@ -1751,11 +1815,11 @@
<p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;li class="span4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;h3&gt;Thumbnail label&lt;/h3&gt;
&lt;p&gt;Thumbnail caption...&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
...
@ -1795,6 +1859,11 @@
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
</section>

7
docs/download.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="active">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

7
docs/examples.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="active">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

7
docs/extend.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

136
docs/index.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
@ -75,9 +68,46 @@
<div class="bs-docs-container">
</div>
<div class="jumbo">
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">Download Bootstrap</a></p>
<ul class="jumbo-links">
<li><a href="#">Customize</a></li>
<li><a href="#">GitHub project</a></li>
<li>Version 2.1.0</li>
</ul>
</div>
</div>
<div class="jumbo-buttons">
<div class="bs-docs-container">
<ul class="quick-links">
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</div>
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<header class="jumbotron masthead" style="display: none;">
<div class="inner">
<h1>Twitter Bootstrap</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
@ -112,31 +142,30 @@
</div>
</header>
<hr class="soften">
<div class="marketing">
<h1>Designed for everyone, everywhere.</h1>
<h1>Introducing Bootstrap.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row">
<div class="span5">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>Built for and by nerds</h2>
<p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>Cross-everything</h2>
<p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>12-column grid</h2>
<p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>Responsive design</h2>
<p>Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
<div class="row-fluid">
<div class="span4">
<img src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
<div class="span5">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<div class="span4">
<img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2>
<p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
</div>
<div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.</p>
</div>
</div>
<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>Living, coded examples</h2>
<p>Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.</p>
@ -152,34 +181,37 @@
<h2>Built on LESS</h2>
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div>
</div><!--/row-->
</div>
-->
<hr class="soften">
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<!-- <li class="span2">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
--> </ul>
<div class="row-fluid">
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
</ul>
</div>
</div><!-- /.marketing -->

7
docs/javascript.html
View File

@ -57,13 +57,6 @@
<li class="active">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

7
docs/scaffolding.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

7
docs/templates/layout.mustache vendored
View File

@ -69,13 +69,6 @@
<li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
</li>
<li class="divider-vertical"></li>
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
</li>
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
<li class="{{less}}">
<a href="./extend.html">{{_i}}Extend{{/i}}</a>
</li>

172
docs/templates/pages/components.mustache vendored
View File

@ -1177,6 +1177,63 @@
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
<hr class="bs-docs-separator">
<h2>{{_i}}Responsive navbar{{/i}}</h2>
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>{{! /example }}
</section>
@ -1602,53 +1659,67 @@
<h2>{{_i}}Default thumbnails{{/i}}</h2>
<p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
</div>
<h2>{{_i}}Highly customizable{{/i}}</h2>
<p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p>
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
</ul>
</div>
<h3>{{_i}}Why use thumbnails{{/i}}</h3>
<p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p>
@ -1663,9 +1734,9 @@
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;li class="span4"&gt;
&lt;a href="#" class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;/a&gt;
&lt;/li&gt;
...
@ -1674,11 +1745,11 @@
<p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt;
&lt;li class="span4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
&lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;h3&gt;{{_i}}Thumbnail label{{/i}}&lt;/h3&gt;
&lt;p&gt;{{_i}}Thumbnail caption...{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
...
@ -1718,6 +1789,11 @@
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
</section>

129
docs/templates/pages/index.mustache vendored
View File

@ -1,6 +1,43 @@
</div>
<div class="jumbo">
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">{{_i}}Download Bootstrap{{/i}}</a></p>
<ul class="jumbo-links">
<li><a href="#">Customize</a></li>
<li><a href="#">GitHub project</a></li>
<li>Version 2.1.0</li>
</ul>
</div>
</div>
<div class="jumbo-buttons">
<div class="bs-docs-container">
<ul class="quick-links">
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</div>
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<header class="jumbotron masthead" style="display: none;">
<div class="inner">
<h1>{{_i}}Twitter Bootstrap{{/i}}</h1>
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
@ -35,31 +72,30 @@
</div>
</header>
<hr class="soften">
<div class="marketing">
<h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
<h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
<div class="row">
<div class="span5">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>{{_i}}Built for and by nerds{{/i}}</h2>
<p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>{{_i}}Cross-everything{{/i}}</h2>
<p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>{{_i}}12-column grid{{/i}}</h2>
<p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>{{_i}}Responsive design{{/i}}</h2>
<p>{{_i}}Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
<div class="row-fluid">
<div class="span4">
<img src="assets/img/bs-docs-twitter-github.png">
<h2>{{_i}}By nerds, for nerds.{{/i}}</h2>
<p>{{_i}}Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.{{/i}}</p>
</div>
<div class="span5">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<div class="span4">
<img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>{{_i}}Made for everyone.{{/i}}</h2>
<p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
</div>
<div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png">
<h2>{{_i}}Packed with features.{{/i}}</h2>
<p>{{_i}}Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
</div>
</div>
<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>{{_i}}Living, coded examples{{/i}}</h2>
<p>{{_i}}Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.{{/i}}</p>
@ -75,33 +111,36 @@
<h2>{{_i}}Built on LESS{{/i}}</h2>
<p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p>
</div>
</div><!--/row-->
</div>
-->
<hr class="soften">
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<!-- <li class="span2">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
--> </ul>
<div class="row-fluid">
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
</ul>
</div>
</div><!-- /.marketing -->

7
docs/upgrading.html
View File

@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>

6
less/buttons.less
View File

@ -10,7 +10,7 @@
.btn {
display: inline-block;
.ie7-inline-block();
padding: 4px 10px 4px;
padding: 4px 14px 4px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
@ -26,7 +26,7 @@
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Hover state
@ -54,7 +54,7 @@
background-color: darken(@white, 15%) e("\9");
background-image: none;
outline: 0;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05)");
}
// Disabled state

34
less/navbar.less
View File

@ -206,7 +206,7 @@
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
color: @navbarLinkColor;
text-decoration: none;
@ -379,15 +379,19 @@
// Override the default .navbar
.navbar-subnav {
}
.navbar-subnav .navbar-inner {
padding: 0;
#gradient > .vertical(#f9f9f9, #f1f1f1);
#gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none);
border: 1px solid #e5e5e5;
}
// Lighten vertical dividers
.navbar-subnav .divider-vertical {
background-color: #f1f1f1;
border-right-color: #ffffff;
}
// Change link colors back
.navbar-subnav .nav > li > a {
color: @linkColor;
@ -401,7 +405,10 @@
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
background-color: #e5e5e5;
background-color: #eee;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
}
// Dropdown carets
@ -411,6 +418,21 @@
border-bottom-color: @linkColor;
}
// Reset search input form
.navbar-subnav .search-query {
background-color: #fff;
border-color: #ccc;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
// On :focus, keep the same padding and border
&:focus,
&.focused {
padding: 4px 9px;
border: 1px solid rgba(82,168,236,.8);
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
}
}
// Open dropdown dropdown-toggle
.navbar-subnav .nav .open > a {
color: @linkColorHover;

17
less/tests/css-tests.css
View File

@ -12,9 +12,24 @@ body {
.subhead {
margin-bottom: 36px;
}
h4 {
/*h4 {
margin-bottom: 5px;
}
*/
.type-test {
margin-bottom: 20px;
padding: 0 20px 20px;
background: url(../../docs/assets/img/grid-baseline-20px.png);
}
.type-test h1,
.type-test h2,
.type-test h3,
.type-test h4,
.type-test h5,
.type-test h6 {
background-color: rgba(255,0,0,.2);
}
/* colgroup tests */

39
less/tests/css-tests.html
View File

@ -55,6 +55,45 @@
<!-- Typography
================================================== -->
<div class="page-header">
<h1>Typography</h1>
</div>
<div class="row">
<div class="span6">
<div class="type-test">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="span6">
<div class="type-test">
<h1>h1. Heading 1</h1>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2>h2. Heading 2</h2>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>h3. Heading 3</h3>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h4>h4. Heading 4</h4>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5>h5. Heading 5</h5>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h6>h6. Heading 6</h6>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<!-- Fluid grid
================================================== -->

5
less/thumbnails.less
View File

@ -27,10 +27,10 @@
.thumbnail {
display: block;
padding: 4px;
line-height: 1;
line-height: 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
.box-shadow(0 1px 3px rgba(0,0,0,.055));
}
// Add a hover state for linked versions only
a.thumbnail:hover {
@ -47,4 +47,5 @@ a.thumbnail:hover {
}
.thumbnail .caption {
padding: 9px;
color: @gray;
}

74
less/type.less
View File

@ -3,8 +3,8 @@
// --------------------------------------------------
// BODY TEXT
// ---------
// Body text
// -------------------------
p {
margin: 0 0 @baseLineHeight / 2;
@ -20,13 +20,15 @@ p {
line-height: @baseLineHeight * 1.5;
}
// HEADINGS
// --------
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6 {
margin: 0;
margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
line-height: 1;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
@ -35,59 +37,31 @@ h1, h2, h3, h4, h5, h6 {
color: @grayLight;
}
}
h1 {
font-size: 30px;
line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h3 {
font-size: 18px;
line-height: @baseLineHeight * 1.5;
small {
font-size: 14px;
}
}
h4, h5, h6 {
line-height: @baseLineHeight;
}
h4 {
font-size: 14px;
small {
font-size: 12px;
}
}
h5 {
font-size: 12px;
}
h6 {
font-size: 11px;
color: @grayLight;
text-transform: uppercase;
}
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }
h1 small { font-size: 24px; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }
// Page header
// -------------------------
.page-header {
padding-bottom: @baseLineHeight - 1;
margin: @baseLineHeight 0;
margin: @baseLineHeight 0 (@baseLineHeight - 1);
border-bottom: 1px solid @grayLighter;
}
.page-header h1 {
line-height: 1;
}
// LISTS
// -----
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {

14
less/variables.less
View File

@ -46,11 +46,11 @@
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 13px;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 18px;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@ -73,7 +73,7 @@
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@ -87,7 +87,7 @@
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: @gray;
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@ -155,8 +155,8 @@
// Navbar
// -------------------------
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarBackground: #111;
@navbarBackgroundHighlight: #222;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;