rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +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 .dropdown-menu a:hover {
background-color: #222222;
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
@ -977,8 +977,8 @@
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
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);

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(enabled=false);
*zoom: 1;
-webkit-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.1), 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);
-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,
@ -2891,17 +2891,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);
}
@ -2910,13 +2910,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 {
@ -3233,7 +3233,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 {
@ -3781,17 +3781,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);
@ -3906,8 +3906,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);
@ -4032,7 +4032,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 {
@ -4040,8 +4040,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 {
@ -4055,17 +4055,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);
@ -4077,8 +4077,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,
@ -4186,20 +4186,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: -moz-linear-gradient(top, #ffffff, #f1f1f1);
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-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);
@ -4212,7 +4217,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,

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

@ -86,7 +86,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));
@ -185,33 +185,33 @@ 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;
letter-spacing: -1px;
}
.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 +220,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 +405,7 @@ h2 + .row {
/* Example sites showcase */
.example-sites {
margin-left: 20px;
xmargin-left: 20px;
}
.example-sites img {
max-width: 100%;
@ -778,16 +778,18 @@ form.bs-docs-example {
.navbar {
.navbar-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.jumbo {
padding: 100px 0;
margin-top: -60px;
margin: -60px 0 60px;
background-color: #222;
color: #fff;
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: -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 */
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);
@ -806,9 +826,9 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
}
.jumbo h1 {
font-size: 120px;
font-weight: 200;
font-weight: ;
line-height: 1;
margin: 0 0 5px;
margin: 0 0 10px;
letter-spacing: -2px;
}
.jumbo p {
@ -818,19 +838,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
line-height: 1.25;
}
.jumbo .btn {
font-size: 20px;
font-size: 24px;
padding: 14px 24px;
margin: 0 0 30px 0;
font-weight: 200;
-webkit-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 3px rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
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,.25);
-moz-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,.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,.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;
}
@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

97
docs/index.html
View File

@ -81,7 +81,12 @@
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<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>
@ -125,31 +130,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>Built 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>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>
<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,34 +169,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 -->

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

@ -4,7 +4,12 @@
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<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>
@ -48,31 +53,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}}Built 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}}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>
<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,33 +92,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 -->

2
less/buttons.less
View File

@ -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,.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

14
less/navbar.less
View File

@ -383,11 +383,18 @@
}
.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 +408,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

6
less/variables.less
View File

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