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/forms.md') 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 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/forms.md') 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 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/forms.md') 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/forms.md') 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 `