aboutsummaryrefslogtreecommitdiff
path: root/docs/components/button-dropdown.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-05-11 14:13:16 -0700
committerMark Otto <[email protected]>2016-05-11 14:13:16 -0700
commit7cc802ea781997cdce09c5ab74b878c84301ebab (patch)
tree49c18deb3a5ca30052a965958718767d2dc4946b /docs/components/button-dropdown.md
parent575769c34ded2de0239b3b58d3c27360db18963a (diff)
downloadbootstrap-7cc802ea781997cdce09c5ab74b878c84301ebab.tar.xz
bootstrap-7cc802ea781997cdce09c5ab74b878c84301ebab.zip
Consolidate button-dropdown.md with dropdowns.md to simplify docs
Diffstat (limited to 'docs/components/button-dropdown.md')
-rw-r--r--docs/components/button-dropdown.md373
1 files changed, 0 insertions, 373 deletions
diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md
deleted file mode 100644
index 80d8911b9..000000000
--- a/docs/components/button-dropdown.md
+++ /dev/null
@@ -1,373 +0,0 @@
----
-layout: docs
-title: Button dropdown
-group: components
----
-
-Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
-
-{% callout danger %}
-#### Plugin dependency
-
-Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap.
-{% endcallout %}
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Single button dropdowns
-
-Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
-
-<div class="bd-example">
- <div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
-</div>
-
-{% highlight html %}
-<!-- Single button -->
-<div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Action
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
-</div>
-{% endhighlight %}
-
-## Split button dropdowns
-
-Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret.
-
-We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
-
-<div class="bd-example">
- <div class="btn-group">
- <button type="button" class="btn btn-secondary">Default</button>
- <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
-</div>
-
-{% highlight html %}
-<!-- Example split button -->
-<div class="btn-group">
- <button type="button" class="btn btn-danger">Action</button>
- <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
-</div>
-{% endhighlight %}
-
-## Sizing
-
-Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
-
-<div class="bd-example">
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Large button
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
- <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Small button
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
- <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
-</div><!-- /example -->
-
-{% highlight html %}
-<!-- Large button groups (default and split) -->
-<div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Large button
- </button>
- <div class="dropdown-menu">
- ...
- </div>
-</div>
-<div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Large button
- </button>
- <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- ...
- </div>
-</div>
-
-<!-- Small button groups (default and split) -->
-<div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Small button
- </button>
- <div class="dropdown-menu">
- ...
- </div>
-</div>
-<div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Small button
- </button>
- <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- ...
- </div>
-</div>
-{% endhighlight %}
-
-## Dropup variation
-
-Trigger dropdown menus above elements by adding `.dropup` to the parent.
-
-<div class="bd-example">
- <div class="btn-toolbar" role="toolbar">
- <div class="btn-group dropup">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropup
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div>
-
- <div class="btn-group dropup">
- <button type="button" class="btn btn-secondary">
- Split dropup
- </button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Separated link</a>
- </div>
- </div>
- </div>
-</div>
-
-{% highlight html %}
-<!-- Default dropup button -->
-<div class="btn-group dropup">
- <button type="button" class="btn btn-secondary">Dropup</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <!-- Dropdown menu links -->
- </div>
-</div>
-
-<!-- Split dropup button -->
-<div class="btn-group dropup">
- <button type="button" class="btn btn-secondary">
- Split dropup
- </button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <div class="dropdown-menu">
- <!-- Dropdown menu links -->
- </div>
-</div>
-{% endhighlight %}