in English

اعادة التشغيل

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

على هذه الصفحة

يقترب

يعتمد Reboot على التسوية ، مما يوفر العديد من عناصر HTML بأنماط ذات رأي إلى حد ما باستخدام محددات العناصر فقط. يتم التصميم الإضافي فقط مع الفصول الدراسية. على سبيل المثال ، نعيد تشغيل بعض <table>الأنماط للحصول على خط أساس أبسط ونقدم لاحقًا .table، .table-borderedوالمزيد.

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

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

متغيرات CSS

تمت الإضافة في الإصدار 5.1.1

مع الإصدار 5.1.1 ، قمنا بتوحيد معاييرنا المطلوبة @importعبر جميع حزم CSS الخاصة بنا (بما في ذلك ، وتضمينها bootstrap.css. bootstrap-reboot.cssوهذا يضيف متغيرات المستوى CSS لجميع الحزم ، بغض النظر عن عدد منها المستخدمة في هذه الحزمة. في النهاية ، سيستمر Bootstrap 5 في رؤية المزيد من متغيرات CSS المضافة بمرور الوقت.bootstrap-grid.css_root.scss:root

افتراضيات الصفحة

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

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

مكدس الخط الأصلي

يستخدم Bootstrap "مكدس الخطوط الأصلي" أو "مكدس خطوط النظام" لتقديم النص الأمثل على كل جهاز ونظام تشغيل. تم تصميم خطوط النظام هذه خصيصًا مع وضع أجهزة اليوم في الاعتبار ، مع تحسين العرض على الشاشات ودعم الخطوط المتغيرة والمزيد. اقرأ المزيد عن مجموعات الخطوط الأصلية في مقالة 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,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

لاحظ أنه نظرًا لأن مجموعة الخطوط تشتمل على خطوط إيموجي ، فسيتم تقديم العديد من رموز الرموز / رموز dingbat الشائعة على هيئة صور متعددة الألوان. سيختلف مظهرهم ، اعتمادًا على النمط المستخدم في خط الرموز التعبيرية الأصلي للمتصفح / النظام الأساسي ، ولن يتأثروا بأي colorأنماط CSS.

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

متغيرات CSS

مع استمرار نضج Bootstrap 5 ، سيتم إنشاء المزيد والمزيد من الأنماط باستخدام متغيرات CSS كوسيلة لتوفير المزيد من التخصيص في الوقت الفعلي دون الحاجة إلى إعادة تجميع Sass دائمًا. نهجنا هو أخذ متغيرات Sass المصدر الخاصة بنا وتحويلها إلى متغيرات CSS. بهذه الطريقة ، حتى إذا لم تستخدم متغيرات CSS ، فلا يزال لديك كل قوة Sass. لا يزال هذا قيد التقدم وسيستغرق تنفيذه بالكامل وقتًا.

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

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

في الممارسة العملية ، يتم تطبيق هذه المتغيرات في Reboot كما يلي:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-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>

العناوين والفقرات

تتم إعادة تعيين كافة عناصر العنوان - على سبيل المثال <h1>- لإزالتها . تمت إضافة العناوين والفقرات للتباعد السهل.<p>margin-topmargin-bottom: .5remmargin-bottom: 1rem

عنوان	مثال
`<h1></h1>`	h1. عنوان التمهيد
`<h2></h2>`	h2. عنوان التمهيد
`<h3></h3>`	h3. عنوان التمهيد
`<h4></h4>`	h4. عنوان التمهيد
`<h5></h5>`	h5. عنوان التمهيد
`<h6></h6>`	h6. عنوان التمهيد

القوائم

تمت إزالة كل القوائم — <ul>و <ol>و <dl>— و a . القوائم المتداخلة لا تحتوي على . لقد قمنا أيضًا بإعادة تعيين عناصر التشغيل والعناصر .margin-topmargin-bottom: 1remmargin-bottompadding-left<ul><ol>

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

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

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

قوائم الوصف: قائمة وصف مثالية لتعريف المصطلحات.
شرط: تعريف المصطلح.; تعريف ثان لنفس المصطلح.
مصطلح آخر: تعريف لهذا المصطلح الآخر.

التعليمات البرمجية المضمنة

التفاف المقتطفات من التعليمات البرمجية مع <code>. تأكد من عدم استخدام أقواس زاوية HTML.

على سبيل المثال ، <section>يجب أن يتم لفها على أنها مضمنة.

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

كتل التعليمات البرمجية

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

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

<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>

المتغيرات

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

ص = م س + ب

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

إدخال المستخدم

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

لتبديل الدلائل ، اكتب cdمتبوعًا باسم الدليل.
لتعديل الضبط ، اضغط على ctrl + ,

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>

إخراج العينة

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

من المفترض أن يتم التعامل مع هذا النص على أنه عينة إخراج من برنامج كمبيوتر.

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

الجداول

يتم تعديل الجداول قليلاً حسب النمط <caption>، وتقليص الحدود ، وضمان الاتساق text-alignفي كل مكان. تغييرات إضافية للحدود والمساحة المتروكة والمزيد تأتي مع الفصل.table .

هذا مثال لجدول ، وهذا شرحه لوصف المحتويات.
عنوان الجدول	عنوان الجدول	عنوان الجدول	عنوان الجدول
خلية الجدول	خلية الجدول	خلية الجدول	خلية الجدول
خلية الجدول	خلية الجدول	خلية الجدول	خلية الجدول
خلية الجدول	خلية الجدول	خلية الجدول	خلية الجدول

نماذج

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

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

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

مثال أسطورة

إدخال مثال

مثال على البريد الإلكتروني

مثال على الهاتف

مثال عنوان url

رقم المثال

مثال البحث

نطاق المثال

مثال على إدخال ملف

حدد المثال

حدد خانة الاختيار هذه

الخيار الأول هو هذا وذاك الخيار الثاني هو شيء آخر طويل جدًا أيضًا لإظهار التفاف عناصر التحكم في النموذج الفاخرة هذه. الخيار الثالث معطل

مثال textarea

تاريخ المثال

وقت مثال

مثال على كلمة المرور

مثال تاريخ ووقت محلي

مثال الأسبوع

مثال الشهر

مثال اللون

مثال الإخراج 100

دعم إدخال التاريخ واللون

ضع في اعتبارك أن مدخلات التاريخ ليست مدعومة بالكامل من قبل جميع المتصفحات ، وبالتحديد Safari.

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

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

زر عنصر ليس به زر

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

عناصر متنوعة

تبوك

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

Twitter، Inc.
1355 Market St، Suite 900
San Francisco، CA 94103
P: (123) 456-7890

الاسم الكامل
[email protected]

Blockquote

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

اقتباس مشهور موجود في عنصر blockquote.

شخص مشهور في عنوان المصدر

عناصر مضمنة

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

عنصر اختصار HTML .

ملخص

الافتراضي cursorفي الملخص text، لذلك قمنا بإعادة تعيين ذلك pointerللتعبير عن إمكانية التفاعل مع العنصر بالنقر فوقه.

بعض التفاصيل

مزيد من المعلومات حول التفاصيل.

مزيد من التفاصيل

فيما يلي مزيد من التفاصيل حول التفاصيل.

`[hidden]`سمة HTML5

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

<input type="text" hidden>

عدم توافق jQuery

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

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

اعادة التشغيل

يقترب

متغيرات CSS

افتراضيات الصفحة

مكدس الخط الأصلي

متغيرات CSS

العناوين والفقرات

القوائم

التعليمات البرمجية المضمنة

كتل التعليمات البرمجية

المتغيرات

إدخال المستخدم

إخراج العينة

الجداول

نماذج

دعم إدخال التاريخ واللون

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

عناصر متنوعة

تبوك

Blockquote

عناصر مضمنة

ملخص

[hidden]سمة HTML5

عدم توافق jQuery

`[hidden]`سمة HTML5