diff options
| author | ysds <ysds.code@gmail.com> | 2019-04-26 21:26:10 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-04-30 10:45:05 +0300 |
| commit | a454ea7cf7167957601b7f9bbac1da7728186d24 (patch) | |
| tree | feec5e8dd61068d619e238cb587a97587a0d517e /site | |
| parent | 99eff2f58f178c438913d316512587facf308b38 (diff) | |
Change custom file markup
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/4.3/components/forms.md | 43 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/input-group.md | 20 |
2 files changed, 24 insertions, 39 deletions
diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md index 767531c147..e48f5bc12d 100644 --- a/site/content/docs/4.3/components/forms.md +++ b/site/content/docs/4.3/components/forms.md @@ -1011,7 +1011,10 @@ Validation styles are available for the following form controls and components: <div class="custom-file"> <input type="file" class="custom-file-input" id="validatedCustomFile" required> - <label class="custom-file-label" for="validatedCustomFile">Choose file...</label> + <label class="custom-file-label" for="validatedCustomFile"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> <div class="invalid-feedback">Example invalid custom file feedback</div> </div> </form> @@ -1293,41 +1296,11 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip {{< example >}} <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> - <label class="custom-file-label" for="customFile">Choose file</label> + <label class="custom-file-label" for="customFile"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> </div> {{< /example >}} We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content. - -#### Translating or customizing the strings with SCSS - -The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass 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: ( - en: "Browse", - es: "Elegir" -); -{{< /highlight >}} - -Here's `lang(es)` in action on the custom file input for a Spanish translation: - -{{< example >}} -<div class="custom-file"> - <input type="file" class="custom-file-input" id="customFileLang" lang="es"> - <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label> -</div> -{{< /example >}} - -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) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods. - -#### Translating or customizing the strings with HTML - -Bootstrap also provides a way to translate the "Browse" text in HTML with the `data-browse` attribute which can be added to the custom input label (example in Dutch): - -{{< example >}} -<div class="custom-file"> - <input type="file" class="custom-file-input" id="customFileLangHTML"> - <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label> -</div> -{{< /example >}} diff --git a/site/content/docs/4.3/components/input-group.md b/site/content/docs/4.3/components/input-group.md index 1af67621b1..bf6a6f022e 100644 --- a/site/content/docs/4.3/components/input-group.md +++ b/site/content/docs/4.3/components/input-group.md @@ -322,14 +322,20 @@ Input groups include support for custom selects and custom file inputs. Browser </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> - <label class="custom-file-label" for="inputGroupFile01">Choose file</label> + <label class="custom-file-label" for="inputGroupFile01"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile02"> - <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label> + <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> </div> <div class="input-group-append"> <span class="input-group-text" id="inputGroupFileAddon02">Upload</span> @@ -342,14 +348,20 @@ Input groups include support for custom selects and custom file inputs. Browser </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"> - <label class="custom-file-label" for="inputGroupFile03">Choose file</label> + <label class="custom-file-label" for="inputGroupFile03"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> </div> </div> <div class="input-group"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"> - <label class="custom-file-label" for="inputGroupFile04">Choose file</label> + <label class="custom-file-label" for="inputGroupFile04"> + <span class="custom-file-text">Choose file...</span> + <span class="custom-file-button">Browse</span> + </label> </div> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> |