الخطوط والنصوص في إطار العمل Bootstrap

تقدّم هذه الصفحة توثيقًا وأمثلةً على التعامل مع الخطوط في إطار العمل Bootstrap، بما في ذلك الإعدادات العامّة، والترويسات، ونصوص متن الصّفحة، والقوائم وغيرها.

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

يعيّن إطار العمل Bootstrap تنسيقات قاعديّة عامّة للعرض والخطوط والرّوابط. استخدم الأصناف الموجودة في أدوات النّصوص إنْ احتجت لتحكّم أكبر في هذه التنسيقات.

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

توجد هذه التنسيقات ضمن الملفّ‎_reboot.scss في ما تتواجد المتغيّرات العامّة في الملفّ ‎_variables.scss. تأكّد من استخدام وحدة القياس rem لتعيين حجم الخطّ‎$font-size-base.

الترويسات

يمكن استخدام جميع عناصر الترويسات في HTML (من <h1> إلى <h6>)؛ كما تتوافر الأصناف من ‎.h1 إلى ‎.h6 لاستخدامها عندما تريد مماثلة تنسيق الخطوط في الترويسات دون أن تكون قادرًا على استخدام عناصر الترويسات في HTML.

تخصيص الترويسات

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

<h3>
  ترويسة فاخرة
  <small class="text-muted">معها نصّ ثانوي باهت</small>
</h3>

ترويسات العرض

صُمِّمت عناصر الترويسات الأصليّة لتعمل في قلب محتوى الصّفحة. استخدم ترويسة عرض التي تظهر أعرض وأكثر جذبًا للانتباه إنْ احتجت لترويسة تبدو بارزة. لكن تذكر أنها ليست متجاوبة افتراضيا، بيد أنه يمكن إتاحة الخطوط المتجاوبة:

<h1 class="display-1">ترويسة عرض أولى</h1>
<h1 class="display-2">ترويسة عرض ثانيّة</h1>
<h1 class="display-3">ترويسة عرض ثالثة</h1>
<h1 class="display-4">ترويسة عرض رابعة</h1>

فقرة رئيسية

اجعل فقرة تبرُز من المحتوى بإضافة الصّنف ‎.lead.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

العناصر النصيّة السطريّة (Inline text elements)

يمكنك تنسيق عناصر HTML5 السطريّة الشائعة:

<p>يمكن استخدام الوسم mark ل<mark>إبراز</mark> نصّ.</p>
<p><del>يُهيّأ هذا السطر للتعامل معه على أنّه نص محذوف</del></p>
<p><s>يُهيّأ هذا السّطر للتعامل معه على أساس أنّه لم يعد دقيقا.</s></p>
<p><ins>يُهيَّأ هذا السّطر للتعامل معه على أساس أنّه إضافة للمستند.</ins></p>
<p><u>يظهر هذا النّص بتسطير سفليّ</u></p>
<p><small>يُتعامّل مع هذا السّطر على أنّه صغير الحجم.</small></p>
<p><strong>يظهر هذا السّطر بخطّ عريض.</strong></p>
<p><em>يظهر هذا السّطر مائلا.</em></p>

يتوفّر كذلك الصّنفان ‎.mark و ‎.small اللذان يمكّنان من تطبيق نفس تنسيقات الوسميْن <mark> و <small> مع تجنّب المعنى الدّلالي في الوسميْن.

استخدم الوسميْن <b> و <i> إنْ اقتضت الحاجة. يُستخدَم الوسم <b> لإبراز كلمات أو جمل دون منهحها أهميّة إضافيّة، في حين يُستخدَم الوسم <i> غالبًا للأصوات، المصطلحات التقنيّة …إلخ.

أدوات النصّ

تتيح أدوات النصوص والألوان في إطار العمل Bootstrap محاذاة النّص، وتحويله، وتنسيقه، والتأثير عليه وتلوينه.

الاختصارات

يُنسَّق وسم الاختصار <abbr> في HTML بحيث يظهر المعنى أو الجملة كاملةً عند وضع المؤشر عليه. يُطبَّق على الاختصارات مبدئيًّا تسطير سفليّ ويظهر مؤشّر المساعدة عند مرور الفأرة عليه لتوفير سياق إضافيّ وللاستخدام في التقنيّات المساعدة (سهولة الوصول).

تؤدّي إضافة الصّنف ‎.initialism إلى اختصار إلى تصغير حجم الخطّ قليلًا.

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

الاقتباسات

أحِط المحتوى المُقتَبَس من مصادر أخرى عند إضافته إلى المستند بالوسم <blockquote class="blockquote"‎> على النحو التالي:

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

تسميّة مصدر

تؤدّي إضافة <footer class="blockquote-footer"‎> بعد المحتوى المقتبس ضمن وسم <blockquote> إلى التعريف بمصدر الاقتباس. اجعل اسم المصدر داخل الوسم <cite>.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

المحاذاة

استخدم أدوات النّصوص حسب الحاجة لمحاذاة الاقتباسات.

في الوسط

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

إلى اليمين

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

القوائم

القوائم غير المُنسَّقة

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

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

قوائم سطريّة Inline

يؤدّي الجمع بين الصّنفيْن ‎.list-inline و ‎.list-inline-itemإلى حذف تنقيط القائمة وزيادة هامش (margin) خفيف.

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

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

تُستخدَم الأصناف المُعرَّفة مسبقًا في نظام شبكة Bootstrap (وكذلك المخاليط الدلاليّة Semantic mixins) لمحاذاة المفاهيم والأوصاف في القوائم الوصفيّة. يمكن تطبيق الصّنف ‎.text-truncate على المفاهيم الطويلة لبتر جزء منها وتعويضه بنقاط تتابع.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

النصوص المتجاوبة

نعني بالنصوص المتجاوبة (responsive typography) تكييف حجم الخطّ (font-size) في العنصُر عبر سلسلة من استعلامات الوسائط (media queries). أتى الإصدار 4.3 من Bootstrap بمجموعة من الخيارات لإتاحة أحجام الخطوط المتجاوبة عبر تغيير المتغير ‎$enable-responsive-font-sizes إلى true ثم إعادة تصريف Bootstrap.

نستخدم لدعم أحجام الخطوط المتجاوبة مخاليط Sass لاستبدال خاصيات font-size العادية. تُصرَّف أحجام الخطوط المتجاوبة إلى دوال calc()‎مع rem ووحدات إطار العرض لإتاحة سلوك التكبير المتجاوب. يمكنك معرفة المزيد عن أحجام الخطوط المتجاوبة من مستودع GitHub.

مصادر

صفحة Typography في توثيق Bootstrap.