diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 71 | ||||
| -rw-r--r-- | docs/index.html | 215 |
2 files changed, 127 insertions, 159 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a17fd5692..52714d199 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -8,8 +8,9 @@ /* Body and structure -------------------------------------------------- */ body { - background-color: #fff; position: relative; + padding-top: 40px; + background-color: #fff; } section { padding-top: 60px; @@ -21,22 +22,29 @@ section > .row { /* Jumbotrons -------------------------------------------------- */ +.jumbotron, +.jumbotron .inner { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} .jumbotron { - min-width: 940px; - padding-top: 40px; + margin-bottom: 40px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); } .jumbotron .inner { background: transparent url(../img/grid-18px.png) top center; - padding: 45px 0; - -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); - -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -*/} + padding: 36px 60px; + -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); +} .jumbotron h1, .jumbotron p { margin-bottom: 9px; color: #fff; - text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); } .jumbotron h1 { @@ -46,6 +54,7 @@ section > .row { } .jumbotron p { font-weight: 300; + margin-right: 25%; } .jumbotron .lead { font-size: 20px; @@ -60,14 +69,14 @@ section > .row { ------------------------- */ /* main docs page */ .masthead { - background-color: #049cd9; + background-color: #004d9f; background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - background-image: -webkit-linear-gradient(#004D9F, #049cd9); - background-image: -moz-linear-gradient(#004D9F, #049cd9); - background-image: -o-linear-gradient(top, #004D9F, #049cd9); - background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + background-image: -webkit-linear-gradient(#048ccd, #004d9f); + background-image: -moz-linear-gradient(#048ccd, #004d9f); + background-image: -o-linear-gradient(top, #048ccd, #004d9f); + background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ } /* supporting docs pages */ .subhead { @@ -98,15 +107,9 @@ section > .row { /* Footer -------------------------------------------------- */ .footer { - background-color: #eee; - min-width: 940px; padding: 30px 0; - text-shadow: 0 1px 0 #fff; border-top: 1px solid #e5e5e5; - -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); - -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -*/} +} .footer p { color: #555; } @@ -323,3 +326,25 @@ pre.prettyprint { .well form { margin-bottom: 0; } + + +/* Responsive Docs +-------------------------------------------------- */ + +/* Tablet to Medium Desktop +------------------------- */ + +@media (min-width: 768px) and (max-width: 900px) { + + .footer, + .jumbotron { + min-width: 748px; + } + .jumbotron .inner h1, + .jumbotron .inner p { + margin-left: 40px; + margin-right: 40px; + } + +} + diff --git a/docs/index.html b/docs/index.html index 4dd45f5f9..2db9719d1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,40 +75,40 @@ </div> </div> - <!-- Masthead (blueprinty thing) - ================================================== --> - <header class="jumbotron masthead" id="overview"> - <div class="inner"> - <h1>Bootstrap, from Twitter</h1> - <p class="lead"> - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br> - It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br> - </p> - <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p> - </div> - </header> + <div class="container"> + + <div id="overview"> + <!-- Masthead (blueprinty thing) + ================================================== --> + <header class="jumbotron masthead"> + <div class="inner"> + <h1>Bootstrap, from Twitter</h1> + <a href="#" class="btn btn-large pull-right">Download on GitHub</a> + <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> + <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p> + </div> + </header> - <!-- Quickstart options - ================================================== --> - <div class="quickstart"> - <div class="container"> + <!-- Quickstart options + ================================================== --> + <div class="quickstart" style="display: none;"> <div class="row"> - <div class="span5"> + <div class="span4"> <h6>Hotlink the CSS</h6> <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> - <div class="span5"> + <div class="span4"> <h6>Use it with Less</h6> <p>A fan of using Less? No problem, just clone the repo and add these lines:</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> -<script src="/path/to/less.js"></script></textarea> + <script src="/path/to/less.js"></script></textarea> </form> </div> - <div class="span5"> + <div class="span4"> <h6>Fork on GitHub</h6> <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> @@ -116,51 +116,40 @@ </div> </div><!-- /row --> </div> - </div> - <div class="container"> - - - -<!-- About Bootstrap -================================================== --> -<section id="about"> - <div class="page-header"> - <h1>About Bootstrap <small>Brief history, browser support, and more</small></h1> - </div> - <div class="row"> - <div class="span-one-third"> - <h3>History</h3> - <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p> - <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - </div> - <div class="span-one-third"> - <h3>Browser support</h3> - <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> - <ul> - <li>Latest Safari</li> - <li>Latest Google Chrome</li> - <li>Firefox 4+</li> - <li>Internet Explorer 7+</li> - <li>Opera 11</li> - </ul> - </div> - <div class="span-one-third"> - <h3>What's included</h3> - <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> - <ul> - <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> - <li>All original .less files</li> - <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> - <li>Complete styleguide documentation</li> - <li>Three example pages with different layouts</li> - </ul> - </div> - </div><!-- /row --> + <!-- About Bootstrap + ================================================== --> + <div class="row"> + <div class="span4"> + <h2>Built for and by nerds</h2> + <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p> + <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> + </div> + <div class="span4"> + <h2>Cross-everything</h2> + <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> + <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> + <ul> + <li>Latest Safari</li> + <li>Latest Google Chrome</li> + <li>Firefox 4+</li> + <li>Internet Explorer 7+</li> + <li>Opera 11</li> + </ul> + </div> + <div class="span4"> + <h2>What's included</h2> + <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> + <ul> + <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> + <li>All original .less files</li> + <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> + <li>Complete styleguide documentation</li> + <li>Three example pages with different layouts</li> + </ul> + </div> + </div><!-- /row --> - <div class="row"> - <div class="span12"> <h3>Quick-start examples</h3> <p>Need some quick templates? Check out these basic examples we've put together:</p> <ul class="media-grid"> @@ -174,10 +163,8 @@ <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> </li> </ul> - </div> - </div><!-- /row --> -</section> + </div><!-- /#overview --> <!-- Grid system @@ -187,11 +174,11 @@ <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1> </div> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Default grid</h2> <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Example grid markup</h3> <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p> <pre class="prettyprint linenums"> @@ -206,11 +193,7 @@ </pre> </div> </div><!-- /row --> - <div class="row show-grid" title="16 column layout"> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> + <div class="row show-grid"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> @@ -223,56 +206,23 @@ <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> - </div><!-- /row --> - <div class="row show-grid" title="8 column layout"> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - </div><!-- /row --> - <div class="row show-grid" title="Example uncommon layout"> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span1 column">1</div> - </div><!-- /row --> - <div class="row show-grid" title="Four column layout"> - <div class="span4">4</div> + </div> + <div class="row show-grid"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> - </div><!-- /row --> - <div class="row show-grid" title="Default three column layout"> - <div class="span-one-third">1/3</div> - <div class="span-one-third">1/3</div> - <div class="span-one-third">1/3</div> - </div><!-- /row --> - <div class="row show-grid" title="One-third and two-thirds layout"> - <div class="span-one-third">1/3</div> - <div class="span-two-thirds">2/3</div> - </div><!-- /row --> - <div class="row show-grid" title="Irregular three column layout"> + </div> + <div class="row show-grid"> <div class="span4">4</div> + <div class="span8">8</div> + </div> + <div class="row show-grid"> <div class="span6">6</div> <div class="span6">6</div> - </div><!-- /row --> - <div class="row show-grid" title="Half and half"> - <div class="span8">8</div> - <div class="span8">8</div> - </div><!-- /row --> - <div class="row show-grid" title="Example uncommon two-column layout"> - <div class="span5">5</div> - <div class="span11">11</div> - </div><!-- /row --> - <div class="row show-grid" title="Unnecessary single column layout"> - <div class="span16">16</div> - </div><!-- /row --> + </div> + <div class="row show-grid"> + <div class="span12">12</div> + </div> <br> @@ -282,18 +232,11 @@ <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div> + <div class="span3 offset3">3 offset 3</div> + <div class="span3 offset3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span4 offset4">4 offset 4</div> - <div class="span4 offset4">4 offset 4</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span5 offset3">5 offset 3</div> - <div class="span5 offset3">5 offset 3</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span10 offset6">10 offset 6</div> + <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> <br> @@ -978,7 +921,7 @@ <fieldset class="control-group has-error"> <label class="control-label" for="textareaError">Textarea with error</label> <div class="controls"> - <textarea class="input-xxlarge" rows="3"></textarea> + <textarea class="input-xlarge" rows="3"></textarea> </div> </fieldset> <fieldset class="control-group"> @@ -2009,17 +1952,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> - </div><!-- /container --> <footer class="footer"> - <div class="container"> - <p class="pull-right"><a href="#">Back to top</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>.<br> - 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> - </div> + <p class="pull-right"><a href="#">Back to top</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>.<br> + 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> </footer> + </div><!-- /container --> + + </body> </html> |