ਟੈਕਸਟ

ਅਲਾਈਨਮੈਂਟ, ਰੈਪਿੰਗ, ਭਾਰ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਆਮ ਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਣ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ

ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੀਲਾਈਨ ਕਰੋ। ਸ਼ੁਰੂਆਤ, ਅੰਤ ਅਤੇ ਕੇਂਦਰ ਅਲਾਈਨਮੈਂਟ ਲਈ, ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਉਪਲਬਧ ਹਨ ਜੋ ਗਰਿੱਡ ਸਿਸਟਮ ਵਾਂਗ ਹੀ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ।

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਇਕਸਾਰ ਟੈਕਸਟ ਸ਼ੁਰੂ ਕਰੋ।

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਕੇਂਦਰ ਵਿੱਚ ਇਕਸਾਰ ਟੈਕਸਟ।

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਇਕਸਾਰ ਟੈਕਸਟ ਨੂੰ ਸਮਾਪਤ ਕਰੋ।

ਵਿਊਪੋਰਟ ਦੇ ਆਕਾਰ ਦੇ 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>

Sass ਨਕਸ਼ੇ ਨੂੰ ਸੋਧ ਕੇ ਆਪਣੇ ਉਪਲਬਧ font-sizes ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।$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
    ),