Skip to content

B
bootstrap
Commit 0dda2c46 authored by Mark Otto's avatar Mark Otto
Browse files
Options

make docs scroll over jumbotrons, but only for 980px up

parent 5b8838ae
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9268 additions and 9208 deletions
docs/assets/css/docs.css
View file @ 0dda2c46
...@@ -940,3 +940,35 @@ form.bs-docs-example { ...@@ -940,3 +940,35 @@ form.bs-docs-example {
} }
} }
@media (min-width: 979px) {
.masthead,
.subhead {
position: fixed;
top: 40px;
right: 0;
left: 0;
}
.masthead {
height: 400px;
}
.subhead {
height: 120px; /* +80px pdding */
}
.bs-docs-canvas {
position: absolute;
width: 100%;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.5);
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.masthead + .bs-docs-canvas {
top: 550px;
}
.subhead + .bs-docs-canvas {
top: 240px;
}
}
docs/base-css.html
View file @ 0dda2c46
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/components.html
View file @ 0dda2c46
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/customize.html
View file @ 0dda2c46
This diff is collapsed.
docs/getting-started.html
View file @ 0dda2c46
This diff is collapsed.
docs/index.html
View file @ 0dda2c46
...@@ -82,80 +82,84 @@ ...@@ -82,80 +82,84 @@
</div> </div>
</div> </div>
<div class="bs-docs-social"> <div class="bs-docs-canvas">
<div class="container">
<ul class="bs-docs-social-buttons"> <div class="bs-docs-social">
<li> <div class="container">
<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> <ul class="bs-docs-social-buttons">
</li> <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=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe> </li>
</li> <li>
<li class="follow-btn"> <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>
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a> </li>
</li> <li class="follow-btn">
<li class="tweet-btn"> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
<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>
</li> <li class="tweet-btn">
</ul> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</div> </div>
</div>
<div class="container"> <div class="container">
<div class="marketing"> <div class="marketing">
<h1>Introducing Bootstrap.</h1> <h1>Introducing Bootstrap.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p> <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-twitter-github.png"> <img src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2> <h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p> <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>
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-responsive-illustrations.png"> <img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2> <h2>Made for everyone.</h2>
<p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p> <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>
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png"> <img src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2> <h2>Packed with features.</h2>
<p>A 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> <p>A 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> </div>
</div>
<hr class="soften"> <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>
<h1>Built with Bootstrap.</h1> </div>
<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 --> </div>
</div> </div>
......
docs/javascript.html
View file @ 0dda2c46
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/scaffolding.html
View file @ 0dda2c46
This diff is collapsed.
docs/templates/pages/base-css.mustache
View file @ 0dda2c46
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/templates/pages/components.mustache
View file @ 0dda2c46
This diff is collapsed.
docs/templates/pages/customize.mustache
View file @ 0dda2c46
This diff is collapsed.
docs/templates/pages/index.mustache
View file @ 0dda2c46
...@@ -11,79 +11,83 @@ ...@@ -11,79 +11,83 @@
</div> </div>
</div> </div>
<div class="bs-docs-social"> <div class="bs-docs-canvas">
<div class="container">
<ul class="bs-docs-social-buttons"> <div class="bs-docs-social">
<li> <div class="container">
<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> <ul class="bs-docs-social-buttons">
</li> <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=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe> </li>
</li> <li>
<li class="follow-btn"> <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>
<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> <li class="follow-btn">
<li class="tweet-btn"> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
<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>
</li> <li class="tweet-btn">
</ul> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</div> </div>
</div>
<div class="container"> <div class="container">
<div class="marketing"> <div class="marketing">
<h1>{{_i}}Introducing Bootstrap.{{/i}}</h1> <h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p> <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-twitter-github.png"> <img src="assets/img/bs-docs-twitter-github.png">
<h2>{{_i}}By nerds, for nerds.{{/i}}</h2> <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> <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>
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-responsive-illustrations.png"> <img src="assets/img/bs-docs-responsive-illustrations.png">
<h2>{{_i}}Made for everyone.{{/i}}</h2> <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> <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>
<div class="span4"> <div class="span4">
<img src="assets/img/bs-docs-bootstrap-features.png"> <img src="assets/img/bs-docs-bootstrap-features.png">
<h2>{{_i}}Packed with features.{{/i}}</h2> <h2>{{_i}}Packed with features.{{/i}}</h2>
<p>{{_i}}A 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> <p>{{_i}}A 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>
</div>
<hr class="soften"> <hr class="soften">
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1> <h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p> <p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
<div class="row-fluid"> <div class="row-fluid">
<ul class="thumbnails example-sites"> <ul class="thumbnails example-sites">
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank"> <a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm"> <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank"> <a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt"> <img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank"> <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint"> <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div>{{! /.marketing }}
</div><!-- /.marketing --> </div>{{! /.container }}
</div>{{! /container }} </div>{{! /.bs-docs-canvas }}
docs/templates/pages/javascript.mustache
View file @ 0dda2c46
This diff is collapsed.
docs/templates/pages/scaffolding.mustache
View file @ 0dda2c46
This diff is collapsed.
Markdown is supported
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