diff options
Diffstat (limited to 'assets/bootstrap-3.1.1/docs/components.html')
| -rw-r--r-- | assets/bootstrap-3.1.1/docs/components.html | 3009 |
1 files changed, 0 insertions, 3009 deletions
diff --git a/assets/bootstrap-3.1.1/docs/components.html b/assets/bootstrap-3.1.1/docs/components.html deleted file mode 100644 index efa8a05191..0000000000 --- a/assets/bootstrap-3.1.1/docs/components.html +++ /dev/null @@ -1,3009 +0,0 @@ ---- -layout: default -title: Components -slug: components -lead: "Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more." ---- - - -<!-- Glyphicons -================================================== --> -<div class="bs-docs-section"> - <h1 id="glyphicons" class="page-header">Glyphicons</h1> - - <h2 id="glyphicons-glyphs">Available glyphs</h2> - <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> - <div class="bs-glyphicons"> - <ul class="bs-glyphicons-list"> - {% for iconClassName in site.data.glyphicons %} - <li> - <span class="glyphicon {{ iconClassName }}"></span> - <span class="glyphicon-class">glyphicon {{ iconClassName }}</span> - </li> - {% endfor %} - </ul> - </div> - - - <h2 id="glyphicons-how-to-use">How to use</h2> - <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p> - <div class="bs-callout bs-callout-danger"> - <h4>Don't mix with other components</h4> - <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> - </div> -{% highlight html %} -<span class="glyphicon glyphicon-search"></span> -{% endhighlight %} - - - <h2 id="glyphicons-examples">Examples</h2> - <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> - </div> - </div> - <div class="btn-toolbar" role="toolbar"> - <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button> - <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button> - </div> - </div> -{% highlight html %} -<button type="button" class="btn btn-default btn-lg"> - <span class="glyphicon glyphicon-star"></span> Star -</button> -{% endhighlight %} -</div> - - - -<!-- Dropdowns -================================================== --> -<div class="bs-docs-section"> - <h1 id="dropdowns" class="page-header">Dropdowns</h1> - - <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> - - <h3 id="dropdowns-example">Example</h3> - <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.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<div class="dropdown"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> -</div> -{% endhighlight %} - - <h3 id="dropdowns-alignment">Alignment</h3> - <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> - <div class="bs-callout bs-callout-warning"> - <h4>May require additional positioning</h4> - <p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p> - </div> - <div class="bs-callout bs-callout-warning"> - <h4>Deprecated <code>.pull-right</code> alignment</h4> - <p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p> - </div> -{% highlight html %} -<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> - ... -</ul> -{% endhighlight %} - - <h3 id="dropdowns-headers">Headers</h3> - <p>Add a header to label sections of actions in any dropdown menu.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="divider"></li> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation" class="dropdown-header">Dropdown header</li> - ... - <li role="presentation" class="divider"></li> - <li role="presentation" class="dropdown-header">Dropdown header</li> - ... -</ul> -{% endhighlight %} - - <h3 id="dropdowns-disabled">Disabled menu items</h3> - <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> - <div class="bs-example"> - <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> -</ul> -{% endhighlight %} -</div> - - - -<!-- Button Groups -================================================== --> -<div class="bs-docs-section"> - <h1 id="btn-groups" class="page-header">Button groups</h1> - - <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p> - - <div class="bs-callout bs-callout-warning"> - <h4>Tooltips & popovers in button groups require special setting</h4> - <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> - </div> - - <h3 id="btn-groups-single">Basic example</h3> - <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> - <div class="bs-example"> - <div class="btn-group" style="margin: 9px 0 5px;"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> -{% highlight html %} -<div class="btn-group"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> -</div> -{% endhighlight %} - - <h3 id="btn-groups-toolbar">Button toolbar</h3> - <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar" style="margin: 0;"> - <div class="btn-group"> - <button type="button" class="btn btn-default">1</button> - <button type="button" class="btn btn-default">2</button> - <button type="button" class="btn btn-default">3</button> - <button type="button" class="btn btn-default">4</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">5</button> - <button type="button" class="btn btn-default">6</button> - <button type="button" class="btn btn-default">7</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">8</button> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-toolbar" role="toolbar"> - <div class="btn-group">...</div> - <div class="btn-group">...</div> - <div class="btn-group">...</div> -</div> -{% endhighlight %} - - <h3 id="btn-groups-sizing">Sizing</h3> - <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-lg"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-sm"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-xs"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-group btn-group-lg">...</div> -<div class="btn-group">...</div> -<div class="btn-group btn-group-sm">...</div> -<div class="btn-group btn-group-xs">...</div> -{% endhighlight %} - - <h3 id="btn-groups-nested">Nesting</h3> - <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> - <div class="bs-example"> - <div class="btn-group"> - <button type="button" class="btn btn-default">1</button> - <button type="button" class="btn btn-default">2</button> - - <div class="btn-group"> - <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-group"> - <button type="button" class="btn btn-default">1</button> - <button type="button" class="btn btn-default">2</button> - - <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> -</div> -{% endhighlight %} - - <h3 id="btn-groups-vertical">Vertical variation</h3> - <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p> - <div class="bs-example"> - <div class="btn-group-vertical"> - <button type="button" class="btn btn-default">Button</button> - <button type="button" class="btn btn-default">Button</button> - <div class="btn-group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> - <button type="button" class="btn btn-default">Button</button> - <button type="button" class="btn btn-default">Button</button> - <div class="btn-group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> - <div class="btn-group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> - <div class="btn-group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> - <li><a href="#">Dropdown link</a></li> - <li><a href="#">Dropdown link</a></li> - </ul> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-group-vertical"> - ... -</div> -{% endhighlight %} - - <h3 id="btn-groups-justified">Justified button groups</h3> - <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> - - <div class="bs-callout bs-callout-warning"> - <h4>Handling borders</h4> - <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p> - </div> - - <h4>With <code><a></code> elements</h4> - <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> - <div class="bs-example"> - <div class="btn-group btn-group-justified"> - <a class="btn btn-default" role="button">Left</a> - <a class="btn btn-default" role="button">Middle</a> - <a class="btn btn-default" role="button">Right</a> - </div> - <br> - <div class="btn-group btn-group-justified"> - <a class="btn btn-default" role="button">Left</a> - <a class="btn btn-default" role="button">Middle</a> - <div class="btn-group"> - <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Dropdown <span class="caret"></span> - </a> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-group btn-group-justified"> - ... -</div> -{% endhighlight %} - - <h4>With <code><button></code> elements</h4> - <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p> - <div class="bs-example"> - <div class="btn-group btn-group-justified"> - <div class="btn-group"> - <button type="button" class="btn btn-default">Left</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">Middle</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">Right</button> - </div> - </div> - </div> -{% highlight html %} -<div class="btn-group btn-group-justified"> - <div class="btn-group"> - <button type="button" class="btn btn-default">Left</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">Middle</button> - </div> - <div class="btn-group"> - <button type="button" class="btn btn-default">Right</button> - </div> -</div> -{% endhighlight %} -</div> - - - -<!-- Split button dropdowns -================================================== --> -<div class="bs-docs-section"> - <h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1> - - <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p> - - <div class="bs-callout bs-callout-danger"> - <h4>Plugin dependency</h4> - <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p> - </div> - - <h3 id="btn-dropdowns-single">Single button dropdowns</h3> - <p>Turn a button into a dropdown toggle with some basic markup changes.</p> - <div class="bs-example"> - <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div> -{% highlight html %} -<!-- Single button --> -<div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - Action <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> -</div> -{% endhighlight %} - - <h3 id="btn-dropdowns-split">Split button dropdowns</h3> - <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p> - <div class="bs-example"> - <div class="btn-group"> - <button type="button" class="btn btn-default">Default</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div> -{% highlight html %} -<!-- Split button --> -<div class="btn-group"> - <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> -</div> -{% endhighlight %} - - <h3 id="btn-dropdowns-sizing">Sizing</h3> - <p>Button dropdowns work with buttons of all sizes.</p> - <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> - Large button <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div><!-- /btn-toolbar --> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> - Small button <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div><!-- /btn-toolbar --> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> - Extra small button <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div><!-- /btn-toolbar --> - </div> |