Commit 5f861ef5 authored by Mark Otto's avatar Mark Otto
Browse files

fix up docs to use default container, fix responsive home changes

parent 3f2f96b0
Showing with 314 additions and 422 deletions
+314 -422
...@@ -788,7 +788,7 @@ code, ...@@ -788,7 +788,7 @@ code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px; font-size: 12px;
color: #333333; color: #333333;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
...@@ -806,7 +806,7 @@ pre { ...@@ -806,7 +806,7 @@ pre {
display: block; display: block;
padding: 9.5px; padding: 9.5px;
margin: 0 0 10px; margin: 0 0 10px;
font-size: 12.950000000000001px; font-size: 12px;
line-height: 20px; line-height: 20px;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
......
...@@ -37,9 +37,6 @@ h3 code { ...@@ -37,9 +37,6 @@ h3 code {
/* Tweak navbar brand link to be super sleek /* Tweak navbar brand link to be super sleek
-------------------------------------------------- */ -------------------------------------------------- */
.navbar {
}
/* Change the docs' brand */ /* Change the docs' brand */
body > .navbar-fixed-top .brand { body > .navbar-fixed-top .brand {
padding-right: 0; padding-right: 0;
...@@ -94,7 +91,6 @@ hr.soften { ...@@ -94,7 +91,6 @@ hr.soften {
text-align: center; text-align: center;
} }
.jumbotron h1 { .jumbotron h1 {
margin-bottom: 10px;
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
letter-spacing: -1px; letter-spacing: -1px;
...@@ -122,47 +118,100 @@ hr.soften { ...@@ -122,47 +118,100 @@ hr.soften {
/* Masthead (docs home) /* Masthead (docs home)
------------------------- */ ------------------------- */
.masthead { .masthead {
margin-top: 20px; padding: 50px 0 60px;
margin-bottom: 80px; margin-top: -60px;
margin-bottom: 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
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 */
-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);
}
.masthead h1 {
font-size: 120px;
line-height: 1;
letter-spacing: -2px;
} }
.masthead p { .masthead p {
margin-bottom: 20px; font-size: 40px;
font-size: 30px; font-weight: 200;
line-height: 40px; line-height: 1.25;
} }
/* Subhead (other pages) /* Drop borders on buttons, improve shadows */
------------------------- */ .masthead .btn {
.subhead { font-size: 24px;
text-align: left; 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);
} }
.subhead h1 { .masthead .btn:active {
font-size: 60px; -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);
} }
/* Quick links on Home /* Textual links in masthead */
------------------------- */ .masthead-links {
.bs-links {
margin: 40px 0 0;
font-size: 12px;
}
.quick-links {
height: 20px;
margin: 0; margin: 0;
padding: 0;
list-style: none; list-style: none;
overflow: hidden;
} }
.quick-links:first-child { .masthead-links li {
min-height: 0; display: inline;
padding: 0 10px;
color: rgba(255,255,255,.25);
}
.masthead-links a {
color: #fff;
color: rgba(255,255,255,.5);
}
.masthead-links a:hover {
color: #fff;
}
/* Social proof buttons from GitHub & Twitter */
.bs-docs-social {
padding: 15px 0;
text-align: center;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
}
/* Quick links on Home */
.bs-docs-social-buttons {
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
} }
.quick-links li { .bs-docs-social-buttons li {
display: inline-block; display: inline-block;
margin: 0 8px; padding: 5px 8px;
color: #999;
line-height: 1; line-height: 1;
} }
/* Subhead (other pages)
------------------------- */
.subhead {
text-align: left;
}
.subhead h1 {
font-size: 60px;
}
/* Marketing section of Overview /* Marketing section of Overview
...@@ -210,6 +259,13 @@ hr.soften { ...@@ -210,6 +259,13 @@ hr.soften {
margin-bottom: 0; margin-bottom: 0;
color: #777; color: #777;
} }
.footer-links {
margin: 10px 0;
}
.footer-links li {
display: inline;
margin-right: 10px;
}
...@@ -479,7 +535,6 @@ h2 + .row { ...@@ -479,7 +535,6 @@ h2 + .row {
.bs-docs-example + .prettyprint { .bs-docs-example + .prettyprint {
margin-top: -20px; margin-top: -20px;
padding-top: 15px; padding-top: 15px;
font-size: 12px;
} }
/* Tweak examples /* Tweak examples
...@@ -666,6 +721,10 @@ form.bs-docs-example { ...@@ -666,6 +721,10 @@ form.bs-docs-example {
body { body {
padding-top: 0; padding-top: 0;
} }
/* Widen masthead and social buttons to fill body padding */
.masthead {
margin-top: -20px; /* Offset bottom margin on .navbar */
}
} }
/* Tablet /* Tablet
...@@ -676,9 +735,22 @@ form.bs-docs-example { ...@@ -676,9 +735,22 @@ form.bs-docs-example {
padding-top: 0; padding-top: 0;
} }
/* Jumbotron buttons */ /* Widen masthead and social buttons to fill body padding */
.jumbotron .btn { .masthead {
margin-bottom: 10px; padding: 40px 20px;
margin-top: -20px; /* Offset bottom margin on .navbar */
margin-right: -20px;
margin-left: -20px;
}
.masthead h1 {
font-size: 90px;
}
.masthead p,
.masthead .btn {
font-size: 24px;
}
.bs-docs-social {
margin: 0 -20px;
} }
/* Space out the show-grid examples */ /* Space out the show-grid examples */
...@@ -695,9 +767,9 @@ form.bs-docs-example { ...@@ -695,9 +767,9 @@ form.bs-docs-example {
/* Landscape phones /* Landscape phones
------------------------- */ ------------------------- */
@media (max-width: 480px) { @media (max-width: 480px) {
/* Reduce padding above jumbotron */ /* Remove padding above jumbotron */
body { body {
padding-top: 70px; padding-top: 0;
} }
/* Change up some type stuff */ /* Change up some type stuff */
...@@ -707,24 +779,28 @@ form.bs-docs-example { ...@@ -707,24 +779,28 @@ form.bs-docs-example {
/* Downsize the jumbotrons */ /* Downsize the jumbotrons */
.jumbotron h1 { .jumbotron h1 {
font-size: 45px; font-size: 60px;
} }
.jumbotron p { .jumbotron p,
font-size: 18px; .jumbotron .btn {
line-height: 24px; font-size: 20px;
} }
.jumbotron .btn { .jumbotron .btn {
display: block; display: block;
font-size: 18px; margin: 0 auto;
padding: 10px 14px;
margin: 0 auto 10px;
} }
/* center align subhead text like the masthead */ /* center align subhead text like the masthead */
.subhead h1, .subhead h1,
.subhead p { .subhead p {
text-align: center; text-align: center;
} }
/* Marketing on home */
.marketing h1 {
font-size: 40px;
}
/* center example sites */ /* center example sites */
.example-sites { .example-sites {
margin-left: 0; margin-left: 0;
...@@ -761,123 +837,3 @@ form.bs-docs-example { ...@@ -761,123 +837,3 @@ form.bs-docs-example {
float: none; 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;
}
}
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -1633,6 +1633,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1633,6 +1633,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -2221,6 +2221,11 @@ class="clearfix" ...@@ -2221,6 +2221,11 @@ class="clearfix"
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -424,6 +424,11 @@ ...@@ -424,6 +424,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -108,6 +108,11 @@ ...@@ -108,6 +108,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -167,6 +167,11 @@ ...@@ -167,6 +167,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,26 +66,26 @@ ...@@ -66,26 +66,26 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
</div> </div>
<div class="jumbo"> <div class="jumbotron masthead">
<div class="bs-docs-container"> <div class="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>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">Download Bootstrap</a></p> <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
<ul class="jumbo-links"> <ul class="masthead-links">
<li><a href="#">Customize</a></li> <li><a href="./download.html" >Customize</a></li>
<li><a href="#">GitHub project</a></li> <li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
<li>Version 2.1.0</li> <li>Version 2.1.0</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="jumbo-buttons"> <div class="bs-docs-social">
<div class="bs-docs-container"> <div class="container">
<ul class="quick-links"> <ul class="bs-docs-social-buttons">
<li> <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> <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>
...@@ -102,118 +102,61 @@ ...@@ -102,118 +102,61 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<div class="marketing">
<!-- Masthead <h1>Introducing Bootstrap.</h1>
================================================== --> <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<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>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" >View project on GitHub</a>
<a href="assets/bootstrap.zip" class="btn btn-large" >Download Bootstrap <small>(v2.1.0)</small></a>
</p>
</div>
<div class="bs-links">
<ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li>
<li><a href="https://github.com/twitter/bootstrap/zipball/master">Download with docs</a></li>
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
<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>
</header>
<div class="marketing">
<h1>Introducing Bootstrap.</h1> <div class="row-fluid">
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p> <div class="span4">
<img src="assets/img/bs-docs-twitter-github.png">
<div class="row-fluid"> <h2>By nerds, for nerds.</h2>
<div class="span4"> <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>
<img src="assets/img/bs-docs-twitter-github.png"> </div>
<h2>By nerds, for nerds.</h2> <div class="span4">
<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> <img src="assets/img/bs-docs-responsive-illustrations.png">
</div> <h2>Made for everyone.</h2>
<div class="span4"> <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>
<img src="assets/img/bs-docs-responsive-illustrations.png"> </div>
<h2>Made for everyone.</h2> <div class="span4">
<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> <img src="assets/img/bs-docs-bootstrap-features.png">
</div> <h2>Packed with features.</h2>
<div class="span4"> <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>
<img src="assets/img/bs-docs-bootstrap-features.png"> </div>
<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>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>Growing library</h2>
<p>Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>Custom jQuery plugins</h2>
<p>Easy-to-use, proper, and extensible interactions for many of our components with custom-built jQuery plugins to quickly bring any project to life.</p>
<img class="bs-icon" src="assets/img/less-small.png">
<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>
</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>
<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 --> <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>
<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 -->
<!-- Footer <!-- Footer
...@@ -223,6 +166,11 @@ ...@@ -223,6 +166,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -1578,6 +1578,11 @@ $('.carousel').carousel({ ...@@ -1578,6 +1578,11 @@ $('.carousel').carousel({
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -593,6 +593,11 @@ ...@@ -593,6 +593,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
{{>body}} {{>body}}
...@@ -90,6 +90,11 @@ ...@@ -90,6 +90,11 @@
<p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p> <p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
<p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> <p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> <p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
</ul>
</footer> </footer>
</div>{{! /container }} </div>{{! /container }}
......
</div> </div>
<div class="jumbo"> <div class="jumbotron masthead">
<div class="bs-docs-container"> <div class="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>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">{{_i}}Download Bootstrap{{/i}}</a></p> <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
<ul class="jumbo-links"> <ul class="masthead-links">
<li><a href="#">Customize</a></li> <li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
<li><a href="#">GitHub project</a></li> <li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
<li>Version 2.1.0</li> <li>Version 2.1.0</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="jumbo-buttons"> <div class="bs-docs-social">
<div class="bs-docs-container"> <div class="container">
<ul class="quick-links"> <ul class="bs-docs-social-buttons">
<li> <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> <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>
...@@ -32,115 +32,58 @@ ...@@ -32,115 +32,58 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<div class="marketing">
<!-- Masthead
================================================== --> <h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
<header class="jumbotron masthead" style="display: none;"> <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
<div class="inner">
<h1>{{_i}}Twitter Bootstrap{{/i}}</h1> <div class="row-fluid">
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p> <div class="span4">
<p class="download-info"> <img src="assets/img/bs-docs-twitter-github.png">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'GitHub Project', 'View project on GitHub']);"{{/production}}>{{_i}}View project on GitHub{{/i}}</a> <h2>{{_i}}By nerds, for nerds.{{/i}}</h2>
<a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a> <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>
</p> </div>
</div> <div class="span4">
<img src="assets/img/bs-docs-responsive-illustrations.png">
<div class="bs-links"> <h2>{{_i}}Made for everyone.{{/i}}</h2>
<ul class="quick-links"> <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>
<li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li> </div>
<li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li> <div class="span4">
<li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li> <img src="assets/img/bs-docs-bootstrap-features.png">
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li> <h2>{{_i}}Packed with features.{{/i}}</h2>
<li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li> <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>
</ul> </div>
<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>
</header>
<div class="marketing">
<h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/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="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>
</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>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>{{_i}}Growing library{{/i}}</h2>
<p>{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}</p>
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>{{_i}}Custom jQuery plugins{{/i}}</h2>
<p>{{_i}}Easy-to-use, proper, and extensible interactions for many of our components with custom-built jQuery plugins to quickly bring any project to life.{{/i}}</p>
<img class="bs-icon" src="assets/img/less-small.png">
<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>
-->
<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>
<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 --> <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>
<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 -->
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="bs-docs-container"> <div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" 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> <span class="icon-bar"></span>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="bs-docs-container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
...@@ -271,6 +271,11 @@ ...@@ -271,6 +271,11 @@
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
</footer> </footer>
</div> </div>
......
...@@ -8,7 +8,7 @@ code, ...@@ -8,7 +8,7 @@ code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
#font > #family > .monospace; #font > #family > .monospace;
font-size: @baseFontSize - 1; font-size: @baseFontSize - 2;
color: @grayDark; color: @grayDark;
.border-radius(3px); .border-radius(3px);
} }
...@@ -26,7 +26,7 @@ pre { ...@@ -26,7 +26,7 @@ pre {
display: block; display: block;
padding: (@baseLineHeight - 1) / 2; padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2; margin: 0 0 @baseLineHeight / 2;
font-size: @baseFontSize * .925; // 13px to 12px font-size: @baseFontSize - 2; // 14px to 12px
line-height: @baseLineHeight; line-height: @baseLineHeight;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment