نص

وثائق وأمثلة لأدوات مساعدة نصية شائعة للتحكم في المحاذاة والالتفاف والوزن وغير ذلك.

على هذه الصفحة

محاذاة النص

إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص. بالنسبة إلى محاذاة البداية والنهاية والوسط ، تتوفر الفئات المستجيبة التي تستخدم نفس نقاط توقف عرض منفذ العرض مثل نظام الشبكة.

ابدأ نصًا محاذيًا لجميع أحجام منفذ العرض.

نص بمحاذاة الوسط في جميع أحجام منفذ العرض.

نص بمحاذاة النهاية في جميع أحجام منفذ العرض.

ابدأ نصًا محاذيًا على إطار العرض بحجم SM (صغير) أو أوسع.

ابدأ النص المحاذي على إطار العرض بحجم MD (متوسط) أو أوسع.

ابدأ نصًا محاذيًا على إطارات العرض بحجم LG (كبير) أو أوسع.

ابدأ نصًا محاذيًا على إطارات العرض بحجم XL (كبير جدًا) أو أعرض.

لغة البرمجة

<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الفصل.

يجب أن يلتف هذا النص.

لغة البرمجة

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

منع النص من الالتفاف مع .text-nowrapالفصل.

يجب أن يتجاوز هذا النص الأصل.

لغة البرمجة

<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لتجنب مشاكل الحاويات المرنة.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

لغة البرمجة

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

لاحظ أن كسر الكلمات غير ممكن في اللغة العربية ، وهي أكثر لغات RTL استخدامًا. لذلك .text-breakتمت إزالته من CSS المجمعة من RTL.

تحويل النص

تحويل النص في المكونات بفئات الكتابة بالأحرف الكبيرة للنص.

نص صغير.

نص مكتوب بحروف كبيرة.

نص CapiTaliZed.

لغة البرمجة

<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

لغة البرمجة

<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خريطة Sass.

وزن الخط ومائل

قم بتغيير النص font-weightأو font-styleالنص بسرعة باستخدام هذه الأدوات المساعدة. font-styleيتم اختصار الأدوات المساعدة كما .fst-*يتم font-weightاختصار الأدوات المساعدة كـ .fw-*.

نص عريض.

نص وزن أكثر جرأة (بالنسبة للعنصر الأصل).

نص وزن نصف غامق.

نص الوزن الطبيعي.

نص خفيف الوزن.

نص ذو وزن أخف (بالنسبة للعنصر الأصل).

نص مائل.

نص بنمط خط عادي

لغة البرمجة

<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-*الأدوات المساعدة.

هذه فقرة طويلة مكتوبة لإظهار كيف يتأثر ارتفاع سطر العنصر بأدواتنا المساعدة. يتم تطبيق الفئات على العنصر نفسه أو في بعض الأحيان على العنصر الأصل. يمكن تخصيص هذه الفئات حسب الحاجة باستخدام واجهة برمجة التطبيقات الخاصة بنا.

لغة البرمجة

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

هذا في monospace

لغة البرمجة

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

إعادة تعيين اللون

قم بإعادة تعيين لون النص أو الارتباط باستخدام .text-reset، بحيث يرث اللون من الأصل.

نص مكتوم مع رابط إعادة التعيين .

لغة البرمجة

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

زخرفة النص

تزيين النص في مكونات بفصول زخرفة النص.

هذا النص يحتوي على سطر تحته.

هذا النص يحتوي على سطر يمر به.

تمت إزالة زخرفة النص الخاص بهذا الرابط

لغة البرمجة

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

خرائط

يتم إنشاء أدوات حجم الخط من هذه الخريطة ، إلى جانب واجهة برمجة تطبيقات الأدوات المساعدة الخاصة بنا.

$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
);

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات المساعدة للخطوط والنصوص في واجهة برمجة تطبيقات الأدوات المساعدة لدينا بتنسيق scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

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