Reboot

الـ Reboot، وهي مجموعة من تغييرات CSS الخاصة بالعناصر في ملف واحد، تعمل على إطلاق الـ Bootstrap لتوفير أساس أنيق ومتسق وبسيط يمكن البناء عليه.

في هذه الصفحة

النهج

يعتمد الـ Reboot على Normalize، حيث يوفر العديد من عناصر HTML بأنماط مدروسة باستخدام محددات العناصر فقط. يتم إجراء التنسيق الإضافي فقط باستخدام الفئات (classes). على سبيل المثال، نقوم بإعادة ضبط بعض أنماط <table> للحصول على خط أساس أبسط، ثم نوفر لاحقاً .table و .table-bordered وغيرها.

إليك إرشاداتنا وأسباب اختيار ما يتم تجاوزه في الـ Reboot:

تحديث بعض القيم الافتراضية للمتصفح لاستخدام rems بدلاً من ems من أجل تباعد مكونات قابل للتوسع.
تجنب margin-top. يمكن أن تنهار الهوامش الرأسية، مما يؤدي إلى نتائج غير متوقعة. والأهم من ذلك، أن اتجاهاً واحداً من margin يمثل نموذجاً ذهنياً أبسط.
لتسهيل التوسع عبر أحجام الأجهزة، يجب أن تستخدم عناصر الكتلة (block elements) rems للهوامش margin.
الحفاظ على تصريحات الخصائص المتعلقة بالخط font إلى الحد الأدنى، باستخدام inherit كلما كان ذلك ممكناً.

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

تمت الإضافة في الإصدار v5.2.0

مع الإصدار v5.1.1، قمنا بتوحيد عمليات @import المطلوبة عبر جميع حزم الـ CSS الخاصة بنا (بما في ذلك bootstrap.css و bootstrap-reboot.css و bootstrap-grid.css) لتشمل _root.scss. يضيف هذا متغيرات CSS على مستوى :root إلى جميع الحزم، بغض النظر عن عدد المتغيرات المستخدمة في تلك الحزمة. في نهاية المطاف، سيستمر Bootstrap 5 في رؤية المزيد من متغيرات CSS المضافة بمرور الوقت، من أجل توفير المزيد من التخصيص في الوقت الفعلي دون الحاجة إلى إعادة تجميع Sass دائماً. نهجنا هو أخذ متغيرات Sass المصدرية وتحويلها إلى متغيرات CSS. وبهذه الطريقة، حتى لو لم تستخدم متغيرات CSS، فستظل تمتلك جميع قوة Sass. هذا الأمر لا يزال قيد التنفيذ وسيستغرق بعض الوقت للتنفيذ الكامل.

على سبيل المثال، تأمل متغيرات CSS هذه الخاصة بـ :root لأنماط <body> الشائعة:

scss/_root.scss

@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

في الممارسة العملية، يتم تطبيق تلك المتغيرات في الـ Reboot على النحو التالي:

scss/_reboot.scss

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

مما يسمح لك بإجراء تخصيصات في الوقت الفعلي كما تحب:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

إعدادات الصفحة الافتراضية

يتم تحديث عنصري <html> و <body> لتوفير إعدادات افتراضية أفضل على مستوى الصفحة. وبشكل أكثر تحديداً:

يتم ضبط box-sizing بشكل عام على كل عنصر — بما في ذلك *::before و *::after، على القيمة border-box. وهذا يضمن عدم تجاوز العرض المعلن للعنصر بسبب الهامش الداخلي (padding) أو الحدود (border).
- لا يتم التصريح عن font-size أساسي في <html>، ولكن يتم افتراض 16px (الافتراضي للمتصفح). يتم تطبيق font-size: 1rem على <body> لتسهيل تغيير حجم الخط بشكل متوافق مع الشاشات (responsive) عبر استعلامات الوسائط (media queries) مع احترام تفضيلات المستخدم وضمان نهج أكثر سهولة في الوصول. يمكن تجاوز هذا الافتراضي للمتصفح عن طريق تعديل متغير $font-size-root.
يقوم <body> أيضاً بضبط font-family و font-weight و line-height و color بشكل عام. يتم توريث هذا لاحقاً بواسطة بعض عناصر النماذج لمنع عدم اتساق الخطوط.
لضمان السلامة، يحتوي <body> على background-color مصرح به، وقيمته الافتراضية هي #fff.

مجموعة الخطوط الأصلية

تستخدم Bootstrap "مجموعة خطوط أصلية" (native font stack) أو "مجموعة خطوط النظام" (system font stack) لتحقيق أفضل عرض للنصوص على كل جهاز ونظام تشغيل. لقد تم تصميم خطوط النظام هذه خصيصاً مع وضع أجهزة اليوم في الاعتبار، مع تحسين العرض على الشاشات، ودعم الخطوط المتغيرة، والمزيد. اقرأ المزيد عن مجموعات الخطوط الأصلية في مقال Smashing Magazine هذا.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue",
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

