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
Show 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
...@@ -78,8 +78,10 @@ ...@@ -78,8 +78,10 @@
</div> </div>
</header> </header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -1305,9 +1307,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1305,9 +1307,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt; &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
</pre> </pre>
<h3>Disabled inputs</h3> <h3>Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
...@@ -1754,6 +1756,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1754,6 +1756,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/components.html
View file @ 0dda2c46
...@@ -78,8 +78,9 @@ ...@@ -78,8 +78,9 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -1834,13 +1835,9 @@ ...@@ -1834,13 +1835,9 @@
<h3>Dismiss buttons</h3> <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> <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"> <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
&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> <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"> <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<h3>Dismiss alerts via javascript</h3> <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> <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
...@@ -2087,14 +2084,15 @@ ...@@ -2087,14 +2084,15 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h2>Close icon</h2> <h2>Close icon</h2>
<p>Use the generic close icon for dismissing content like modals and alerts.</p> <p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<p><button class="close" style="float: none;">&times;</button></p> <p><button class="close" style="float: none;">&times;</button></p>
</div> </div>
<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre> <pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
<p>iOS devices require an href="#" for click events if you rather use an anchor.</p> <p>iOS devices require an href="#" for click events if you rather use an anchor.</p>
<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre> <pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<h2>Helper classes</h2> <h2>Helper classes</h2>
<p>Simple, focused classes for small display or behavior tweaks.</p> <p>Simple, focused classes for small display or behavior tweaks.</p>
...@@ -2158,6 +2156,8 @@ class="clearfix" ...@@ -2158,6 +2156,8 @@ class="clearfix"
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/customize.html
View file @ 0dda2c46
...@@ -74,12 +74,13 @@ ...@@ -74,12 +74,13 @@
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<div class="container"> <div class="container">
<h1>Customize and download</h1> <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> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -427,6 +428,8 @@ ...@@ -427,6 +428,8 @@
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/getting-started.html
View file @ 0dda2c46
...@@ -78,9 +78,12 @@ ...@@ -78,9 +78,12 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -282,6 +285,8 @@ ...@@ -282,6 +285,8 @@
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/index.html
View file @ 0dda2c46
...@@ -82,7 +82,9 @@ ...@@ -82,7 +82,9 @@
</div> </div>
</div> </div>
<div class="bs-docs-social"> <div class="bs-docs-canvas">
<div class="bs-docs-social">
<div class="container"> <div class="container">
<ul class="bs-docs-social-buttons"> <ul class="bs-docs-social-buttons">
<li> <li>
...@@ -99,9 +101,9 @@ ...@@ -99,9 +101,9 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="marketing"> <div class="marketing">
...@@ -155,7 +157,9 @@ ...@@ -155,7 +157,9 @@
</ul> </ul>
</div> </div>
</div><!-- /.marketing --> </div>
</div>
</div> </div>
......
docs/javascript.html
View file @ 0dda2c46
...@@ -78,8 +78,9 @@ ...@@ -78,8 +78,9 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -257,9 +258,7 @@ ...@@ -257,9 +258,7 @@
<h3>Via data attributes</h3> <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> <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"> <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
</pre>
<h3>Via javascript</h3> <h3>Via javascript</h3>
<p>Call a modal with id <code>myModal</code> with a single line of javascript:</p> <p>Call a modal with id <code>myModal</code> with a single line of javascript:</p>
...@@ -300,7 +299,7 @@ ...@@ -300,7 +299,7 @@
<td>path</td> <td>path</td>
<td>false</td> <td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p> <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td> <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -311,7 +310,8 @@ ...@@ -311,7 +310,8 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myModal').modal({ $('#myModal').modal({
keyboard: false keyboard: false
})</pre> })
</pre>
<h4>.modal('toggle')</h4> <h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p> <p>Manually toggles a modal.</p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre> <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
...@@ -763,7 +763,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -763,7 +763,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Usage</h2> <h2>Usage</h2>
<p>Trigger the tooltip via javascript:</p> <p>Trigger the tooltip via javascript:</p>
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
...@@ -1104,18 +1104,14 @@ $('#my-alert').bind('closed', function () { ...@@ -1104,18 +1104,14 @@ $('#my-alert').bind('closed', function () {
Loading state Loading state
</button> </button>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
</pre>
<h4>Single toggle</h4> <h4>Single toggle</h4>
<p>Add data-toggle="button" to activate toggling on a single button.</p> <p>Add data-toggle="button" to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button> <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
</pre>
<h4>Checkbox</h4> <h4>Checkbox</h4>
<p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p> <p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
...@@ -1188,7 +1184,8 @@ $('#my-alert').bind('closed', function () { ...@@ -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; <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt; &lt;script&gt;
$('.btn').button('complete') $('.btn').button('complete')
&lt;/script&gt;</pre> &lt;/script&gt;
</pre>
</section> </section>
...@@ -1303,7 +1300,8 @@ $('#my-alert').bind('closed', function () { ...@@ -1303,7 +1300,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myCollapsible').collapse({ $('#myCollapsible').collapse({
toggle: false toggle: false
})</pre> })
</pre>
<h4>.collapse('toggle')</h4> <h4>.collapse('toggle')</h4>
<p>Toggles a collapsible element to shown or hidden.</p> <p>Toggles a collapsible element to shown or hidden.</p>
<h4>.collapse('show')</h4> <h4>.collapse('show')</h4>
...@@ -1502,9 +1500,7 @@ $('.carousel').carousel({ ...@@ -1502,9 +1500,7 @@ $('.carousel').carousel({
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <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"]'> <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> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
...@@ -1586,9 +1582,7 @@ $('.carousel').carousel({ ...@@ -1586,9 +1582,7 @@ $('.carousel').carousel({
<div class="bs-docs-example"> <div class="bs-docs-example">
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">...</pre>
...
</pre>
</section> </section>
...@@ -1596,6 +1590,8 @@ $('.carousel').carousel({ ...@@ -1596,6 +1590,8 @@ $('.carousel').carousel({
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/scaffolding.html
View file @ 0dda2c46
...@@ -78,9 +78,9 @@ ...@@ -78,9 +78,9 @@
</div> </div>
</header> </header>
<div class="bs-docs-canvas">
<div class="container"> <div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -539,6 +539,8 @@ ...@@ -539,6 +539,8 @@
</div> </div>
</div> </div>
</div>
</div> </div>
......
docs/templates/pages/base-css.mustache
View file @ 0dda2c46
...@@ -7,8 +7,10 @@ ...@@ -7,8 +7,10 @@
</div> </div>
</header> </header>
<div class="container">
<div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -1242,9 +1244,9 @@ ...@@ -1242,9 +1244,9 @@
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"> <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt; &lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
</pre> </pre>
<h3>{{_i}}Disabled inputs{{/i}}</h3> <h3>{{_i}}Disabled inputs{{/i}}</h3>
<p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p> <p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
...@@ -1691,4 +1693,6 @@ ...@@ -1691,4 +1693,6 @@
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
docs/templates/pages/components.mustache
View file @ 0dda2c46
...@@ -7,8 +7,9 @@ ...@@ -7,8 +7,9 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -1763,13 +1764,9 @@ ...@@ -1763,13 +1764,9 @@
<h3>{{_i}}Dismiss buttons{{/i}}</h3> <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> <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"> <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
&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> <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"> <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
</pre>
<h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3> <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> <p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
...@@ -2016,14 +2013,15 @@ ...@@ -2016,14 +2013,15 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h2>{{_i}}Close icon{{/i}}</h2> <h2>{{_i}}Close icon{{/i}}</h2>
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p> <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<p><button class="close" style="float: none;">&times;</button></p> <p><button class="close" style="float: none;">&times;</button></p>
</div> </div>
<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre> <pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
<p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p> <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre> <pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<h2>{{_i}}Helper classes{{/i}}</h2> <h2>{{_i}}Helper classes{{/i}}</h2>
<p>{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}</p> <p>{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}</p>
...@@ -2087,4 +2085,6 @@ class="clearfix" ...@@ -2087,4 +2085,6 @@ class="clearfix"
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
docs/templates/pages/customize.mustache
View file @ 0dda2c46
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<div class="container"> <div class="container">
<h1>{{_i}}Customize and download{{/i}}</h1> <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> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -356,4 +357,6 @@ ...@@ -356,4 +357,6 @@
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
docs/templates/pages/getting-started.mustache
View file @ 0dda2c46
...@@ -7,9 +7,12 @@ ...@@ -7,9 +7,12 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -211,4 +214,6 @@ ...@@ -211,4 +214,6 @@
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
docs/templates/pages/index.mustache
View file @ 0dda2c46
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
</div> </div>
</div> </div>
<div class="bs-docs-social"> <div class="bs-docs-canvas">
<div class="bs-docs-social">
<div class="container"> <div class="container">
<ul class="bs-docs-social-buttons"> <ul class="bs-docs-social-buttons">
<li> <li>
...@@ -28,9 +30,9 @@ ...@@ -28,9 +30,9 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="marketing"> <div class="marketing">
...@@ -84,6 +86,8 @@ ...@@ -84,6 +86,8 @@
</ul> </ul>
</div> </div>
</div><!-- /.marketing --> </div>{{! /.marketing }}
</div>{{! /.container }}
</div>{{! /container }} </div>{{! /.bs-docs-canvas }}
docs/templates/pages/javascript.mustache
View file @ 0dda2c46
...@@ -7,8 +7,9 @@ ...@@ -7,8 +7,9 @@
</div> </div>
</header> </header>
<div class="container"> <div class="bs-docs-canvas">
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -188,9 +189,7 @@ ...@@ -188,9 +189,7 @@
<h3>{{_i}}Via data attributes{{/i}}</h3> <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> <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"> <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
</pre>
<h3>{{_i}}Via javascript{{/i}}</h3> <h3>{{_i}}Via javascript{{/i}}</h3>
<p>{{_i}}Call a modal with id <code>myModal</code> with a single line of javascript:{{/i}}</p> <p>{{_i}}Call a modal with id <code>myModal</code> with a single line of javascript:{{/i}}</p>
...@@ -231,7 +230,7 @@ ...@@ -231,7 +230,7 @@
<td>{{_i}}path{{/i}}</td> <td>{{_i}}path{{/i}}</td>
<td>{{_i}}false{{/i}}</td> <td>{{_i}}false{{/i}}</td>
<td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p> <td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td> <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -242,7 +241,8 @@ ...@@ -242,7 +241,8 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myModal').modal({ $('#myModal').modal({
keyboard: false keyboard: false
})</pre> })
</pre>
<h4>.modal('toggle')</h4> <h4>.modal('toggle')</h4>
<p>{{_i}}Manually toggles a modal.{{/i}}</p> <p>{{_i}}Manually toggles a modal.{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre> <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
...@@ -694,7 +694,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -694,7 +694,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>{{_i}}Usage{{/i}}</h2> <h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p> <p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre> <pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
<h3>{{_i}}Options{{/i}}</h3> <h3>{{_i}}Options{{/i}}</h3>
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p> <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
...@@ -1035,18 +1035,14 @@ $('#my-alert').bind('closed', function () { ...@@ -1035,18 +1035,14 @@ $('#my-alert').bind('closed', function () {
{{_i}}Loading state{{/i}} {{_i}}Loading state{{/i}}
</button> </button>
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
&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> <h4>{{_i}}Single toggle{{/i}}</h4>
<p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p> <p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button> <button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
</pre>
<h4>{{_i}}Checkbox{{/i}}</h4> <h4>{{_i}}Checkbox{{/i}}</h4>
<p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p> <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 () { ...@@ -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; <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt; &lt;script&gt;
$('.btn').button('complete') $('.btn').button('complete')
&lt;/script&gt;</pre> &lt;/script&gt;
</pre>
</section> </section>
...@@ -1234,7 +1231,8 @@ $('#my-alert').bind('closed', function () { ...@@ -1234,7 +1231,8 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myCollapsible').collapse({ $('#myCollapsible').collapse({
toggle: false toggle: false
})</pre> })
</pre>
<h4>.collapse('toggle')</h4> <h4>.collapse('toggle')</h4>
<p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p> <p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p>
<h4>.collapse('show')</h4> <h4>.collapse('show')</h4>
...@@ -1433,9 +1431,7 @@ $('.carousel').carousel({ ...@@ -1433,9 +1431,7 @@ $('.carousel').carousel({
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <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"]'> <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 }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
&lt;input type="text" data-provide="typeahead"&gt;
</pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
...@@ -1517,9 +1513,7 @@ $('.carousel').carousel({ ...@@ -1517,9 +1513,7 @@ $('.carousel').carousel({
<div class="bs-docs-example"> <div class="bs-docs-example">
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">...</pre>
...
</pre>
</section> </section>
...@@ -1527,4 +1521,6 @@ $('.carousel').carousel({ ...@@ -1527,4 +1521,6 @@ $('.carousel').carousel({
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
docs/templates/pages/scaffolding.mustache
View file @ 0dda2c46
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
</div> </div>
</header> </header>
<div class="bs-docs-canvas">
<div class="container"> <div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
...@@ -472,4 +472,6 @@ ...@@ -472,4 +472,6 @@
</div>{{! /span9 }} </div>{{! /span9 }}
</div>{{! row}} </div>{{! row}}
</div>{{! /container }} </div>{{! /.container }}
</div>{{! /.bs-docs-canvas }}
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