Home-theater-designers
Bootstrap 5 הגיע לשינויים גדולים, כולל ירידה בתמיכה ב- Internet Explorer (IE) ותלות ב- jQuery. Bootstrap, שפותחה על ידי טוויטר, היא מסגרת ה- CSS הפופולרית ביותר בעולם. מסגרת ממשק המשתמש של קוד פתוח מסתכלת על מיצוב עצמו לעתיד, וזה גרם לזה לבצע שינויים פורצי דרך ב- v5.
הנפילה של Bootstrap ל- IE הפכה אותו לכלי הראשון לפיתוח אתרים שעושה זאת. הצעד מגיע כאשר נתח השוק של Internet Explorer ממשיך לרדת, והוא מהווה פחות מ -3% מכל דפדפני האינטרנט.
המשך לקרוא כדי לראות אילו שיפורים נוספים בוצעו ב- Bootstrap וכיצד הם משפיעים עליך.
1. jQuery תמיכה
Bootstrap כבר לא ישתמש בספריית jQuery. צוות הפיתוח שיפר במקום זאת את ספריית JavaScript כדי לבצע שינוי זה. התלות ב- jQuery לא הייתה בהכרח דבר רע ב- Bootstrap.
למעשה, המבוא של jQuery שינה באופן קיצוני את אופן השימוש ב- JavaScript. זה פשט את משימות הכתיבה ב- JavaScript שאחרת היו לוקחות שורות קוד רבות.
קָשׁוּר: למד כיצד ליצור אלמנט ב- jQuery
למרות כל זאת, הקבוצה החליטה להיגמל מזה. זה מגיע ליתרון של קבצי מקור קטנים יותר וזמני טעינת דפים גבוהים יותר. זה היה שינוי מאוד נחוץ אשר יראה את Bootstrap לקבל סגנון ידידותי יותר לעתיד.
גודל קובץ המקור הפך קל יותר ב- 85KB של JavaScript מופחת, וזהו המפתח מכיוון שגוגל רואה בזמני טעינת דפים לאתרי מובייל גורם דירוג.
ככל שהשימוש ב- jQuery כבר אינו נחוץ ב- Bootstrap 5, אתה עדיין יכול להשתמש בו אם תרצה. ראוי גם לציין כי כל התוספים של JavaScript נשארים זמינים.
2. מאפיינים מותאמים אישית של CSS
על ידי הפלת התמיכה ב- Internet Explorer, ניתן להשתמש במאפייני CSS מותאמים אישית (משתנים). IE אינה תומכת בנכסים מותאמים אישית - רק סיבה אחת מדוע היא עצרה מפתחי אתרים במשך זמן רב.
מאפיינים מותאמים אישית של CSS הופכים את CSS לגמיש יותר וניתן לתכנות. למשתני CSS קדימה -בס כדי למנוע התנגשות עם צד שלישי CSS.
ישנם שני סוגים של משתנים: משתני שורש ומשתני רכיב.
ניתן לגשת למשתני שורש בכל מקום בו נטען Bootstrap CSS. משתנים אלה ממוקמים ב- _root.scss קובץ והם חלק מקבצי dist המורכבים.
משתני רכיב משמשים כמשתנים מקומיים ברכיבים מסוימים. הם מועילים למניעת תורשה מקרית של סגנונות ברכיבים כמו טבלאות מקוננות.
3. מערכת רשת משופרת
מכיוון שהיו כמה בעיות בשדרוג מגרסה 3 ל- 4, Bootstrap 5 שומר את עיקר המערכת הפעם, תוך שהוא בונה על המערכת הקיימת במקום לשנות אותה לחלוטין. חלק מהשינויים הם:
- שיעור המרזבים ( .בנים ) הוחלף לכלי עזר ( .g* ) בדומה לשוליים ולריפוד
- כמו כן נכללו שיעורי ריווח אנכיים
- העמודות כבר אינן כברירת מחדל עמדה: יחסית
4. תיעוד משופר
התיעוד שופר עם מידע נוסף במיוחד בכל הנוגע להתאמה אישית. בעיה נפוצה הייתה שעם הרבה אתרים שמשתמשים ב- Bootstrap, תוכל לזהות מיד שהוא משתמש ב- Bootstrap. Bootstrap 5 מגיע כעת עם מראה ותחושה חדשים ועם התאמה אישית טובה יותר.
כעת יש גמישות רבה יותר להתאים אישית את הנושאים שלך כך שלא כל אתר או אפליקציה יהיו בעלי אותו דמיון. דף הנושא v4 הורחב למעשה עם יותר תוכן וקטעי קוד לבנייה על גבי קבצי Sass (המעבד המקדים CSS הפופולרי). אתה יכול גם למצוא פרויקט npm starter על פלטפורמת GitHub הזמין כמאגר תבניות.
לוח הצבעים הורחב גם בגרסה 5. מערכת הצבעים המורחבת המורחבת מרמזת כי אתה יכול לעצב את הצביעה שלך בקלות מבלי לעזוב את בסיס הקוד שלך. כמו כן נעשתה עבודה נוספת לשיפור ניגודיות הצבעים, כולל הוספת מדדי ניגודיות צבע במסמכי הצבע של Bootstrap.
5. פקדי טופס משופרים
Bootstrap שיפר את פקדי הטפסים, קבוצות הקלט ועוד.
ב- v4, Bootstrap השתמש בפקדי טפסים מותאמים אישית בנוסף לברירות המחדל שמספק כל דפדפן. ב- v5, כולם מותאמים כעת. כל לחצני האפשרויות, תיבות הסימון, הקובץ, הטווח ועוד כדי לתת להם את אותו המראה והתנהגות בכל דפדפנים שונים.
פקדי הטופס החדשים כבר אינם מכילים סימון צבעוני מיותר, אלא מתמקדים בתכונות העיצוב הסטנדרטיות וההגיוניות.
6. Bootstrap 5 מוסיף API של כלי עזר
בעקבות ספריות CSS חדשות כמו Tailwind CSS, Bootstrap מוסיפה כעת גם ספריית שירות. צוות bootstrap אומר שהם שמחים לראות כיצד מפתחים אחרים מאתגרים את הדרך שבנינו באינטרנט בעשור האחרון פלוס.
כלי השירות צוברים תאוצה בקהילת הפיתוח וצוות ה- bootstrap שם לב. הצוות הוסיף מוקדם יותר שירותי שירות ב- v4 באמצעות global $ enable-* שיעורים. ב- v5, הם השתנו לגישת API ולשפה ותחביר חדשים ב- Sass. זה ייתן לך את הכוח ליצור כלי עזר חדשים, אך עדיין תוכל להסיר או לשנות את ברירות המחדל שניתנו.
כדרך לתת ארגון טוב יותר, חלק מהשירותים שהיו ב- v4 הועברו למדור עוזרים.
7. ספריית אייקונים חדשה של Bootstrap
Bootstrap מתגאה כעת בספריית סמלים של קוד פתוח SVG עם למעלה מ -1,300 אייקונים. הוא מותאם אישית לרכיבי המסגרת אך עדיין ניתן לעבוד איתם על כל פרויקט.
בהתחשב בכך שהן תמונות SVG, הן יכולות להתרחב במהירות וניתנות ליישום בדרכים רבות וגם מעוצבות עם CSS.
אתה יכול להתקין את הסמלים באמצעות מעל פני הים:
$ npm i bootstrap-iconsהתקן את Bootstrap 5
אתה יכול ללכת ל דף ההורדה הרשמי של Bootstrap 5 אם ברצונך להתקין אותו. אם רצית להתעדכן במהדורת הפיתוח האחרונה שבה תוכל להשתמש מעל פני הים למשוך אותו:
$ npm i bootstrap@next
בזמן כתיבת שורות אלה, המסגרת נמצאת בגרסת בטא 3 שלה. המשמעות היא שהתוכנה בטוחה לשימוש אך עדיין בפיתוח. אל תהסס לתת משוב לצוות ולתת כל תרומה הכרחית.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל היכרות עם רכיבי אינטרנט ואדריכלות מבוססת רכיביםבואו נסתכל על רכיבי האינטרנט הנפוצים ונראה מדוע הם שימושיים.
קרא הבא נושאים קשורים- תִכנוּת
- בניית אתרים
- JavaScript
- CSS
ג'רום הוא כותב צוות ב- MakeUseOf. הוא מכסה מאמרים בנושא תכנות ולינוקס. הוא גם חובב קריפטו ותמיד עוקב אחרי תעשיית הקריפטו.
עוד מאת ג'רום דוידסוןהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
איך מצמצמים את הגודל של jpegלחצו כאן להרשמה