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

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

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

يعيّن إطار العمل 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

<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 إلى اختصار إلى تصغير حجم الخطّ قليلا.

الاقتباسات

أحِط المحتوى المُقتَبَس من مصادر أخرى عند إضافته إلى المستند بالوسم <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. لا يقوم إطار العمل Bootstrap بهذه المهمّة، إلا أنّه من السهل عملها إن احتجت لذلك.

في ما يلي مثال عمليّ للنصوص المتجاوبة. ضمِّن أي حجم خطّ font-size تريده وأي استعلام وسائط ترغب به.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

مصادر

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