in English

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

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

يقترب

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

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

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

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

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

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

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

تم إسقاط خطوط الويب الافتراضية (Helvetica Neue و Helvetica و Arial) في Bootstrap 4 واستبدالها بـ "مجموعة الخطوط الأصلية" لتقديم النص الأمثل على كل جهاز ونظام تشغيل. اقرأ المزيد عن مجموعات الخطوط الأصلية في مقالة Smashing Magazine هذه .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

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

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

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

تتم إعادة تعيين كافة عناصر العنوان - على سبيل المثال <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-bottom

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

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

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

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

نص منسق مسبقًا

تتم <pre>إعادة تعيين العنصر لإزالة margin-topواستخدام remالوحدات الخاصة به margin-bottom.

.example-element {
  الهامش السفلي: 1rem ؛
}

الجداول

يتم تعديل الجداول قليلاً حسب النمط <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)

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

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

تتضمن إعادة التشغيل تحسينًا 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>العنصر نمطًا أساسيًا ليجعله بارزًا بين نص الفقرة.

Nulla attr vitae elit libero ، augue pharetra.

ملخص

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

بعض التفاصيل

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

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

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

`[hidden]`سمة HTML5

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

<input type="text" hidden>

عدم توافق jQuery

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

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