ಪಠ್ಯ

ಜೋಡಣೆ, ಸುತ್ತುವಿಕೆ, ತೂಕ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ನಿಯಂತ್ರಿಸಲು ಸಾಮಾನ್ಯ ಪಠ್ಯ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ದಾಖಲಾತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳು.

ಈ ಪುಟದಲ್ಲಿ

ಪಠ್ಯ ಜೋಡಣೆ

ಪಠ್ಯ ಜೋಡಣೆ ತರಗತಿಗಳೊಂದಿಗೆ ಘಟಕಗಳಿಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಮರುಹೊಂದಿಸಿ. ಪ್ರಾರಂಭ, ಅಂತ್ಯ ಮತ್ತು ಮಧ್ಯದ ಜೋಡಣೆಗಾಗಿ, ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಂತೆ ಅದೇ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬಳಸುವ ರೆಸ್ಪಾನ್ಸಿವ್ ತರಗತಿಗಳು ಲಭ್ಯವಿದೆ.

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಜೋಡಿಸಲಾದ ಪಠ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಿ.

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪಠ್ಯವನ್ನು ಮಧ್ಯಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಜೋಡಿಸಲಾದ ಪಠ್ಯವನ್ನು ಕೊನೆಗೊಳಿಸಿ.

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

ಸಾಸ್ ನಕ್ಷೆಯನ್ನು 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
);

ಉಪಯುಕ್ತತೆಗಳ 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
    ),