rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

rebuild with new templates

Browse Source
This commit is contained in:
Jacob Thornton 2012-01-23 15:17:32 -08:00
parent 9a68f115e7
commit b4b1ef6839
16 changed files with 2892 additions and 3340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Jan 23 15:07:02 PST 2012 * Date: Mon Jan 23 15:15:08 PST 2012
*/ */
article, article,
aside, aside,

1
docs/assets/js/application.js
View File

@ -24,6 +24,7 @@ $(function(){
// table sort example // table sort example
if ($.fn.tableSorter) { if ($.fn.tableSorter) {
$("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } ) $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
$(".tablesorter-example").tablesorter({ sortList: [[1,0]] })
} }
// add on logic // add on logic

79
docs/base-css.html
View File

@ -34,79 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<<<<<<< HEAD <li class="">
<li class=""><a href="./index.html">Overview</a></li> <a href="./index.html">Overview</a>
<li class="dropdown "> </li>
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> <li class="">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
=======
<li><a href="./index.html">Overview</a></li>
<li>
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
<li class="active"> <li class="active">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
</li> </li>
<<<<<<< HEAD
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li>
<li class=""> <li class="">
<a href="./less.html">
Using LESS
</a>
=======
<li>
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
</li> </li>
<li> <li class="">
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
</li> </li>
<li> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
</ul> </ul>
</div> </div>
@ -115,19 +59,11 @@
<div class="container"> <div class="container">
<<<<<<< HEAD
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Base CSS</h1> <h1>Base CSS</h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
</header>
=======
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Base CSS</h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#tables">Tables</a></li>
@ -135,8 +71,7 @@
<li><a href="./base-css.html#buttons">Buttons</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul> </ul>
</header> </header>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
<!-- Typography <!-- Typography

72
docs/components.html
View File

@ -34,75 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<<<<<<< HEAD <li class="">
<li class=""><a href="./index.html">Overview</a></li> <a href="./index.html">Overview</a>
<li class="dropdown ">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li> </li>
<li class="dropdown "> <li class="">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
=======
<li><a href="./index.html">Overview</a></li>
<li>
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
</li> </li>
<li> <li class="">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
<li class="active"> <li class="active">
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
</li> </li>
<<<<<<< HEAD
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li>
<li class=""> <li class="">
<a href="./less.html">
Using LESS
</a>
=======
<li>
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
</li> </li>
<li> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
</ul> </ul>
</div> </div>
@ -111,14 +59,6 @@
<div class="container"> <div class="container">
<<<<<<< HEAD
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Components</h1>
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
</header>
=======
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
@ -137,7 +77,6 @@
</ul> </ul>
</header> </header>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
<!-- Button Groups <!-- Button Groups
@ -1308,6 +1247,7 @@
</div> </div>
</section> </section>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">

86
docs/index.html
View File

@ -34,89 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li class="active"><a href="./index.html">Overview</a></li> <li class="active">
<<<<<<< HEAD <a href="./index.html">Overview</a>
<li class="dropdown ">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li> </li>
<li class=""> <li class="">
<a href="./less.html">
Using LESS
</a>
=======
<li>
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
</li> </li>
<li> <li class="">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
</li> </li>
<li> <li class="">
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
</li> </li>
<li> <li class="">
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
</li> </li>
<li> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
</ul> </ul>
</div> </div>
@ -125,7 +59,7 @@
<div class="container"> <div class="container">
<div id="overview"> <div id="overview">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
@ -170,7 +104,7 @@
<li><strong>Authors</strong></li> <li><strong>Authors</strong></li>
<li><a href="http://twitter.com/mdo">@mdo</a></li> <li><a href="http://twitter.com/mdo">@mdo</a></li>
<li><a href="http://twitter.com/fat">@fat</a></li> <li><a href="http://twitter.com/fat">@fat</a></li>
--> -->
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li class="follow-btn"> <li class="follow-btn">
@ -299,7 +233,7 @@
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p> <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
<form> <form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea> &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form> </form>
</td> </td>
<td class="quick-start"> <td class="quick-start">
@ -312,7 +246,7 @@
</tbody> </tbody>
</table> </table>
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div><!-- /#overview --> </div><!-- /#overview -->
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">

272
docs/javascript.html
View File

@ -34,72 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<<<<<<< HEAD <li class="">
<li class=""><a href="./index.html">Overview</a></li> <a href="./index.html">Overview</a>
<li class="dropdown ">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li> </li>
<li class="dropdown "> <li class="">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
=======
<li><a href="./index.html">Overview</a></li>
<li>
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
</li> </li>
<li> <li class="">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
</li> </li>
<li> <li class="">
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
<li class="active"> <li class="active">
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
</li> </li>
<<<<<<< HEAD
<li class=""> <li class="">
<a href="./less.html">
Using LESS
</a>
=======
<li>
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
</ul> </ul>
</div> </div>
@ -107,8 +58,7 @@
</div> </div>
<div class="container"> <div class="container">
<<<<<<< HEAD
=======
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
@ -129,14 +79,6 @@
<li><a href="./javascript.html#typeahead">Typeahead</a></li> <li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul> </ul>
</header> </header>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
</header>
<!-- Using Javascript w/ Bootstrap <!-- Using Javascript w/ Bootstrap
@ -242,13 +184,13 @@
<hr> <hr>
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a> <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</section> </section>
<!-- Modal <!-- Modal
================================================== --> ================================================== -->
<section id="modals"> <section id="modals">
<div class="page-header"> <div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1> <h1>Modals <small>bootstrap-modal.js</small></h1>
</div> </div>
@ -341,17 +283,17 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal"&gt; &lt;div class="modal"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;a href="#" class="close js-dismiss"&gt;&times;&lt;/a&gt; &lt;a href="#" class="close js-dismiss"&gt;&times;&lt;/a&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
&lt;p&gt;One fine body…&lt;/p&gt; &lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt; &lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn"&gt;Close&lt;/a&gt; &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
@ -360,7 +302,7 @@
<p>Activates your content as a modal. Accepts an optional options <code>object</code>. <p>Activates your content as a modal. Accepts an optional options <code>object</code>.
<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>
@ -402,17 +344,17 @@ keyboard: false
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myModal').on('hidden', function () { $('#myModal').on('hidden', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Dropdown <!-- Dropdown
================================================== --> ================================================== -->
<section id="dropdowns"> <section id="dropdowns">
<div class="page-header"> <div class="page-header">
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1> <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
</div> </div>
@ -512,21 +454,21 @@ $('#myModal').on('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &lt;ul class="nav pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
Dropdown Dropdown
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu"&gt; &lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
@ -535,13 +477,13 @@ $('#myModal').on('hidden', function () {
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- ScrollSpy <!-- ScrollSpy
================================================== --> ================================================== -->
<section id="scrollspy"> <section id="scrollspy">
<div class="page-header"> <div class="page-header">
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1> <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div> </div>
@ -626,13 +568,13 @@ $('#myModal').on('hidden', function () {
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- Tabs <!-- Tabs
================================================== --> ================================================== -->
<section id="tabs"> <section id="tabs">
<div class="page-header"> <div class="page-header">
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1> <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
</div> </div>
@ -677,10 +619,10 @@ $('#myModal').on('hidden', function () {
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="tabs"&gt; &lt;ul class="tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().tab</h4> <h4>$().tab</h4>
@ -689,23 +631,23 @@ $('#myModal').on('hidden', function () {
</p> </p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="tabs"&gt; &lt;ul class="tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;div class="tab-content"&gt; &lt;div class="tab-content"&gt;
&lt;div class="active" id="home"&gt;...&lt;/div&gt; &lt;div class="active" id="home"&gt;...&lt;/div&gt;
&lt;div id="profile"&gt;...&lt;/div&gt; &lt;div id="profile"&gt;...&lt;/div&gt;
&lt;div id="messages"&gt;...&lt;/div&gt; &lt;div id="messages"&gt;...&lt;/div&gt;
&lt;div id="settings"&gt;...&lt;/div&gt; &lt;div id="settings"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;script&gt; &lt;script&gt;
$(function () { $(function () {
$('.tabs a:last').tab('show') $('.tabs a:last').tab('show')
}) })
&lt;/script&gt;</pre> &lt;/script&gt;</pre>
</p> </p>
<h3>Events</h3> <h3>Events</h3>
@ -730,17 +672,17 @@ $('.tabs a:last').tab('show')
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('a[data-toggle="tab"]').on('shown', function (e) { $('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab e.target // activated tab
e.relatedTarget // previous tab e.relatedTarget // previous tab
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Tooltips <!-- Tooltips
================================================== --> ================================================== -->
<section id="tooltips"> <section id="tooltips">
<div class="page-header"> <div class="page-header">
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1> <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
</div> </div>
@ -828,13 +770,13 @@ e.relatedTarget // previous tab
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre> <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Popovers <!-- Popovers
================================================== --> ================================================== -->
<section id="popovers"> <section id="popovers">
<div class="page-header"> <div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1> <h1>Popovers <small>bootstrap-popover.js</small></h1>
</div> </div>
@ -930,13 +872,13 @@ e.relatedTarget // previous tab
<pre class="prettyprint linenums">$('#element').popover('hide')</pre> <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Alert <!-- Alert
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
<div class="page-header"> <div class="page-header">
<h1>Alert messages <small>bootstrap-alert.js</small></h1> <h1>Alert messages <small>bootstrap-alert.js</small></h1>
</div> </div>
@ -996,17 +938,17 @@ e.relatedTarget // previous tab
</table> </table>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () { $('#my-alert').bind('closed', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Buttons <!-- Buttons
================================================== --> ================================================== -->
<section id="buttons"> <section id="buttons">
<div class="page-header"> <div class="page-header">
<h1>Buttons <small>bootstrap-button.js</small></h1> <h1>Buttons <small>bootstrap-button.js</small></h1>
</div> </div>
@ -1069,16 +1011,16 @@ $('#my-alert').bind('closed', function () {
&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt; &lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt; &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt; &lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt; &lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt; &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt; &lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-radio"&gt; &lt;div class="btn-group" data-toggle="buttons-radio"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt; &lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt; &lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt; &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Methods</h3> <h3>Methods</h3>
@ -1099,17 +1041,17 @@ $('#my-alert').bind('closed', function () {
<p>Resets button state - swaps text to any data defined text state.</p> <p>Resets button state - swaps text to any data defined text state.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt; <pre class="prettyprint linenums">&lt;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>
</div> </div>
</div> </div>
</section> </section>
<!-- Collapse <!-- Collapse
================================================== --> ================================================== -->
<section id="collapse"> <section id="collapse">
<div class="page-header"> <div class="page-header">
<h1>Collapse <small>bootstrap-collapse.js</small></h1> <h1>Collapse <small>bootstrap-collapse.js</small></h1>
</div> </div>
@ -1196,7 +1138,7 @@ $('.btn').button('complete')
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p> <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt; &lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
simple collapsible simple collapsible
&lt;/button&gt; &lt;/button&gt;
&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre> &lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre>
@ -1206,7 +1148,7 @@ simple collapsible
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<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>
@ -1249,17 +1191,17 @@ toggle: false
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () { $('#myCollapsible').on('hidden', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<section id="carousel"> <section id="carousel">
<div class="page-header"> <div class="page-header">
<h1>Carousel <small>bootstrap-carousel.js</small></h1> <h1>Carousel <small>bootstrap-carousel.js</small></h1>
</div> </div>
@ -1326,13 +1268,13 @@ $('#myCollapsible').on('hidden', function () {
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="carousel"&gt; &lt;div class="carousel"&gt;
&lt;!-- Carousel items --&gt; &lt;!-- Carousel items --&gt;
&lt;div class="carousel-inner"&gt; &lt;div class="carousel-inner"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
&lt;!-- Carousel nav --&gt; &lt;!-- Carousel nav --&gt;
&lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
&lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Methods</h3> <h3>Methods</h3>
@ -1340,7 +1282,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('.myCarousel').carousel({ $('.myCarousel').carousel({
interval: 2000 interval: 2000
}) })
</pre> </pre>
<h4>.carousel('cycle')</h4> <h4>.carousel('cycle')</h4>
@ -1376,13 +1318,13 @@ interval: 2000
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- Typeahead <!-- Typeahead
================================================== --> ================================================== -->
<section id="typeahead"> <section id="typeahead">
<div class="page-header"> <div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1> <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
</div> </div>
@ -1429,7 +1371,7 @@ interval: 2000
</pre> </pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">

74
docs/less.html
View File

@ -34,82 +34,20 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<<<<<<< HEAD <li class="">
<li class=""><a href="./index.html">Overview</a></li> <a href="./index.html">Overview</a>
<li class="dropdown ">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li> </li>
<li class="dropdown "> <li class="">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
=======
<li><a href="./index.html">Overview</a></li>
<li>
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
</li> </li>
<li> <li class="">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
</li> </li>
<li> <li class="">
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
</li> </li>
<li> <li class="">
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
<li class="active"> <li class="active">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>

89
docs/scaffolding.html
View File

@ -34,90 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<<<<<<< HEAD
<li class=""><a href="./index.html">Overview</a></li>
<li class="dropdown active">
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li>
<li class=""> <li class="">
<a href="./less.html"> <a href="./index.html">Overview</a>
Using LESS </li>
</a>
=======
<li><a href="./index.html">Overview</a></li>
<li class="active"> <li class="active">
<a href="./scaffolding.html">Scaffolding</a> <a href="./scaffolding.html">Scaffolding</a>
</li> </li>
<li> <li class="">
<a href="./base-css.html">Base CSS</a> <a href="./base-css.html">Base CSS</a>
</li> </li>
<li> <li class="">
<a href="./components.html">Components</a> <a href="./components.html">Components</a>
</li> </li>
<li> <li class="">
<a href="./javascript.html">Javascript plugins</a> <a href="./javascript.html">Javascript plugins</a>
</li> </li>
<li> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
</li> </li>
</ul> </ul>
</div> </div>
@ -126,15 +59,6 @@
<div class="container"> <div class="container">
<<<<<<< HEAD
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
</header>
=======
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
@ -146,7 +70,6 @@
<li><a href="./scaffolding.html#responsive">Responsive design</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul> </ul>
</header> </header>
>>>>>>> a074087034716804610637a5ad9cc0447a2cccb2

75
docs/templates/layout.mustache vendored
View File

@ -34,72 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li class="{{ index }}"><a href="./index.html">Overview</a></li> <li class="{{index}}">
<li class="dropdown {{ scaffolding }}"> <a href="./index.html">Overview</a>
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li> </li>
<li class="dropdown {{ base-css }}"> <li class="{{scaffolding}}">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> <a href="./scaffolding.html">Scaffolding</a>
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li> </li>
<li class="dropdown {{ components }}"> <li class="{{base-css}}">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> <a href="./base-css.html">Base CSS</a>
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li> </li>
<li class="dropdown {{ javascript }}"> <li class="{{components}}">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> <a href="./components.html">Components</a>
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li> </li>
<li class="{{ less }}"> <li class="{{javascript}}">
<a href="./less.html"> <a href="./javascript.html">Javascript plugins</a>
Using LESS </li>
</a> <li class="{{less}}">
<a href="./less.html">Using LESS</a>
</li> </li>
</ul> </ul>
</div> </div>

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

@ -3,6 +3,13 @@
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Base CSS</h1> <h1>Base CSS</h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<ul class="nav pills">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</header> </header>

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

@ -1,9 +1,21 @@
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Components</h1> <h1>Components</h1>
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
</header> <ul class="nav pills">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alerts</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</header>
<!-- Button Groups <!-- Button Groups

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

@ -1,4 +1,4 @@
<div id="overview"> <div id="overview">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
@ -43,7 +43,7 @@
<li><strong>Authors</strong></li> <li><strong>Authors</strong></li>
<li><a href="http://twitter.com/mdo">@mdo</a></li> <li><a href="http://twitter.com/mdo">@mdo</a></li>
<li><a href="http://twitter.com/fat">@fat</a></li> <li><a href="http://twitter.com/fat">@fat</a></li>
--> -->
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li class="follow-btn"> <li class="follow-btn">
@ -172,7 +172,7 @@
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p> <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
<form> <form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea> &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form> </form>
</td> </td>
<td class="quick-start"> <td class="quick-start">
@ -185,4 +185,4 @@
</tbody> </tbody>
</table> </table>
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div><!-- /#overview --> </div><!-- /#overview -->

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

@ -1,9 +1,23 @@
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1> <h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
</header> <ul class="nav pills">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</header>
<!-- Using Javascript w/ Bootstrap <!-- Using Javascript w/ Bootstrap
@ -109,13 +123,13 @@
<hr> <hr>
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a> <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</section> </section>
<!-- Modal <!-- Modal
================================================== --> ================================================== -->
<section id="modals"> <section id="modals">
<div class="page-header"> <div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1> <h1>Modals <small>bootstrap-modal.js</small></h1>
</div> </div>
@ -208,17 +222,17 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal"&gt; &lt;div class="modal"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;a href="#" class="close js-dismiss"&gt;&times;&lt;/a&gt; &lt;a href="#" class="close js-dismiss"&gt;&times;&lt;/a&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-body"&gt; &lt;div class="modal-body"&gt;
&lt;p&gt;One fine body…&lt;/p&gt; &lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt; &lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn"&gt;Close&lt;/a&gt; &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
@ -227,7 +241,7 @@
<p>Activates your content as a modal. Accepts an optional options <code>object</code>. <p>Activates your content as a modal. Accepts an optional options <code>object</code>.
<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>
@ -269,17 +283,17 @@ keyboard: false
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myModal').on('hidden', function () { $('#myModal').on('hidden', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Dropdown <!-- Dropdown
================================================== --> ================================================== -->
<section id="dropdowns"> <section id="dropdowns">
<div class="page-header"> <div class="page-header">
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1> <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
</div> </div>
@ -379,21 +393,21 @@ $('#myModal').on('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &lt;ul class="nav pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
Dropdown Dropdown
&lt;b class="caret"&gt;&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;ul class="dropdown-menu"&gt; &lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
@ -402,13 +416,13 @@ $('#myModal').on('hidden', function () {
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- ScrollSpy <!-- ScrollSpy
================================================== --> ================================================== -->
<section id="scrollspy"> <section id="scrollspy">
<div class="page-header"> <div class="page-header">
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1> <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div> </div>
@ -493,13 +507,13 @@ $('#myModal').on('hidden', function () {
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- Tabs <!-- Tabs
================================================== --> ================================================== -->
<section id="tabs"> <section id="tabs">
<div class="page-header"> <div class="page-header">
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1> <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
</div> </div>
@ -544,10 +558,10 @@ $('#myModal').on('hidden', function () {
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="tabs"&gt; &lt;ul class="tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().tab</h4> <h4>$().tab</h4>
@ -556,23 +570,23 @@ $('#myModal').on('hidden', function () {
</p> </p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="tabs"&gt; &lt;ul class="tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;div class="tab-content"&gt; &lt;div class="tab-content"&gt;
&lt;div class="active" id="home"&gt;...&lt;/div&gt; &lt;div class="active" id="home"&gt;...&lt;/div&gt;
&lt;div id="profile"&gt;...&lt;/div&gt; &lt;div id="profile"&gt;...&lt;/div&gt;
&lt;div id="messages"&gt;...&lt;/div&gt; &lt;div id="messages"&gt;...&lt;/div&gt;
&lt;div id="settings"&gt;...&lt;/div&gt; &lt;div id="settings"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;script&gt; &lt;script&gt;
$(function () { $(function () {
$('.tabs a:last').tab('show') $('.tabs a:last').tab('show')
}) })
&lt;/script&gt;</pre> &lt;/script&gt;</pre>
</p> </p>
<h3>Events</h3> <h3>Events</h3>
@ -597,17 +611,17 @@ $('.tabs a:last').tab('show')
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('a[data-toggle="tab"]').on('shown', function (e) { $('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab e.target // activated tab
e.relatedTarget // previous tab e.relatedTarget // previous tab
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Tooltips <!-- Tooltips
================================================== --> ================================================== -->
<section id="tooltips"> <section id="tooltips">
<div class="page-header"> <div class="page-header">
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1> <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
</div> </div>
@ -695,13 +709,13 @@ e.relatedTarget // previous tab
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre> <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Popovers <!-- Popovers
================================================== --> ================================================== -->
<section id="popovers"> <section id="popovers">
<div class="page-header"> <div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1> <h1>Popovers <small>bootstrap-popover.js</small></h1>
</div> </div>
@ -797,13 +811,13 @@ e.relatedTarget // previous tab
<pre class="prettyprint linenums">$('#element').popover('hide')</pre> <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Alert <!-- Alert
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
<div class="page-header"> <div class="page-header">
<h1>Alert messages <small>bootstrap-alert.js</small></h1> <h1>Alert messages <small>bootstrap-alert.js</small></h1>
</div> </div>
@ -863,17 +877,17 @@ e.relatedTarget // previous tab
</table> </table>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () { $('#my-alert').bind('closed', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Buttons <!-- Buttons
================================================== --> ================================================== -->
<section id="buttons"> <section id="buttons">
<div class="page-header"> <div class="page-header">
<h1>Buttons <small>bootstrap-button.js</small></h1> <h1>Buttons <small>bootstrap-button.js</small></h1>
</div> </div>
@ -936,16 +950,16 @@ $('#my-alert').bind('closed', function () {
&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt; &lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt; &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt; &lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt; &lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt; &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt; &lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
&lt;div class="btn-group" data-toggle="buttons-radio"&gt; &lt;div class="btn-group" data-toggle="buttons-radio"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt; &lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt; &lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt; &lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Methods</h3> <h3>Methods</h3>
@ -966,17 +980,17 @@ $('#my-alert').bind('closed', function () {
<p>Resets button state - swaps text to any data defined text state.</p> <p>Resets button state - swaps text to any data defined text state.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt; <pre class="prettyprint linenums">&lt;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>
</div> </div>
</div> </div>
</section> </section>
<!-- Collapse <!-- Collapse
================================================== --> ================================================== -->
<section id="collapse"> <section id="collapse">
<div class="page-header"> <div class="page-header">
<h1>Collapse <small>bootstrap-collapse.js</small></h1> <h1>Collapse <small>bootstrap-collapse.js</small></h1>
</div> </div>
@ -1063,7 +1077,7 @@ $('.btn').button('complete')
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p> <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt; &lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
simple collapsible simple collapsible
&lt;/button&gt; &lt;/button&gt;
&lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre> &lt;div id="demo" class="collapse in"&gt; … &lt;/div&gt;</pre>
@ -1073,7 +1087,7 @@ simple collapsible
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<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>
@ -1116,17 +1130,17 @@ toggle: false
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () { $('#myCollapsible').on('hidden', function () {
// do something ... // do something ...
})</pre> })</pre>
</div> </div>
</div> </div>
</section> </section>
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<section id="carousel"> <section id="carousel">
<div class="page-header"> <div class="page-header">
<h1>Carousel <small>bootstrap-carousel.js</small></h1> <h1>Carousel <small>bootstrap-carousel.js</small></h1>
</div> </div>
@ -1193,13 +1207,13 @@ $('#myCollapsible').on('hidden', function () {
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="carousel"&gt; &lt;div class="carousel"&gt;
&lt;!-- Carousel items --&gt; &lt;!-- Carousel items --&gt;
&lt;div class="carousel-inner"&gt; &lt;div class="carousel-inner"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
&lt;!-- Carousel nav --&gt; &lt;!-- Carousel nav --&gt;
&lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
&lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Methods</h3> <h3>Methods</h3>
@ -1207,7 +1221,7 @@ $('#myCollapsible').on('hidden', function () {
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('.myCarousel').carousel({ $('.myCarousel').carousel({
interval: 2000 interval: 2000
}) })
</pre> </pre>
<h4>.carousel('cycle')</h4> <h4>.carousel('cycle')</h4>
@ -1243,13 +1257,13 @@ interval: 2000
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- Typeahead <!-- Typeahead
================================================== --> ================================================== -->
<section id="typeahead"> <section id="typeahead">
<div class="page-header"> <div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1> <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
</div> </div>
@ -1296,4 +1310,4 @@ interval: 2000
</pre> </pre>
</div> </div>
</div> </div>
</section> </section>

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

@ -1,10 +1,14 @@
<!-- Masthead
<!-- Masthead ================================================== -->
================================================== --> <header class="jumbotron subhead" id="overview">
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1> <h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
</header> <ul class="nav pills">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</header>

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

@ -1,9 +1,9 @@
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Upgrading to Bootstrap 2</h1> <h1>Upgrading to Bootstrap 2</h1>
<p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p> <p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p>
</header> </header>
<h2>Rough outline</h2> <h2>Rough outline</h2>

87
docs/upgrading.html
View File

@ -34,72 +34,23 @@
<div class="container"> <div class="container">
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li class=""><a href="./index.html">Overview</a></li> <li class="">
<li class="dropdown "> <a href="./index.html">Overview</a>
<a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown">
Scaffolding
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown">
Base CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./base-css.html#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./components.html" class="dropdown-toggle" data-toggle="dropdown">
Components
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./components.html#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
<li><a href="./components.html#progress">Progress bars</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li> </li>
<li class=""> <li class="">
<a href="./less.html"> <a href="./scaffolding.html">Scaffolding</a>
Using LESS </li>
</a> <li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -108,12 +59,12 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Upgrading to Bootstrap 2</h1> <h1>Upgrading to Bootstrap 2</h1>
<p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p> <p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p>
</header> </header>
<h2>Rough outline</h2> <h2>Rough outline</h2>