@@ -105,6 +105,7 @@ Keep track of development and community news.
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/twbs-bootstrap) or similar delivery mechanisms for maximum discoverability.
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div>
<h3id="btn-groups-single">Basic example</h3>
<h2id="btn-groups-single">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups">
...
...
@@ -60,7 +60,7 @@
</div>
{% endhighlight %}
<h3id="btn-groups-sizing">Sizing</h3>
<h2id="btn-groups-sizing">Sizing</h2>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strongclass="text-danger">Split button dropdowns are not supported here.</strong></p>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<pclass="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3id="dropdowns-example">Example</h3>
<h2id="dropdowns-example">Example</h2>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML. Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<pclass="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3id="list-group-basic">Basic example</h3>
<h2id="list-group-basic">Basic example</h2>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>
<pclass="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>
<h3id="media-default">Default media</h3>
<h2id="media-default">Default media</h2>
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h3id="media-alignment">Media alignment</h3>
<h2id="media-alignment">Media alignment</h2>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
<pclass="lead">Extend Bootstrap's <ahref="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <ahref="http://masonry.desandro.com">Masonry</a>, <ahref="http://isotope.metafizzy.co">Isotope</a>, or <ahref="http://salvattore.com">Salvattore</a>.</p>
<h3id="thumbnails-default">Default example</h3>
<h2id="thumbnails-default">Default example</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<p>Designed and built with all the love in the world by <ahref="https://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="https://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Maintained by the <ahref="https://github.com/orgs/twbs/people">core team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <ahref="https://github.com/twbs/bootstrap/blob/master/LICENSE"target="_blank">MIT</a>, documentation under <ahref="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Code licensed under <arel="license"href="https://github.com/twbs/bootstrap/blob/master/LICENSE"target="_blank">MIT</a>, documentation under <arel="license"href="https://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY 3.0</a>.</p>
<li>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <ahref="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
<li>For help using Bootstrap, ask on <ahref="http://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <ahref="https://www.npmjs.com/browse/keyword/twbs-bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
<li>Find inspiring examples of people building with Bootstrap at the <ahref="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
<p>You can also follow <ahref="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
