الفرق بين المراجعتين لصفحة: «Bootstrap/typography»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
إضافة عنوان
لا ملخص تعديل
 
(3 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخطوط والنصوص في إطار العمل Bootstrap}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخطوط والنصوص في إطار العمل Bootstrap}}</noinclude>
تقدّم هذه الصفحة توثيقًا وأمثلةً على التعامل مع الخطوط في إطار العمل Bootstrap، بما في ذلك الإعدادات العامّة، الترويسات، نصوص متن الصّفحة Body، القوائم وغيرها.
تقدّم هذه الصفحة توثيقًا وأمثلةً على التعامل مع الخطوط في إطار العمل Bootstrap، بما في ذلك الإعدادات العامّة، والترويسات، ونصوص متن الصّفحة، والقوائم وغيرها.


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


== الترويسات ==
== الترويسات ==
يمكن استخدام جميع عناصر الترويسات في HTML (من <code><nowiki><h1></nowiki></code> إلى <code><nowiki><h6></nowiki></code>)؛ كما تتوفّر الأصناف من <code>‎.h1</code> إلى <code>‎.h6</code> لاستخدامها عندما تريد مماثلة تنسيق الخطوط في الترويسات دون أن تكون قادرًا على استخدام عناصر الترويسات في HTML.
يمكن استخدام جميع عناصر الترويسات في HTML (من <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code> إلى <code>[[HTML/h1-h6|<nowiki><h6></nowiki>]]</code>)؛ كما تتوافر الأصناف من <code>‎.h1</code> إلى <code>‎.h6</code> لاستخدامها عندما تريد مماثلة تنسيق الخطوط في الترويسات دون أن تكون قادرًا على استخدام عناصر الترويسات في HTML.


=== تخصيص الترويسات ===
=== تخصيص الترويسات ===
سطر 25: سطر 25:


== ترويسات العرض ==
== ترويسات العرض ==
صُمِّمت عناصر الترويسات الأصليّة لتعمل في قلب محتوى الصّفحة. استخدم '''ترويسة عرض''' التي تظهر أعرض وأكثر جذبًا للانتباه إنْ احتجت لترويسة تبدو بارزة.<syntaxhighlight lang="html">
صُمِّمت عناصر الترويسات الأصليّة لتعمل في قلب محتوى الصّفحة. استخدم '''ترويسة عرض''' التي تظهر أعرض وأكثر جذبًا للانتباه إنْ احتجت لترويسة تبدو بارزة. لكن تذكر أنها ليست متجاوبة افتراضيا، بيد أنه يمكن إتاحة الخطوط المتجاوبة:<syntaxhighlight lang="html">
<h1 class="display-1">ترويسة عرض أولى</h1>
<h1 class="display-1">ترويسة عرض أولى</h1>
<h1 class="display-2">ترويسة عرض ثانيّة</h1>
<h1 class="display-2">ترويسة عرض ثانيّة</h1>
سطر 34: سطر 34:
</syntaxhighlight>
</syntaxhighlight>


== فقرة رئيسة ==
== فقرة رئيسية ==
اجعل فقرة تبرُز من المحتوى بإضافة الصّنف <code>‎.lead</code>.<syntaxhighlight lang="html">
اجعل فقرة تبرُز من المحتوى بإضافة الصّنف <code>‎.lead</code>.<syntaxhighlight lang="html">
<p class="lead">
<p class="lead">
سطر 43: سطر 43:
</syntaxhighlight>
</syntaxhighlight>


