عرض مصدر Bootstrap/reboot

<noinclude>{{DISPLAYTITLE:مجموعة تنسيقات Reboot في إطار العمل Bootstrap}}</noinclude>
يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل بسيط، ومتناسق وأنيق يُبنى عليه إطار العمل Bootstrap.

== المقاربة المستخدَمة في Reboot ==
يعتمد Reboot على مشروع Normalize ويوفّر عناصر HTML عدّة بتنسيقات مُختارة تقتصر على استخدام [[:تصنيف:CSS Selectors|محدّدات CSS]] فقط. تُطبَّق التنسيقات الإضافيّة باستخدام الأصناف فقط. على سبيل المثال، يستخدم إطار العمل Bootstrap تنسيقات Reboot لإعداد أساس عمل قاعدي لتنسيق الجداول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> ثم يوفّر لاحقًا الصّنفيْن <code>‎‎.table</code>و <code>‎‎.table-bordered</code> وغيرهما لعمل تنسيقات إضافيّة على الجداول.

نذكر في ما يلي قواعد عامّة وأسبابًا لاختيّار التنسيقات الموجودة في Reboot وتطبيق مفعولها:
* تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس <code>rem</code> بدلًا من <code>em</code> للحصول على تباعد قابل للتمديد (scalable) بين المكوّنات.
* تجنّب الخاصيّة <code>[[CSS/margin-top|margin-top]]</code>. تتميّز الحاشيّات العموديّة بأنّها تتقلّص (collapse)، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل.
* يجب أن تستخدم العناصر الكتليّة (block elements) وحدة القياس <code>rem</code> في الحاشيّات وذلك بهدف تمدّد أسهل عبر مختلف قياسات الأجهزة.
* عدم تعريف الخاصيّات المرتبطة بالخاصيّة <code>[[CSS/font|font]]</code> إلا عند الضّرورة، واستخدام الكلمة المحجوزة <code>[[CSS/inherit|inherit]]</code> كلّ ما أمكن ذلك.

== الخيارات المبدئيّة للصفحات ==
يُحدَّث العنصران <code>[[HTML/html|<html>]]</code> و <code>[[HTML/body|<body>]]</code> لتوفير قيم مبدئيّة أفضل للتطبيق على الصّفحة كاملة. خصوصًا:
* تأخذ الخاصيّة <code>[[CSS/box-sizing|box-sizing]]</code> القيمة <code>border-box</code>على جميع العناصر؛ بما في ذلك <code>‎[[CSS/Universal Selector|*]]‎‎::[[CSS/::before|before]]</code> و <code>‎[[CSS/Universal Selector|*]]::[[CSS/::after|after]]</code> . تضمن هذه الطريقة ألّا يُتجاوز العرض المُعرَّف بسبب الحاشية (<code>[[CSS/padding|padding]]</code>) أو إطار العنصُر (<code>[[CSS/border|border]]</code>).
* لا تُعرَّف قيمة أساسيّة للخاصيّة <code>[[CSS/font-size|font-size]]</code> ضمن العنصُر <code>[[HTML/html|<html>]]</code>؛ إلّا أنّه يُفتَرَض أنّ القيمة تساوي <code>16px</code> (القيمة المبدئيّة في المتصفّح). تُطبَّق الخاصيّة <code>font-size: 1rem</code> على العنصُر <code><body></code> للحصول على تمدّد متجاوب باستخدام استعلامات الوسائط مع احترام تفضيلات المستخدم وضمان مقاربة يسهُل التعاطي معها.  -يعيّن العنصُر كذلك قيمًا عامةً لكلّ من الخاصيّات <code>[[CSS/font-family|font-family]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/text-align|text-align]]</code>. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط.
* يُعرّف العنصُر <code>[[HTML/body|<body>]]</code> - احتيّاطًا - القيمة المبدئيّة <code>‎#fff</code> للخاصيّة <code>[[CSS/background-color|background-color]]</code>.

