diff options
Diffstat (limited to 'docs/templates/pages/components.mustache')
| -rw-r--r-- | docs/templates/pages/components.mustache | 331 |
1 files changed, 296 insertions, 35 deletions
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> |