לְאַתחֵל

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

בעמוד זה

גִישָׁה

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

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

עדכן כמה ערכי ברירת מחדל של הדפדפן לשימוש ב- rems במקום ב- ems עבור מרווח רכיבים שניתן להרחבה.
הימנע margin-top. שוליים אנכיים יכולים להתמוטט, ולהניב תוצאות בלתי צפויות. אך חשוב מכך, כיוון יחיד של marginהוא מודל מנטלי פשוט יותר.
לשינוי קנה מידה קל יותר בין גדלי מכשירים, רכיבי בלוק צריכים להשתמש ב- rems עבור margins.
שמור הצהרות על fontמאפיינים הקשורים למינימום, השתמש inheritבמידת האפשר.

משתני CSS

נוסף בגרסה 5.1.1

עם v5.1.1, תקנינו את ה- @imports הדרושים שלנו בכל חבילות ה-CSS שלנו (כולל bootstrap.css, bootstrap-reboot.css, bootstrap-grid.cssוכדי לכלול _root.scss. זה מוסיף :rootמשתני CSS ברמה לכל החבילות, ללא קשר לכמה מהם נעשה שימוש בחבילה זו. בסופו של דבר Bootstrap 5 ימשיך ראה משתני CSS נוספים שנוספו עם הזמן.

ברירת המחדל של עמודים

הרכיבים <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;

שים לב שמכיוון שערימת הגופנים כוללת גופני אימוג'י, תווי סמל/דינגbat unicode נפוצים רבים יעובדו כתמונות מרובות צבעים. המראה שלהם ישתנה, בהתאם לסגנון המשמש בגופן האימוג'י המקורי של הדפדפן/פלטפורמה, והם לא יושפעו 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};

בפועל, משתנים אלה מיושמים לאחר אתחול מחדש כך:

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-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. איפסנו גם את ה- padding-lefton <ul>ואת <ol>האלמנטים.

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

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

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

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

קוד מוטבע

עטוף קטעי קוד מוטבעים עם <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>בתג.

y = m x + b

<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, כמו ערכות 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).

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

אגדה לדוגמה

דוגמה לקלט

מייל לדוגמה

טלפון לדוגמא

כתובת אתר לדוגמה

מספר לדוגמא

חיפוש לדוגמה

טווח לדוגמה

קלט קובץ לדוגמה

בחירת דוגמה

סמן תיבת סימון זו

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

אזור טקסט לדוגמה

תאריך לדוגמה

זמן לדוגמא

סיסמה לדוגמה

דוגמה לתאריך-שעה-מקומי

שבוע לדוגמה

חודש לדוגמה

צבע לדוגמה

פלט לדוגמה 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>הם מיועדים להצגת פרטי קשר עבור האב הקדמון הקרוב ביותר (או גוף שלם של עבודה). שמור על עיצוב על ידי סיום שורות עם <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>מקבל סגנון בסיסי כדי להבליט אותו בין טקסט הפסקה.

אלמנט קיצור 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