ტექსტი

დოკუმენტაცია და მაგალითები ჩვეულებრივი ტექსტური საშუალებებისთვის, რათა გააკონტროლონ გასწორება, შეფუთვა, წონა და სხვა.

ამ გვერდზე

ტექსტის გასწორება

ადვილად გადაასწორეთ ტექსტი კომპონენტებთან ტექსტის გასწორების კლასებით. დასაწყისის, დასასრულისა და ცენტრის გასწორებისთვის ხელმისაწვდომია საპასუხო კლასები, რომლებიც იყენებენ იმავე ხედის სიგანის წყვეტებს, როგორც ბადის სისტემა.

გასწორებული ტექსტის დაწყება ყველა ხედის ზომაზე.

ცენტრში გასწორებული ტექსტი ყველა ხედის ზომაზე.

დაასრულეთ გასწორებული ტექსტი ხედის პორტის ყველა ზომაზე.

გასწორებული ტექსტის დაწყება 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-wrapფართო ბრაუზერის მხარდაჭერისთვის და ვამატებთ მოძველებულს word-break: break-word, რათა თავიდან ავიცილოთ პრობლემები flex კონტეინერებთან.

მმმმმმმმმმმმმმმმმმმმ...

html

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

გაითვალისწინეთ, რომ სიტყვების გატეხვა შეუძლებელია არაბულში , რომელიც ყველაზე ხშირად გამოყენებული RTL ენაა. ამიტომ .text-breakამოღებულია ჩვენი RTL შედგენილი 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>

შეცვალეთ თქვენი ხელმისაწვდომი s Sass რუქის font-sizeშეცვლით .$font-sizes

შრიფტის წონა და დახრილი

სწრაფად შეცვალეთ ტექსტის font-weightან font-styleტექსტის ამ კომუნალური საშუალებებით. font-styleUtilities შემოკლებულია როგორც .fst-*და font-weightUtilities შემოკლებულია როგორც .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>

სას

ცვლადები

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

რუკები

შრიფტის ზომის უტილიტები გენერირდება ამ რუკიდან, ჩვენს Utilities 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

შრიფტისა და ტექსტის უტილიტები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities 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
    ),