rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

rewrite docs homepage, new graphics

Browse Source
This commit is contained in:
Mark Otto 2012-07-04 23:31:30 -07:00
parent 3ad52ca632
commit 62c386259b
11 changed files with 249 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -941,7 +941,7 @@
} }
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover { .nav-collapse .dropdown-menu a:hover {
background-color: #222222; background-color: #111111;
} }
.nav-collapse.in .btn-group { .nav-collapse.in .btn-group {
padding: 0; padding: 0;
@ -977,8 +977,8 @@
float: none; float: none;
padding: 9px 15px; padding: 9px 15px;
margin: 9px 0; margin: 9px 0;
border-top: 1px solid #222222; border-top: 1px solid #111111;
border-bottom: 1px solid #222222; 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); -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); -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); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

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

@ -2765,9 +2765,9 @@ button.close {
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false); filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1; *zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 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.1), 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.1), 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, .btn:hover,
@ -2891,17 +2891,17 @@ button.close {
} }
.btn-primary { .btn-primary {
background-color: #0074cc; background-color: #006dcc;
*background-color: #0055cc; *background-color: #0044cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0044cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x; 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); 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); filter: progid:dximagetransform.microsoft.gradient(enabled=false);
} }
@ -2910,13 +2910,13 @@ button.close {
.btn-primary.active, .btn-primary.active,
.btn-primary.disabled, .btn-primary.disabled,
.btn-primary[disabled] { .btn-primary[disabled] {
background-color: #0055cc; background-color: #0044cc;
*background-color: #004ab3; *background-color: #003bb3;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active { .btn-primary.active {
background-color: #004099 \9; background-color: #003399 \9;
} }
.btn-warning { .btn-warning {
@ -3233,7 +3233,7 @@ input[type="submit"].btn.btn-mini {
} }
.btn-group.open .btn-primary.dropdown-toggle { .btn-group.open .btn-primary.dropdown-toggle {
background-color: #0055cc; background-color: #0044cc;
} }
.btn-group.open .btn-warning.dropdown-toggle { .btn-group.open .btn-warning.dropdown-toggle {
@ -3781,17 +3781,17 @@ input[type="submit"].btn.btn-mini {
min-height: 40px; min-height: 40px;
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
background-color: #2c2c2c; background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #222222, #111111);
background-repeat: repeat-x; background-repeat: repeat-x;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
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); -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); -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); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@ -3906,8 +3906,8 @@ input[type="submit"].btn.btn-mini {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: #ffffff; color: #ffffff;
background-color: #626262; background-color: #515151;
border: 1px solid #151515; 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); -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); -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); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
@ -4032,7 +4032,7 @@ input[type="submit"].btn.btn-mini {
.navbar .nav .active > a:focus { .navbar .nav .active > a:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #222222; background-color: #111111;
} }
.navbar .divider-vertical { .navbar .divider-vertical {
@ -4040,8 +4040,8 @@ input[type="submit"].btn.btn-mini {
height: 40px; height: 40px;
margin: 0 9px; margin: 0 9px;
overflow: hidden; overflow: hidden;
background-color: #222222; background-color: #111111;
border-right: 1px solid #333333; border-right: 1px solid #222222;
} }
.navbar .nav.pull-right { .navbar .nav.pull-right {
@ -4055,17 +4055,17 @@ input[type="submit"].btn.btn-mini {
padding: 7px 10px; padding: 7px 10px;
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
background-color: #1f1f1f; background-color: #0e0e0e;
*background-color: #151515; *background-color: #040404;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#151515)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #262626, #151515); background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #262626, #151515); background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(top, #262626, #151515); background-image: linear-gradient(top, #151515, #040404);
background-image: -moz-linear-gradient(top, #262626, #151515); background-image: -moz-linear-gradient(top, #151515, #040404);
background-repeat: repeat-x; 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); 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); 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); -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); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@ -4077,8 +4077,8 @@ input[type="submit"].btn.btn-mini {
.navbar .btn-navbar.active, .navbar .btn-navbar.active,
.navbar .btn-navbar.disabled, .navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] { .navbar .btn-navbar[disabled] {
background-color: #151515; background-color: #040404;
*background-color: #080808; *background-color: #000000;
} }
.navbar .btn-navbar:active, .navbar .btn-navbar:active,
@ -4186,20 +4186,25 @@ input[type="submit"].btn.btn-mini {
.navbar-subnav .navbar-inner { .navbar-subnav .navbar-inner {
padding: 0; padding: 0;
background-color: #f6f6f6; background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1); background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f1f1f1)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1); background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1); background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(top, #f9f9f9, #f1f1f1); background-image: linear-gradient(top, #ffffff, #f1f1f1);
background-repeat: repeat-x; background-repeat: repeat-x;
border: 1px solid #e5e5e5; 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; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.navbar-subnav .divider-vertical {
background-color: #f1f1f1;
border-right-color: #ffffff;
}
.navbar-subnav .nav > li > a { .navbar-subnav .nav > li > a {
color: #0088cc; color: #0088cc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@ -4212,7 +4217,10 @@ input[type="submit"].btn.btn-mini {
.navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover { .navbar-subnav .nav > .active > a:hover {
color: #777; 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, .navbar-subnav .nav li.dropdown .dropdown-toggle .caret,

107
docs/assets/css/docs.css
View File

@ -86,7 +86,7 @@ section {
/* Faded out hr */ /* Faded out hr */
hr.soften { hr.soften {
height: 1px; 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: -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: -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)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
@ -185,33 +185,33 @@ hr.soften {
/* Marketing section of Overview /* Marketing section of Overview
-------------------------------------------------- */ -------------------------------------------------- */
.marketing .row { .marketing {
margin-bottom: 9px;
}
.marketing h1 {
margin: 40px 0 10px;
font-size: 40px;
font-weight: 300;
text-align: center; text-align: center;
} }
.marketing h1 {
margin: 60px 0 10px;
font-size: 60px;
font-weight: 400;
line-height: 1;
letter-spacing: -1px;
}
.marketing h2 { .marketing h2 {
font-weight: 300; font-weight: 400;
letter-spacing: -1px;
} }
.marketing p { .marketing p {
margin: 5px 10px 15px 0; color: #555;
}
.marketing .bs-icon {
float: left;
margin: 7px 10px 0 0;
opacity: .8;
} }
.marketing .marketing-byline { .marketing .marketing-byline {
margin-bottom: 30px; margin-bottom: 40px;
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
line-height: 25px; line-height: 25px;
color: #999; color: #999;
text-align: center; }
.marketing img {
display: block;
margin: 0 auto 20px;
} }
@ -220,8 +220,8 @@ hr.soften {
-------------------------------------------------- */ -------------------------------------------------- */
.footer { .footer {
padding: 40px 0; padding: 70px 0;
margin-top: 49px; margin-top: 70px;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.footer p { .footer p {
@ -405,7 +405,7 @@ h2 + .row {
/* Example sites showcase */ /* Example sites showcase */
.example-sites { .example-sites {
margin-left: 20px; xmargin-left: 20px;
} }
.example-sites img { .example-sites img {
max-width: 100%; max-width: 100%;
@ -778,16 +778,18 @@ form.bs-docs-example {
.navbar-inner {
.navbar { -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
} }
.jumbo { .jumbo {
padding: 100px 0; padding: 100px 0;
margin-top: -60px; margin: -60px 0 60px;
background-color: #222; background-color: #222;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #c9cabc; /* Old browsers */ background: #c9cabc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */
@ -798,6 +800,24 @@ background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */
background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ 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 */ 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; xborder-bottom: 1px solid #68686d;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
@ -806,9 +826,9 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
} }
.jumbo h1 { .jumbo h1 {
font-size: 120px; font-size: 120px;
font-weight: 200; font-weight: ;
line-height: 1; line-height: 1;
margin: 0 0 5px; margin: 0 0 10px;
letter-spacing: -2px; letter-spacing: -2px;
} }
.jumbo p { .jumbo p {
@ -818,19 +838,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
line-height: 1.25; line-height: 1.25;
} }
.jumbo .btn { .jumbo .btn {
font-size: 20px; font-size: 24px;
padding: 14px 24px; padding: 14px 24px;
margin: 0 0 30px 0;
font-weight: 200; font-weight: 200;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); border: 0;
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); -webkit-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 3px rgba(0,0,0,.2); -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 { .jumbo .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); -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,.25); -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,.25); 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;
}
@media (max-width: 480px) { @media (max-width: 480px) {
@ -849,5 +886,3 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
} }
} }

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

57
docs/index.html
View File

@ -81,7 +81,12 @@
<div class="bs-docs-container"> <div class="bs-docs-container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">Download Bootstrap <small>(v2.1.0)</small></a> <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> </div>
@ -125,31 +130,30 @@
</div> </div>
</header> </header>
<hr class="soften">
<div class="marketing"> <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> <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"> <div class="row-fluid">
<h2>Cross-everything</h2> <div class="span4">
<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 src="assets/img/bs-docs-twitter-github.png">
<h2>Built by nerds, for nerds.</h2>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> <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>
<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> </div>
<div class="span5"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> <img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Designed 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> <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> <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>
@ -165,12 +169,14 @@
<h2>Built on LESS</h2> <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> <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>
</div><!--/row--> </div>
-->
<hr class="soften"> <hr class="soften">
<h1>Built with Bootstrap.</h1> <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> <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>
<div class="row-fluid">
<ul class="thumbnails example-sites"> <ul class="thumbnails example-sites">
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank"> <a class="thumbnail" href="http://soundready.fm/" target="_blank">
@ -187,12 +193,13 @@
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a> </a>
</li> </li>
<!-- <li class="span2"> <li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank"> <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint"> <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a> </a>
</li> </li>
--> </ul> </ul>
</div>
</div><!-- /.marketing --> </div><!-- /.marketing -->

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

@ -4,7 +4,12 @@
<div class="bs-docs-container"> <div class="bs-docs-container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a> <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> </div>
@ -48,31 +53,30 @@
</div> </div>
</header> </header>
<hr class="soften">
<div class="marketing"> <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> <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"> <div class="row-fluid">
<h2>{{_i}}Cross-everything{{/i}}</h2> <div class="span4">
<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 src="assets/img/bs-docs-twitter-github.png">
<h2>{{_i}}Built by nerds, for nerds.{{/i}}</h2>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> <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>
<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> </div>
<div class="span5"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> <img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>{{_i}}Designed 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> <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> <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>
@ -88,12 +92,14 @@
<h2>{{_i}}Built on LESS{{/i}}</h2> <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> <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>
</div><!--/row--> </div>
-->
<hr class="soften"> <hr class="soften">
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1> <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> <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>
<div class="row-fluid">
<ul class="thumbnails example-sites"> <ul class="thumbnails example-sites">
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank"> <a class="thumbnail" href="http://soundready.fm/" target="_blank">
@ -110,11 +116,12 @@
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a> </a>
</li> </li>
<!-- <li class="span2"> <li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank"> <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint"> <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a> </a>
</li> </li>
--> </ul> </ul>
</div>
</div><!-- /.marketing --> </div><!-- /.marketing -->

2
less/buttons.less
View File

@ -26,7 +26,7 @@
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px); .border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love .ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 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 // Hover state

14
less/navbar.less
View File

@ -383,11 +383,18 @@
} }
.navbar-subnav .navbar-inner { .navbar-subnav .navbar-inner {
padding: 0; padding: 0;
#gradient > .vertical(#f9f9f9, #f1f1f1); #gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none); .box-shadow(none);
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
} }
// Lighten vertical dividers
.navbar-subnav .divider-vertical {
background-color: #f1f1f1;
border-right-color: #ffffff;
}
// Change link colors back // Change link colors back
.navbar-subnav .nav > li > a { .navbar-subnav .nav > li > a {
color: @linkColor; color: @linkColor;
@ -401,7 +408,10 @@
.navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover { .navbar-subnav .nav > .active > a:hover {
color: #777; 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 // Dropdown carets

6
less/variables.less
View File

@ -73,7 +73,7 @@
@btnBorder: #ccc; @btnBorder: #ccc;
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de; @btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4; @btnInfoBackgroundHighlight: #2f96b4;
@ -155,8 +155,8 @@
// Navbar // Navbar
// ------------------------- // -------------------------
@navbarHeight: 40px; @navbarHeight: 40px;
@navbarBackground: @grayDarker; @navbarBackground: #111;
@navbarBackgroundHighlight: @grayDark; @navbarBackgroundHighlight: #222;
@navbarText: @grayLight; @navbarText: @grayLight;
@navbarLinkColor: @grayLight; @navbarLinkColor: @grayLight;