mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +02:00
Code Issues Releases Wiki Activity

Add example of a Spanish translation for custom file input (#25302)

Browse Source
This commit is contained in:
Mark Otto
2018-01-14 23:19:12 -08:00
committed by XhmikosR
parent 14bd7d7489
commit fa3de5cbd8
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/_component-examples.scss
View File

@@ -147,6 +147,10 @@
} }
} }
.custom-file-input:lang(es) ~ .custom-file-label::after {
content: "Elegir";
}
> .form-control { > .form-control {
+ .form-control { + .form-control {
margin-top: .5rem; margin-top: .5rem;

11
docs/4.0/components/forms.md
View File

@@ -1162,8 +1162,17 @@ The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:l
{% highlight scss %} {% highlight scss %}
$custom-file-text: ( $custom-file-text: (
en: "Browse", en: "Browse",
es: "Navegar" es: "Elegir"
); );
{% endhighlight %} {% endhighlight %}
Here's `lang(es)` in action on the custom file input for a Spanish translation:
{% example html %}
<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>
{% endexample %}
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. 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.