== العناصر النصيّة السطريّة Inline text elements ==
== العناصر النصيّة السطريّة (Inline text elements) ==
<syntaxhighlight lang="html">
يمكنك تنسيق عناصر  HTML5 السطريّة الشائعة:<syntaxhighlight lang="html">
<p>يمكن استخدام الوسم mark ل<mark>إبراز</mark> نصّ.</p>
<p>يمكن استخدام الوسم mark ل<mark>إبراز</mark> نصّ.</p>
<p><del>يُهيّأ هذا السطر للتعامل معه على أنّه نص محذوف</del></p>
<p><del>يُهيّأ هذا السطر للتعامل معه على أنّه نص محذوف</del></p>
سطر 53: سطر 53:
<p><strong>يظهر هذا السّطر بخطّ عريض.</strong></p>
<p><strong>يظهر هذا السّطر بخطّ عريض.</strong></p>
<p><em>يظهر هذا السّطر مائلا.</em></p>
<p><em>يظهر هذا السّطر مائلا.</em></p>
</syntaxhighlight>يتوفّر كذلك الصّنفان <code>‎.mark</code> و <code>‎.small</code> اللذان يمكّنان من تطبيق نفس تنسيقات الوسميْن <code><nowiki><mark></nowiki></code> و <code><nowiki><small></nowiki></code> مع تجنّب المعنى الدّلالي في الوسميْن.
</syntaxhighlight>يتوفّر كذلك الصّنفان <code>‎.mark</code> و <code>‎.small</code> اللذان يمكّنان من تطبيق نفس تنسيقات الوسميْن <code>[[HTML/mark|<nowiki><mark></nowiki>]]</code> و <code>[[HTML/small|<nowiki><small></nowiki>]]</code> مع تجنّب المعنى الدّلالي في الوسميْن.


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


== أدوات النصّ ==
== أدوات النصّ ==
سطر 61: سطر 61:


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


تؤدّي إضافة الصّنف <code>‎.initialism</code> إلى اختصار إلى تصغير حجم الخطّ قليلا.
تؤدّي إضافة الصّنف <code>‎.initialism</code> إلى اختصار إلى تصغير حجم الخطّ قليلًا.<syntaxhighlight lang="html">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</syntaxhighlight>


== الاقتباسات ==
== الاقتباسات ==
أحِط المحتوى المُقتَبَس من مصادر أخرى عند إضافته إلى المستند بالوسم <code><nowiki><blockquote class="blockquote"></nowiki></code> على النحو التالي:<syntaxhighlight lang="html">
أحِط المحتوى المُقتَبَس من مصادر أخرى عند إضافته إلى المستند بالوسم <code><nowiki><blockquote class="blockquote"‎></nowiki></code> على النحو التالي:<syntaxhighlight lang="html">
<blockquote class="blockquote">
<blockquote class="blockquote">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
سطر 75: سطر 78:


=== تسميّة مصدر ===
=== تسميّة مصدر ===
تؤدّي إضافة <code><footer class="blockquote-footer"></code> بعد المحتوى المقتبس ضمن وسم <code><nowiki><blockquote></nowiki></code> إلى التعريف بمصدر الاقتباس. اجعل اسم المصدر داخل الوسم <code><nowiki><cite></nowiki></code>.<syntaxhighlight lang="html">
تؤدّي إضافة <code><footer class="blockquote-footer"‎></code> بعد المحتوى المقتبس ضمن وسم <code>[[HTML/blockquote|<nowiki><blockquote></nowiki>]]</code> إلى التعريف بمصدر الاقتباس. اجعل اسم المصدر داخل الوسم <code>[[HTML/cite|<nowiki><cite></nowiki>]]</code>.<syntaxhighlight lang="html">
<blockquote class="blockquote">
<blockquote class="blockquote">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
سطر 106: سطر 109:


=== القوائم غير المُنسَّقة ===
=== القوائم غير المُنسَّقة ===
تمكن إزالة تنسيق القوائم المبدئي (<code>list-style</code>) والهامش على يسار عناصر القائمة باستخدام الصّنف <code>‎.list-unstyled</code>. '''نطبق هذا الأمر على عناصر القائمة المباشرة فقط'''؛ بمعنى أنّه يجب أن تضيف هذا الصّنف إلى القوائم الفرعيّة كذلك للحصول على التأثير المذكور.<syntaxhighlight lang="html">
تمكن إزالة تنسيق القوائم المبدئي (<code>[[CSS/list-style|list-style]]</code>) والهامش على يسار عناصر القائمة باستخدام الصّنف <code>‎.list-unstyled</code>. '''نطبق هذا الأمر على عناصر القائمة المباشرة فقط'''؛ بمعنى أنّه يجب أن تضيف هذا الصّنف إلى القوائم الفرعيّة كذلك للحصول على التأثير المذكور.<syntaxhighlight lang="html">
<ul class="list-unstyled">
<ul class="list-unstyled">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
سطر 124: سطر 127:
   <li>Eget porttitor lorem</li>
   <li>Eget porttitor lorem</li>
</ul>
</ul>
</syntaxhighlight>
</syntaxhighlight>


