Texto
Documentación e exemplos de utilidades de texto comúns para controlar o aliñamento, o encaixe, o peso e moito máis.
Aliñación do texto
Realiñe facilmente o texto aos compoñentes con clases de aliñamento de texto. Para o aliñamento inicial, final e central, están dispoñibles clases de resposta que usan os mesmos puntos de interrupción de ancho da vista que o sistema de grade.
Comeza o texto aliñado en todos os tamaños de vistas.
Centrar o texto aliñado en todos os tamaños de vistas.
Finaliza o texto aliñado en todos os tamaños de vistas.
Inicia o texto aliñado en visores de tamaño SM (pequeno) ou máis anchos.
Inicia o texto aliñado en visores de tamaño MD (mediano) ou máis anchos.
Inicia o texto aliñado en visores de tamaño LG (grande) ou máis anchos.
Inicia o texto aliñado en visores de tamaño XL (extragrande) ou máis anchos.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
Axuste de texto e desbordamento
Envolver o texto cunha .text-wrap
clase.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Evitar que o texto se axuste cunha .text-nowrap
clase.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Salto de palabras
Evita que as cadeas longas de texto rompan o deseño dos teus compoñentes usando .text-break
to set word-wrap: break-word
e word-break: break-word
. Usamos word-wrap
en lugar do máis común overflow-wrap
para unha compatibilidade máis ampla do navegador e engadimos o obsoleto word-break: break-word
para evitar problemas cos contedores flexibles.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
, elimínase do noso CSS compilado en RTL.
Transformación de texto
Transformar texto en compoñentes con clases de maiúsculas de texto.
Texto en minúscula.
Texto en maiúscula.
Texto en maiúscula.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Teña en conta como .text-capitalize
só cambia a primeira letra de cada palabra, deixando inalterado o caso de calquera outra letra.
Tamaño de letra
Cambia rapidamente o font-size
texto. Mentres as nosas clases de título (por exemplo, .h1
– .h6
) se aplican font-size
, font-weight
e line-height
, estas utilidades só se aplican font-size
. O tamaño destas utilidades coincide cos elementos de título de HTML, polo que a medida que aumenta o número, o seu tamaño diminúe.
.fs-1 texto
Texto .fs-2
.fs-3 texto
.fs-4 texto
Texto .fs-5
Texto .fs-6
<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>
Personaliza os teus dispoñibles font-size
modificando o $font-sizes
mapa Sass.
Peso da letra e cursiva
Cambia rapidamente o font-weight
ou font-style
do texto con estas utilidades. font-style
as utilidades abrevianse como .fst-*
e as font-weight
utilidades abrevianse como .fw-*
.
Texto en negrita.
Texto máis groso (relativo ao elemento pai).
Texto de peso normal.
Texto lixeiro.
Texto máis lixeiro (relativo ao elemento principal).
Texto en cursiva.
Texto con estilo de letra normal
<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>
Altura da liña
Cambia a altura da liña con .lh-*
utilidades.
Este é un longo parágrafo escrito para mostrar como a altura da liña dun elemento se ve afectada polas nosas utilidades. As clases aplícanse ao propio elemento ou ás veces ao elemento pai. Estas clases pódense personalizar segundo sexa necesario coa nosa API de utilidade.
Este é un longo parágrafo escrito para mostrar como a altura da liña dun elemento se ve afectada polas nosas utilidades. As clases aplícanse ao propio elemento ou ás veces ao elemento pai. Estas clases pódense personalizar segundo sexa necesario coa nosa API de utilidade.
Este é un longo parágrafo escrito para mostrar como a altura da liña dun elemento se ve afectada polas nosas utilidades. As clases aplícanse ao propio elemento ou ás veces ao elemento pai. Estas clases pódense personalizar segundo sexa necesario coa nosa API de utilidade.
Este é un longo parágrafo escrito para mostrar como a altura da liña dun elemento se ve afectada polas nosas utilidades. As clases aplícanse ao propio elemento ou ás veces ao elemento pai. Estas clases pódense personalizar segundo sexa necesario coa nosa API de utilidade.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Monoespacial
Cambia unha selección á nosa pila de fontes monoespazo con .font-monospace
.
Isto é en monoespazo
<p class="font-monospace">This is in monospace</p>
Restablecer cor
Restablece a cor dun texto ou da ligazón con .text-reset
, para que herde a cor do seu pai.
Texto silenciado cunha ligazón de restablecemento .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decoración de texto
Decorar texto en compoñentes con clases de decoración de texto.
Este texto ten unha liña debaixo.
Este texto ten unha liña que pasa por el.
Esta ligazón eliminou a súa decoración de texto<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>
Sass
Variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
Mapas
A partir deste mapa xéranse utilidades de tamaño de fonte, en combinación coa nosa API de utilidades.
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
API de utilidades
As utilidades de fonte e texto decláranse na nosa API de utilidades en scss/_utilities.scss
. Aprende a usar a API de utilidades.
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),