لاحظ أنه نظراً لأن مجموعة الخطوط تتضمن خطوط الرموز التعبيرية (emoji)، فإن العديد من رموز Unicode الشائعة سيتم عرضها كصور توضيحية متعددة الألوان. سيختلف مظهرها اعتماداً على النمط المستخدم في خط الرموز التعبيرية الأصلي للمتصفح/المنصة، ولن تتأثر بأي أنماط color الخاصة بـ CSS.

يتم تطبيق font-family هذه على <body> ويتم توريثها تلقائياً بشكل عام في جميع أنحاء Bootstrap. لتبديل font-family العامة، قم بتحديث $font-family-base وأعد تجميع Bootstrap.

العناوين (Headings)

جميع عناصر العناوين — من <h1> إلى <h6> — يتم إزالة margin-top منها، وضبط margin-bottom: .5rem، وتضييق line-height. وبينما ترث العناوين color بشكل افتراضي، يمكنك أيضاً تجاوز ذلك عبر متغير CSS اختياري، --bs-heading-color.

العنوان	مثال
`<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

الفقرات (Paragraphs)

جميع عناصر <p> يتم إزالة margin-top منها وضبط margin-bottom: 1rem لتوفير تباعد سهل.

This is an example paragraph.

html

<p>This is an example paragraph.</p>

الروابط (Links)

تم تطبيق color وتسطير (underline) افتراضي على الروابط. وبينما تتغير الروابط عند :hover، فإنها لا تتغير بناءً على ما إذا كان شخص ما قد زار الرابط :visited. كما أنها لا تتلقى أي أنماط :focus خاصة.

This is an example link

html

<a href="#">This is an example link</a>

اعتباراً من الإصدار v5.3.x، يتم ضبط color للرابط باستخدام rgba() ومتغيرات CSS جديدة من نوع -rgb، مما يسمح بتخصيص سهل لشفافية لون الرابط. قم بتغيير شفافية لون الرابط باستخدام متغير CSS --bs-link-opacity:

This is an example link

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

الروابط النائبة (Placeholder links) — تلك التي لا تحتوي على href — يتم استهدافها بمحدد أكثر تحديداً ويتم إعادة ضبط color و text-decoration إلى قيمهما الافتراضية.

This is a placeholder link

html

<a>This is a placeholder link</a>

القواعد الأفقية (Horizontal rules)

تم تبسيط عنصر <hr>. على غرار افتراضات المتصفح، يتم تنسيق <hr> عبر border-top، ولديها opacity: .25 افتراضية، وترث تلقائياً border-color عبر color، بما في ذلك عندما يتم ضبط color عبر العنصر الأب. يمكن تعديلها باستخدام أدوات النصوص والحدود والشفافية.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

القوائم (Lists)

جميع القوائم — <ul> و <ol> و <dl> — يتم إزالة margin-top منها وضبط margin-bottom: 1rem. القوائم المتداخلة ليس لديها margin-bottom. لقد قمنا أيضاً بإعادة ضبط padding-left في عناصر <ul> و <ol>.

جميع القوائم يتم إزالة الهامش العلوي (top margin) منها
وتوحيد الهامش السفلي (bottom margin)
القوائم المتداخلة ليس لديها هامش سفلي (bottom margin)
- بهذه الطريقة يكون لها مظهر أكثر توازناً
- خاصة عندما تتبعها المزيد من عناصر القائمة
تم أيضاً إعادة ضبط الهامش الداخلي الأيسر (left padding)

إليك قائمة مرتبة
مع عدد قليل من عناصر القائمة
لها نفس المظهر العام
مثل القائمة غير المرتبة السابقة

من أجل تنسيق أبسط، وتسلسل هرمي واضح، وتباعد أفضل، تم تحديث الهوامش margin لقوائم الوصف. تقوم عناصر <dd> بإعادة ضبط margin-left إلى 0 وإضافة margin-bottom: .5rem. أما عناصر <dt> فتكون عريضة (bolded).

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

الأكواد المضمنة (Inline code)

قم بتغليف مقتطفات الأكواد المضمنة باستخدام <code>. تأكد من تحويل أقواس HTML الزاوية إلى رموز هروب (escape).

For example, <section> should be wrapped as inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

كتل الأكواد (Code blocks)

استخدم <pre> لعدة أسطر من الكود. مرة أخرى، تأكد من تحويل أي أقواس زاوية في الكود إلى رموز هروب لضمان العرض الصحيح. يتم إعادة ضبط عنصر <pre> لإزالة margin-top واستخدام وحدات rem لـ margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

المتغيرات (Variables)

للإشارة إلى المتغيرات، استخدم الوسم <var>.

y = mx + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

إدخال المستخدم (User input)

استخدم <kbd> للإشارة إلى الإدخال الذي يتم إدخاله عادةً عبر لوحة المفاتيح.

To switch directories, type cd followed by the name of the directory.
To edit settings, press Ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

مخرجات العينة (Sample output)

للإشارة إلى مخرجات عينة من برنامج ما، استخدم الوسم <samp>.

This text is meant to be treated as sample output from a computer program.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

الجداول (Tables)

تم تعديل الجداول قليلاً لتنسيق <caption>، ودمج الحدود، وضمان اتساق text-align في جميع أنحاء الجدول. تأتي التغييرات الإضافية للحدود والهوامش الداخلية والمزيد مع الفئة .table.

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

النماذج (Forms)

تم إعادة ضبط عناصر نماذج مختلفة للحصول على أنماط أساسية أبسط. إليك بعض أبرز التغييرات:

عناصر <fieldset> ليس لها حدود أو هوامش داخلية أو هوامش خارجية، بحيث يمكن استخدامها بسهولة كأغلفة لمدخلات فردية أو مجموعات من المدخلات.
عناصر <legend>، مثل fieldsets، تم أيضاً إعادة تنسيقها ليتم عرضها كنوع من العناوين.
عناصر <label> تم ضبطها على display: inline-block للسماح بتطبيق margin.
عناصر <input> و <select> و <textarea> و <button> يتم معالجتها في الغالب بواسطة Normalize، ولكن Reboot يزيل margin الخاصة بها ويضبط line-height: inherit أيضاً.
تم تعديل <textarea> لتكون قابلة لتغيير الحجم رأسياً فقط، لأن تغيير الحجم أفقياً غالباً ما "يكسر" تخطيط الصفحة.
عناصر <button> وعناصر زر <input> لديها cursor: pointer عندما تكون :not(:disabled).

هذه التغييرات، وغيرها، موضح أدناه.

بعض أنواع مدخلات التاريخ (date inputs) ليست مدعومة بالكامل في أحدث إصدارات Safari و Firefox.

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that’s also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

مؤشرات الأزرار

يتضمن الـ Reboot تحسيناً لـ role="button" لتغيير المؤشر (cursor) الافتراضي إلى pointer. أضف هذه السمة إلى العناصر للمساعدة في الإشارة إلى أن العناصر تفاعلية. هذا الدور ليس ضرورياً لعناصر <button>، التي تحصل على تغيير cursor الخاص بها.

Non-button element button

html

<span role="button" tabindex="0">Non-button element button</span>

عناصر متنوعة

العنوان (Address)

يتم تحديث عنصر <address> لإعادة ضبط نمط الخط font-style الافتراضي للمتصفح من italic إلى normal. كما يتم الآن توريث line-height، وتم إضافة margin-bottom: 1rem. تُستخدم عناصر <address> لتقديم معلومات الاتصال لأقرب سلف (أو لعمل بأكمله). حافظ على التنسيق عن طريق إنهاء الأسطر بـ <br>.

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

الاقتباس (Blockquote)

الهامش margin الافتراضي في الاقتباسات هو 1em 40px، لذا قمنا بإعادة ضبطه إلى 0 0 1rem ليكون أكثر اتساقاً مع العناصر الأخرى.

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

Someone famous in Source Title

العناصر المضمنة (Inline elements)

يتلقى عنصر <abbr> تنسيقاً أساسياً لجعله بارزاً وسط نص الفقرة.

The HTML abbreviation element.

الملخص

المؤشر cursor الافتراضي في الملخص (summary) هو text، لذا قمنا بإعادة ضبطه إلى pointer للإشارة إلى أنه يمكن التفاعل مع العنصر عن طريق النقر عليه.

Some details

More info about the details.

Even more details

Here are even more details about the details.

سمة HTML5 `[hidden]`

تضيف HTML5 سمة عالمية جديدة تسمى [hidden]، والتي يتم تنسيقها كـ display: none بشكل افتراضي. اقتباساً من فكرة من PureCSS، قمنا بتحسين هذا الافتراضي بجعل [hidden] { display: none !important; } للمساعدة في منع تجاوز display الخاص بها عن طريق الخطأ.

<input type="text" hidden>

بما أن [hidden] غير متوافقة مع طرق jQuery وهي $(...).hide() و $(...).show()، فإننا لا نؤيد تحديداً استخدام [hidden] على التقنيات الأخرى لإدارة display للعناصر.

لمجرد تبديل رؤية العنصر، مما يعني أن display الخاص به لا يتم تعديله ويمكن للعنصر أن يؤثر لا يزال على تدفق المستند، استخدم الفئة .invisible بدلاً من ذلك.

Reboot

النهج

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

إعدادات الصفحة الافتراضية

مجموعة الخطوط الأصلية

العناوين (Headings)

الفقرات (Paragraphs)

الروابط (Links)

القواعد الأفقية (Horizontal rules)

القوائم (Lists)

الأكواد المضمنة (Inline code)

كتل الأكواد (Code blocks)

المتغيرات (Variables)

إدخال المستخدم (User input)

مخرجات العينة (Sample output)

الجداول (Tables)

النماذج (Forms)

مؤشرات الأزرار

عناصر متنوعة

العنوان (Address)

الاقتباس (Blockquote)

العناصر المضمنة (Inline elements)

الملخص

سمة HTML5 [hidden]

سمة HTML5 `[hidden]`