تېكىست

توغرىلاش ، ئوراش ، ئېغىرلىق ۋە باشقىلارنى كونترول قىلىدىغان ئورتاق تېكىست قوراللىرىنىڭ ھۆججەتلىرى ۋە مىساللىرى.

بۇ بەتتە

تېكىستنى توغرىلاش

تېكىستنى ماسلاشتۇرۇش دەرسلىكى بار زاپچاسلارغا ئاسانلا قايتا يېزىڭ. باشلاش ، ئاخىرلاشتۇرۇش ۋە مەركەزنى توغرىلاش ئۈچۈن ، تور سىستېمىسىغا ئوخشاش كۆرۈنۈش كەڭلىكى بۆلىكىنى ئىشلىتىدىغان ئىنكاسچان دەرسلەر بار.

بارلىق كۆرۈنۈش چوڭلۇقىدىكى توغرىلانغان تېكىستنى باشلاڭ.

مەركىزى بارلىق كۆرۈنۈش چوڭلۇقىدىكى تېكىستنى توغرىلىدى.

بارلىق كۆرۈنۈش چوڭلۇقىدىكى توغرىلانغان تېكىستنى ئاخىرلاشتۇرۇڭ.

چوڭلۇقتىكى 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-breakبىزنىڭ RTL تۈزگەن CSS دىن چىقىرىۋېتىلدى.

تېكىست ئۆزگەرتىش

تېكىستنى چوڭ يېزىلغان دەرسلەر بىلەن زاپچاسلارغا ئۆزگەرتىڭ.

كىچىك يېزىلغان تېكىست.

چوڭ يېزىلغان تېكىست.

CapiTaliZed تېكىست.

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، بۇ ئىقتىدارلار پەقەت قوللىنىلىدۇ . بۇ ئىقتىدارلارنىڭ رازمېرى HTML نىڭ ماۋزۇ ئېلېمېنتلىرىغا ماس كېلىدۇ ، شۇڭا ساننىڭ ئېشىشىغا ئەگىشىپ ، ئۇلارنىڭ ھەجىمى كىچىكلەيدۇ.font-weightline-heightfont-size

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

Monospace

تاللاشنى بىزنىڭ ئالەم بوشلۇقى خەت شەكلىگە ئۆزگەرتىڭ .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>

Sass

ئۆزگەرگۈچى مىقدار

// 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
    ),