From 7cc802ea781997cdce09c5ab74b878c84301ebab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 14:13:16 -0700 Subject: Consolidate button-dropdown.md with dropdowns.md to simplify docs --- docs/components/dropdowns.md | 389 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 381 insertions(+), 8 deletions(-) (limited to 'docs/components/dropdowns.md') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 09d518a60..affaadc6e 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -11,16 +11,20 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Example +## Examples -Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then, add the menu's HTML. +Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `` or ` -
+
Action Another action Something else here @@ -28,9 +32,378 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
{% endexample %} -### Button elements +And with `` elements: + +{% example html %} +
+ + +
+ Action + Another action + Something else here +
+
+{% endexample %} + +The best part is you can do this with any button variant, too: + +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +{% highlight html %} + +
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+{% 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. + +
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +{% highlight html %} + +
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+{% endhighlight %} + +## Sizing + +Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. + +
+ + +
+ +{% highlight html %} + +
+ +
+ ... +
+
+
+ + +
+ ... +
+
+ + +
+ +
+ ... +
+
+
+ + +
+ ... +
+
+{% endhighlight %} + +## Dropup variation + +Trigger dropdown menus above elements by adding `.dropup` to the parent element. + +
+ +
+ +{% highlight html %} + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+{% endhighlight %} + +## Menu items -You can optionally use `
{% endexample %} -## Alignment +## Menu alignment By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -- cgit v1.2.3