diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 240 |
1 files changed, 226 insertions, 14 deletions
diff --git a/docs/components.html b/docs/components.html index 3272f29d0..ea0e12272 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,7 +58,7 @@ <a href="./components.html">Components</a> </li> <li class=""> - <a href="./javascript.html">Javascript</a> + <a href="./javascript.html">JavaScript</a> </li> <li class=""> <a href="./customize.html">Customize</a> @@ -98,6 +98,7 @@ <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li> <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li> <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li> + <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li> <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li> </ul> </div> @@ -113,7 +114,7 @@ </div> <h2>Example</h2> - <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.</p> + <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</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;"> @@ -295,7 +296,7 @@ <h4>Checkbox and radio flavors</h4> - <p>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.</p> + <p>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.</p> <h4>Dropdowns in button groups</h4> <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> @@ -436,9 +437,9 @@ </div><!-- /btn-toolbar --> </div> - <h3>Requires javascript</h3> + <h3>Requires JavaScript</h3> <p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p> - <p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p> + <p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.</p> <hr class="bs-docs-separator"> @@ -687,7 +688,7 @@ </pre> <h3>Disabled state</h3> - <p>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.</p> + <p>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.</p> <div class="bs-docs-example"> <ul class="nav nav-pills"> <li><a href="#">Clickable link</a></li> @@ -746,7 +747,7 @@ <h2>Dropdowns</h2> - <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p> + <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p> <h3>Tabs with dropdowns</h3> <div class="bs-docs-example"> @@ -911,7 +912,7 @@ <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p> <h4>Requires jQuery plugin</h4> - <p>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>.</p> + <p>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>.</p> <h3>Tabbable in any direction</h3> @@ -1157,7 +1158,7 @@ <p>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.</p> <h3>Using dropdowns</h3> - <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p> + <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p> <pre class="prettyprint linenums"> <ul class="nav"> <li class="dropdown"> @@ -1171,7 +1172,7 @@ </li> </ul> </pre> - <p>Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p> + <p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p> <h3>Text</h3> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> @@ -1265,7 +1266,7 @@ <span class="icon-bar"></span> </a> <a class="brand" href="#">Title</a> - <div class="nav-collapse"> + <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1321,7 +1322,7 @@ <a class="brand" href="#">Project name</a> <!-- Everything you want hidden at 940px or less, place within here --> - <div class="nav-collapse"> + <div class="nav-collapse collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> </div> @@ -1349,7 +1350,7 @@ <span class="icon-bar"></span> </a> <a class="brand" href="#">Title</a> - <div class="nav-collapse subnav-collapse"> + <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1510,6 +1511,77 @@ </div> </pre> + <h3>Sizes</h3> + <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</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>Alignment</h3> <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p> <div class="bs-docs-example"> @@ -1945,6 +2017,7 @@ + <!-- Alerts ================================================== --> <section id="alerts"> @@ -1973,7 +2046,7 @@ <p>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.</p> <pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre> - <h3>Dismiss alerts via javascript</h3> + <h3>Dismiss alerts via JavaScript</h3> <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p> @@ -2047,6 +2120,7 @@ + <!-- Progress bars ================================================== --> <section id="progress"> @@ -2193,6 +2267,144 @@ + <!-- Media object + ================================================== --> + <section id="media"> + <div class="page-header"> + <h1>Media object</h1> + </div> + <p class="lead">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.</p> + + <h2>Default example</h2> + <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</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">Media heading</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">Media heading</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">Media heading</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> +<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">Media heading</h4> + ... + + <!-- Nested media object --> + <div class="media"> + ... + </div> + </div> +</div> +</pre> + + + <hr class="bs-docs-separator"> + + + <h2>Media list</h2> + <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</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">Media heading</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">Nested media heading</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">Nested media heading</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">Nested media heading</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">Media heading</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">Media heading</h4> + ... + + <!-- Nested media object --> + <div class="media"> + ... + </div> + </div> + </li> +</ul> +</pre> + +</section> + + + + <!-- Miscellaneous ================================================== --> |