From c0f931d05040090fea94b171f8cecccb79369f0e Mon Sep 17 00:00:00 2001 From: Vicary Archangel Date: Wed, 9 Dec 2015 16:40:32 +0800 Subject: Multiple input-group-addon support 1. Invert `:first-child` into `:not(:last-child)` and vice versa 2. Remove double border at the left of `.form-control` 3. Shifts negative margins of `.btn` and `.btn-group` to retain rightmost border when using at the left of `.form-control`. --- docs/components/input-group.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 78ad26e27..841ebb2d5 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either ## Basic example -Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.** +Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.** {% example html %}
-- cgit v1.2.3 From aa62428cdf574cd42c105d966e7153dd69d80101 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 26 Jan 2016 13:19:03 -0800 Subject: Add docs for custom file input's text and $custom-file-text [skip sauce] --- docs/components/forms.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 58fd41ac0..b8e9b6214 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -812,3 +812,22 @@ Here's how it works: - We declare a `height` on the `` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. + +#### Translating or customizing the strings + +The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`): + +{% highlight scss %} +$custom-file-text: ( + placeholder: ( + en: "Choose file...", + es: "Seleccionar archivo..." + ), + button-label: ( + en: "Browse", + es: "Navegar" + ) +); +{% endhighlight %} + +You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods. -- cgit v1.2.3 From 3bd8dee1c72576e89bd77b9616ce8d9f1eb831c0 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 6 Feb 2016 21:29:30 -0800 Subject: docs/components/modal.md: Fix typo Fixup for #19105 [ci skip] --- docs/components/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/modal.md b/docs/components/modal.md index a8b1b4850..1bbcd3fbf 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr ## Optional sizes -Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. +Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-- cgit v1.2.3 From 8dfd30cc21dd7b2efbe0dbe79f99616f480b79da Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 7 Feb 2016 03:00:59 -0800 Subject: Docs: Add "Horizontal centering" subheading for .m-x-auto Refs #19102 [skip sauce] --- docs/components/utilities.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index e59869fcd..b67221119 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -60,7 +60,8 @@ Here are some representative examples of these classes: } {% endhighlight %} -Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`. +### Horizontal centering +Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
@@ -69,7 +70,7 @@ Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-w
{% highlight html %} -
+
Centered element
{% endhighlight %} -- cgit v1.2.3 From 5142ac2389e78effcdbf57c83dbd272f92dd25f7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 7 Feb 2016 13:13:06 -0800 Subject: Docs: Add captions above progress bars; refs #17264 [skip sauce] --- docs/components/progress.md | 65 ++++++++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 18 deletions(-) (limited to 'docs/components') diff --git a/docs/components/progress.md b/docs/components/progress.md index 480da4903..5a9be36f7 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -14,11 +14,21 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc ### Example {% example html %} -0% -25% -50% -75% -100% + +
Reticulating splines… 0%
+ + +
Reticulating splines… 25%
+ + +
Reticulating splines… 50%
+ + +
Reticulating splines… 75%
+ + +
Reticulating splines… 100%
+ {% endexample %} ### IE9 support @@ -26,9 +36,10 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc Internet Explorer 9 doesn't support the HTML5 `` element, but we can work around that. {% example html %} - +
Reticulating splines… 25%
+
- 25% +
{% endexample %} @@ -38,10 +49,17 @@ Internet Explorer 9 doesn't support the HTML5 `` element, but we can w Progress bars use some of the same button and alert classes for consistent styles. {% example html %} -25% -50% -75% -100% +
Reticulating successful splines… 25%
+ + +
Reticulating informative splines… 50%
+ + +
Reticulating warning splines… 75%
+ + +
Reticulating dangerous splines… 100%
+ {% endexample %} ### Striped @@ -49,11 +67,20 @@ Progress bars use some of the same button and alert classes for consistent style Uses a gradient to create a striped effect. {% example html %} -10% -25% -50% -75% -100% +
Reticulating plain splines… 10%
+10% + +
Reticulating successful splines… 25%
+25% + +
Reticulating informative splines… 50%
+50% + +
Reticulating warning splines… 75%
+75% + +
Reticulating dangerous splines… 100%
+100% {% endexample %} ### Animated stripes @@ -63,12 +90,14 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
- 25% +
Reticulating splines… 25%
+ 25%
{% highlight html %} -25% +
Reticulating splines… 25%
+25% {% endhighlight %} -- cgit v1.2.3 From 44eedd211571290e53a1035d88eff3ee602f6303 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 7 Feb 2016 17:50:38 -0800 Subject: docs/components/forms.md: Fix typo: non => none Fixup for 365db6e3a8fd9c1bac75cf170948c946e2ed7678 /fyi @mdo [skip sauce] --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index fed3ba399..134bd88c1 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -639,7 +639,7 @@ Bootstrap includes validation styles for danger, warning, and success states on - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. -- Icons can also be disabled entirely by changing the variables to `non` or commenting out the source Sass. +- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass. {% comment %} {% callout warning %} -- cgit v1.2.3 From 9c3ba540b432f4fc0249c37766d165adfa5df76d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 7 Feb 2016 23:48:47 -0800 Subject: add example of multiple add-ons to docs --- docs/components/input-group.md | 37 ++++++++++++++++++++++++++++++++----- 1 file changed, 32 insertions(+), 5 deletions(-) (limited to 'docs/components') diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 841ebb2d5..36c11c7d0 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -37,6 +37,12 @@ Place one add-on or button on either side of an input. You may also place one on .00
+
+
+ $ + 0.00 + +
{% endexample %} ## Sizing @@ -53,11 +59,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w @
-
-
- @ - -
{% endexample %} ## Checkboxes and radio addons @@ -85,6 +86,32 @@ Place any checkbox or radio option within an input group's addon instead of text
{% endexample %} +## Multiple addons + +Multiple add-ons are supported and can be mixed with checkbox and radio input versions. + +{% example html %} +
+
+
+ + + + $ + +
+
+
+
+ $ + 0.00 + +
+
+
+{% endexample %} + + ## Button addons Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden. -- cgit v1.2.3 From 72f10dd7e6a763b3258779280d89531b3038b35d Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Feb 2016 00:31:10 -0800 Subject: Only caption 1st set of progress bar examples --- docs/components/progress.md | 42 +++++++++++++----------------------------- 1 file changed, 13 insertions(+), 29 deletions(-) (limited to 'docs/components') diff --git a/docs/components/progress.md b/docs/components/progress.md index 5a9be36f7..57028c972 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -13,6 +13,8 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc ### Example +To caption a progress bar, simply add a `
` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `` element using the `aria-describedby` attribute. + {% example html %}
Reticulating splines… 0%
@@ -49,17 +51,10 @@ Internet Explorer 9 doesn't support the HTML5 `` element, but we can w Progress bars use some of the same button and alert classes for consistent styles. {% example html %} -
Reticulating successful splines… 25%
- - -
Reticulating informative splines… 50%
- - -
Reticulating warning splines… 75%
- - -
Reticulating dangerous splines… 100%
- + + + + {% endexample %} ### Striped @@ -67,20 +62,11 @@ Progress bars use some of the same button and alert classes for consistent style Uses a gradient to create a striped effect. {% example html %} -
Reticulating plain splines… 10%
-10% - -
Reticulating successful splines… 25%
-25% - -
Reticulating informative splines… 50%
-50% - -
Reticulating warning splines… 75%
-75% - -
Reticulating dangerous splines… 100%
-100% + + + + + {% endexample %} ### Animated stripes @@ -90,14 +76,12 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
-
Reticulating splines… 25%
- 25% +
{% highlight html %} -
Reticulating splines… 25%
-25% + {% endhighlight %} -- cgit v1.2.3 From 1d14d5c40401c050d7fb92d6966c9c939ebef9d7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Feb 2016 03:05:03 -0800 Subject: Fix apparent typo in b8ff763d6232d4a61858739b43f509366ffd1500 [ci skip] --- docs/components/buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 9ec1c23f1..391c96311 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -119,7 +119,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `` element behave a bit different: - ``s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. -- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. For browsers that support that proper, you won't see the disabled cursor at all. +- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all. - Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. {% example html %} -- cgit v1.2.3 From c8bd62b214add34ab133cb11241d528ef3402ef0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 8 Feb 2016 22:13:30 -0800 Subject: clarify, fix margin --- docs/components/navbar.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index b359d66a0..98e48fa77 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -56,7 +56,7 @@ Here's an example of all the sub-components included in a default, light navbar: ### Brand -The `.navbar-brand` can be applied to most elements, but an anchor works best. +The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. {% example html %} {% endexample %} -- cgit v1.2.3 From 09aefaa2afe05f438b99caa63bb888c62c40bf73 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 8 Feb 2016 23:21:32 -0800 Subject: Alternate fix to #17965: Updates to use the new class name and adds some basic docs for custom checkbox/radio validation --- docs/components/forms.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 134bd88c1..6f95ecb3d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -762,6 +762,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at {% endexample %} +#### Validation states + +Add other states to your custom forms with our validation classes. + +{% example html %} +
+ +
+
+ +
+
+ +
+{% endexample %} #### Stacked -- cgit v1.2.3 From d7d32c475f688b75d84fe3588d7b3e5b84c6396c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Feb 2016 00:20:18 -0800 Subject: clearer copy --- docs/components/forms.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 134bd88c1..a7ce4062c 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -332,7 +332,9 @@ Because of this, you may need to manually address the width and alignment of ind ### Using the Grid -For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class. +For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. + +Be sure to add `.form-control-label` to your `
- -
- +
+ +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
-
- +
+ +
+
+ +
+
+ +
+
+ +
-
- +
+
+ +
+
+ +
-
- +
+
+
+
-
-
- -
-
- + +
+{% endexample %} + +Grid-based form layouts also support large and small inputs. + +{% example html %} +
+
+
+ +
+
-
-
-
- +
+ +
+ +
-
- + +
{% endexample %} + ## Checkboxes and radios Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. -- cgit v1.2.3 From 371fbdb0e89a8e6d53d5abca5bb7dd2aa95726f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Feb 2016 01:10:05 -0800 Subject: .text-help is dead, long live .form-control-feedback Uses a new more specific class, adds some basic spacing, and clarifies that this class is only for validation feedback. Clears up the help text class question in https://github.com/twbs/bootstrap/pull/18704#issuecomment-168241731 and addresses the vertical spacing in #18703. --- docs/components/forms.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 63dfd46b4..f1cfcd65e 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas Bootstrap includes validation styles for danger, warning, and success states on form controls. - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. +- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles. +- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state. - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass. -- cgit v1.2.3 From 5744c585567939fdd8ede3227f0cfdbf2e90e543 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Feb 2016 01:10:55 -0800 Subject: clarify help text class in docs --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index f1cfcd65e..bcf5ebaad 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -626,7 +626,7 @@ 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 like `.text-muted`, you can create much more flexible help text as you need it. +No official classes exist in Bootstrap 4 for stylizing help text (previously we had `.help-block` in v3), but thanks to utility classes like `.text-muted`, you can create much more flexible help text as needed. {% callout warning %} #### Associating help text with form controls -- cgit v1.2.3 From 4972f8772462a28f6c85c69f9cc984a66a3d8897 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Feb 2016 01:12:49 -0800 Subject: Update form validation docs - Give some guidance on when someone might use any of the three validation states. Fixes #18702. - Improve the examples to provide examples of supporting validation text with the new `.form-control-feedback`, as well as always-present help text. Nullifies #18704. --- docs/components/forms.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index bcf5ebaad..907bad705 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -660,15 +660,22 @@ Block help text—for below inputs or for longer lines of help text—can be eas ## Validation -Bootstrap includes validation styles for danger, warning, and success states on form controls. +Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work: -- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles. - Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state. - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass. +Generally speaking, you'll want to use a particular state for specific types of feedback: + +- **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form. +- **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form. +- And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields. + +Here are some examples of the aforementioned classes in action. + {% comment %} {% callout warning %} #### Conveying validation state to assistive technologies and colorblind users @@ -683,16 +690,24 @@ Ensure that an alternative indication of state is also provided. For instance, y
+ + Example help text that remains unchanged.
+ + Example help text that remains unchanged.
+ + Example help text that remains unchanged.
+{% endexample %} +{% example html %}
{% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ### Link color Use the `.alert-link` utility class to quickly provide matching colored links within any alert. diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 42841807f..d5aa453d7 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p {% endexample %} -{% callout warning %} -#### Conveying meaning to assistive technologies - -Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class. -{% endcallout %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} ## Button tags diff --git a/docs/components/card.md b/docs/components/card.md index 53580d667..b53d2e39a 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -362,6 +362,9 @@ Cards include their own variant classes for quickly changing the `background-col
{% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Outline variants In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card. diff --git a/docs/components/list-group.md b/docs/components/list-group.md index db339c824..8b3b9cd88 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
{% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Custom content Add nearly any HTML within, even for linked list groups like the one below. diff --git a/docs/components/tag.md b/docs/components/tag.md index 185ea378d..09608931a 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -32,6 +32,9 @@ Add any of the below mentioned modifier classes to change the appearance of a ta Danger {% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Pill tags Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. diff --git a/docs/components/utilities.md b/docs/components/utilities.md index b67221119..7add31309 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -160,11 +160,8 @@ Similar to the contextual text color classes, easily set the background of an el Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. {% endcallout %} -{% callout warning %} -#### Conveying meaning to assistive technologies - -Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational. -{% endcallout %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} ## Close icon -- cgit v1.2.3 From bf734252770879d7207d5dc7df7aa82109d8880b Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 27 Dec 2015 19:20:39 +0100 Subject: Document the possibility of extending the $spacers map It's very handy to add another spacer size (e.g. `4`) which can easily be done by extending the map. Example: ``` $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ), 4: ( x: ($spacer-x * 5), y: ($spacer-y * 5) ) ); ``` Closes #18706 [skip sauce] --- docs/components/utilities.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 7add31309..96c84b961 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -39,6 +39,8 @@ Where *size* is one of: * `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` +(You can add more sizes by adding entries to the `$spacers` Sass map variable.) + Here are some representative examples of these classes: {% highlight scss %} -- cgit v1.2.3 From e91c9e2898953208084e1eebdbdef978a7a1f206 Mon Sep 17 00:00:00 2001 From: Russell Beye Date: Thu, 7 Jan 2016 22:34:13 -0600 Subject: Document .pos-f-t utility class; fixes #18494 Add documentation to components/utilities to publicly expose the .pos-f-t utility class to users. Closes #18799 [skip sauce] --- docs/components/utilities.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 96c84b961..76bf5f9be 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -229,6 +229,20 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} +## Fixed positioning + +The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: + +{% highlight scss %} +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} +{% endhighlight %} + ## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. -- cgit v1.2.3 From dd47423ae6f9717b3d678b40e1ce8a8706301598 Mon Sep 17 00:00:00 2001 From: Jeremy Kratz Date: Sun, 10 Jan 2016 18:02:33 -0600 Subject: Docs: Add example of .dropdown-menu-right Fixes #18493 Closes #18836 [skip sauce] --- docs/components/dropdowns.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'docs/components') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 5e153d596..09d518a60 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -45,8 +45,6 @@ You can optionally use `
{% endexample %} - - ## 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. @@ -55,11 +53,18 @@ By default, a dropdown menu is automatically positioned 100% from the top and al **Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment. {% endcallout %} -{% highlight html %} -
- ... +{% example html %} +
+ +
+ + + +
-{% endhighlight %} +{% endexample %} ## Menu headers -- cgit v1.2.3 From 79067a6440ba833fe290a2b386b0588ceb3610c7 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Jan 2016 14:58:19 +0200 Subject: Fix validation errors. [skip sauce] --- docs/components/scrollspy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 4ae0fa219..622469aa1 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -14,7 +14,7 @@ group: components The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
-
+
- -
+
+
- -
+
+
- -
+
+
- -
+
+
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. - -
- -
-
- -
-
-
+
+ Radio buttons +
+ +
+
+ +
+
+ +
+
+
- +
{% endexample %} @@ -330,11 +333,16 @@ Because of this, you may need to manually address the width and alignment of ind {% endexample %} +{% callout warning %} + #### Alternatives to hidden labels + Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. + {% endcallout %} + ### Using the Grid For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. -Be sure to add `.form-control-label` to your `
-
- +
+ Radios
-
-
- + +
+ Checkbox
-
+
@@ -463,17 +471,17 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes ### Without labels -Should you have no text within the `
{% endexample %} +Lists can be added to a card by adding a list group. + {% example html %}
    @@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
{% endexample %} +`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. + {% example html %}
Card image cap @@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
{% endexample %} +Card titles are used by adding `.card-title` to a `` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `` tag. + {% example html %}

Card title

@@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
{% endexample %} +Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. + +The multiple content types can easily be combined to create the card you need. See below for an example. + {% example html %}
@@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
{% endexample %} +Card headers can be styled by adding `.card-header` to `` elements. + {% example html %}

Featured

-- cgit v1.2.3 From 68975f504f02994ef29f78cc4de4b792c3f3482d Mon Sep 17 00:00:00 2001 From: Floris Verburg Date: Fri, 11 Mar 2016 14:21:15 +0100 Subject: Fixed typos --- docs/components/card.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/card.md b/docs/components/card.md index 47dfe950b..14db8f962 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -85,9 +85,9 @@ Card titles are used by adding `.card-title` to a `` tag. In the same way, l
{% endexample %} -Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. +Subtitles are used by adding a `.card-subtitle` to an `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. -The multiple content types can easily be combined to create the card you need. See below for an example. +The multiple content types can be easily combined to create the card you need. See below for an example. {% example html %}
-- cgit v1.2.3 From cc5e248aa2294fe62fee02ae272e0a57aff827b4 Mon Sep 17 00:00:00 2001 From: "Kay.L" Date: Sun, 3 Apr 2016 01:38:04 +0800 Subject: Docs: Correct arg `offsets` to `offset` in tooltips & popovers [skip sauce] --- docs/components/popovers.md | 2 +- docs/components/tooltips.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 727189083..a723f33e3 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -265,7 +265,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. - offsets + offset string '0 0' Offset of the popover relative to its target. For more information refer to Tether's offset docs. diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 204c2ddaa..fb8cb24dd 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -229,7 +229,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. - offsets + offset string '0 0' Offset of the popover relative to its target. For more information refer to Tether's offset docs. -- cgit v1.2.3 From 3165835a1bcfcc3b2046d883bf90e21ab3784c76 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 6 Apr 2016 15:06:23 -0700 Subject: Add docs for .w-100 utility class [skip sauce] --- docs/components/utilities.md | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 76bf5f9be..829ee4907 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -165,6 +165,14 @@ Sometimes contextual classes cannot be applied due to the specificity of another {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {{ callout-include | markdownify }} +## Widths + +Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`. + +{% example html %} +Width = 100% +{% endexample %} + ## Close icon Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`. -- cgit v1.2.3 From 1b3510585214824d16adac234895756ebe960e9e Mon Sep 17 00:00:00 2001 From: Teo Dell'Amico Date: Sat, 2 Apr 2016 14:11:18 -0700 Subject: Add `display` utility classes (.d-{inline,block,inline-block}); fixes #19343 Refs #19665 [skip sauce] --- docs/components/utilities.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 829ee4907..350345cff 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -173,6 +173,28 @@ Easily make an element as wide as its parent using the `.w-100` utility class, w Width = 100% {% endexample %} +## CSS `display` (`block`, `inline`, `inline-block`) + +Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively). + +To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead. + +{% example html %} +
Inline
+
Inline
+ +Block + +
+

inline-block

+ Boot that strap! +
+
+

inline-block

+ Strap that boot! +
+{% endexample %} + ## Close icon Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`. -- cgit v1.2.3 From 91627de4de94890a0517c44d5650bb7120503c26 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Apr 2016 20:58:36 -0500 Subject: fix up broke forms styles and docs example for the grid --- docs/components/forms.md | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 14921b210..ae60e66c2 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -359,25 +359,27 @@ Be sure to add `.form-control-label` to your `
-
- Radio buttons -
- -
-
- -
-
- +
+ Radios +
+
+ +
+
+ +
+
+ +
-- cgit v1.2.3 From 0a4d3155ab70526cb3f17fbc8fd381d392fc4390 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Apr 2016 21:05:23 -0500 Subject: Fixes #18573: Change name of .form-control-label to .col-form-label (and .form-control-legend to .col-form-legend) to reiterate use for only grid layouts --- docs/components/forms.md | 50 ++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 25 deletions(-) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index ae60e66c2..042796c05 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -172,79 +172,79 @@ Here are examples of `.form-control` applied to each textual HTML5 `` `ty {% example html %}
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -342,25 +342,25 @@ Because of this, you may need to manually address the width and alignment of ind For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. -Be sure to add `.form-control-label` to your `