Source

עובר ל-v4

Bootstrap 4 הוא שכתוב משמעותי של הפרויקט כולו. השינויים הבולטים ביותר מסוכמים להלן, ולאחר מכן שינויים ספציפיים יותר לרכיבים הרלוונטיים.

שינויים יציבים

במעבר מבטא 3 לגרסה היציבה שלנו 4.0, אין שינויים פורצים, אבל יש כמה שינויים בולטים.

הַדפָּסָה

  • תיקנו כלי עזר להדפסה שבורים. בעבר, שימוש .d-print-*במחלקה היה מבטל באופן בלתי צפוי כל .d-*מחלקה אחרת. כעת, הם תואמים את כלי העזר האחרים שלנו לתצוגה וחלים רק על המדיה הזו ( @media print).

  • כלי עזר זמינים לתצוגת הדפסה מורחבים כדי להתאים לכלי עזר אחרים. בטא 3 ומעלה היו רק block, inline-block, inlineו none. יציב v4 נוסף flex, inline-flex, table, table-rowו table-cell.

  • תיקנו עיבוד תצוגה מקדימה של הדפסה בדפדפנים עם סגנונות הדפסה חדשים המציינים @page size.

שינויים בבטא 3

אמנם בטא 2 ראתה את עיקר השינויים השבירים שלנו במהלך שלב הבטא, אבל עדיין יש לנו כמה שצריך לטפל בהם במהדורת בטא 3. שינויים אלה חלים אם אתה מעדכן לבטא 3 מ-Beta 2 או כל גרסה ישנה יותר של Bootstrap.

שונות

  • הסר את $thumbnail-transitionהמשתנה שאינו בשימוש. לא העברנו שום דבר, אז זה היה רק ​​קוד נוסף.
  • חבילת npm אינה כוללת עוד קבצים אחרים מלבד קבצי המקור וה-dist שלנו; אם הסתמכת עליהם והרצת את הסקריפטים שלנו דרך node_modulesהתיקיה, עליך להתאים את זרימת העבודה שלך.

טפסים

  • כתב מחדש הן תיבות סימון ומכשירי רדיו מותאמים אישית והן ברירת מחדל. כעת, לשניהם יש מבנה HTML תואם (חיצוני <div>עם אח <input>ו- <label>) ואותם סגנונות פריסה (ברירת מחדל מוערמת, בשורה עם מחלקה משנה). זה מאפשר לנו לעצב את התווית בהתבסס על מצב הקלט, לפשט את התמיכה disabledבתכונה (בעבר דרשה מחלקה אב) ולתמוך טוב יותר באימות הטופס שלנו.

    כחלק מכך, שינינו את ה-CSS לניהול מספר background-imageים בתיבות סימון ומכשירי רדיו מותאמים אישית. בעבר, .custom-control-indicatorלרכיב שהוסר כעת היה צבע הרקע, השיפוע וסמל ה-SVG. התאמה אישית של שיפוע הרקע פירושה החלפת כל אלה בכל פעם שאתה צריך לשנות רק אחד. כעת, יש לנו .custom-control-label::beforeעבור המילוי והשיפוע .custom-control-label::afterומטפל בסמל.

    כדי לבצע צ'ק מותאם אישית מוטבע, הוסף .custom-control-inline.

  • בורר מעודכן עבור קבוצות לחצנים מבוססות קלט. במקום [data-toggle="buttons"] { }עבור סגנון והתנהגות, אנו משתמשים dataבתכונה רק עבור התנהגויות JS ומסתמכים על .btn-group-toggleמחלקה חדשה לסטיילינג.

  • הוסר .col-form-legendלטובת משופר מעט .col-form-label. בדרך זו .col-form-label-smוניתן .col-form-label-lgלהשתמש בו על <legend>אלמנטים בקלות.

  • קלט קבצים מותאמים אישית קיבלו שינוי $custom-file-textבמשתנה Sass שלהם. זה כבר לא מפת Sass מקוננת וכעת מפעיל רק מחרוזת אחת - Browseהכפתור מכיוון שהוא כעת האלמנט הפסאודו היחיד שנוצר מה-Sass שלנו. הטקסט Choose fileמגיע כעת מה- .custom-file-label.

