تنسيق النصوص (Typography)

مستندات وأمثلة لـ Typography الخاصة بـ Bootstrap، بما في ذلك الإعدادات العامة، والعناوين، ونصوص الجسم، والقوائم، والمزيد.

في هذه الصفحة

الإعدادات العامة

تضع الـ Bootstrap إعدادات العرض العامة الأساسية، والطباعة، وأنماط الروابط. عندما تكون هناك حاجة لمزيد من التحكم، تحقق من فئات الأدوات النصية.

استخدم مجموعة الخطوط الأصلية التي تختار أفضل font-family لكل نظام تشغيل وجهاز.
من أجل مقياس نوع أكثر شمولاً وسهولة في الوصول، نستخدم حجم الخط الأساسي الافتراضي للمتصفح font-size (عادةً 16 بكسل) حتى يتمكن الزوار من تخصيص إعدادات متصفحهم الافتراضية حسب الحاجة.
استخدم سمات $font-family-base و $font-size-base و $line-height-base كقاعدة طباعية مطبقة على الـ <body>.
قم بتعيين لون الرابط العام عبر $link-color.
استخدم $body-bg لتعيين background-color على الـ <body> (#fff بشكل افتراضي).

يمكن العثور على هذه الأنماط داخل _reboot.scss، ويتم تعريف المتغيرات العامة في _variables.scss. تأكد من ضبط $font-size-base بوحدة rem.

العناوين (Headings)

جميع عناوين HTML، من <h1> إلى <h6>، متاحة.

العنوان	مثال
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

الفئات .h1 إلى .h6 متاحة أيضاً، وذلك عندما تريد مطابقة تنسيق الخط الخاص بالعنوان ولكن لا يمكنك استخدام عنصر HTML المرتبط به.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

html

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

تخصيص/تعديل العناوين (headings)

استخدم فئات الأدوات المضمنة لإعادة إنشاء نص العنوان الثانوي الصغير من Bootstrap 3.

Fancy display heading With faded secondary text

html

<h3>
  Fancy display heading
  <small class="text-body-secondary">With faded secondary text</small>
</h3>

عناوين العرض (Display headings)

تم تصميم عناصر العناوين التقليدية لتعمل بشكل أفضل في صلب محتوى صفحتك. عندما تحتاج إلى عنوان ليكون بارزاً، فكر في استخدام عنوان عرض (display heading) — وهو نمط عنوان أكبر وأكثر تحديداً.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

يتم تكوين عناوين العرض عبر خريطة (map) الـ Sass المسماة $display-font-sizes ومتغيرين، $display-font-weight و $display-line-height.

عناوين العرض قابلة للتخصيص عبر متغيرين، $display-font-family و $display-font-style.

scss/_variables.scss

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

النص الاستهلالي (Lead)

اجعل الفقرة تبرز عن طريق إضافة الفئة .lead.

This is a lead paragraph. It stands out from regular paragraphs.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

عناصر النص المضمنة

تنسيقات لعناصر الـ HTML5 المضمنة الشائعة.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

احذر من أن هذه الوسوم يجب أن تُستخدم لأغراض دلالية:

 يمثل نصاً تم تمييزه أو تسليط الضوء عليه لأغراض المرجعية أو الملاحظات.
 يمثل التعليقات الجانبية والنصوص الصغيرة، مثل حقوق الطبع والنشر والنصوص القانونية.
<s> يمثل عنصراً لم يعد ذا صلة أو لم يعد دقيقاً.
 يمثل نطاقاً من النص المضمن الذي يجب تقديمه بطريقة تشير إلى أنه يحتوي على تعليق توضيحي غير نصي.

إذا كنت تريد تنسيق نصك، فيجب عليك استخدام الفئات التالية بدلاً من ذلك:

.mark ستطبق نفس أنماط .
.small ستطبق نفس أنماط .
.text-decoration-underline ستطبق نفس أنماط .
.text-decoration-line-through ستطبق نفس أنماط <s>.

على الرغم من عدم عرضها أعلاه، فلا تتردد في استخدام  و  في HTML5. يُستخدم  لتسليط الضوء على كلمات أو عبارات دون نقل أهمية إضافية، بينما يُستخدم  غالباً للصوت، والمصطلحات التقنية، وما إلى ذلك.

أدوات النص

قم بتغيير محاذاة النص، والتحويل، والنمط، والوزن، وارتفاع السطر، والزخرفة، واللون باستخدام أدوات النص و أدوات الألوان.

الاختصارات

تنفيذ منسق لعنصر <abbr> في HTML للاختصارات والأسماء المختصرة لإظهار النسخة الموسعة عند التمرير. تحتوي الاختصارات على خط سفلي افتراضي وتكتسب مؤشر مساعدة لتوفير سياق إضافي عند التمرير ولمستخدمي التقنيات المساعدة.

أضف الفئة .initialism إلى الاختصار للحصول على حجم خط أصغر قليلاً.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

الاقتباسات (Blockquotes)

لاقتباس كتل من المحتوى من مصدر آخر داخل مستندك. قم بتغليف أي HTML كاقتباس باستخدام <blockquote class="blockquote">.

A well-known quote, contained in a blockquote element.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

تسمية المصدر

تتطلب مواصفات HTML وضع إسناد الاقتباس خارج عنصر <blockquote>. عند تقديم الإسناد، قم بتغليف <blockquote> الخاص بك داخل <figure> واستخدم <figcaption> أو عنصراً على مستوى الكتلة (مثل ) مع الفئة .blockquote-footer. تأكد أيضاً من تغليف اسم العمل المصدر في <cite>.

A well-known quote, contained in a blockquote element.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

محاذاة (الوسط)

استخدم أدوات النص حسب الحاجة لتغيير محاذاة الـ blockquote.

A well-known quote, contained in a blockquote element.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

محاذاة (الأخير)

A well-known quote, contained in a blockquote element.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

القوائم (Lists)

غير منسقة

قم بإزالة list-style الافتراضي والهامش الأيسر لعناصر القائمة (الأبناء المباشرون فقط). ينطبق هذا فقط على عناصر القائمة الأبناء المباشرين، مما يعني أنك ستحتاج إلى إضافة الفئة لأي قوائم متداخلة أيضاً.

This is a list.
It appears completely unstyled.
Structurally, it’s still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it’s still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

مضمنة

قم بإزالة نقاط القائمة وتطبيق بعض الهوامش الخفيفة باستخدام مزيج من فئتين، .list-inline و .list-inline-item.

This is a list item.
And another one.
But they’re displayed inline.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they’re displayed inline.</li>
</ul>

محاذاة قائمة الوصف

قم بمحاذاة المصطلحات والأوصاف أفقياً باستخدام الفئات المحددة مسبقاً لنظام الشبكة الخاص بنا (أو المزجات الدلالية). بالنسبة للمصطلحات الأطول، يمكنك اختيارياً إضافة الفئة .text-truncate لقص النص مع إضافة نقاط حذف (...)

قوائم الوصف

تُعد قائمة الوصف مثالية لتعريف المصطلحات.

مصطلح

تعريف للمصطلح.

وبعض نصوص التعريف النائبة الإضافية.

مصطلح آخر

هذا التعريف قصير، لذلك لا توجد فقرات إضافية أو أي شيء من هذا القبيل.

المصطلح المقتطع تم اقتطاعه

قد يكون هذا مفيداً عندما تكون المساحة محدودة. يضيف علامة حذف (...) في النهاية.

التداخل

قائمة وصف متداخلة: سمعت أنك تحب قوائم الوصف. دعني أضع قائمة وصف داخل قائمة الوصف الخاصة بك.

html

<dl class="row">
  <dt class="col-sm-3">قوائم الوصف</dt>
  <dd class="col-sm-9">تُعد قائمة الوصف مثالية لتعريف المصطلحات.</dd>

  <dt class="col-sm-3">مصطلح</dt>
  <dd class="col-sm-9">
    <p>تعريف للمصطلح.</p>
    <p>وبعض نصوص التعريف النائبة الإضافية.</p>
  </dd>

  <dt class="col-sm-3">مصطلح آخر</dt>
  <dd class="col-sm-9">هذا التعريف قصير، لذلك لا توجد فقرات إضافية أو أي شيء من هذا القبيل.</dd>

  <dt class="col-sm-3 text-truncate">المصطلح المقتطع تم اقتطاعه</dt>
  <dd class="col-sm-9">قد يكون هذا مفيداً عندما تكون المساحة محدودة. يضيف علامة حذف (...) في النهاية.</dd>

  <dt class="col-sm-3">التداخل</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">قائمة وصف متداخلة</dt>
      <dd class="col-sm-8">سمعت أنك تحب قوائم الوصف. دعني أضع قائمة وصف داخل قائمة الوصف الخاصة بك.</dd>
    </dl>
  </dd>
</dl>

أحجام خطوط متوافقة مع الشاشات (Responsive)

في Bootstrap 5، قمنا بتمكين أحجام الخطوط المتوافقة مع الشاشات بشكل افتراضي، مما يسمح للنص بالتوسع بشكل طبيعي عبر أحجام الأجهزة وعرض الشاشة. ألقِ نظرة على صفحة RFS لمعرفة كيف يعمل هذا.

الـ (CSS)

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

تمتلك العناوين بعض المتغيرات المخصصة للحجم والتباعد.

scss/_variables.scss

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              inherit;

عناصر الطباعة المتنوعة المذكورة هنا وفي Reboot تمتلك أيضاً متغيرات مخصصة.

scss/_variables.scss

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

// scss-docs-start vr-variables
$vr-border-width:             var(--#{$prefix}border-width);
// scss-docs-end vr-variables

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-color:                  $body-color;
$mark-bg:                     $yellow-100;

دمج/مزج الـ (Sass mixins)

لا توجد مزجات (mixins) مخصصة للطباعة، ولكن Bootstrap تستخدم تغيير حجم الخط المتوافق مع الشاشات (RFS).