לְאַתחֵל
אתחול מחדש, אוסף של שינויים ב-CSS ספציפיים לרכיבים בקובץ בודד, מפעיל את Bootstrap כדי לספק קו בסיס אלגנטי, עקבי ופשוט שאפשר לבנות עליו.
גִישָׁה
אתחול מחדש מתבסס על Normalize, ומספק רכיבי HTML רבים עם סגנונות דעתניים במקצת תוך שימוש בבוררי אלמנטים בלבד. סטיילינג נוסף נעשה רק עם שיעורים. לדוגמה, אנו מאתחלים כמה <table>
סגנונות עבור קו בסיס פשוט יותר ומאוחר יותר מספקים .table
, .table-bordered
, ועוד.
להלן ההנחיות והסיבות שלנו לבחירה מה לעקוף באתחול מחדש:
- עדכן כמה ערכי ברירת מחדל של הדפדפן לשימוש ב-
rem
s במקום ב-em
s עבור מרווח רכיבים שניתן להרחבה. - הימנע
margin-top
. שוליים אנכיים יכולים להתמוטט, ולהניב תוצאות בלתי צפויות. אך חשוב מכך, כיוון יחיד שלmargin
הוא מודל מנטלי פשוט יותר. - לשינוי קנה מידה קל יותר בין גדלי מכשירים, רכיבי בלוק צריכים להשתמש ב-
rem
s עבורmargin
s. - שמור הצהרות על
font
מאפיינים הקשורים למינימום, השתמשinherit
במידת האפשר.
משתני CSS
נוסף בגרסה 5.1.1
עם v5.1.1, תקנינו את ה- @import
s הדרושים שלנו בכל חבילות ה-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-left
on <ul>
ואת <ol>
האלמנטים.
- השוליים העליונים של כל הרשימות הוסרו
- והשוליים התחתונים שלהם נרמלו
- לרשימות מקוננות אין שוליים תחתונים
- כך יש להם מראה אחיד יותר
- במיוחד כשאחריהם מגיעים עוד פריטי רשימה
- גם הריפוד השמאלי אופס
- הנה רשימה מסודרת
- עם כמה פריטי רשימה
- יש לו אותו מראה כללי
- כמו הרשימה הלא מסודרת הקודמת
לעיצוב פשוט יותר, היררכיה ברורה ומרווחים טובים יותר, רשימות התיאור עודכנו את הס' margin
. s <dd>
לאפס margin-left
ולהוסיף 0
. s מודגשות .margin-bottom: .5rem
<dt>
- רשימות תיאור
- רשימת תיאורים מושלמת להגדרת מונחים.
- טווח
- הגדרה למונח.
- הגדרה שנייה לאותו מונח.
- עוד מונח
- הגדרה למונח אחר זה.
קוד מוטבע
עטוף קטעי קוד מוטבעים עם <code>
. הקפד לברוח מסוגריים של זווית HTML.
<section>
צריך להיות עטוף בתור מוטבע.
For example, <code><section></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><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
משתנים
לציון משתנים השתמש <var>
בתג.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
קלט משתמש
השתמש <kbd>
בלחצן כדי לציין קלט המוזן בדרך כלל באמצעות המקלדת.
כדי לערוך הגדרות, לחץ על 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)
.
שינויים אלו, ועוד, מודגמים להלן.
תמיכה בהזנת תאריך וצבע
זכור שקלט תאריך אינו נתמך במלואו על ידי כל הדפדפנים, כלומר 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>
.
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>
מקבל סגנון בסיסי כדי להבליט אותו בין טקסט הפסקה.
סיכום
ברירת המחדל 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
זאת.