== كومة الخطوط الأصيلة Native في نظام التشغيل ==
توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و Arial) واستعاض عنها «بمجموعة الخطوط الأصيلة» (native font stack) للحصول على عرض أفضل على جميع الأجهزة وأنظمة التشغيل.<syntaxhighlight lang="sass">
$font-family-sans-serif:
  // متصفّح Safari على OS X و iOS (خطّ San Francisco)
  -apple-system,
  // Chrome < 56 على نظام OS X (خطّ San Francisco)
  BlinkMacSystemFont,
  // وندوز
  "Segoe UI",
  // أندرويد
  "Roboto",
  // خطوط الويب الأساسيّة
  "Helvetica Neue", Arial, sans-serif,
  // خطوط الأيقونات Emoji
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
</syntaxhighlight>تُطبَّق قيمة الخاصيّة <code>[[CSS/font-family|font-family]]</code> على العنصُر <code>[[HTML/body|<body>]]</code> وترثها جميع العناصر تلقائيًّا عن طريق إطار العمل Bootstrap. حدّث المتغيّر  <code>‎$font-family-base</code> ثم أعد تجميع الملفات المصدريّة لإطار العمل Bootstrap من أجل تغيير قيمة الخاصيّة <code>[[CSS/font-family|font-family]]</code>.

== الترويسات والفقرات ==
يُعاد تعيين جميع عناصر الترويسات - مثل <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code> - والفقرات (<code>[[HTML/p|<nowiki><p></nowiki>]]</code>) من أجل حذف قيم الخاصيّة <code>[[CSS/margin-top|margin-top]]</code>. تُضاف القيمة <code>[[CSS/margin-bottom|margin-bottom]]: .5rem</code> إلى جميع الترويسات والقيمة <code>margin-bottom: 1rem</code> إلى الفقرات من أجل تباعد أسهل.

== القوائم ==
يُحذَف الهامش العلويّ - الخاصيّة <code>[[CSS/margin-top|margin-top]]</code> - من جميع القوائم - <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>، و <code>[[HTML/optgroup|<nowiki><ol></nowiki>]]</code>، و <code>[[HTML/dl|<nowiki><dl></nowiki>]]</code> - وتُعيَّن الهوامش السفليّة بالقيمة <code>[[CSS/margin-bottom|margin-bottom]]: 1rem</code>. لا تحوي القوائم الفرعيّة هامشًا سفليّا.

تُحدَّث قيمة الهوامش في قوائم الوصف (<code>[[HTML/dl|<nowiki><dl></nowiki>]]</code>) من أجل الحصول على تنسيق أبسط، وهرميّة أوضح وتباعد أفضل. يعيد العنصُر <code>[[HTML/dd|<nowiki><dd></nowiki>]]</code> (وصف عنصُر في قائمة الوصف) تعيين قيمة الهامش الأيسر <code>[[CSS/margin-left|margin-left]]</code> إلى <code>0</code> ويضيف هامشا سفليًّا <code>[[CSS/margin-bottom|margin-bottom]]: .5rem</code>. يظهر الخطّ في عناصر قائمة الأوصاف (<code>[[HTML/dt|<nowiki><dt></nowiki>]]</code>) بخط عريض Bold.

== النصوص المُهيَّأة مسبقًا (Preformatted text) ==
يُعاد تعيين العنصُر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> لحذف الهامش العلويّ <code>[[CSS/margin-top|margin-top]]</code> واستخدام وحدات القياس <code>rem</code> للهامش السفليّ <code>[[CSS/margin-bottom|margin-bottom]]</code>.

== الجداول (Tables) ==
عُدِّلت الجداول قليلًا لتنسيق عنوان الجدول (<code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>)، وتقليص الإطار وضمان محاذاة نصّ (<code>[[CSS/text-align|text-align]]</code>) متناسقة عبر الجدول. يتضمّن الصّنف <code>‎.table</code> تعديلات إضافيّة على أُطُر الجداول والحاشيّات وعناصر أخرى.

== الاستمارات (Forms) ==
أعيد تعيين عناصر متعدّدة في الاستمارات لإنشاء تنسيقات قاعديّة أبسط. في ما يلي بعضٌ من أكثر التعديلات أهميّة:
* لا يوجد إطار ولا هامش ولا حاشيّة على مجموعة حقول (<code>[[HTML/fieldset|<fieldset>]]</code>)؛ بحيث يسهُل استخدامه لتغليف المُدخلات الفرديّة أو مجموعات المُدخلات.
* أعيد تنسيق العناصر <code>[[HTML/legend|<legend>]]</code>، كما هي حال <code>[[HTML/fieldset|<fieldset>]]</code>، لتُعرَض على هيئة ترويسة.
* عُدِّلت طريقة عرض اللافتات (<code>[[HTML/label|<label>]]</code>) لتصبح <code>[[CSS/display|display]]: inline-block</code> لكي يمكن تطبيق الهامش (<code>[[CSS/margin|margin]]</code>) عليها.
* صحّحت تنسيقات Normalize كثيرًا من مظهر الحقول (<code>[[HTML/input|<input>]]</code>)، وقوائم الاختيار (<code>[[HTML/select|<select>]]</code>)، والمربّعات النصيّة (<code>[[HTML/textarea|<textarea>]]</code>) والأزرار (<code>[[HTML/button|<button>]]</code>)؛ إلا أنّ تنسيقات Reboot تحذف الهوامش (<code>[[CSS/margin|margin]]</code>) عنها وتعيّن القيمة <code>[[CSS/inherit|inherit]]</code> لارتفاع السّطر <code>[[CSS/line-height|line-height]]: inherit</code>.
* عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.

