kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Change deprecated html tags to text decoration classes (#29604)

Browse source
This commit is contained in:
Matthieu Vignolle 2019-11-27 07:43:49 +01:00 committed by XhmikosR
parent 1977a661e6
commit 4de4874e72
3 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scss/_utilities.scss
View file

@ -426,7 +426,7 @@ $utilities: map-merge(
), ),
"text-decoration": ( "text-decoration": (
property: text-decoration, property: text-decoration,
values: none values: none underline line-through
), ),
"font-style": ( "font-style": (
property: font-style, property: font-style,

18
site/content/docs/4.3/content/typography.md
View file

@ -143,13 +143,25 @@ Styling for common inline HTML5 elements.
<p><em>This line rendered as italicized text.</em></p> <p><em>This line rendered as italicized text.</em></p>
{{< /example >}} {{< /example >}}
`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring. Beware that those tags should be used for semantic purpose:
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc. * `<mark>` represents text which is marked or highlighted for reference or notation purposes.
* `<small>` represents side-comments and small print, like copyright and legal text.
* `<s>` represents element that are no longer relevant or no longer accurate.
* `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
If you want to style your text, you should use the following classes instead:
* `.mark` will apply the same styles as `<mark>`.
* `.small` will apply the same styles as `<small>`.
* `.text-decoration-underline` will apply the same styles as `<u>`.
* `.text-decoration-line-through` will apply the same styles as `<s>`.
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
## Text utilities ## Text utilities
Change text alignment, transform, style, weight, line-height and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}). Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
## Abbreviations ## Abbreviations

6
site/content/docs/4.3/utilities/text.md
View file

@ -109,8 +109,10 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
## Text decoration ## Text decoration
Remove a text decoration with a `.text-decoration-none` class. Decorate text in components with text decoration classes.
{{< example >}} {{< example >}}
<a href="#" class="text-decoration-none">Non-underlined link</a> <p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
{{< /example >}} {{< /example >}}