mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

v5: Add .fs-* utilities for font-size and rename font-weight/-style utilities (#30571)

Browse Source 
* v5: Add .fs-* utilities for font-size

- Adds new font-sizes Sass map
- Generates six new classes for setting only font-size
- Updates docs to mention this, including a scss-docs reference

* Update font utilities

- Make .fs-* utils for font-size use RFS
- Rename .font-weight-* utils to .fw-*
- Rename .font-style-* utils to .f-*
- Update order of utilities a bit
- Update docs to match

* Update migration docs to make note of these changes

* Be more specific in font-size docs about scale

* Update font-style abbreviation to .fst

* Fix font-weight property

* Formatting & font style utility fix

* Move to Alpha 3 migration section

* Update migration guide for more details, splitting alpha 2 stuff back to the appropriate section in Migration guide

* Tweak language on example

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
This commit is contained in:
Mark Otto
2020-10-26 16:42:07 -07:00
committed by GitHub
parent 6df0cfecd1
commit e5fa708491
4 changed files with 68 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/utilities/text.md
+26 -9
View File
@@ -63,18 +63,35 @@ Transform text in components with text capitalization classes.
Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
## Font weight and italics
## Font size
Quickly change the weight (boldness) of text or italicize text.
Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
{{< example >}}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
<p class="font-normal">Text without font style</p>
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
{{< /example >}}
Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
## Font weight and italics
Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
{{< example >}}
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
{{< /example >}}
## Line height