== عناصر متفرّقة ==

=== العنوان ===
حُدِّث عنصُر العنوان (<code>[[HTML/address|<address>]]</code>) ليعيد تعيين القيمة المبدئيّة للخاصيّة <code>[[CSS/font-style|font-style]]</code> من <code>italic</code> إلى <code>normal</code>. كما أصبح يرِث قيمة الخاصيّة <code>[[CSS/line-height|line-height]]</code> وأضيفت إليه حاشيّة سفليّة بقيمة <code>1rem</code>. يوفرّ العنصُر <code>[[HTML/address|<address>]]</code> معلومات التواصل للمحتوى الموجود في أقرب عنصر أب (أو لكامل المستنَد). حافظ على تهيئة الحقول باستخدام عناصر الانتقال إلى سطرٍ جديد <code>[[HTML/br|<nowiki><br></nowiki>]]</code>.

=== الاقتباس ===
أعيد تعيين القيمة المبدئية للهامش (<code>[[CSS/margin|margin]]</code>) في الاقتباسات (<code>[[HTML/blockquote|blockquote]]</code>) من <code>1em 40px</code> إلى <code>0 0 1rem</code> لتكون أكثر تناسقًا مع بقيّة العناصر.

=== العناصر السطريّة Inline elements ===
تلقّى عنصُر الاختصار <code>[[HTML/abbr|<nowiki><abbr></nowiki>]]</code> تنسيقات قاعديّة لجعله يبرُز في نصّ الفقرة.

=== العنصُر <code>[[HTML/summary|<summary>]]</code> ===
تأخذ الخاصيّة <code>[[CSS/cursor|cursor]]</code> في العنصُر <code>[[HTML/summary|<summary>]]</code> مبدئيًّا القيمة <code>text</code>، لذا أعيد تعيينها لتكون <code>pointer</code> ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.

== الخاصيّة <code>[hidden]</code> في HTML5 ==
يضيف HTML5 [[HTML/Global Attributes#hidden|خاصيّة عامّة جديدة تُسمَّى <code>[hidden]</code>]] تُنسَّق مبدئيًّا حسب طريقة العرض <code>[[CSS/display|display]]: none</code>. استعار Reboot فكرة من [https://purecss.io/ PureCSS] تقضي بتحسين طريقة العرض المبدئيّة لتصبح <code>‎[hidden] { display: none !important; }‎</code> ممّا يحول دون إبطال قيمة الخاصيّة <code>[[CSS/display|display]]</code> عن غير قصد. لا يدعم الإصدار 10 من Internet Explorer الخاصيّة <code>[hidden]</code> إلّا أنّ تعريفها بصراحة ضمن شفرة CSS الخاصّة بإطار العمل يتلافى هذه المشكلة.<syntaxhighlight lang="html">
<input type="text" hidden>
</syntaxhighlight>

===== تحذير: غياب التوافق مع jQuery =====
لا تتوافق الخاصيّة <code>[hidden]</code> مع التابعيْن  <code>‎$(...).hide()‎</code> و <code>‎$(...).show()‎</code> في jQuery. لهذا السّبب لا يُفضّل إطار العمل Bootstrap استخدام الخاصيّة <code>[hidden]</code> بدلًا من الطرائق الأخرى للتحكّم في الخاصيّة <code>[[CSS/display|display]]</code>.

استخدم [[Bootstrap/visibility|الصّنف <code>‎.invisible</code>]] إنْ كان كلّ ما تريده هو تبديل قابليّة رؤية عنصُر؛ بمعنى أنّ قيمة الخاصيّة <code>[[CSS/display|display]]</code> تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.

== مصادر ==
* [https://getbootstrap.com/docs/4.0/content/reboot/ صفحة Reboot في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap content]]