diff options
Diffstat (limited to 'docs/templates')
| -rw-r--r-- | docs/templates/layout.mustache | 14 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 200 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 331 | ||||
| -rw-r--r-- | docs/templates/pages/customize.mustache | 33 | ||||
| -rw-r--r-- | docs/templates/pages/extend.mustache | 26 | ||||
| -rw-r--r-- | docs/templates/pages/getting-started.mustache | 55 | ||||
| -rw-r--r-- | docs/templates/pages/index.mustache | 29 | ||||
| -rw-r--r-- | docs/templates/pages/javascript.mustache | 48 | ||||
| -rw-r--r-- | docs/templates/pages/scaffolding.mustache | 10 |
9 files changed, 615 insertions, 131 deletions
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index d463f441e8..deaec189ad 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -70,7 +70,7 @@ <a href="./components.html">{{_i}}Components{{/i}}</a> </li> <li class="{{javascript}}"> - <a href="./javascript.html">{{_i}}Javascript{{/i}}</a> + <a href="./javascript.html">{{_i}}JavaScript{{/i}}</a> </li> <li class="{{customize}}"> <a href="./customize.html">{{_i}}Customize{{/i}}</a> @@ -90,12 +90,14 @@ <footer class="footer"> <div class="container"> <p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p> - <p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p> - <p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> - <p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> + <p>{{_i}}Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p> + <p>{{_i}}Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> + <p>{{_i}}<a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p> <ul class="footer-links"> - <li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li> + <li><a href="http://blog.getbootstrap.com">{{_i}}Blog{{/i}}</a></li> + <li class="muted">·</li> + <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li> + <li class="muted">·</li> <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li> </ul> </div> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cc83e0d733..e0a0280687 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -89,14 +89,14 @@ </pre> <h3>{{_i}}Bold{{/i}}</h3> - <p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p> + <p>{{_i}}For emphasizing a snippet of text with a heavier font-weight.{{/i}}</p> <div class="bs-docs-example"> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> </div> <pre class="prettyprint"><strong>rendered as bold text</strong></pre> <h3>{{_i}}Italics{{/i}}</h3> - <p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p> + <p>{{_i}}For emphasizing a snippet of text with italics.{{/i}}</p> <div class="bs-docs-example"> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> </div> @@ -446,7 +446,7 @@ <h2>{{_i}}Optional classes{{/i}}</h2> - <p>{{_i}}Add any of the follow classes to the <code>.table</code> base class.{{/i}}</p> + <p>{{_i}}Add any of the following classes to the <code>.table</code> base class.{{/i}}</p> <h3><code>{{_i}}.table-striped{{/i}}</code></h3> <p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p> @@ -812,25 +812,29 @@ <h2>{{_i}}Default styles{{/i}}</h2> <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p> <form class="bs-docs-example"> - <legend>Legend</legend> - <label>{{_i}}Label name{{/i}}</label> - <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> - <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + <fieldset> + <legend>Legend</legend> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + </fieldset> </form>{{! /example }} <pre class="prettyprint linenums"> <form> - <legend>{{_i}}Legend{{/i}}</legend> - <label>{{_i}}Label name{{/i}}</label> - <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> - <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + <fieldset> + <legend>{{_i}}Legend{{/i}}</legend> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-block">Example block-level help text here.</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + </fieldset> </form> </pre> @@ -884,7 +888,6 @@ <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li> </ul> <form class="bs-docs-example form-horizontal"> - <legend>Legend</legend> <div class="control-group"> <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label> <div class="controls"> @@ -1068,20 +1071,22 @@ <form class="bs-docs-example"> <div class="input-prepend"> <span class="add-on">@</span> - <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> + <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"> </div> <br> <div class="input-append"> - <input class="span2" id="appendedInput" size="16" type="text"> + <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div> </form> <pre class="prettyprint linenums"> <div class="input-prepend"> - <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> + <span class="add-on">@</span> + <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"> </div> <div class="input-append"> - <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> + <input class="span2" id="appendedInput" type="text"> + <span class="add-on">.00</span> </div> </pre> @@ -1090,13 +1095,15 @@ <form class="bs-docs-example form-inline"> <div class="input-prepend input-append"> <span class="add-on">$</span> - <input class="span2" id="appendedPrependedInput" size="16" type="text"> + <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div> </form> <pre class="prettyprint linenums"> <div class="input-prepend input-append"> - <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> + <span class="add-on">$</span> + <input class="span2" id="appendedPrependedInput" type="text"> + <span class="add-on">.00</span> </div> </pre> @@ -1104,23 +1111,139 @@ <p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p> <form class="bs-docs-example"> <div class="input-append"> - <input class="span2" id="appendedInputButton" size="16" type="text"> + <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div> - <br> + </form> +<pre class="prettyprint linenums"> +<div class="input-append"> + <input class="span2" id="appendedInputButton" type="text"> + <button class="btn" type="button">Go!</button> +</div> +</pre> + <form class="bs-docs-example"> <div class="input-append"> - <input class="span2" id="appendedInputButtons" size="16" type="text"> + <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div> </form> <pre class="prettyprint linenums"> <div class="input-append"> - <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> + <input class="span2" id="appendedInputButtons" type="text"> + <button class="btn" type="button">Search</button> + <button class="btn" type="button">Options</button> </div> +</pre> + <h4>{{_i}}Button dropdowns{{/i}}</h4> + <p>{{_i}}{{/i}}</p> + <form class="bs-docs-example"> + <div class="input-append"> + <input class="span2" id="appendedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /input-append --> + </form> +<pre class="prettyprint linenums"> <div class="input-append"> - <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> + <input class="span2" id="appendedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + {{_i}}Action{{/i}} + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> +</div> +</pre> + + <form class="bs-docs-example"> + <div class="input-prepend"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + <input class="span2" id="prependedDropdownButton" type="text"> + </div><!-- /input-prepend --> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + {{_i}}Action{{/i}} + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> + <input class="span2" id="prependedDropdownButton" type="text"> +</div> +</pre> + + <form class="bs-docs-example"> + <div class="input-prepend input-append"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + <input class="span2" id="appendedPrependedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /input-prepend input-append --> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend input-append"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + {{_i}}Action{{/i}} + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> + <input class="span2" id="appendedPrependedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + {{_i}}Action{{/i}} + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> </div> </pre> @@ -1151,6 +1274,17 @@ <h3>{{_i}}Control sizing{{/i}}</h3> <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p> + <h4>{{_i}}Block level inputs{{/i}}</h4> + <p>{{_i}}Make any <code><input></code> or <code><textarea></code> element behave like a block level element.{{/i}}</p> + <form class="bs-docs-example" style="padding-bottom: 15px;"> + <div class="controls"> + <input class="input-block-level" type="text" placeholder=".input-block-level"> + </div> + </form> +<pre class="prettyprint linenums"> +<input class="input-block-level" type="text" placeholder=".input-block-level"> +</pre> + <h4>{{_i}}Relative sizing{{/i}}</h4> <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> @@ -1339,9 +1473,9 @@ </div> </div> <div class="control-group info"> - <label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label> + <label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label> <div class="controls"> - <input type="text" id="inputError"> + <input type="text" id="inputInfo"> <span class="help-inline">{{_i}}Username is taken{{/i}}</span> </div> </div> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 53936e5d0d..3c024451c2 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -27,6 +27,7 @@ <li><a href="#thumbnails"><i class="icon-chevron-right"></i> {{_i}}Thumbnails{{/i}}</a></li> <li><a href="#alerts"><i class="icon-chevron-right"></i> {{_i}}Alerts{{/i}}</a></li> <li><a href="#progress"><i class="icon-chevron-right"></i> {{_i}}Progress bars{{/i}}</a></li> + <li><a href="#media"><i class="icon-chevron-right"></i> {{_i}}Media object{{/i}}</a></li> <li><a href="#misc"><i class="icon-chevron-right"></i> {{_i}}Misc{{/i}}</a></li> </ul> </div> @@ -42,7 +43,7 @@ </div> <h2>{{_i}}Example{{/i}}</h2> - <p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p> + <p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.{{/i}}</p> <div class="bs-docs-example"> <div class="dropdown clearfix"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> @@ -93,25 +94,74 @@ <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3> <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p> - <div class="bs-docs-example"> - <div class="dropdown clearfix"> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li class="dropdown-submenu"> - <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a> - <ul class="dropdown-menu"> - <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> - </ul> - </li> - </ul> - </div> + <div class="bs-docs-example" style="min-height: 180px;"> + + <div class="pull-left"> + <p class="muted">Default</p> + <div class="dropdown clearfix"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li class="dropdown-submenu"> + <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + </ul> + </li> + </ul> + </div> + </div>{{! /.pull-left }} + + <div class="pull-left" style="margin-left: 20px;"> + <p class="muted">Dropup</p> + <div class="dropup"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li class="dropdown-submenu"> + <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + </ul> + </li> + </ul> + </div> + </div>{{! /.pull-left }} + + <div class="pull-left" style="margin-left: 20px;"> + <p class="muted">Left submenu</p> + <div class="dropdown"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li class="dropdown-submenu pull-left"> + <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li> + </ul> + </li> + </ul> + </div> + </div>{{! /.pull-left }} + </div>{{! /example }} <pre class="prettyprint linenums"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> @@ -206,7 +256,7 @@ <h4>{{_i}}Checkbox and radio flavors{{/i}}</h4> - <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p> + <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.{{/i}}</p> <h4>{{_i}}Dropdowns in button groups{{/i}}</h4> <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p> @@ -347,9 +397,9 @@ </div><!-- /btn-toolbar --> </div>{{! /example }} - <h3>{{_i}}Requires javascript{{/i}}</h3> + <h3>{{_i}}Requires JavaScript{{/i}}</h3> <p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p> - <p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p> + <p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}</p> <hr class="bs-docs-separator"> @@ -598,7 +648,7 @@ </pre> <h3>{{_i}}Disabled state{{/i}}</h3> - <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p> + <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p> <div class="bs-docs-example"> <ul class="nav nav-pills"> <li><a href="#">{{_i}}Clickable link{{/i}}</a></li> @@ -657,7 +707,7 @@ <h2>{{_i}}Dropdowns{{/i}}</h2> - <p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p> + <p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p> <h3>{{_i}}Tabs with dropdowns{{/i}}</h3> <div class="bs-docs-example"> @@ -822,7 +872,7 @@ <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p> <h4>{{_i}}Requires jQuery plugin{{/i}}</h4> - <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p> + <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p> <h3>{{_i}}Tabbable in any direction{{/i}}</h3> @@ -1068,7 +1118,7 @@ <p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p> <h3>{{_i}}Using dropdowns{{/i}}</h3> - <p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p> + <p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p> <pre class="prettyprint linenums"> <ul class="nav"> <li class="dropdown"> @@ -1082,7 +1132,7 @@ </li> </ul> </pre> - <p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p> + <p>{{_i}}Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p> <h3>{{_i}}Text{{/i}}</h3> <p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p> @@ -1170,13 +1220,13 @@ <div class="navbar"> <div class="navbar-inner"> <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">{{_i}}Title{{/i}}</a> - <div class="nav-collapse"> + <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav"> <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li> @@ -1232,7 +1282,7 @@ <a class="brand" href="#">{{_i}}Project name{{/i}}</a> <!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --> - <div class="nav-collapse"> + <div class="nav-collapse collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> </div> @@ -1254,13 +1304,13 @@ <div class="navbar navbar-inverse" style="position: static;"> <div class="navbar-inner"> <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">{{_i}}Title{{/i}}</a> - <div class="nav-collapse subnav-collapse"> + <div class="nav-collapse collapse navbar-inverse-collapse"> <ul class="nav"> <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li> @@ -1421,6 +1471,77 @@ </div> </pre> + <h3>{{_i}}Sizes{{/i}}</h3> + <p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p> + <div class="bs-docs-example"> + <div class="pagination pagination-large"> + <ul> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> + </div> + <div class="pagination"> + <ul> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> + </div> + <div class="pagination pagination-small"> + <ul> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> + </div> + <div class="pagination pagination-mini"> + <ul> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> + </div> + </div> +<pre class="prettyprint linenums"> +<div class="pagination pagination-large"> + <ul> + ... + </ul> +</div> +<div class="pagination"> + <ul> + ... + </ul> +</div> +<div class="pagination pagination-small"> + <ul> + ... + </ul> +</div> +<div class="pagination pagination-mini"> + <ul> + ... + </ul> +</div> +</pre> + <h3>{{_i}}Alignment{{/i}}</h3> <p>{{_i}}Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p> <div class="bs-docs-example"> @@ -1856,6 +1977,7 @@ + <!-- Alerts ================================================== --> <section id="alerts"> @@ -1884,7 +2006,7 @@ <p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p> <pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre> - <h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3> + <h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3> <p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p> @@ -1958,6 +2080,7 @@ + <!-- Progress bars ================================================== --> <section id="progress"> @@ -2104,6 +2227,144 @@ + <!-- Media object + ================================================== --> + <section id="media"> + <div class="page-header"> + <h1>{{_i}}Media object{{/i}}</h1> + </div> + <p class="lead">{{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}</p> + + <h2>{{_i}}Default example{{/i}}</h2> + <p>{{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}</p> + <div class="bs-docs-example"> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. + </div> + </div> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. + </div> + </div> + </div> + </div> + </div>{{! /.bs-docs-example }} +<pre class="prettyprint linenums"> +<div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + ... + + <!-- Nested media object --> + <div class="media"> + ... + </div> + </div> +</div> +</pre> + + + <hr class="bs-docs-separator"> + + + <h2>{{_i}}Media list{{/i}}</h2> + <p>{{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}</p> + <div class="bs-docs-example"> + <ul class="media-list"> + <li class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> + <!-- Nested media object --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + <!-- Nested media object --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + </div> + </div> + </div> + </div> + <!-- Nested media object --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + </div> + </div> + </div> + </li> + <li class="media"> + <a class="pull-right" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + </div> + </li> + </ul> + </div> +<pre class="prettyprint linenums"> +<ul class="media-list"> + <li class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="http://placehold.it/64x64"> + </a> + <div class="media-body"> + <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + ... + + <!-- Nested media object --> + <div class="media"> + ... + </div> + </div> + </li> +</ul> +</pre> + +</section> + + + + <!-- Miscellaneous ================================================== --> @@ -2153,7 +2414,7 @@ <p><button class="close" style="float: none;">×</button></p> </div> <pre class="prettyprint linenums"><button class="close">&times;</button></pre> - <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p> + <p>{{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}</p> <pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre> <h2>{{_i}}Helper classes{{/i}}</h2> diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 0e78f99fd1..386f6930a3 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -3,7 +3,7 @@ <header class="jumbotron subhead" id="overview"> <div class="container"> <h1>{{_i}}Customize and download{{/i}}</h1> - <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p> + <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p> </div> </header> @@ -62,6 +62,7 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> {{_i}}Alerts{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> {{_i}}Progress bars{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> {{_i}}Hero unit{{/i}}</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> {{_i}}Media component{{/i}}</label> <h3>{{_i}}JS Components{{/i}}</h3> <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> {{_i}}Tooltips{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> {{_i}}Popovers{{/i}}</label> @@ -72,6 +73,7 @@ </div><!-- /span --> <div class="span3"> <h3>{{_i}}Miscellaneous{{/i}}</h3> + <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> {{_i}}Media object{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label> @@ -226,12 +228,14 @@ <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif"> <label>@monoFontFamily</label> <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace"> + <label>@baseFontSize</label> <input type="text" class="span3" placeholder="14px"> <label>@baseFontFamily</label> <input type="text" class="span3" placeholder="@sansFontFamily"> <label>@baseLineHeight</label> <input type="text" class="span3" placeholder="20px"> + <label>@altFontFamily</label> <input type="text" class="span3" placeholder="@serifFontFamily"> <label>@headingsFontFamily</label> @@ -240,6 +244,28 @@ <input type="text" class="span3" placeholder="bold"> <label>@headingsColor</label> <input type="text" class="span3" placeholder="inherit"> + + <label>@fontSizeLarge</label> + <input type="text" class="span3" placeholder="@baseFontSize * 1.25"> + <label>@fontSizeSmall</label> + <input type="text" class="span3" placeholder="@baseFontSize * 0.85"> + <label>@fontSizeMini</label> + <input type="text" class="span3" placeholder="@baseFontSize * 0.75"> + + <label>@paddingLarge</label> + <input type="text" class="span3" placeholder="11px 19px"> + <label>@paddingSmall</label> + <input type="text" class="span3" placeholder="2px 10px"> + <label>@paddingMini</label> + <input type="text" class="span3" placeholder="1px 6px"> + + <label>@baseBorderRadius</label> + <input type="text" class="span3" placeholder="4px"> + <label>@borderRadiusLarge</label> + <input type="text" class="span3" placeholder="6px"> + <label>@borderRadiusSmall</label> + <input type="text" class="span3" placeholder="3px"> + <label>@heroUnitBackground</label> <input type="text" class="span3" placeholder="@grayLighter"> <label>@heroUnitHeadingColor</label> @@ -326,6 +352,11 @@ <label>@navbarSearchPlaceholderColor</label> <input type="text" class="span3" placeholder="#ccc"> + <label>@navbarCollapseWidth</label> + <input type="text" class="span3" placeholder="979px"> + <label>@navbarCollapseDesktopWidth</label> + <input type="text" class="span3" placeholder="@navbarCollapseWidth + 1"> + <h3>{{_i}}Dropdowns{{/i}}</h3> <label>@dropdownBackground</label> <input type="text" class="span3" placeholder="@white"> diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index a4332e62e3..c1976427cf 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -76,7 +76,7 @@ <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p> - <h3>{{_i}}Javascript{{/i}}</h3> + <h3>{{_i}}JavaScript{{/i}}</h3> <p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p> <pre class="prettyprint"> <link rel="stylesheet/less" href="/path/to/bootstrap.less"> @@ -109,18 +109,18 @@ <h3>{{_i}}Setup file structure{{/i}}</h3> <p>{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}</p> -<pre class="prettyprint"> - app/ - ├── layouts/ - └── templates/ - public/ - ├── css/ - │ ├── bootstrap.min.css - ├── js/ - │ ├── bootstrap.min.js - └── img/ - ├── glyphicons-halflings.png - └── glyphicons-halflings-white.png +<pre> + <span class="icon-folder-open"></span> app/ + <span class="icon-folder-open"></span> layouts/ + <span class="icon-folder-open"></span> templates/ + <span class="icon-folder-open"></span> public/ + <span class="icon-folder-open"></span> css/ + <span class="icon-file"></span> bootstrap.min.css + <span class="icon-folder-open"></span> js/ + <span class="icon-file"></span> bootstrap.min.js + <span class="icon-folder-open"></span> img/ + <span class="icon-file"></span> glyphicons-halflings.png + <span class="icon-file"></span> glyphicons-halflings-white.png </pre> <h3>{{_i}}Utilize starter template{{/i}}</h3> diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 513124c27f..2eec7ff769 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -67,10 +67,9 @@ ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js - ├── img/ - │ ├── glyphicons-halflings.png - │ ├── glyphicons-halflings-white.png - └── README.md + └── img/ + ├── glyphicons-halflings.png + └── glyphicons-halflings-white.png </pre> <p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p> <p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p> @@ -93,11 +92,11 @@ <p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p> <h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4> <p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p> - <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}Javascript plugins{{/i}}</a></h4> - <p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p> + <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4> + <p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p> <h2>{{_i}}List of components{{/i}}</h2> - <p>{{_i}}Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:{{/i}}</p> + <p>{{_i}}Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:{{/i}}</p> <ul> <li>{{_i}}Button groups{{/i}}</li> <li>{{_i}}Button dropdowns{{/i}}</li> @@ -128,7 +127,7 @@ <div class="page-header"> <h1>{{_i}}4. Basic HTML template{{/i}}</h1> </div> - <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p> + <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p> <p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p> <pre class="prettyprint linenums"> <!DOCTYPE html> @@ -149,7 +148,7 @@ <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> - <link href="css/bootstrap.min.css" rel="stylesheet"> + <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> @@ -172,6 +171,13 @@ <p class="lead">{{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p> <ul class="thumbnails bootstrap-examples"> <li class="span3"> + <a class="thumbnail" href="examples/starter-template.html"> + <img src="assets/img/examples/bootstrap-example-starter.jpg" alt=""> + </a> + <h4>{{_i}}Starter template{{/i}}</h4> + <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p> + </li> + <li class="span3"> <a class="thumbnail" href="examples/hero.html"> <img src="assets/img/examples/bootstrap-example-hero.jpg" alt=""> </a> @@ -185,12 +191,35 @@ <h4>{{_i}}Fluid layout{{/i}}</h4> <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p> </li> + <li class="span3"> - <a class="thumbnail" href="examples/starter-template.html"> - <img src="assets/img/examples/bootstrap-example-starter.jpg" alt=""> + <a class="thumbnail" href="examples/marketing-narrow.html"> + <img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt=""> </a> - <h4>{{_i}}Starter template{{/i}}</h4> - <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p> + <h4>{{_i}}Narrow marketing{{/i}}</h4> + <p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p> + </li> + <li class="span3"> + <a class="thumbnail" href="examples/signin.html"> + <img src="assets/img/examples/bootstrap-example-signin.png" alt=""> + </a> + <h4>{{_i}}Sign in{{/i}}</h4> + <p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p> + </li> + <li class="span3"> + <a class="thumbnail" href="examples/sticky-footer.html"> + <img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> + </a> + <h4>{{_i}}Sticky footer{{/i}}</h4> + <p>{{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}</p> + </li> + + <li class="span3"> + <a class="thumbnail" href="examples/carousel.html"> + <img src="assets/img/examples/bootstrap-example-carousel.png" alt=""> + </a> + <h4>{{_i}}Carousel jumbotron{{/i}}</h4> + <p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p> </li> </ul> </section> diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index f02b8d505d..39a2a83719 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -1,12 +1,23 @@ <div class="jumbotron masthead"> <div class="container"> - <h1>Bootstrap</h1> - <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> - <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.1']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p> + <h1>{{_i}}Bootstrap{{/i}}</h1> + <p>{{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}</p> + <p> + <a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.2.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a> + </p> <ul class="masthead-links"> - <li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li> - <li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a></li> - <li>Version 2.1.1</li> + <li> + <a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>{{_i}}GitHub project{{/i}}</a> + </li> + <li> + <a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>{{_i}}Examples{{/i}}</a> + </li> + <li> + <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a> + </li> + <li> + {{_i}}Version 2.2.0{{/i}} + </li> </ul> </div> </div> @@ -51,7 +62,7 @@ <div class="span4"> <img src="assets/img/bs-docs-bootstrap-features.png"> <h2>{{_i}}Packed with features.{{/i}}</h2> - <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p> + <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p> </div> </div> @@ -72,8 +83,8 @@ </a> </li> <li class="span3"> - <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> - <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> + <a class="thumbnail" href="http://www.gathercontent.com/" target="_blank"> + <img src="assets/img/example-sites/gathercontent.png" alt="Gather Content"> </a> </li> <li class="span3"> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 5f8883bdf7..72d1fc5bba 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -2,7 +2,7 @@ ================================================== --> <header class="jumbotron subhead"> <div class="container"> - <h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1> + <h1>{{_i}}JavaScript{{/i}}</h1> <p class="lead">{{_i}}Bring Bootstrap's components to life—now with 13 custom jQuery plugins.{{/i}} </div> </header> @@ -41,7 +41,7 @@ </div> <h3>{{_i}}Individual or compiled{{/i}}</h3> - <p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of the plugins listed on this page.{{/i}}</p> + <p>{{_i}}Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.{{/i}}</p> <h3>{{_i}}Data attributes{{/i}}</h3> <p>{{_i}}You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.{{/i}}</p> @@ -49,7 +49,7 @@ <p>{{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}} <pre class="prettyprint linenums">$('body').off('.data-api')</pre> - <p>{{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}</p> + <p>{{_i}}Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:{{/i}}</p> <pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre> <h3>{{_i}}Programmatic API{{/i}}</h3> @@ -61,10 +61,10 @@ $("#myModal").modal() // initialized with defaults $("#myModal").modal({ keyboard: false }) // initialized with no keyboard $("#myModal").modal('show') // initializes and invokes show immediately</p> </pre> - <p>{{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p> + <p>{{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p> <h3>{{_i}}Events{{/i}}</h3> - <p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p> + <p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p> <p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p> <pre class="prettyprint linenums"> $('#myModal').on('show', function (e) { @@ -117,7 +117,7 @@ $('#myModal').on('show', function (e) { <h3>{{_i}}Modal header{{/i}}</h3> </div> <div class="modal-body"> - <p>{{_i}}One fine body…{{/i}}</p> + <p>{{_i}}One fine body…{{/i}}</p> </div> <div class="modal-footer"> <a href="#" class="btn">{{_i}}Close{{/i}}</a> @@ -132,7 +132,7 @@ $('#myModal').on('show', function (e) { <h3>{{_i}}Modal header{{/i}}</h3> </div> <div class="modal-body"> - <p>{{_i}}One fine body…{{/i}}</p> + <p>{{_i}}One fine body…{{/i}}</p> </div> <div class="modal-footer"> <a href="#" class="btn">{{_i}}Close{{/i}}</a> @@ -154,7 +154,7 @@ $('#myModal').on('show', function (e) { <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <h4>{{_i}}Popover in a modal{{/i}}</h4> - <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p> + <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.{{/i}}</p> <h4>{{_i}}Tooltips in a modal{{/i}}</h4> <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p> @@ -179,17 +179,17 @@ $('#myModal').on('show', function (e) { <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a> </div>{{! /example }} <pre class="prettyprint linenums"> -<-- Button to trigger modal --> +<!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a> -<-- Modal --> -<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> +<!-- Modal --> +<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> - <p>{{_i}}One fine body…{{/i}}</p> + <p>{{_i}}One fine body…{{/i}}</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">{{_i}}Close{{/i}}</button> @@ -436,8 +436,8 @@ $('#myModal').on('hidden', function () { <p><em>{{_i}}None{{/i}}</em></p> <h3>{{_i}}Methods{{/i}}</h3> - <h4>$().dropdown()</h4> - <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p> + <h4>$().dropdown('toggle')</h4> + <p>{{_i}}A programatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}</p> </section> @@ -734,7 +734,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>{{_i}}html{{/i}}</td> <td>{{_i}}boolean{{/i}}</td> - <td>true</td> + <td>false</td> <td>{{_i}}Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td> </tr> <tr> @@ -855,6 +855,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a> </div> + <h4>{{_i}}Four directions{{/i}}</h4> + <div class="bs-docs-example tooltip-demo"> + <ul class="bs-docs-tooltip-examples"> + <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li> + </ul> + </div>{{! /example }} + <hr class="bs-docs-separator"> @@ -884,7 +894,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>{{_i}}html{{/i}}</td> <td>{{_i}}boolean{{/i}}</td> - <td>true</td> + <td>false</td> <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td> </tr> <tr> @@ -1534,6 +1544,12 @@ $('.carousel').carousel({ <td>{{_i}}Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.{{/i}}</td> </tr> <tr> + <td>{{_i}}updater{{/i}}</td> + <td>{{_i}}function{{/i}}</td> + <td>{{_i}}returns selected item{{/i}}</td> + <td>{{_i}}The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.{{/i}}</td> + </tr> + <tr> <td>{{_i}}highlighter{{/i}}</td> <td>{{_i}}function{{/i}}</td> <td>{{_i}}highlights all default matches{{/i}}</td> diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 0d9c191e36..85ae5ea029 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -130,7 +130,7 @@ <p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p> <div class="row show-grid"> <div class="span9"> - {{_i}}Level 1 of column{{/i}} + {{_i}}Level 1 column{{/i}} <div class="row show-grid"> <div class="span6"> {{_i}}Level 2{{/i}} @@ -247,10 +247,10 @@ <pre class="prettyprint linenums"> <div class="row-fluid"> <div class="span12"> - {{_i}}Level 1 of column{{/i}} + {{_i}}Fluid 12{{/i}} <div class="row-fluid"> - <div class="span6">{{_i}}Level 2{{/i}}</div> - <div class="span6">{{_i}}Level 2{{/i}}</div> + <div class="span6">{{_i}}Fluid 6{{/i}}</div> + <div class="span6">{{_i}}Fluid 6{{/i}}</div> </div> </div> </div> @@ -442,7 +442,7 @@ </table> <h3>{{_i}}When to use{{/i}}</h3> - <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}</p> + <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.{{/i}}</p> <h3>{{_i}}Responsive utilities test case{{/i}}</h3> <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p> |