mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 14:30:46 +02:00
updated js pages to put examples first
This commit is contained in:
Mark Otto
@@ -1277,152 +1277,6 @@
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Button groups</h3>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
|
||||
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
<a class="btn" href="#">Middle</a>
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example markup</h3>
|
||||
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
</div>
|
||||
</pre>
|
||||
<p>And with a toolbar for multiple groups:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<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><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<hr>
|
||||
<h4 class="muted">Heads up</h4>
|
||||
<p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn primary" href="#">Action</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn danger" href="#">Danger</a>
|
||||
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn success" href="#">Success</a>
|
||||
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn info" href="#">Info</a>
|
||||
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -55,9 +55,171 @@
|
||||
|
||||
|
||||
|
||||
<!-- Button Groups
|
||||
================================================== -->
|
||||
<section id="buttonGroups">
|
||||
<div class="page-header">
|
||||
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Button groups</h3>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
|
||||
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
<a class="btn" href="#">Middle</a>
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example markup</h3>
|
||||
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
</div>
|
||||
</pre>
|
||||
<p>And with a toolbar for multiple groups:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<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><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<hr>
|
||||
<h4 class="muted">Heads up</h4>
|
||||
<p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Split button dropdowns
|
||||
================================================== -->
|
||||
<section id="buttonGroups">
|
||||
<div class="page-header">
|
||||
<h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn primary" href="#">Action</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn danger" href="#">Danger</a>
|
||||
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn success" href="#">Success</a>
|
||||
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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">
|
||||
<a class="btn info" href="#">Info</a>
|
||||
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-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>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Nav, Tabs, & Pills
|
||||
================================================== -->
|
||||
<section id="tabsAndPills">
|
||||
<section id="navs">
|
||||
<div class="page-header">
|
||||
<h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -384,36 +384,33 @@
|
||||
<dd><a href="./base-css.html#tables">Tables</a></dd>
|
||||
<dd><a href="./base-css.html#forms">Forms</a></dd>
|
||||
<dd><a href="./base-css.html#buttons">Buttons</a></dd>
|
||||
<dd><a href="./base-css.html#buttongroups">Button groups</a></dd>
|
||||
<dd><a href="./base-css.html#icons">Icons</a></dd>
|
||||
<dd><a href="./base-css.html#icons">Icons by Glyphicons</a></dd>
|
||||
</dl>
|
||||
<dl class="span2">
|
||||
<dt>Components</dt>
|
||||
<dd><a href="./components.html#thumbnails">Thumbnails</a></dd>
|
||||
<dd><a href="./components.html#autocomplete">Autocomplete</a></dd>
|
||||
<dd><a href="./components.html#carousel">Carousel</a></dd>
|
||||
<dd><a href="./components.html#sidenav">Side nav</a></dd>
|
||||
<dd><a href="./base-css.html#buttonGroups">Button groups</a></dd>
|
||||
<dd><a href="./base-css.html#buttonDropdowns">Split button dropdowns</a></dd>
|
||||
<dd><a href="./components.html#navs">Nav, tabs, pills</a></dd>
|
||||
<dd><a href="./components.html#navbar">Navbar</a></dd>
|
||||
<dd><a href="./components.html#tabspills">Tabs and pills</a></dd>
|
||||
<dd><a href="./components.html#breadcrumbs">Breadcrumbs</a></dd>
|
||||
<dd><a href="./components.html#pagination">Pagination</a></dd>
|
||||
<dd><a href="./components.html#alerts">Alerts and errors</a></dd>
|
||||
<dd><a href="./components.html#modals">Modals</a></dd>
|
||||
<dd><a href="./components.html#twipsy">Twipsy tooltips</a></dd>
|
||||
<dd><a href="./components.html#popover">Popovers</a></dd>
|
||||
<dd><a href="./components.html#thumbnails">Thumbnails</a></dd>
|
||||
<dd><a href="./components.html#alerts">Alert messages</a></dd>
|
||||
</dl>
|
||||
<dl class="span2">
|
||||
<dt>Javascript plugins</dt>
|
||||
<dd><a href="">Transitions</a></dd>
|
||||
<dd><a href="./javasript.html#modals">Modals</a></dd>
|
||||
<dd><a href="./javasript.html#dropdowns">Dropdowns</a></dd>
|
||||
<dd><a href="./javasript.html#scrollspy">Scrollspy</a></dd>
|
||||
<dd><a href="./javasript.html#tabs">Tabs</a></dd>
|
||||
<dd><a href="./javasript.html#twipsy">Twipsy tooltips</a></dd>
|
||||
<dd><a href="./javasript.html#popovers">Popovers</a></dd>
|
||||
<dd><a href="./javasript.html#alerts">Alerts</a></dd>
|
||||
<dd><a href="./javasript.html#buttons">Buttons</a></dd>
|
||||
<dd><a href="./javasript.html#accordion">Accordion</a></dd>
|
||||
<dd><a href="./javasript.html#carousel">Carousel</a></dd>
|
||||
<dd><a href="./javascript.html#transitions">Transitions</a></dd>
|
||||
<dd><a href="./javascript.html#modals">Modals</a></dd>
|
||||
<dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd>
|
||||
<dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd>
|
||||
<dd><a href="./javascript.html#tabs">Tabs</a></dd>
|
||||
<dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd>
|
||||
<dd><a href="./javascript.html#popovers">Popovers</a></dd>
|
||||
<dd><a href="./javascript.html#alerts">Alerts</a></dd>
|
||||
<dd><a href="./javascript.html#buttons">Buttons</a></dd>
|
||||
<dd><a href="./javascript.html#collapse">Collapse</a></dd>
|
||||
<dd><a href="./javascript.html#carousel">Carousel</a></dd>
|
||||
<dd><a href="./javascript.html#typeahead">Typeahead</a></dd>
|
||||
</dl>
|
||||
<dl class="span2">
|
||||
<dt>Using LESS</dt>
|
||||
|
||||
Reference in New Issue
Block a user