From f6ad665c26f8a376a806721feaf3f38ceadc7e79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Jan 2016 13:23:24 -0800 Subject: Switch up some split button stuff - New vars - New function for stripping units so we can combine rems and ems in math functions - Add new classes for sizing and spacing around the split dropdown toggle so that the caret isn't misaligned --- docs/components/button-dropdown.md | 44 ++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 9 deletions(-) (limited to 'docs/components') diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index e2aa98df3..ecad0d862 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -102,12 +102,12 @@ Turn a button into a dropdown toggle with some basic markup changes. ### Split button dropdowns -Similarly, create split button dropdowns with the same markup changes, only with a separate button. +Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
-
@@ -120,7 +120,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -133,7 +133,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -146,7 +146,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -159,7 +159,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -172,7 +172,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -186,10 +186,10 @@ Similarly, create split button dropdowns with the same markup changes, only with
{% highlight html %} - +
-
@@ -220,6 +220,19 @@ Button dropdowns work with buttons of all sizes. Separated link
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
-- cgit v1.2.3 From fda92d02a35de82de8a98af93e2ebe162c373615 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 11:36:09 -0700 Subject: Unfuck those split button dropdowns - Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size - Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed - Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button --- docs/components/button-dropdown.md | 72 +++++++++++++++++++++++++++++--------- 1 file changed, 56 insertions(+), 16 deletions(-) (limited to 'docs/components') diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index ecad0d862..80d8911b9 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -17,9 +17,9 @@ Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dro * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Single button dropdowns +## Single button dropdowns -Turn a button into a dropdown toggle with some basic markup changes. +Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
@@ -100,9 +100,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
{% endhighlight %} -### Split button dropdowns +## Split button dropdowns -Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret. +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.
@@ -202,9 +204,9 @@ Similarly, create split button dropdowns with nearly the same markup as single b
{% endhighlight %} -### Sizing +## Sizing -Button dropdowns work with buttons of all sizes. +Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{% highlight html %} - + +
+ +
+ ... +
+
+
...
- + +
+ +
+ ... +
+
+
...
{% endhighlight %} -### Dropup variation +## Dropup variation Trigger dropdown menus above elements by adding `.dropup` to the parent.
+
- - + -
+
Action Another action Something else here
Separated link
-
+
{% highlight html %} +
+ + +
+ + +
+ +
+
{% endhighlight %} -- cgit v1.2.3 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/button-dropdown.md | 373 ----------------------------------- docs/components/dropdowns.md | 389 ++++++++++++++++++++++++++++++++++++- 2 files changed, 381 insertions(+), 381 deletions(-) delete mode 100644 docs/components/button-dropdown.md (limited to 'docs/components') 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. - -
-
- -
- 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 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