Skip to content

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

more changes to js and components, playing with new docs subnav

parent 47e2c434
Show whitespace changes
Inline Side-by-side
Showing with 1079 additions and 1187 deletions
docs/assets/css/docs.css
View file @ de53f62a
...@@ -11,12 +11,18 @@ ...@@ -11,12 +11,18 @@
body { body {
position: relative; position: relative;
padding-top: 90px; padding-top: 90px;
font-size: 14px;
background-color: #fff; background-color: #fff;
background-image: url(../img/grid-18px-masked.png); background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: 0 40px; background-position: 0 40px;
} }
body,
li {
line-height: 20px;
}
.bs-docs-container { .bs-docs-container {
max-width: 780px; max-width: 780px;
margin: 0 auto; margin: 0 auto;
...@@ -24,6 +30,9 @@ body { ...@@ -24,6 +30,9 @@ body {
/* Tweak navbar brand link to be super sleek /* Tweak navbar brand link to be super sleek
-------------------------------------------------- */ -------------------------------------------------- */
.navbar {
font-size: 13px;
}
.navbar-fixed-top .brand { .navbar-fixed-top .brand {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
...@@ -603,7 +612,6 @@ form.well { ...@@ -603,7 +612,6 @@ form.well {
.bs-docs-example > p { .bs-docs-example > p {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.bs-docs-example p:last-child { .bs-docs-example p:last-child {
margin-bottom: 0; margin-bottom: 0;
......
docs/components.html
View file @ de53f62a
...@@ -908,13 +908,12 @@ ...@@ -908,13 +908,12 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a class="brand" href="#">Project name</a> <a class="brand" href="#">Title</a>
<div class="nav-collapse"> <div class="nav-collapse">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -950,8 +949,7 @@ ...@@ -950,8 +949,7 @@
</div><!-- /navbar-inner --> </div><!-- /navbar-inner -->
</div><!-- /navbar --> </div><!-- /navbar -->
<div class="row">
<div class="span8">
<h3>Navbar scaffolding</h3> <h3>Navbar scaffolding</h3>
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p> <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -965,22 +963,17 @@ ...@@ -965,22 +963,17 @@
</pre> </pre>
<h3>Fixed navbar</h3> <h3>Fixed navbar</h3>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p> <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<div class="row">
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar navbar-fixed-top"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div><!--/span-->
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-bottom"&gt; &lt;div class="navbar navbar-fixed-bottom"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div><!--/span-->
</div><!--/row-->
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p> <p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3> <h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p> <p>A simple link to show your brand or project name only requires an anchor tag.</p>
...@@ -1032,8 +1025,6 @@ ...@@ -1032,8 +1025,6 @@
<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div> </div>
</div><!-- /.span -->
<div class="span4">
<h3>Nav links</h3> <h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p> <p>Nav items are simple to add via unordered lists.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1076,8 +1067,6 @@ ...@@ -1076,8 +1067,6 @@
<hr> <hr>
<h3>Text in the navbar</h3> <h3>Text in the navbar</h3>
<p>Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section> </section>
...@@ -1090,8 +1079,6 @@ ...@@ -1090,8 +1079,6 @@
<h1>Breadcrumbs <small></small></h1> <h1>Breadcrumbs <small></small></h1>
</div> </div>
<div class="row">
<div class="span6">
<h3>Why use them</h3> <h3>Why use them</h3>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p> <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
...@@ -1109,8 +1096,7 @@ ...@@ -1109,8 +1096,7 @@
<li><a href="#">Library</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li> <li class="active">Data</li>
</ul> </ul>
</div>
<div class="span6">
<h3>Markup</h3> <h3>Markup</h3>
<p>HTML is your standard unordered list with links.</p> <p>HTML is your standard unordered list with links.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1124,8 +1110,6 @@ ...@@ -1124,8 +1110,6 @@
&lt;li class="active"&gt;Data&lt;/li&gt; &lt;li class="active"&gt;Data&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
</div>
</section> </section>
...@@ -1139,16 +1123,14 @@ ...@@ -1139,16 +1123,14 @@
</div> </div>
<h2>Multicon-page pagination</h2> <h2>Multicon-page pagination</h2>
<div class="row">
<div class="span4">
<h3>When to use</h3> <h3>When to use</h3>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> <p>Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<h3>Stateful page links</h3> <h3>Stateful page links</h3>
<p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p> <p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p>
<h3>Flexible alignment</h3> <h3>Flexible alignment</h3>
<p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p> <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
</div>
<div class="span4">
<h3>Examples</h3> <h3>Examples</h3>
<p>The default pagination component is flexible and works in a number of variations.</p> <p>The default pagination component is flexible and works in a number of variations.</p>
<div class="pagination"> <div class="pagination">
...@@ -1188,8 +1170,7 @@ ...@@ -1188,8 +1170,7 @@
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
</ul> </ul>
</div> </div>
</div>
<div class="span4">
<h3>Markup</h3> <h3>Markup</h3>
<p>Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.</p> <p>Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1206,18 +1187,14 @@ ...@@ -1206,18 +1187,14 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div><!-- /row -->
<h2>Pager <small>For quick previous and next links</small></h2> <h2>Pager <small>For quick previous and next links</small></h2>
<div class="row">
<div class="span4">
<h3>About pager</h3> <h3>About pager</h3>
<p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p> <p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<h4>Optional disabled state</h4> <h4>Optional disabled state</h4>
<p>Pager links also use the general <code>.disabled</code> class from the pagination.</p> <p>Pager links also use the general <code>.disabled</code> class from the pagination.</p>
</div>
<div class="span4">
<h3>Default example</h3> <h3>Default example</h3>
<p>By default, the pager centers links.</p> <p>By default, the pager centers links.</p>
<ul class="pager"> <ul class="pager">
...@@ -1234,8 +1211,7 @@ ...@@ -1234,8 +1211,7 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>Aligned links</h3> <h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p> <p>Alternatively, you can align each link to the sides:</p>
<ul class="pager"> <ul class="pager">
...@@ -1252,8 +1228,7 @@ ...@@ -1252,8 +1228,7 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
</div><!-- /row -->
</section> </section>
...@@ -1332,12 +1307,10 @@ ...@@ -1332,12 +1307,10 @@
<div class="page-header"> <div class="page-header">
<h1>Badges <small>Indicators and unread counts</small></h1> <h1>Badges <small>Indicators and unread counts</small></h1>
</div> </div>
<div class="row">
<div class="span4">
<h3>About</h3> <h3>About</h3>
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p> <p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
</div><!-- /.span -->
<div class="span8">
<h3>Available classes</h3> <h3>Available classes</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
...@@ -1416,8 +1389,7 @@ ...@@ -1416,8 +1389,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.span -->
</div><!-- /.row -->
</section> </section>
...@@ -1429,8 +1401,7 @@ ...@@ -1429,8 +1401,7 @@
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1> <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div> </div>
<h2>Hero unit</h2> <h2>Hero unit</h2>
<div class="row">
<div class="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p> <p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3> <h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p> <p>Wrap your content in a <code>div</code> like so:</p>
...@@ -1445,31 +1416,29 @@ ...@@ -1445,31 +1416,29 @@
&lt;/p&gt; &lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span8"> <div class="bs-docs-example">
<div class="hero-unit"> <div class="hero-unit">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p> <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div> </div>
</div> </div>
</div><!-- /row -->
<h2>Page header</h2> <h2>Page header</h2>
<div class="row">
<div class="span4">
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p> <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div> <div class="bs-docs-example">
<div class="span8">
<div class="page-header"> <div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1> <h1>Example page header <small>Subtext for header</small></h1>
</div> </div>
</div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="page-header"&gt; &lt;div class="page-header"&gt;
&lt;h1&gt;Example page header&lt;/h1&gt; &lt;h1&gt;Example page header&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div><!-- /row -->
</section> </section>
...@@ -1481,8 +1450,6 @@ ...@@ -1481,8 +1450,6 @@
<h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
</div> </div>
<div class="row">
<div class="span6">
<h2>Default thumbnails</h2> <h2>Default thumbnails</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1507,8 +1474,7 @@ ...@@ -1507,8 +1474,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<div class="span6">
<h2>Highly customizable</h2> <h2>Highly customizable</h2>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1533,26 +1499,16 @@ ...@@ -1533,26 +1499,16 @@
</div> </div>
</li> </li>
</ul> </ul>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Why use thumbnails</h3> <h3>Why use thumbnails</h3>
<p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p> <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
</div>
<div class="span4">
<h3>Simple, flexible markup</h3> <h3>Simple, flexible markup</h3>
<p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> <p>Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
</div>
<div class="span4">
<h3>Uses grid column sizes</h3> <h3>Uses grid column sizes</h3>
<p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p> <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
</div>
</div>
<div class="row">
<div class="span6">
<h2>The markup</h2> <h2>The markup</h2>
<p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p> <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1578,8 +1534,7 @@ ...@@ -1578,8 +1534,7 @@
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
<div class="span6">
<h2>More examples</h2> <h2>More examples</h2>
<p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1614,8 +1569,6 @@ ...@@ -1614,8 +1569,6 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
</div>
</section> </section>
...@@ -1629,8 +1582,7 @@ ...@@ -1629,8 +1582,7 @@
</div> </div>
<h2>Lightweight defaults</h2> <h2>Lightweight defaults</h2>
<div class="row">
<div class="span4">
<h3>Rewritten base class</h3> <h3>Rewritten base class</h3>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.</p> <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.</p>
<h3>Single alert message</h3> <h3>Single alert message</h3>
...@@ -1639,8 +1591,7 @@ ...@@ -1639,8 +1591,7 @@
<h3>Goes great with javascript</h3> <h3>Goes great with javascript</h3>
<p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p> <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the plugin &raquo;</a></p> <p><a class="btn js-btn" href="./javascript.html#alerts">Get the plugin &raquo;</a></p>
</div>
<div class="span8">
<h3>Example alerts</h3> <h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p> <p>Wrap your message and an optional close icon in a div with simple class.</p>
<div class="alert"> <div class="alert">
...@@ -1667,12 +1618,9 @@ ...@@ -1667,12 +1618,9 @@
Best check yo self, you're not... Best check yo self, you're not...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2> <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2>
<div class="row">
<div class="span4">
<h3>Error or danger</h3> <h3>Error or danger</h3>
<div class="alert alert-error"> <div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1683,8 +1631,7 @@ ...@@ -1683,8 +1631,7 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>Success</h3> <h3>Success</h3>
<div class="alert alert-success"> <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1695,8 +1642,7 @@ ...@@ -1695,8 +1642,7 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>Information</h3> <h3>Information</h3>
<div class="alert alert-info"> <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1707,8 +1653,6 @@ ...@@ -1707,8 +1653,6 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
</section> </section>
...@@ -1722,8 +1666,7 @@ ...@@ -1722,8 +1666,7 @@
</div> </div>
<h2>Examples and markup</h2> <h2>Examples and markup</h2>
<div class="row">
<div class="span4">
<h3>Basic</h3> <h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="progress"> <div class="progress">
...@@ -1735,8 +1678,7 @@ ...@@ -1735,8 +1678,7 @@
style="width: 60%;"&gt;&lt;/div&gt; style="width: 60%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>Striped</h3> <h3>Striped</h3>
<p>Uses a gradient to create a striped effect (no IE).</p> <p>Uses a gradient to create a striped effect (no IE).</p>
<div class="progress progress-striped"> <div class="progress progress-striped">
...@@ -1748,8 +1690,7 @@ ...@@ -1748,8 +1690,7 @@
style="width: 20%;"&gt;&lt;/div&gt; style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>Animated</h3> <h3>Animated</h3>
<p>Takes the striped example and animates it (no IE).</p> <p>Takes the striped example and animates it (no IE).</p>
<div class="progress progress-striped active"> <div class="progress progress-striped active">
...@@ -1762,12 +1703,9 @@ ...@@ -1762,12 +1703,9 @@
style="width: 40%;"&gt;&lt;/div&gt; style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h2>Options and browser support</h2> <h2>Options and browser support</h2>
<div class="row">
<div class="span3">
<h3>Additional colors</h3> <h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="progress progress-info" style="margin-bottom: 9px;"> <div class="progress progress-info" style="margin-bottom: 9px;">
...@@ -1782,8 +1720,7 @@ ...@@ -1782,8 +1720,7 @@
<div class="progress progress-danger" style="margin-bottom: 9px;"> <div class="progress progress-danger" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div> <div class="bar" style="width: 80%"></div>
</div> </div>
</div>
<div class="span3">
<h3>Striped bars</h3> <h3>Striped bars</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p> <p>Similar to the solid colors, we have varied striped progress bars.</p>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
...@@ -1798,18 +1735,14 @@ ...@@ -1798,18 +1735,14 @@
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div> <div class="bar" style="width: 80%"></div>
</div> </div>
</div>
<div class="span3">
<h3>Behavior</h3> <h3>Behavior</h3>
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p> <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
<p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p> <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
</div>
<div class="span3">
<h3>Browser support</h3> <h3>Browser support</h3>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p> <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
<p>Opera and IE do not support animations at this time.</p> <p>Opera and IE do not support animations at this time.</p>
</div>
</div>
</section> </section>
...@@ -1823,8 +1756,7 @@ ...@@ -1823,8 +1756,7 @@
<div class="page-header"> <div class="page-header">
<h1>Miscellaneous <small>Lightweight utility components</small></h1> <h1>Miscellaneous <small>Lightweight utility components</small></h1>
</div> </div>
<div class="row">
<div class="span8">
<h2>Wells</h2> <h2>Wells</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p> <p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="well"> <div class="well">
...@@ -1868,7 +1800,6 @@ class="pull-left" ...@@ -1868,7 +1800,6 @@ class="pull-left"
} }
</pre> </pre>
<h4>.pull-right</h4> <h4>.pull-right</h4>
<p>Float an element right</p> <p>Float an element right</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1910,8 +1841,6 @@ class="clearfix" ...@@ -1910,8 +1841,6 @@ class="clearfix"
} }
</pre> </pre>
</div><!--/span-->
</div><!--/row-->
</section> </section>
......
docs/javascript.html
View file @ de53f62a
...@@ -76,9 +76,9 @@ ...@@ -76,9 +76,9 @@
<div class="bs-docs-container"> <div class="bs-docs-container">
<!-- 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.
<div class="subnav"> <div class="subnav">
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
<li><a href="#typeahead">Typeahead</a></li> <li><a href="#typeahead">Typeahead</a></li>
</ul> </ul>
</div> </div>
</header> </header>
<!-- Using Javascript w/ Bootstrap <!-- Using Javascript w/ Bootstrap
...@@ -107,63 +107,63 @@ ...@@ -107,63 +107,63 @@
<h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1> <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#modals">Modals</a></h3> <h3><a href="./javascript.html#modals">Modals</a></h3>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3> <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3> <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#tabs">Togglable tabs</a></h3> <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3> <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p> <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3> <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p> <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#alerts">Alert messages</a></h3> <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p> <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#buttons">Buttons</a></h3> <h3><a href="./javascript.html#buttons">Buttons</a></h3>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;"> <div class="row" style="margin-bottom: 9px;">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#collapse">Collapse</a></h3> <h3><a href="./javascript.html#collapse">Collapse</a></h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#carousel">Carousel</a></h3> <h3><a href="./javascript.html#carousel">Carousel</a></h3>
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3> <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3>Transitions <small class="muted">*</small></h3> <h3>Transitions <small class="muted">*</small></h3>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p> <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
<p class="muted"><strong>*</strong> Required for animation in plugins</p> <p class="muted"><strong>*</strong> Required for animation in plugins</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="alert alert-info"><strong>Heads up!</strong> If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</div> <div class="alert alert-info"><strong>Heads up!</strong> If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</div>
</section> </section>
......
docs/scaffolding.html
View file @ de53f62a
...@@ -81,7 +81,20 @@ ...@@ -81,7 +81,20 @@
<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>
<div class="subnav">
<div class="bs-docs-contents">
<h4>Contents</h4>
<ul>
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
<!-- <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#global">Global styles</a></li> <li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li> <li><a href="#gridSystem">Grid system</a></li>
...@@ -91,7 +104,7 @@ ...@@ -91,7 +104,7 @@
<li><a href="#responsive">Responsive design</a></li> <li><a href="#responsive">Responsive design</a></li>
</ul> </ul>
</div> </div>
</header> --></header>
......
docs/templates/pages/components.mustache
View file @ de53f62a
...@@ -830,13 +830,12 @@ ...@@ -830,13 +830,12 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a class="brand" href="#">{{_i}}Project name{{/i}}</a> <a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse"> <div class="nav-collapse">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -872,8 +871,7 @@ ...@@ -872,8 +871,7 @@
</div><!-- /navbar-inner --> </div><!-- /navbar-inner -->
</div><!-- /navbar --> </div><!-- /navbar -->
<div class="row">
<div class="span8">
<h3>{{_i}}Navbar scaffolding{{/i}}</h3> <h3>{{_i}}Navbar scaffolding{{/i}}</h3>
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p> <p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -887,22 +885,17 @@ ...@@ -887,22 +885,17 @@
</pre> </pre>
<h3>{{_i}}Fixed navbar{{/i}}</h3> <h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p> <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
<div class="row">
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar navbar-fixed-top"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div><!--/span-->
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-bottom"&gt; &lt;div class="navbar navbar-fixed-bottom"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div><!--/span-->
</div><!--/row-->
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p> <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3> <h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p> <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
...@@ -954,8 +947,6 @@ ...@@ -954,8 +947,6 @@
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div> </div>
</div><!-- /.span -->
<div class="span4">
<h3>{{_i}}Nav links{{/i}}</h3> <h3>{{_i}}Nav links{{/i}}</h3>
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p> <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -998,8 +989,6 @@ ...@@ -998,8 +989,6 @@
<hr> <hr>
<h3>{{_i}}Text in the navbar{{/i}}</h3> <h3>{{_i}}Text in the navbar{{/i}}</h3>
<p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p> <p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section> </section>
...@@ -1012,8 +1001,6 @@ ...@@ -1012,8 +1001,6 @@
<h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1> <h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
</div> </div>
<div class="row">
<div class="span6">
<h3>{{_i}}Why use them{{/i}}</h3> <h3>{{_i}}Why use them{{/i}}</h3>
<p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p> <p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p>
...@@ -1031,8 +1018,7 @@ ...@@ -1031,8 +1018,7 @@
<li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li> <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
<li class="active">{{_i}}Data{{/i}}</li> <li class="active">{{_i}}Data{{/i}}</li>
</ul> </ul>
</div>
<div class="span6">
<h3>{{_i}}Markup{{/i}}</h3> <h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}HTML is your standard unordered list with links.{{/i}}</p> <p>{{_i}}HTML is your standard unordered list with links.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1046,8 +1032,6 @@ ...@@ -1046,8 +1032,6 @@
&lt;li class="active"&gt;{{_i}}Data{{/i}}&lt;/li&gt; &lt;li class="active"&gt;{{_i}}Data{{/i}}&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
</div>
</section> </section>
...@@ -1061,16 +1045,14 @@ ...@@ -1061,16 +1045,14 @@
</div> </div>
<h2>{{_i}}Multicon-page pagination{{/i}}</h2> <h2>{{_i}}Multicon-page pagination{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}When to use{{/i}}</h3> <h3>{{_i}}When to use{{/i}}</h3>
<p>{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p> <p>{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p>
<h3>{{_i}}Stateful page links{{/i}}</h3> <h3>{{_i}}Stateful page links{{/i}}</h3>
<p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p> <p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
<h3>{{_i}}Flexible alignment{{/i}}</h3> <h3>{{_i}}Flexible alignment{{/i}}</h3>
<p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p> <p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Examples{{/i}}</h3> <h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p> <p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
<div class="pagination"> <div class="pagination">
...@@ -1110,8 +1092,7 @@ ...@@ -1110,8 +1092,7 @@
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
</ul> </ul>
</div> </div>
</div>
<div class="span4">
<h3>{{_i}}Markup{{/i}}</h3> <h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.{{/i}}</p> <p>{{_i}}Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1128,18 +1109,14 @@ ...@@ -1128,18 +1109,14 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Pager{{/i}} <small>{{_i}}For quick previous and next links{{/i}}</small></h2> <h2>{{_i}}Pager{{/i}} <small>{{_i}}For quick previous and next links{{/i}}</small></h2>
<div class="row">
<div class="span4">
<h3>{{_i}}About pager{{/i}}</h3> <h3>{{_i}}About pager{{/i}}</h3>
<p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p> <p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h4>{{_i}}Optional disabled state{{/i}}</h4> <h4>{{_i}}Optional disabled state{{/i}}</h4>
<p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p> <p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Default example{{/i}}</h3> <h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}By default, the pager centers links.{{/i}}</p> <p>{{_i}}By default, the pager centers links.{{/i}}</p>
<ul class="pager"> <ul class="pager">
...@@ -1156,8 +1133,7 @@ ...@@ -1156,8 +1133,7 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>{{_i}}Aligned links{{/i}}</h3> <h3>{{_i}}Aligned links{{/i}}</h3>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p> <p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
<ul class="pager"> <ul class="pager">
...@@ -1174,8 +1150,7 @@ ...@@ -1174,8 +1150,7 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
</div><!-- /row -->
</section> </section>
...@@ -1254,12 +1229,10 @@ ...@@ -1254,12 +1229,10 @@
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1> <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div> </div>
<div class="row">
<div class="span4">
<h3>About</h3> <h3>About</h3>
<p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p> <p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
</div><!-- /.span -->
<div class="span8">
<h3>Available classes</h3> <h3>Available classes</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
...@@ -1338,8 +1311,7 @@ ...@@ -1338,8 +1311,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.span -->
</div><!-- /.row -->
</section> </section>
...@@ -1351,8 +1323,7 @@ ...@@ -1351,8 +1323,7 @@
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1> <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div> </div>
<h2>{{_i}}Hero unit{{/i}}</h2> <h2>{{_i}}Hero unit{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p> <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3> <h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p> <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
...@@ -1367,31 +1338,29 @@ ...@@ -1367,31 +1338,29 @@
&lt;/p&gt; &lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span8"> <div class="bs-docs-example">
<div class="hero-unit"> <div class="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1> <h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p> <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p> <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
</div> </div>
</div> </div>
</div><!-- /row -->
<h2>{{_i}}Page header{{/i}}</h2> <h2>{{_i}}Page header{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p> <p>{{_i}}A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div> <div class="bs-docs-example">
<div class="span8">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1> <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
</div> </div>
</div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="page-header"&gt; &lt;div class="page-header"&gt;
&lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt; &lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div><!-- /row -->
</section> </section>
...@@ -1403,8 +1372,6 @@ ...@@ -1403,8 +1372,6 @@
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1> <h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
</div> </div>
<div class="row">
<div class="span6">
<h2>{{_i}}Default thumbnails{{/i}}</h2> <h2>{{_i}}Default thumbnails{{/i}}</h2>
<p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p> <p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1429,8 +1396,7 @@ ...@@ -1429,8 +1396,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<div class="span6">
<h2>{{_i}}Highly customizable{{/i}}</h2> <h2>{{_i}}Highly customizable{{/i}}</h2>
<p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p> <p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1455,26 +1421,16 @@ ...@@ -1455,26 +1421,16 @@
</div> </div>
</li> </li>
</ul> </ul>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Why use thumbnails{{/i}}</h3> <h3>{{_i}}Why use thumbnails{{/i}}</h3>
<p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p> <p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Simple, flexible markup{{/i}}</h3> <h3>{{_i}}Simple, flexible markup{{/i}}</h3>
<p>{{_i}}Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}</p> <p>{{_i}}Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Uses grid column sizes{{/i}}</h3> <h3>{{_i}}Uses grid column sizes{{/i}}</h3>
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.{{/i}}</p> <p>{{_i}}Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span6">
<h2>{{_i}}The markup{{/i}}</h2> <h2>{{_i}}The markup{{/i}}</h2>
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p> <p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1500,8 +1456,7 @@ ...@@ -1500,8 +1456,7 @@
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</div>
<div class="span6">
<h2>{{_i}}More examples{{/i}}</h2> <h2>{{_i}}More examples{{/i}}</h2>
<p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p> <p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p>
<ul class="thumbnails"> <ul class="thumbnails">
...@@ -1536,8 +1491,6 @@ ...@@ -1536,8 +1491,6 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
</div>
</section> </section>
...@@ -1551,8 +1504,7 @@ ...@@ -1551,8 +1504,7 @@
</div> </div>
<h2>{{_i}}Lightweight defaults{{/i}}</h2> <h2>{{_i}}Lightweight defaults{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Rewritten base class{{/i}}</h3> <h3>{{_i}}Rewritten base class{{/i}}</h3>
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.{{/i}}</p> <p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.{{/i}}</p>
<h3>{{_i}}Single alert message{{/i}}</h3> <h3>{{_i}}Single alert message{{/i}}</h3>
...@@ -1561,8 +1513,7 @@ ...@@ -1561,8 +1513,7 @@
<h3>{{_i}}Goes great with javascript{{/i}}</h3> <h3>{{_i}}Goes great with javascript{{/i}}</h3>
<p>{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}</p> <p>{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">{{_i}}Get the plugin &raquo;</a>{{/i}}</p> <p><a class="btn js-btn" href="./javascript.html#alerts">{{_i}}Get the plugin &raquo;</a>{{/i}}</p>
</div>
<div class="span8">
<h3>{{_i}}Example alerts{{/i}}</h3> <h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p> <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<div class="alert"> <div class="alert">
...@@ -1589,12 +1540,9 @@ ...@@ -1589,12 +1540,9 @@
{{_i}}Best check yo self, you're not...{{/i}} {{_i}}Best check yo self, you're not...{{/i}}
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h2>{{_i}}Contextual alternatives{{/i}} <small>{{_i}}Add optional classes to change an alert's connotation{{/i}}</small></h2> <h2>{{_i}}Contextual alternatives{{/i}} <small>{{_i}}Add optional classes to change an alert's connotation{{/i}}</small></h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Error or danger{{/i}}</h3> <h3>{{_i}}Error or danger{{/i}}</h3>
<div class="alert alert-error"> <div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1605,8 +1553,7 @@ ...@@ -1605,8 +1553,7 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>{{_i}}Success{{/i}}</h3> <h3>{{_i}}Success{{/i}}</h3>
<div class="alert alert-success"> <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1617,8 +1564,7 @@ ...@@ -1617,8 +1564,7 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>{{_i}}Information{{/i}}</h3> <h3>{{_i}}Information{{/i}}</h3>
<div class="alert alert-info"> <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1629,8 +1575,6 @@ ...@@ -1629,8 +1575,6 @@
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
</section> </section>
...@@ -1644,8 +1588,7 @@ ...@@ -1644,8 +1588,7 @@
</div> </div>
<h2>{{_i}}Examples and markup{{/i}}</h2> <h2>{{_i}}Examples and markup{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Basic{{/i}}</h3> <h3>{{_i}}Basic{{/i}}</h3>
<p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p> <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
<div class="progress"> <div class="progress">
...@@ -1657,8 +1600,7 @@ ...@@ -1657,8 +1600,7 @@
style="width: 60%;"&gt;&lt;/div&gt; style="width: 60%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>{{_i}}Striped{{/i}}</h3> <h3>{{_i}}Striped{{/i}}</h3>
<p>{{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}</p> <p>{{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}</p>
<div class="progress progress-striped"> <div class="progress progress-striped">
...@@ -1670,8 +1612,7 @@ ...@@ -1670,8 +1612,7 @@
style="width: 20%;"&gt;&lt;/div&gt; style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
<div class="span4">
<h3>{{_i}}Animated{{/i}}</h3> <h3>{{_i}}Animated{{/i}}</h3>
<p>{{_i}}Takes the striped example and animates it (no IE).{{/i}}</p> <p>{{_i}}Takes the striped example and animates it (no IE).{{/i}}</p>
<div class="progress progress-striped active"> <div class="progress progress-striped active">
...@@ -1684,12 +1625,9 @@ ...@@ -1684,12 +1625,9 @@
style="width: 40%;"&gt;&lt;/div&gt; style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h2>{{_i}}Options and browser support{{/i}}</h2> <h2>{{_i}}Options and browser support{{/i}}</h2>
<div class="row">
<div class="span3">
<h3>{{_i}}Additional colors{{/i}}</h3> <h3>{{_i}}Additional colors{{/i}}</h3>
<p>{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}</p> <p>{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}</p>
<div class="progress progress-info" style="margin-bottom: 9px;"> <div class="progress progress-info" style="margin-bottom: 9px;">
...@@ -1704,8 +1642,7 @@ ...@@ -1704,8 +1642,7 @@
<div class="progress progress-danger" style="margin-bottom: 9px;"> <div class="progress progress-danger" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div> <div class="bar" style="width: 80%"></div>
</div> </div>
</div>
<div class="span3">
<h3>{{_i}}Striped bars{{/i}}</h3> <h3>{{_i}}Striped bars{{/i}}</h3>
<p>{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}</p> <p>{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}</p>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
...@@ -1720,18 +1657,14 @@ ...@@ -1720,18 +1657,14 @@
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div> <div class="bar" style="width: 80%"></div>
</div> </div>
</div>
<div class="span3">
<h3>{{_i}}Behavior{{/i}}</h3> <h3>{{_i}}Behavior{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p> <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p> <p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
</div>
<div class="span3">
<h3>{{_i}}Browser support{{/i}}</h3> <h3>{{_i}}Browser support{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p> <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p> <p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
</div>
</div>
</section> </section>
...@@ -1745,8 +1678,7 @@ ...@@ -1745,8 +1678,7 @@
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1> <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1>
</div> </div>
<div class="row">
<div class="span8">
<h2>{{_i}}Wells{{/i}}</h2> <h2>{{_i}}Wells{{/i}}</h2>
<p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p> <p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
<div class="well"> <div class="well">
...@@ -1790,7 +1722,6 @@ class="pull-left" ...@@ -1790,7 +1722,6 @@ class="pull-left"
} }
</pre> </pre>
<h4>{{_i}}.pull-right{{/i}}</h4> <h4>{{_i}}.pull-right{{/i}}</h4>
<p>{{_i}}Float an element right{{/i}}</p> <p>{{_i}}Float an element right{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -1832,6 +1763,4 @@ class="clearfix" ...@@ -1832,6 +1763,4 @@ class="clearfix"
} }
</pre> </pre>
</div><!--/span-->
</div><!--/row-->
</section> </section>
docs/templates/pages/javascript.mustache
View file @ de53f62a
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1> <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}} <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="subnav"> <div class="subnav">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li> <li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
<!-- Using Javascript w/ Bootstrap <!-- Using Javascript w/ Bootstrap
...@@ -29,63 +29,63 @@ ...@@ -29,63 +29,63 @@
<h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1> <h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3> <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p> <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3> <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p> <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3> <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
<p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p> <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3> <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
<p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p> <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="row"> <div class="row">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3> <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p> <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3> <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p> <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p> <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3> <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p> <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3> <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p> <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;"> <div class="row" style="margin-bottom: 9px;">
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3> <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p> <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3> <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
<p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p> <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3> <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p> <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
</div> </div>
<div class="span3"> <div class="span4">
<h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3> <h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p> <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p> <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
<div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_i}} If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</div> <div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_i}} If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</div>
</section> </section>
......
docs/templates/pages/scaffolding.mustache
View file @ de53f62a
...@@ -3,7 +3,20 @@ ...@@ -3,7 +3,20 @@
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Scaffolding{{/i}}</h1> <h1>{{_i}}Scaffolding{{/i}}</h1>
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav">
<div class="bs-docs-contents">
<h4>Contents</h4>
<ul>
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
</div>
<!-- <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li> <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li> <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
...@@ -13,7 +26,7 @@ ...@@ -13,7 +26,7 @@
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li> <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> --></header>
......
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