Source

לְאַתחֵל

אתחול מחדש, אוסף של שינויים ב-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, 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-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.

Lorem ipsum dolor sit amet
Consectetur adipiscing עלית
הוראה שלם במאסה
Facilisis ב-Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing עלית
הוראה שלם במאסה
Facilisis ב-Pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

רשימות תיאור: רשימת תיאורים מושלמת להגדרת מונחים.
Euismod: Vestibulum id 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 {
  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).

שינויים אלו, ועוד, מודגמים להלן.

אלמנטים שונים

כתובת

<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למשהו יותר עקבי עם אלמנטים אחרים.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

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

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

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

Nulla attr vitae elit libero, a pharetra augue.

סיכום

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