=== قوائم سطريّة Inline ===
=== قوائم سطريّة Inline ===
يؤدّي الجمع بين الصّنفيْن <code>‎.list-inline</code> و <code>‎.list-inline-item</code>إلى حذف تنقيط القائمة وزيادة هامش (<code>margin</code>) خفيف.<syntaxhighlight lang="html">
يؤدّي الجمع بين الصّنفيْن <code>‎.list-inline</code> و <code>‎.list-inline-item</code>إلى حذف تنقيط القائمة وزيادة هامش (<code>[[CSS/margin|margin]]</code>) خفيف.<syntaxhighlight lang="html">
<ul class="list-inline">
<ul class="list-inline">
   <li class="list-inline-item">Lorem ipsum</li>
   <li class="list-inline-item">Lorem ipsum</li>
سطر 140: سطر 141:


=== محاذاة القوائم الوصفيّة ===
=== محاذاة القوائم الوصفيّة ===
تُستخدَم الأصناف المُعرَّفة مسبقًا في نظام شبكة Bootstrap (وكذلك المخاليط الدلاليّة Semantic mixins) لمحاذاة المفاهيم والأوصاف في القوائم الوصفيّة. يمكن تطبيق الصّنف <code>‎.text-truncate</code> على المفاهيم الطويلة لبتر جزء منها وتعويضه بنقاط تتابع.<syntaxhighlight lang="html">
تُستخدَم الأصناف المُعرَّفة مسبقًا في نظام شبكة Bootstrap (وكذلك المخاليط الدلاليّة Semantic mixins) لمحاذاة المفاهيم والأوصاف في القوائم الوصفيّة. يمكن تطبيق الصّنف <code>‎.text-truncate</code> على المفاهيم الطويلة لبتر جزء منها وتعويضه بنقاط تتابع.<syntaxhighlight lang="html">
<dl class="row">
<dl class="row">
   <dt class="col-sm-3">Description lists</dt>
   <dt class="col-sm-3">Description lists</dt>
سطر 165: سطر 166:
   </dd>
   </dd>
</dl>
</dl>
</syntaxhighlight>
</syntaxhighlight>


== النصوص المتجاوبة ==
== النصوص المتجاوبة ==
نعني ب''النصوص المتجاوبة Responsive typography'' تكييف حجم الخطّ (<code>font-size</code>) في العنصُر الجذر عبر سلسلة من استعلامات الوسائط Media queries. لا يقوم إطار العمل Bootstrap بهذه المهمّة، إلا أنّه من السهل عملها إن احتجت لذلك.
نعني بالنصوص المتجاوبة (responsive typography) تكييف حجم الخطّ (<code>[[CSS/font-size|font-size]]</code>) في العنصُر عبر سلسلة من استعلامات الوسائط (media queries). أتى الإصدار 4.3 من Bootstrap بمجموعة من الخيارات لإتاحة أحجام الخطوط المتجاوبة عبر تغيير المتغير ‎<code>$enable-responsive-font-sizes</code> إلى <code>true</code> ثم إعادة تصريف Bootstrap.
 
في ما يلي مثال عمليّ للنصوص المتجاوبة. ضمِّن أي حجم خطّ <code>font-size</code> تريده وأي استعلام وسائط ترغب به.<syntaxhighlight lang="html">
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;
  }
}
</syntaxhighlight>


نستخدم لدعم أحجام الخطوط المتجاوبة مخاليط Sass لاستبدال خاصيات <code>font-size</code> العادية. تُصرَّف  أحجام الخطوط المتجاوبة إلى دوال  <code>calc()‎</code>مع <code>rem</code> ووحدات  إطار العرض لإتاحة سلوك التكبير المتجاوب. يمكنك معرفة المزيد عن أحجام الخطوط المتجاوبة من [https://github.com/twbs/rfs/tree/v8.0.4 مستودع  GitHub].
== مصادر ==
== مصادر ==
* [https://getbootstrap.com/docs/4.0/content/typography/ صفحة Typography في توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.5/content/typography/ صفحة Typography في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Typography]]
[[تصنيف:Bootstrap content|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 12:23، 13 يوليو 2020

تقدّم هذه الصفحة توثيقًا وأمثلةً على التعامل مع الخطوط في إطار العمل 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.

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/typography&oldid=29704»