From 58d1297fcb9f8686731757cc929f8e9ee4e93efb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Aug 2015 19:26:18 -0700 Subject: overhaul custom selects with latest from primer, shoutout --- docs/components/forms.md | 33 ++++++++------------------------- 1 file changed, 8 insertions(+), 25 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 352671208..1e467e885 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -655,35 +655,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in ### Select menu -Similar to the checkboxes and radios, we wrap the `` menus need only a custom class, `.c-selecct` to trigger the custom styles. {% example html %} - + {% endexample %} -The ``) are not currently supported.** ### File browser -- cgit v1.2.3 From a79e7db6bd3ecfb55dc0d84372fbe32ba3b3292b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Aug 2015 19:30:22 -0700 Subject: document some help text examples to the docs --- docs/components/forms.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 1e467e885..e7deaa1ab 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -515,10 +515,18 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des ## Help text -Block level help text for form controls. +No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes, you can create much more flexible help text as you need it. {% example html %} -

A block of help text that breaks onto a new line and may extend beyond one line.

+ +Some inline text with a small tag looks like this. +{% endexample %} + +{% example html %} + +

+ A block of help text that breaks onto a new line and may extend beyond one line. +

{% endexample %} ## Validation -- cgit v1.2.3 From 1ee84d4a1c8dc5de032fadbd6d3fa1f242e1c1ef Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Aug 2015 19:36:01 -0700 Subject: help text tweaks --- docs/components/forms.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index e7deaa1ab..5de1bdc46 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -515,15 +515,19 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des ## Help text -No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes, you can create much more flexible help text as you need it. +No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it. + +Inline text can use any typical inline HTML element (be it a ``, ``, or something else). {% example html %} - -Some inline text with a small tag looks like this. + + Some inline text with a small tag looks like this. + {% endexample %} +Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `

`. + {% example html %} -

A block of help text that breaks onto a new line and may extend beyond one line.

-- cgit v1.2.3 From d2f4c350614ce64f6e22cc21f48a8834bfaa4e9d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Aug 2015 20:25:18 -0700 Subject: rewrite some button group docs --- docs/components/button-group.md | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) (limited to 'docs/components') diff --git a/docs/components/button-group.md b/docs/components/button-group.md index a07a477a5..73d3ef5ff 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -11,21 +11,7 @@ Group a series of buttons together on a single line with the button group. Add o * Will be replaced with the ToC, excluding the "Contents" header {:toc} -{% callout warning %} -#### Tooltips & popovers in button groups require special setting - -When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). -{% endcallout %} - -{% callout warning %} -#### Ensure correct `role` and provide a label - -In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{% endcallout %} - -### Basic example +## Basic example Wrap a series of buttons with `.btn` in `.btn-group`. @@ -37,7 +23,7 @@ Wrap a series of buttons with `.btn` in `.btn-group`. {% endexample %} -### Button toolbar +## Button toolbar Combine sets of button groups into button toolbars for more complex components. @@ -60,7 +46,7 @@ Combine sets of button groups into button toolbars for more complex components. {% endexample %} -### Sizing +## Sizing Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. @@ -97,7 +83,7 @@ Instead of applying button sizing classes to every button in a group, just add `
...
{% endhighlight %} -### Nesting +## Nesting Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. @@ -118,7 +104,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi {% endexample %} -### Vertical variation +## Vertical variation Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** @@ -172,3 +158,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli ... {% endhighlight %} + +## Tooltips and popovers + +Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). -- cgit v1.2.3 From c8306d2f704685dfc68e530cf3e820cb65cedc18 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Aug 2015 20:25:31 -0700 Subject: rewrite active and disabled styles for navs --- docs/components/navs.md | 56 ++++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navs.md b/docs/components/navs.md index 644cd7bf0..486b59433 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -30,8 +30,8 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
  • Another link
    • -
  • - Disabled +
  • + Disabled
    • {% endexample %} @@ -53,8 +53,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb {% example html %}
      -
    • - Active +
    • + Active
    • Link @@ -74,8 +74,8 @@ Take that same HTML, but use `.nav-pills` instead: {% example html %} {% endexample %} @@ -95,8 +95,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`. {% example html %} {% endexample %} @@ -118,10 +118,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {% example html %} {% endexample %} @@ -144,10 +144,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {% example html %} {% endexample %} @@ -172,8 +172,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled