mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mark Otto
2012-07-23 22:36:08 -07:00
parent 5b8838aeac
commit 0dda2c4659
15 changed files with 9100 additions and 9040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/assets/css/docs.css
View File

@@ -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;
}
}

6
docs/base-css.html
View File

@@ -78,8 +78,10 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -1754,6 +1756,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
</div>
</div>
</div>

14
docs/components.html
View File

@@ -78,8 +78,9 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -1834,13 +1835,9 @@
<h3>Dismiss buttons</h3>
<p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.</p>
<pre class="prettyprint linenums">
&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
<p>Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<pre class="prettyprint linenums">
&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
<h3>Dismiss alerts via javascript</h3>
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
@@ -2087,6 +2084,7 @@
...
&lt;/div&gt;
</pre>
<h2>Close icon</h2>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example">
@@ -2158,6 +2156,8 @@ class="clearfix"
</div>
</div>
</div>
</div>

7
docs/customize.html
View File

@@ -74,12 +74,13 @@
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -427,6 +428,8 @@
</div>
</div>
</div>
</div>

7
docs/getting-started.html
View File

@@ -78,9 +78,12 @@
</div>
</header>
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@@ -282,6 +285,8 @@
</div>
</div>
</div>
</div>

6
docs/index.html
View File

@@ -82,6 +82,8 @@
</div>
</div>
<div class="bs-docs-canvas">
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
@@ -155,7 +157,9 @@
</ul>
</div>
</div><!-- /.marketing -->
</div>
</div>
</div>

34
docs/javascript.html
View File

@@ -78,8 +78,9 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -257,9 +258,7 @@
<h3>Via data attributes</h3>
<p>Activate a modal without writing javascript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
<pre class="prettyprint linenums">
&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
<h3>Via javascript</h3>
<p>Call a modal with id <code>myModal</code> with a single line of javascript:</p>
@@ -311,7 +310,8 @@
<pre class="prettyprint linenums">
$('#myModal').modal({
keyboard: false
})</pre>
})
</pre>
<h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
@@ -1104,18 +1104,14 @@ $('#my-alert').bind('closed', function () {
Loading state
</button>
</div>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
<h4>Single toggle</h4>
<p>Add data-toggle="button" to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
</div>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
<h4>Checkbox</h4>
<p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
@@ -1188,7 +1184,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
$('.btn').button('complete')
&lt;/script&gt;</pre>
&lt;/script&gt;
</pre>
</section>
@@ -1303,7 +1300,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
toggle: false
})</pre>
})
</pre>
<h4>.collapse('toggle')</h4>
<p>Toggles a collapsible element to shown or hidden.</p>
<h4>.collapse('show')</h4>
@@ -1502,9 +1500,7 @@ $('.carousel').carousel({
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div>
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
<pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
<hr class="bs-docs-separator">
@@ -1586,9 +1582,7 @@ $('.carousel').carousel({
<div class="bs-docs-example">
</div>
<pre class="prettyprint linenums">
...
</pre>
<pre class="prettyprint linenums">...</pre>
</section>
@@ -1596,6 +1590,8 @@ $('.carousel').carousel({
</div>
</div>
</div>
</div>

4
docs/scaffolding.html
View File

@@ -78,10 +78,10 @@
</div>
</header>
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
@@ -539,6 +539,8 @@
</div>
</div>
</div>
</div>

8
docs/templates/pages/base-css.mustache vendored
View File

@@ -7,8 +7,10 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -1691,4 +1693,6 @@
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

16
docs/templates/pages/components.mustache vendored
View File

@@ -7,8 +7,9 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -1763,13 +1764,9 @@
<h3>{{_i}}Dismiss buttons{{/i}}</h3>
<p>{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
<p>{{_i}}Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
<h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3>
<p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
@@ -2016,6 +2013,7 @@
...
&lt;/div&gt;
</pre>
<h2>{{_i}}Close icon{{/i}}</h2>
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
<div class="bs-docs-example">
@@ -2087,4 +2085,6 @@ class="clearfix"
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

9
docs/templates/pages/customize.mustache vendored
View File

@@ -3,12 +3,13 @@
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>{{_i}}Customize and download{{/i}}</h1>
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -356,4 +357,6 @@
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

9
docs/templates/pages/getting-started.mustache vendored
View File

@@ -7,9 +7,12 @@
</div>
</header>
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@@ -211,4 +214,6 @@
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

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

@@ -11,6 +11,8 @@
</div>
</div>
<div class="bs-docs-canvas">
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
@@ -84,6 +86,8 @@
</ul>
</div>
</div><!-- /.marketing -->
</div>{{! /.marketing }}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

36
docs/templates/pages/javascript.mustache vendored
View File

@@ -7,8 +7,9 @@
</div>
</header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
@@ -188,9 +189,7 @@
<h3>{{_i}}Via data attributes{{/i}}</h3>
<p>{{_i}}Activate a modal without writing javascript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
<h3>{{_i}}Via javascript{{/i}}</h3>
<p>{{_i}}Call a modal with id <code>myModal</code> with a single line of javascript:{{/i}}</p>
@@ -242,7 +241,8 @@
<pre class="prettyprint linenums">
$('#myModal').modal({
keyboard: false
})</pre>
})
</pre>
<h4>.modal('toggle')</h4>
<p>{{_i}}Manually toggles a modal.{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
@@ -1035,18 +1035,14 @@ $('#my-alert').bind('closed', function () {
{{_i}}Loading state{{/i}}
</button>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
<h4>{{_i}}Single toggle{{/i}}</h4>
<p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
<h4>{{_i}}Checkbox{{/i}}</h4>
<p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p>
@@ -1119,7 +1115,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
$('.btn').button('complete')
&lt;/script&gt;</pre>
&lt;/script&gt;
</pre>
</section>
@@ -1234,7 +1231,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
toggle: false
})</pre>
})
</pre>
<h4>.collapse('toggle')</h4>
<p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p>
<h4>.collapse('show')</h4>
@@ -1433,9 +1431,7 @@ $('.carousel').carousel({
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
<pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
<hr class="bs-docs-separator">
@@ -1517,9 +1513,7 @@ $('.carousel').carousel({
<div class="bs-docs-example">
</div>
<pre class="prettyprint linenums">
...
</pre>
<pre class="prettyprint linenums">...</pre>
</section>
@@ -1527,4 +1521,6 @@ $('.carousel').carousel({
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}

6
docs/templates/pages/scaffolding.mustache vendored
View File

@@ -7,10 +7,10 @@
</div>
</header>
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
@@ -472,4 +472,6 @@
</div>{{! /span9 }}
</div>{{! row}}
</div>{{! /container }}
</div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}