קבוצות קלט

  • תוספים של קבוצת קלט הם כעת ספציפיים למיקום שלהם ביחס לקלט. ירדנו .input-group-addonועבור .input-group-btnשני שיעורים חדשים, .input-group-prependו .input-group-append. עליך להשתמש במפורש ב-append או prepend כעת, מה שמפשט הרבה מה-CSS שלנו. בתוך תוספת או תוספת, מקם את הכפתורים שלך כפי שהיו קיימים בכל מקום אחר, אך עטוף טקסט ב- .input-group-text.

  • סגנונות אימות נתמכים כעת, וכך גם מספר קלטים (אם כי ניתן לאמת רק קלט אחד לכל קבוצה).

  • שיעורי גודל חייבים להיות על האב .input-groupולא על רכיבי הטופס הבודדים.

שינויים בבטא 2

בזמן בטא, אנו שואפים שלא יהיו שינויים פורצים. עם זאת, דברים לא תמיד הולכים כמתוכנן. להלן השינויים השבירה שיש לזכור בעת מעבר מבטא 1 לבטא 2.

שְׁבִירָה

  • המשתנה הוסר $badge-colorוהשימוש בו ב- .badge. אנו משתמשים בפונקציית ניגודיות צבע כדי לבחור colorבהתבסס על background-color, כך שהמשתנה מיותר.
  • שונה שם grayscale()הפונקציה ל gray()כדי למנוע התנגשות עם grayscaleהמסנן המקורי של CSS.
  • שונה שמות .table-inverse, .thead-inverse, ו- .thead-defaultו .*-dark, .*-lightהתואמים את ערכות הצבעים שלנו בשימוש במקומות אחרים.
  • טבלאות רספונסיביות מייצרות כעת מחלקות עבור כל נקודת שבירה של רשת. זה נפרד מבטא 1 בכך .table-responsiveשהשתמשת בו דומה יותר ל- .table-responsive-md. כעת תוכל להשתמש .table-responsiveאו .table-responsive-{sm,md,lg,xl}לפי הצורך.
  • התמיכה ב-Bower הופסקה מכיוון שמנהל החבילות הוצאה משימוש עבור חלופות (למשל, Yarn או npm). לפרטים, ראה bower/bower#2298 .
  • Bootstrap עדיין דורש jQuery 1.9.1 ומעלה, אבל מומלץ להשתמש בגרסה 3.x מכיוון שהדפדפנים הנתמכים של v3.x הם אלו שה-Bootstrap תומך בתוספת ל-v3.x יש כמה תיקוני אבטחה.
  • הסירו את .form-control-labelהמחלקה שאינה בשימוש. אם אכן השתמשת במחלקה הזו, זה היה כפיל של .col-form-labelהמחלקה שמרכזה את ה-A אנכית <label>עם הקלט המשויך לה בפריסות טופס אופקיות.
  • שינה את ה- color-yiqmixin שכלל את colorהמאפיין לפונקציה שמחזירה ערך, ומאפשרת לך להשתמש בו עבור כל מאפיין CSS. לדוגמה, במקום color-yiq(#000), היית כותב color: color-yiq(#000);.

עיקרי הדברים

  • הציג pointer-eventsשימוש חדש במודלים. החיצוני .modal-dialogעובר דרך אירועים עם pointer-events: noneטיפול בקליקים מותאם אישית (מה שמאפשר פשוט להאזין בלחיצה .modal-backdropכלשהי), ולאחר מכן מנטרל את זה .modal-contentעם pointer-events: auto.

סיכום

להלן פריטי הכרטיסים הגדולים שתרצה להיות מודע אליהם בעת המעבר מ-v3 ל-v4.

תמיכה בדפדפן

  • התמיכה ב-IE8, IE9 ו-iOS 6 הופסקה. v4 הוא כעת רק IE10+ ו- iOS 7+. עבור אתרים הזקוקים לאחד מאלה, השתמש ב-v3.
  • נוספה תמיכה רשמית לדפדפן ו-WebView של Android v5.0 Lollipop. גרסאות קודמות של דפדפן אנדרואיד ושל WebView נותרו נתמכות באופן לא רשמי בלבד.

שינויים גלובליים

  • Flexbox מופעל כברירת מחדל. באופן כללי זה אומר התרחקות מצפים ועוד על פני הרכיבים שלנו.
  • עבר מפחות ל- Sass עבור קובצי ה-CSS המקור שלנו.
  • עברה מ- pxל remכיחידת ה-CSS הראשית שלנו, אם כי עדיין נעשה שימוש בפיקסלים עבור שאילתות מדיה והתנהגות רשת מכיוון שיציאות התצוגה של המכשיר אינן מושפעות מגודל הסוג.
  • גודל הגופן הגלובלי גדל מ- 14pxל 16px.
  • שינו את שכבות הרשת כדי להוסיף אפשרות חמישית (התייחסות למכשירים קטנים יותר בתחתית 576pxומתחת) והסירו את -xsהתיקונים ממחלקות אלו. דוגמה: .col-6.col-sm-4.col-md-3.
  • החליף את ערכת הנושא האופציונלית הנפרדת באפשרויות הניתנות להגדרה באמצעות משתני SCSS (למשל, $enable-gradients: true).
  • בניית מערכת שעברה שיפוץ לשימוש בסדרה של סקריפטים npm במקום Grunt. ראה package.jsonעבור כל התסריטים, או הפרויקט שלנו Readme לצרכי פיתוח מקומיים.
  • שימוש לא מגיב ב-Bootstrap אינו נתמך עוד.
  • הפסיק את ה-Customizer המקוון לטובת תיעוד הגדרה נרחב יותר ובנייה מותאמות אישית.
  • נוספו עשרות מחלקות שירות חדשות עבור זוגות נפוצים של ערך נכסי CSS וקיצורי דרך למרווחי שוליים/ריפוד.

מערכת רשת

  • הועבר ל-flexbox.
    • נוספה תמיכה עבור flexbox ב-grid mixins ומחלקות מוגדרות מראש.
    • כחלק מ-flexbox, כללה תמיכה במחלקות יישור אנכי ואופקי.
  • שמות מחלקות רשת מעודכנים ושכבת רשת חדשה.
    • נוספה smשכבת רשת חדשה למטה 768pxלשליטה פרטנית יותר. כעת יש לנו xs, sm, md, lgו xl. זה גם אומר שכל שכבה עלתה רמה אחת (אז .col-md-6ב-v3 הוא כעת .col-lg-6ב-v4).
    • xsמחלקות רשת שונו כך שלא יחייבו את האינפקס כדי לייצג בצורה מדויקת יותר שהם מתחילים להחיל סגנונות min-width: 0בערך פיקסל מוגדר ולא. במקום .col-xs-6, זה עכשיו .col-6. כל שאר שכבות הרשת דורשות את התיקון (למשל, sm).
  • גדלי רשת, שילובים ומשתנים מעודכנים.
    • למרזבי רשת יש כעת מפת Sass כך שתוכל לציין רוחב מרזב ספציפי בכל נקודת שבירה.
    • תערובות רשת מעודכנות כדי להשתמש make-col-readyבמיקסין הכנה ו- make-colכדי להגדיר את flexועבור max-widthגודל עמודה בודדת.
    • שינו את נקודות השבירה של המדיה של מערכת הרשת ואת רוחבי המכולה כדי לקחת בחשבון את שכבת הרשת החדשה ולהבטיח שהעמודות מתחלקות באופן שווה 12ברוחב המקסימלי שלהן.
    • נקודות עצירה של רשת ורוחב מיכל מטופלים כעת באמצעות מפות Sass ( $grid-breakpointsו $container-max-widths) במקום קומץ משתנים נפרדים. אלה מחליפים את @screen-*המשתנים לחלוטין ומאפשרים לך להתאים אישית את שכבות הרשת.
    • גם שאילתות המדיה השתנו. במקום לחזור על הצהרות שאילתות המדיה שלנו באותו ערך בכל פעם, כעת יש לנו @include media-breakpoint-up/down/only. עכשיו, במקום לכתוב @media (min-width: @screen-sm-min) { ... }, אתה יכול לכתוב @include media-breakpoint-up(sm) { ... }.

רכיבים

  • נפלו לוחות, תמונות ממוזערות ובארות עבור רכיב חדש הכולל הכל, קלפים .
  • הפיל את גופן הסמל של Glyphicons. אם אתה צריך סמלים, כמה אפשרויות הן:
  • הורד את הפלאגין Affix jQuery.
    • אנו ממליצים להשתמש position: stickyבמקום זאת. עיין בערך HTML5 בבקשה לפרטים והמלצות ספציפיות לפולימילוי. הצעה אחת היא להשתמש @supportsבכלל ליישומו (למשל, @supports (position: sticky) { ... })/
    • אם השתמשת ב-Afix כדי להחיל סגנונות נוספים שאינם positionסגנונות, ייתכן שהפוליפילים לא יתמכו במקרה השימוש שלך. אפשרות אחת לשימושים כאלה היא ספריית הצד השלישי ScrollPos-Styler .
  • הורד את רכיב הביפר מכיוון שהוא בעצם היה כפתורים מותאמים מעט.
  • שינתה כמעט את כל הרכיבים לשימוש יותר בבוררי כיתות לא מקוננים במקום בבוררי ילדים ספציפיים מדי.

לפי רכיב

רשימה זו מדגישה שינויים מרכזיים לפי רכיבים בין v3.xx ל-v4.0.0.

לְאַתחֵל

חדש ב-Bootstrap 4 הוא ה- Reboot , גיליון סגנונות חדש שמתבסס על Normalize עם סגנונות האיפוס הדעתניים שלנו. בוררים המופיעים בקובץ זה משתמשים רק באלמנטים - אין כאן מחלקות. זה מבודד את סגנונות האיפוס שלנו מסגנונות הרכיבים שלנו לגישה מודולרית יותר. כמה מהאיפוסים החשובים ביותר שזה כולל הם box-sizing: border-boxהשינוי, מעבר מיחידות emליחידות remבאלמנטים רבים, סגנונות קישור ואיפוסים רבים של רכיבי טופס.

טיפוגרפיה

  • העביר את כל .text-כלי השירות _utilities.scssלקובץ.
  • ירד .page-headerמכיוון שניתן ליישם את הסגנונות שלו באמצעות כלי עזר.
  • .dl-horizontalהושמט. במקום זאת, השתמש .rowב-On <dl>והשתמש במחלקות עמודות רשת (או מיקסינס) על שלה <dt>ועל <dd>הילדים.
  • ציטוטים מעוצבים מחדש, מעבירים את הסגנונות שלהם <blockquote>מהאלמנט למחלקה אחת, .blockquote. הורד את .blockquote-reverseהשינוי עבור כלי עזר לטקסט.
  • .list-inline.list-inline-itemכעת דורש שהכיתה החדשה יחולו על פריטי רשימת הילדים שלה .

תמונות

  • שונה שם .img-responsiveל .img-fluid.
  • שונה שם .img-roundedל.rounded
  • שונה שם .img-circleל.rounded-circle

טבלאות

  • כמעט כל המופעים של >הבורר הוסרו, כלומר טבלאות מקוננות יירשו סגנונות אוטומטית מהוריהם. זה מפשט מאוד את הבוררים וההתאמות האישיות הפוטנציאליות שלנו.
  • השם שונה .table-condensedלעבור .table-smעקביות.
  • נוספה .table-inverseאפשרות חדשה.
  • נוספו משנה כותרות טבלה: .thead-defaultו .thead-inverse.
  • שמם של מחלקות קונטקסטואליות שינו .table-קידומת -. מכאן .active, .success, .warning, .dangerואל , , ו . .info_ _.table-active.table-success.table-warning.table-danger.table-info

טפסים

  • הרכיב שהועבר מתאפס _reboot.scssלקובץ.
  • שונה שם .control-labelל .col-form-label.
  • שונה שם .input-lgול- .input-smו .form-control-lg, .form-control-smבהתאמה.
  • ירד .form-group-*שיעורים לשם הפשטות. השתמש .form-control-*בשיעורים במקום זאת כעת.
  • הורד .help-blockוהחליף אותו .form-textבטקסט עזרה ברמת הבלוק. לטקסט עזרה מוטבע ואפשרויות גמישות אחרות, השתמש במחלקות שירות כמו .text-muted.
  • ירד .radio-inlineו .checkbox-inline.
  • מאוחדים לתוך המעמדות .checkboxהשונים ..radio.form-check.form-check-*
  • טפסים אופקיים שעברו שיפוץ:
    • הפיל את .form-horizontalדרישת הכיתה.
    • .form-groupכבר לא מחיל סגנונות מה- .rowvia mixin, ולכן .rowנדרש כעת עבור פריסות רשת אופקיות (למשל, <div class="form-group row">).
    • נוספה .col-form-labelמחלקה חדשה למרכז אנכי של תוויות עם .form-controls.
    • התווסף חדש .form-rowעבור פריסות טפסים קומפקטיות עם מחלקות הרשת (החלף את שלך .rowעבור a .form-rowועבור).
  • נוספה תמיכה בטפסים מותאמים אישית (עבור תיבות סימון, מכשירי רדיו, בחירות וקלט קבצים).
  • הוחלפו .has-error, .has-warningומחלקות .has-successבאימות טופס HTML5 באמצעות CSS :invalidו :valid-פסאודו-מחלקות.
  • שונה שם .form-control-staticל .form-control-plaintext.

כפתורים

  • שונה שם .btn-defaultל .btn-secondary.
  • הורד את .btn-xsהמחלקה לחלוטין מכיוון .btn-smשהוא יחסית קטן בהרבה משל v3.
  • תכונת הלחצן הסטטוסית של button.jsהתוסף jQuery בוטלה. זה כולל את השיטות $().button(string)ו . $().button('reset')אנו ממליצים להשתמש במעט JavaScript מותאם אישית במקום זאת, שתהיה לך יתרון להתנהג בדיוק כמו שאתה רוצה.
    • שים לב שהתכונות האחרות של התוסף (תיבות סימון לחצנים, מכשירי רדיו לחצנים, לחצני החלפה בודדת) נשמרו ב-v4.
  • שנה את הלחצנים ' [disabled]לכאשר :disabledIE9+ תומך :disabled. עם זאת fieldset[disabled]הוא עדיין הכרחי מכיוון שערכות שדות מושבתות מקוריות עדיין עומסות ב-IE11 .

קבוצת כפתורים

  • שכתב רכיב עם flexbox.
  • הוסר .btn-group-justified. כתחליף אתה יכול להשתמש <div class="btn-group d-flex" role="group"></div>בתור עטיפה סביב אלמנטים עם .w-100.
  • הורד את .btn-group-xsהכיתה לגמרי בגלל הסרה של .btn-xs.
  • הוסר מרווח מפורש בין קבוצות לחצנים בסרגלי כלים של כפתורים; השתמש בכלי עזר לשוליים כעת.
  • תיעוד משופר לשימוש עם רכיבים אחרים.
  • עבר מבוררי הורים למחלקות יחיד עבור כל הרכיבים, השינויים וכו'.
  • סגנונות נפתחים פשוטים כדי לא לשלוח יותר עם חיצים הפונה כלפי מעלה או מטה המצורפים לתפריט הנפתח.
  • ניתן לבנות אפשרויות נפתחות עם <div>s או <ul>s עכשיו.
  • סגנונות נפתחים וסימון שנבנו מחדש כדי לספק תמיכה קלה <a>ומובנית <button>לפריטים נפתחים ומבוססים.
  • שונה שם .dividerל .dropdown-divider.
  • פריטים נפתחים דורשים כעת .dropdown-item.
  • בוררים נפתחים אינם דורשים עוד מפורש <span class="caret"></span>; זה מסופק כעת באופן אוטומטי באמצעות CSS ::afterב- .dropdown-toggle.

מערכת רשת

  • נוספה 576pxנקודת עצירה חדשה לרשת כ- sm, כלומר יש כעת חמש שכבות בסך הכל ( xs, sm, md, lgו- xl).
  • שונה שם של מחלקות שינוי הרשת הרספונסיביות מ- .col-{breakpoint}-{modifier}-{size}ל .{modifier}-{breakpoint}-{size}עבור מחלקות רשת פשוטות יותר.
  • ירד שיעורי שינוי דחיפה ומשיכה עבור המחלקות החדשות המופעלות על ידי flexbox order. לדוגמה, במקום .col-8.push-4ו .col-4.pull-8, תשתמש ב- .col-8.order-2ו .col-4.order-1.
  • נוספו מחלקות שירות flexbox עבור מערכת ורכיבים ברשת.

רשימת קבוצות

  • שכתב רכיב עם flexbox.
  • הוחלף a.list-group-itemבמחלקה מפורשת, .list-group-item-action, לעיצוב גירסאות קישור וכפתורים של פריטי קבוצת רשימה.
  • נוספה .list-group-flushכיתה לשימוש עם כרטיסים.
  • שכתב רכיב עם flexbox.
  • בהינתן המעבר ל-flexbox, סביר להניח שהיישור של אייקוני הסרה בכותרת נשבר מכיוון שאיננו משתמשים יותר ב-floats. תוכן צף בא קודם, אבל עם flexbox זה כבר לא המקרה. עדכן את אייקוני הדחייה שלך כדי לתקן את הכותרות המודוליות.
  • האפשרות remote(שיכולה לשמש לטעינה אוטומטית ולהחדרת תוכן חיצוני למודאל) loaded.bs.modalוהאירוע המתאים הוסרו. אנו ממליצים במקום זאת להשתמש בתבניות בצד הלקוח או במסגרת מחייבת נתונים, או להתקשר ל-jQuery.load בעצמך.
  • שכתב רכיב עם flexbox.
  • הפיל כמעט את כל >הבוררים לעיצוב פשוט יותר באמצעות שיעורים לא מקוננים.
  • במקום בוררים ספציפיים ל-HTML כמו .nav > li > a, אנו משתמשים במחלקות נפרדות עבור .navs, .nav-items ו- .nav-links. זה הופך את ה-HTML שלך לגמיש יותר תוך כדי הרחבה מוגברת.

ה-navbar שוכתב לחלוטין ב-flexbox עם תמיכה משופרת ליישור, היענות והתאמה אישית.

  • התנהגויות של סרגל ניווט רספונסיבי מוחלות כעת על .navbarהכיתה באמצעות ההגדרה הנדרשת .navbar-expand-{breakpoint} שבה אתה בוחר היכן לכווץ את סרגל הניווט. בעבר זה היה שינוי של פחות משתנה ודרש הידור מחדש.
  • .navbar-defaultהוא עכשיו .navbar-light, אם כי .navbar-darkנשאר אותו הדבר. אחד מאלה נדרש בכל סרגל ניווט. עם זאת, מחלקות אלו כבר לא קובעות background-colors; במקום זאת הם בעצם משפיעים רק על color.
  • סרגלי Navbar דורשים כעת הצהרת רקע מסוג כלשהו. בחר מכלי השירות הרקע שלנו ( .bg-*) או הגדר משלך עם מחלקות האור/הפוכות למעלה להתאמה אישית מטורפת .
  • בהינתן סגנונות flexbox, סרגלי ניווט יכולים כעת להשתמש בכלי עזר flexbox לאפשרויות יישור קלות.
  • .navbar-toggleהוא עכשיו .navbar-togglerויש לו סגנונות שונים וסימון פנימי (לא יותר שלוש <span>שניות).
  • הוריד את .navbar-formהכיתה לגמרי. זה כבר לא הכרחי; במקום זאת, פשוט השתמש .form-inlineוהחל בכלי עזר שוליים לפי הצורך.
  • סרגלי הניווט אינם כוללים יותר margin-bottomאו border-radiusכברירת מחדל. השתמש בכלי עזר לפי הצורך.
  • כל הדוגמאות הכוללות סרגלי ניווט עודכנו כך שיכללו סימון חדש.

דִפּוּף

  • שכתב רכיב עם flexbox.
  • כעת נדרשים שיעורים מפורשים ( .page-item, ) על צאצאיו של ס '.page-link.pagination
  • הורד את .pagerהרכיב לחלוטין מכיוון שהוא היה מעט יותר מכפתורי מתאר מותאמים אישית.
  • .breadcrumb-itemכעת נדרש שיעור מפורש, , על צאצאיו של .breadcrumbס '

תוויות ותגים

  • איחוד .labelובצע .badgeמשמעויות <label>מהאלמנט ולפשט רכיבים קשורים.
  • נוסף .badge-pillכמשנה למראה "גלולה" מעוגל.
  • תגים כבר לא מוצפים אוטומטית בקבוצות רשימה ורכיבים אחרים. כעת נדרשים כיתות שירות לשם כך.
  • .badge-defaultבוטלה .badge-secondaryונוספה כדי להתאים למחלקות שינוי רכיבים בשימוש במקומות אחרים.

לוחות, תמונות ממוזערות ובארות

ירד לחלוטין עבור רכיב הכרטיס החדש.

פאנלים

  • .panelto .card, נבנה כעת עם flexbox.
  • .panel-defaultהוסר ואין החלפה.
  • .panel-groupהוסר ואין החלפה. .card-groupזה לא תחליף, זה שונה.
  • .panel-headingל.card-header
  • .panel-titleל .card-title. בהתאם למראה הרצוי, ייתכן שתרצה להשתמש גם ברכיבי כותרת או מחלקות (למשל <h3>, .h3) או אלמנטים או מחלקות מודגשות (למשל <strong>, <b>, .font-weight-bold). שים לב .card-titleשאמנם שם דומה, מייצר מראה שונה מאשר .panel-title.
  • .panel-bodyל.card-body
  • .panel-footerל.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-dangerוהושמטו עבור .bg-, .text-, וכלי .borderעזר שנוצרו $theme-colorsממפת Sass שלנו.

התקדמות

  • .progress-bar-*החליף מחלקות קונטקסטואליות עם .bg-*כלי עזר. לדוגמה, class="progress-bar progress-bar-danger"הופך ל class="progress-bar bg-danger".
  • הוחלף .activeעבור פסי התקדמות מונפשים עם .progress-bar-animated.
  • שיפץ את כל הרכיב כדי לפשט את העיצוב והסטיילינג. יש לנו פחות סגנונות לעקוף, אינדיקטורים חדשים וסמלים חדשים.
  • כל ה-CSS בוטל ושם שונה, מה שמבטיח שכל מחלקה מקבלת את הקדמת .carousel-.
    • עבור פריטי קרוסלה, .next, .prev, .left, .rightוהם עכשיו .carousel-item-next, .carousel-item-prev, .carousel-item-leftו .carousel-item-right.
    • .itemהוא גם עכשיו .carousel-item.
    • עבור פקדים קודמים/הבאים, .carousel-control.rightוהם .carousel-control.leftעכשיו .carousel-control-nextו .carousel-control-prev, כלומר הם כבר לא דורשים מחלקה בסיסית ספציפית.
  • הסר את כל הסגנון המגיב, תוך דחיית כלי עזר (למשל, הצגת כיתובים בנקודות מבט מסוימות) וסגנונות מותאמים אישית לפי הצורך.
  • עקיפות תמונה שהוסרו עבור תמונות בפריטי קרוסלה, תוך דחיית כלי עזר.
  • שיפר את דוגמה הקרוסלה כדי לכלול את הסימון והסגנונות החדשים.

טבלאות

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

כלי עזר

  • תצוגה, מוסתר ועוד:
    • עשה את כלי העזר לתצוגה רספונסיביים (למשל, .d-noneו d-{sm,md,lg,xl}-none).
    • הורד את עיקר .hidden-*כלי השירות עבור כלי עזר חדשים לתצוגה . לדוגמה, במקום .hidden-sm-up, השתמש ב .d-sm-none. שינה את .hidden-printשמות השירותים לשימוש בסכימת השמות של כלי השירות לתצוגה. מידע נוסף תחת קטע כלי עזר רספונסיביים בדף זה.
    • נוספו .float-{sm,md,lg,xl}-{left,right,none}מחלקות עבור צפים רספונסיביים והוסרו .pull-leftומכיוון .pull-rightשהם מיותרים ל- .float-leftו .float-right.
  • סוּג:
    • הוסיפו וריאציות רספונסיביות למחלקות יישור הטקסט שלנו .text-{sm,md,lg,xl}-{left,center,right}.
  • יישור ומרווח:
  • Clearfix עודכן כדי להפסיק את התמיכה בגרסאות דפדפן ישנות יותר.

מיקסים של קידומת ספק

שילובי הקידומת של הספק של Bootstrap 3 , שהוצאו משימוש בגרסה 3.2.0, הוסרו ב-Bootstrap 4. מכיוון שאנו משתמשים ב- Autoprefixer , הם אינם נחוצים עוד.

הסירו את המיקסינים הבאים: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

תיעוד

התיעוד שלנו זכה לשדרוג גם כן. הנה החלק הנמוך:

  • אנחנו עדיין משתמשים ב-Jekyll, אבל יש לנו תוספים בתמהיל:
    • bugify.rbמשמש לרשימה יעילה של הערכים בדף באגים בדפדפן שלנו.
    • example.rbהוא מזלג מותאם אישית של highlight.rbהפלאגין המוגדר כברירת מחדל, המאפשר טיפול קל יותר בקוד לדוגמה.
    • callout.rbהוא מזלג מותאם אישית דומה לזה, אך מיועד לתוספי המסמכים המיוחדים שלנו.
    • jekyll-toc משמש ליצירת תוכן העניינים שלנו.
  • כל תוכן המסמכים נכתב מחדש ב-Markdown (במקום HTML) לצורך עריכה קלה יותר.
  • הדפים אורגנו מחדש לתוכן פשוט יותר והיררכיה נגישה יותר.
  • עברנו מ-CSS רגיל ל-SCSS כדי לנצל את מלוא היתרונות של המשתנים, המיקסינים ועוד של Bootstrap.

כלי עזר רספונסיביים

כל @screen-המשתנים הוסרו בגרסה 4.0.0. השתמש ב- media-breakpoint-up(), media-breakpoint-down(), או media-breakpoint-only()במיקסים של Sass או $grid-breakpointsבמפת Sass במקום זאת.

מחלקות השירות הרספונסיביות שלנו הוסרו ברובן לטובת displayכלי עזר מפורשים.

  • המחלקות .hiddenו .showהוסרו מכיוון שהם מתנגשים עם השיטות והשיטות של $(...).hide()jQuery $(...).show(). במקום זאת, נסה לשנות את [hidden]התכונה או להשתמש בסגנונות מוטבעים כמו style="display: none;"ו style="display: block;".
  • כל .hidden-המחלקות הוסרו, מלבד כלי ההדפסה ששמם שונה.
    • הוסר מגרסה 3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • הוסר מ-v4 אלפא:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • כלי עזר להדפסה כבר לא מתחילים עם .hidden-או .visible-, אלא עם .d-print-.
    • שמות ישנים: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • שיעורים חדשים: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

במקום להשתמש במחלקות מפורשות .visible-*, אתה הופך אלמנט לגלוי פשוט על ידי אי הסתרתו בגודל המסך הזה. אתה יכול לשלב .d-*-noneמחלקה אחת עם מחלקה אחת .d-*-blockכדי להציג אלמנט רק במרווח נתון של גדלי מסך (למשל .d-none.d-md-block.d-xl-noneמציג את האלמנט רק במכשירים בינוניים וגדולים).

שים לב שהשינויים בנקודות השבירה של הרשת ב-v4 פירושם שתצטרך להגדיל נקודת שבירה אחת כדי להשיג את אותן תוצאות. מחלקות השירות הרספונסיביות החדשות אינן מנסות להכיל מקרים פחות נפוצים שבהם לא ניתן לבטא את הנראות של אלמנט כטווח רציף אחד של גדלי יציאות תצוגה; במקום זאת תצטרך להשתמש ב-CSS מותאם אישית במקרים כאלה.