Мәтін

Түзетуді, орауды, салмақты және т.б. басқаруға арналған жалпы мәтіндік утилиталарға арналған құжаттар мен мысалдар.

Бұл бетте

Мәтінді туралау

Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз. Бастау, аяқтау және ортасына туралау үшін тор жүйесі сияқты бірдей көру алаңының енінің тоқтау нүктелерін пайдаланатын жауап беретін сыныптар қол жетімді.

Барлық көрініс өлшемдерінде тураланған мәтінді бастаңыз.

Барлық көріністер өлшемдерінде ортаға тураланған мәтін.

Барлық көрініс өлшемдерінде тураланған мәтінді аяқтаңыз.

SM (кіші) немесе кеңірек өлшемді қарау порттарында тураланған мәтінді бастаңыз.

MD (орташа) немесе кеңірек өлшемді көру порттарында тураланған мәтінді бастаңыз.

LG (үлкен) немесе кеңірек өлшемді көру порттарында тураланған мәтінді бастаңыз.

XL (өте үлкен) немесе кеңірек өлшемді көру порттарында тураланған мәтінді бастаңыз.

html

<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>

Негізделген мәтін үшін утилита сыныптарын ұсынбайтынымызды ескеріңіз. Эстетикалық тұрғыдан негізделген мәтін неғұрлым тартымды көрінуі мүмкін, бірақ ол сөз аралығын кездейсоқ етеді, сондықтан оқуды қиындатады.

Мәтінді орау және толтыру

Мәтінді .text-wrapсыныппен орау.

Бұл мәтінді орау керек.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Мәтіннің .text-nowrapсыныппен оралуына жол бермеу.

Бұл мәтін ата-анадан асып кетуі керек.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Сөз үзілуі

.text-breakОрнату үшін word-wrap: break-wordжәне түймелерін пайдаланып, мәтіннің ұзын жолдарының құрамдастардың орналасуын бұзуына жол бермеңіз word-break: break-word. Біз кеңірек шолғышты қолдау үшін кең word-wrapтаралғанның орнына қолданамыз және икемді контейнерлерге қатысты мәселелерді болдырмау үшін ескіргенін қосамыз.overflow-wrapword-break: break-word

ммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Ең көп қолданылатын RTL тілі болып табылатын араб тілінде сөздерді бұзу мүмкін емес екенін ескеріңіз . Сондықтан .text-breakRTL құрастырылған CSS-тен жойылды.

Мәтінді түрлендіру

Мәтінді бас әріппен жазу кластары бар компоненттердегі мәтінді түрлендіру.

Кіші әріппен жазылған мәтін.

Бас әріппен жазылған мәтін.

Бастапқы мәтін.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Әрбір сөздің бірінші әрпін қалай өзгертетініне назар аударыңыз, .text-capitalizeбасқа әріптердің регистрін өзгертпей қалдырыңыз.

Қаріп өлшемі

font-sizeМәтінді жылдам өзгерту . Біздің тақырыптық сыныптарымыз (мысалы, .h1– .h6) , , және , қолданылғанымен font-size, font-weightбұл line-heightутилиталар тек қолданылады font-size. Бұл утилиталардың өлшемдері HTML тақырыбының элементтеріне сәйкес келеді, сондықтан саны артқан сайын олардың өлшемі кішірейеді.

.fs-1 мәтіні

.fs-2 мәтіні

.fs-3 мәтіні

.fs-4 мәтіні

.fs-5 мәтіні

.fs-6 мәтіні

html

<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>

Sass картасын font-sizeөзгерту арқылы қол жетімді мүмкіндіктерді теңшеңіз .$font-sizes

Қаріптің салмағы және курсив

Осы утилиталардың көмегімен мәтінді font-weightнемесе мәтінді жылдам өзгертіңіз . утилиталар қысқартылған, ал утилиталар қысқартылған түрде .font-stylefont-style.fst-*font-weight.fw-*

Қалың мәтін.

Қалыңырақ мәтін (негізгі элементке қатысты).

Жартылай қалың салмақ мәтіні.

Қалыпты салмақ мәтіні.

Жеңіл мәтін.

Жеңілірек мәтін (негізгі элементке қатысты).

Көлбеу мәтін.

Қалыпты қаріп стилі бар мәтін

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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>

Сызық биіктігі

Утилиталардың көмегімен сызық биіктігін өзгертіңіз .lh-*.

Бұл біздің утилиталарымыз элементтің жол биіктігіне қалай әсер ететінін көрсету үшін жазылған ұзын абзац. Сыныптар элементтің өзіне немесе кейде тектік элементке қолданылады. Бұл сыныптарды қажетінше API қызметтік бағдарламамызбен теңшеуге болады.

html

<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>

Моноғарыш

Таңдауды біздің монокеңістік қаріптер стекке ауыстырыңыз .font-monospace.

Бұл монокеңістікте

html

<p class="font-monospace">This is in monospace</p>

Түсті қалпына келтіру

.text-resetТүсті ата-анасынан иеленуі үшін мәтін немесе сілтеме түсін қалпына келтіріңіз .

Қайта орнату сілтемесі бар дыбысы өшірілген мәтін .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Мәтінді безендіру

Мәтінді безендіру кластары бар компоненттердегі мәтінді безендіру.

Бұл мәтіннің астында сызық бар.

Бұл мәтінде жол бар.

Бұл сілтеменің мәтіндік безендіруі жойылған

html

<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>

Сасс

Айнымалылар

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$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-semibold:        600;
$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;

Карталар

Қаріп өлшеміндегі утилиталар осы картадан API утилиталарымен бірге жасалады.

$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

Қаріп пен мәтіндік утилиталар біздің API утилиталарында жарияланған scss/_utilities.scss. API утилиталарын қалай пайдалану керектігін біліңіз.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$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,
        semibold: $font-weight-semibold,
        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
    ),