Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

النص (Text)

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

في هذه الصفحة

محاذاة النص (alignment)

قم بإعادة محاذاة النص بسهولة في المكونات باستخدام فئات (classes) محاذاة النص. بالنسبة لمحاذاة البداية والنهاية والمركز، تتوفر فئات (classes) متوافقة مع الشاشات (Responsive) تستخدم نفس نقاط التوقف لعرض نافذة العرض (viewport width breakpoints) كما في نظام الشبكة.

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized XXL (extra extra large) or wider.

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-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>

لاحظ أننا لا نوفر فئات (classes) مساعدة للنص المضبوط (justified text). فعلى الرغم من أن النص المضبوط قد يبدو أكثر جاذبية من الناحية الجمالية، إلا أنه يجعل التباعد بين الكلمات أكثر عشوائية، وبالتالي أكثر صعوبة في القراءة.

التفاف النص والتجاوز

اجعل النص يلتف باستخدام الفئة (class) .text-wrap.

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

امنع التفاف النص باستخدام الفئة (class) .text-nowrap.

This text should overflow the parent.
html 
<div class="text-nowrap bg-body-secondary 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.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html 
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

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

تحويل النص

قم بتحويل النص في المكونات باستخدام فئات (classes) تحويل حالة الأحرف: text-lowercase أو text-uppercase أو text-capitalize.

Lowercased text.

Uppercased text.

CapiTaliZed text.

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 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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 المتاحة لديك عن طريق تعديل خريطة (map) الـ Sass المسماة $font-sizes.

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

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

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

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-medium">Medium 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>

ارتفاع السطر (Line height)

قم بتغيير ارتفاع السطر باستخدام أدوات .lh-*.

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.

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.

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.

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.

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.

This is in monospace

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

إعادة تعيين اللون (Reset color)

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

Secondary body text with a reset link.

html 
<p class="text-body-secondary">
  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>

زخرفة النص (Text decoration)

قم بزخرفة النص في المكونات باستخدام فئات (classes) زخرفة النص.

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed
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>

الـ (CSS)

متغيرات الـ (Sass)

متغيرات الـ Sass الافتراضية المتعلقة بالنوع والخط:

scss/_variables.scss 
// 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-medium:          500;
$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;

خرائط الـ (Sass maps)

يتم إنشاء أدوات حجم الخط من هذه الخريطة (map)، بالاشتراك مع الـ API الخاص بالأدوات لدينا.

scss/_variables.scss 
$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/_maps.scss 
$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات الخط والنصوص في الـ API الخاص بالأدوات لدينا في scss/_utilities.scss. تعلم كيفية استخدام الـ API الخاص بالأدوات.

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: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    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
),