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 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 c25556e91887f69533580394942d01f18c84d5a0 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 19 Feb 2016 14:57:26 +0000 Subject: Appropriate use of fieldset/div, legend, callout for hidden/no label alternatives --- docs/components/forms.md | 94 ++++++++++++++++++++++++++---------------------- 1 file changed, 51 insertions(+), 43 deletions(-) (limited to 'docs/components/forms.md') diff --git a/docs/components/forms.md b/docs/components/forms.md index ef56a9e89..3b1286096 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a ` {% example html %}
-
+
We'll never share your email with anyone else. -
-
+ +
-
-
+ +
-
-
+ +
-
-
+ +
-
-
+ +
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 `