diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index d2ee6e3d8c..2700cba0c1 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -34,9 +34,8 @@ - title: Breadcrumb - title: Buttons - title: Button group - - title: Button dropdown - title: Card - - title: Carousel + - title: Carousel - title: Collapse - title: Dropdowns - title: Forms diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md deleted file mode 100644 index 80d8911b96..0000000000 --- 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. - -
-
- -
- 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. - -
- -
- -{% highlight html %} - -
- - -
- -
-
- - -
- - -
- -
-
-{% endhighlight %} diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 09d518a606..affaadc6e8 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: -You can optionally use ` +
+ 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 + +Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `