Téacs
Doiciméadú agus samplaí d'fhóntais téacs coitianta chun ailíniú, beartú, meáchan agus go leor eile a rialú.
Ailíniú téacs
Téacs a athailíniú go héasca le comhpháirteanna le ranganna ailínithe téacs. Ar mhaithe le ailíniú tosaigh, deiridh agus lárionad, tá ranganna sofhreagracha ar fáil a úsáideann na brisphointí céanna leithead an amhairc agus an córas eangaí.
Cuir tús le téacs ailínithe ar gach méid amhairc.
Téacs ailínithe lárnaigh ar gach méid amhairc.
Cuir deireadh le téacs ailínithe ar gach méid amhairc.
Cuir tús le téacs ailínithe ar amhairc SM (beag) nó níos leithne.
Cuir tús le téacs ailínithe ar phoirt amhairc MD (meánmhéide) nó níos leithne.
Cuir tús le téacs ailínithe ar amhairc ar mhéid LG (mór) nó níos leithne.
Cuir tús le téacs ailínithe ar phoirt amhairc ar mhéid XL (ró-mhór) nó níos leithne.
<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>
Cumhdach téacs agus cur thar maoil
Wrap téacs le .text-wrap
rang.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Cosc a chur ar théacs a fhilleadh le .text-nowrap
rang.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Briseadh focal
Cosc a chur ar shraitheanna fada téacs ó leagan amach do chomhpháirteanna a bhriseadh trí úsáid .text-break
a bhaint as leagan síos word-wrap: break-word
agus word-break: break-word
. Bainimid úsáid word-wrap
in ionad an ceann is coitianta overflow-wrap
le haghaidh tacaíochta brabhsálaí níos leithne, agus cuirimid an dímheasta word-break: break-word
chun saincheisteanna le coimeádáin flex a sheachaint.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
baintear é ónár CSS atá tiomsaithe ag RTL.
Téacs a athrú
Téacs a athrú ina chomhpháirteanna le ranganna caipitlithe téacs.
Téacs i gcás íochtair.
Téacs chás uachtair.
Téacs CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Tabhair faoi deara .text-capitalize
nach n-athraíonn ach an chéad litir de gach focal, ag fágáil cás na litreacha eile gan tionchar.
Méid cló
font-size
Athraigh an téacs go tapa . Cé go mbaineann ár ranganna ceannteidil (m.sh., .h1
– .h6
) font-size
, font-weight
, agus , ní bhaineann line-height
na fóntais seo achfont-size
le . Tá méid na bhfóntas seo ag teacht le heilimintí ceannteidil HTML, agus mar sin de réir mar a mhéadaíonn an líon, laghdaítear a méid.
.fs-1 téacs
.fs-2 téacs
.fs-3 téacs
.fs-4 téacs
.fs-5 téacs
.fs-6 téacs
<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>
Saincheap na s atá ar fáil agat trí léarscáil Sass font-size
a mhodhnú .$font-sizes
Meáchan cló agus iodálach
font-weight
Déan an téacs nó an téacs a athrú go tapa font-style
leis na fóntais seo. font-style
déantar fóntais a ghiorrú mar .fst-*
agus font-weight
déantar fóntais a ghiorrú mar .fw-*
.
Téacs trom.
Téacs meáchain níos dána (i gcoibhneas leis an máthaireilimint).
Téacs meáchan gnáth.
Téacs meáchan éadrom.
Téacs meáchan níos éadroime (i gcomparáid leis an máthaireilimint).
Téacs iodálach.
Téacs le gnáth-stíl cló
<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>
Airde líne
Athraigh an airde líne le .lh-*
fóntais.
Is alt fada é seo a scríobhtar chun a thaispeáint conas a théann ár bhfóntais i bhfeidhm ar airde líne dúile. Cuirtear ranganna i bhfeidhm ar an eilimint féin nó uaireanta ar an eilimint tuismitheora. Is féidir na ranganna seo a shaincheapadh de réir mar is gá lenár n-API fóntais.
Is alt fada é seo a scríobhtar chun a thaispeáint conas a théann ár bhfóntais i bhfeidhm ar airde líne dúile. Cuirtear ranganna i bhfeidhm ar an eilimint féin nó uaireanta ar an eilimint tuismitheora. Is féidir na ranganna seo a shaincheapadh de réir mar is gá lenár n-API fóntais.
Is alt fada é seo a scríobhtar chun a thaispeáint conas a théann ár bhfóntais i bhfeidhm ar airde líne dúile. Cuirtear ranganna i bhfeidhm ar an eilimint féin nó uaireanta ar an eilimint tuismitheora. Is féidir na ranganna seo a shaincheapadh de réir mar is gá lenár n-API fóntais.
Is alt fada é seo a scríobhtar chun a thaispeáint conas a théann ár bhfóntais i bhfeidhm ar airde líne dúile. Cuirtear ranganna i bhfeidhm ar an eilimint féin nó uaireanta ar an eilimint tuismitheora. Is féidir na ranganna seo a shaincheapadh de réir mar is gá lenár n-API fóntais.
<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>
Monaspás
Athraigh rogha chuig ár gcruach clónna monaspáis le .font-monospace
.
Tá sé seo i monaspás
<p class="font-monospace">This is in monospace</p>
Athshocraigh dath
Athshocraigh dath téacs nó nasc le .text-reset
, ionas go bhfaighidh sé an dath le hoidhreacht óna thuismitheoir.
Téacs balbhaithe le nasc athshocraithe .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Maisiú téacs
Téacs a mhaisiú i gcomhpháirteanna le ranganna maisiúcháin téacs.
<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
Athróga
// 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;
Léarscáileanna
Gintear fóntais clómhéid ón léarscáil seo, in éineacht lenár n-API fóntais.
$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
);
Utilities API
Déantar fóntais chló agus téacs a dhearbhú inár n-API fóntais i scss/_utilities.scss
. Foghlaim conas an API fóntais a úsáid.
"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
),