Source

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

إعادة التشغيل ، وهي مجموعة من تغييرات 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

أبجد هوز دولور الجلوس امات
Consectetur adipiscing النخبة
عدد صحيح molestie lorem في ماسا
Facilisis في فترة ما قبل nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- الدهليز laoreet porttitor sem
- AC tristique Libero volutpat أت
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

أبجد هوز دولور الجلوس امات
Consectetur adipiscing النخبة
عدد صحيح molestie lorem في ماسا
Facilisis في فترة ما قبل nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

قوائم الوصف: قائمة وصف مثالية لتعريف المصطلحات.
يوسمود: الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

تتم <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)

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

عناصر متنوعة

تبوك

يتم <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لشيء أكثر اتساقًا مع العناصر الأخرى.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.

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

عناصر مضمنة

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

Nulla attr vitae elit libero ، augue pharetra.

ملخص

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

بعض التفاصيل

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

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

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

`[hidden]`سمة HTML5

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.