in English

לְאַתחֵל

אתחול מחדש, אוסף של שינויים ב-CSS ספציפיים לרכיבים בקובץ בודד, מפעיל את Bootstrap כדי לספק קו בסיס אלגנטי, עקבי ופשוט שאפשר לבנות עליו.

גִישָׁה

אתחול מחדש מתבסס על Normalize, ומספק רכיבי HTML רבים עם סגנונות דעתניים במקצת תוך שימוש בבוררי אלמנטים בלבד. סטיילינג נוסף נעשה רק עם שיעורים. לדוגמה, אנו מאתחלים כמה <table>סגנונות עבור קו בסיס פשוט יותר ומאוחר יותר מספקים .table, .table-bordered, ועוד.

להלן ההנחיות והסיבות שלנו לבחירה מה לעקוף באתחול מחדש:

עדכן כמה ערכי ברירת מחדל של הדפדפן לשימוש ב- rems במקום ב- 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-height, ו text-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;

שים לב שמכיוון שערימת הגופנים כוללת גופני אימוג'י, תווי סמל/דינגbat Unicode נפוצים רבים יעובדו כתמונות מרובות צבעים. המראה שלהם ישתנה, בהתאם לסגנון המשמש בגופן האימוג'י המקורי של הדפדפן/פלטפורמה, והם לא יושפעו colorמסגנונות CSS.

זה font-familyמיושם על <body>בירושה באופן אוטומטי ברחבי Bootstrap. כדי להחליף את הגלובלי font-family, עדכן $font-family-baseוהידור מחדש את Bootstrap.

כותרות ופסקאות

כל רכיבי הכותרת - למשל, <h1>- <p>מאופסים כדי margin-topלהסיר אותם. נוספו כותרות margin-bottom: .5remופסקאות margin-bottom: 1remלרווח קל.

כּוֹתֶרֶת	דוגמא
`<h1></h1>`	h1. כותרת אתחול
`<h2></h2>`	h2. כותרת אתחול
`<h3></h3>`	h3. כותרת אתחול
`<h4></h4>`	h4. כותרת אתחול
`<h5></h5>`	h5. כותרת אתחול
`<h6></h6>`	h6. כותרת אתחול

רשימות

כל הרשימות - <ul>, <ol>ו <dl>- margin-topהוסרו ו- margin-bottom: 1rem. לרשימות מקוננות אין margin-bottom.

השוליים העליונים של כל הרשימות הוסרו
והשוליים התחתונים שלהם נרמלו
לרשימות מקוננות אין שוליים תחתונים
- כך יש להם מראה אחיד יותר
- במיוחד כשאחריהם מגיעים עוד פריטי רשימה
גם הריפוד השמאלי אופס

הנה רשימה מסודרת
עם כמה פריטי רשימה
יש לו אותו מראה כללי
כמו הרשימה הלא מסודרת הקודמת

לעיצוב פשוט יותר, היררכיה ברורה ומרווחים טובים יותר, רשימות התיאור עודכנו את הס' margin. s <dd>לאפס margin-leftולהוסיף 0. s מודגשות .margin-bottom: .5rem<dt>

רשימות תיאור: רשימת תיאורים מושלמת להגדרת מונחים.
טווח: הגדרה למונח.; הגדרה שנייה לאותו מונח.
עוד מונח: הגדרה למונח אחר זה.

טקסט מעוצב מראש

האלמנט <pre>מאופס כדי להסיר אותו margin-topולהשתמש remביחידות עבורו margin-bottom.

‎.example-element {
  margin-bottom: 1rem;
}

טבלאות

הטבלאות מותאמות מעט לסגנון <caption>, מכווצות את הגבולות ומבטיחות עקביות text-alignלאורך כל הדרך. שינויים נוספים עבור גבולות , ריפוד ועוד מגיעים עם הכיתה.table .

זוהי טבלה לדוגמה, וזו הכותרת שלה לתיאור התוכן.
כותרת טבלה	כותרת טבלה	כותרת טבלה	כותרת טבלה
תא טבלה	תא טבלה	תא טבלה	תא טבלה
תא טבלה	תא טבלה	תא טבלה	תא טבלה
תא טבלה	תא טבלה	תא טבלה	תא טבלה

טפסים

רכיבי צורה שונים אוחלו מחדש עבור סגנונות בסיס פשוטים יותר. להלן כמה מהשינויים הבולטים ביותר:

<fieldset>ל-s אין גבולות, ריפוד או שוליים, כך שניתן להשתמש בהם בקלות כעטיפות עבור קלט בודד או קבוצות של קלט.
<legend>s, כמו ערכות fields, גם עוצבו מחדש כדי שיוצגו ככותרת מסוגים.
<label>s מוגדרים display: inline-blockכדי לאפשר marginלהחיל.
<input>s, <select>s, <textarea>s ו- <button>s מטופלים בעיקר על ידי Normalize, אבל Reboot מסיר גם את שלהם marginואת מגדיר line-height: inherit.
<textarea>s משתנים כך שניתן לשנות את גודלם אנכית בלבד, מכיוון ששינוי גודל אופקי לעתים קרובות "שובר" את פריסת העמוד.
<button>s <input>ורכיבי כפתור יש 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>הם מיועדים להצגת פרטי קשר עבור האב הקדמון הקרוב ביותר (או גוף שלם של עבודה). שמור על עיצוב על ידי סיום שורות עם <br>.

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

שם מלא
[email protected]

Blockquote

ברירת המחדל של marginblockquotes היא 1em 40px, אז אנחנו מאפסים את זה 0 0 1remלמשהו יותר עקבי עם אלמנטים אחרים.

ציטוט ידוע, הכלול באלמנט blockquote.

מישהו מפורסם בכותרת המקור

אלמנטים מוטבעים

האלמנט <abbr>מקבל סגנון בסיסי כדי להבליט אותו בין טקסט הפסקה.

Nulla attr vitae elit libero, a pharetra augue.

סיכום

ברירת המחדל 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.