חדש & מגניב תכונות תאהב
המהדורה הבאה הבאה של מסגרת Bootstrap הוא מעבר לפינה. גרסת אלפא כבר ניתנת להורדה מאתר הפיתוח של Bootstrap, וקוד המקור זמין גם ב- Github.
טוויטר Bootstrap הוא כיום מסגרת Frontend הפופולרי ביותר שם בחוץ. זה מאפשר למפתחים לבנות ניידים הראשון ואת אתרי תגובה, במהירות. Bootstrap מאפשר לעשות שימוש חכם של HTML5 רגיל, CSS3 ו משולש Javascript frontend. זה מנוצל כיום על ידי יותר מ -6 מיליון אתרים באינטרנט.
למרות Bootstrap 4 עדיין בשלב הפיתוח (כך לא להשתמש בו על אתר חי עדיין), היזמים עשו עבודה נהדרת. בהודעה זו נסקור את הגירסה החדשה הכוללת תכונות רבות רבות אשר בוודאי לייעל ולשפר את זרימת העבודה Frontend פיתוח.
1. Sass במקום LESS
עד כה, Bootstrap השתמשה ב- LESS כמנהלת ה- CSS העיקרית שלה, אך עבור המהדורה החדשה החדשה, כללי הסגנון יובאו מחדש ל- Sass, שהוא הרבה יותר פופולרי בקרב מפתחי הממשקים, בעל בסיס תורם ענק, בדרך כלל קל יותר לשימוש ומציע יותר אפשרויות. תודה רבה Libsass Sass Complier נכתב ב C / C++ Bootstrap 4 יעבד הרבה יותר מהר מאשר קודם.
2. רשת חדשה שכבת עבור מסכים קטנים יותר
Bootstrap יש רשת מתוחכמת רשת תגובה המאפשר למפתחים למקד התקנים עם ויפורטס שונים. Bootstrap 3 כרגע יש 4 כיתות רשת עבור עמודות, .קול-קס- XX עבור טלפונים ניידים, .col-sm-XX עבור טבליות, .col-md-XX עבור שולחנות עבודה, ו .col-lg-XX עבור מחשבים שולחניים גדולים יותר. Bootstrap 4 ישפר את מערכת הרשת עם אחד החמישי שיאפשר למפתחים לכוון התקנים קטנים יותר תחת רוחב 480px Viewport.
המחלקה החדשה של הרשת נקטה את שמו של הקטע הקטן ביותר הקודם, ודחפה את השמות הנוכחיים של שכבות הרשת כלפי מעלה בחריץ אחד. ב Bootstrap 4 שולחנות עבודה גדולים ישתמשו .col-xl-XX בורר מחלקה. חשוב לדעת שלמרות השם החדש הם לא הוסיפו מחלקה חדשה למסכים גדולים במיוחד, אלא לאלו הקטנים.
3. מציג יחידות CSS יחסית
Bootstrap 4 סוף סוף טיפות תמיכה ב- Internet Explorer 8. זה באמת צעד חכם כפי שהוא מאפשר להם להיפטר polyfills pesky, ולהמיר ליחידות CSS יחסית. במקום פיקסלים, הגרסה החדשה החדשה תהיה להשתמש REMs ו EMs המאפשרים את זה ליישם טיפוגרפיה תגובה על אתרי Bootstrap. זה גם יגדיל את הקריאות, ולהפוך את האתרים לנגישים יותר עבור משתמשים מושבתים.
אם אתה רוצה לנסות את היחידות היחסיות לעבוד עם Bootstrap 4 חדש, לבדוק את ההדגמה על Codepen.
4. מותג חדש Bootstrap כרטיסים
צוות הפיתוח החליט לאחד כמה אלמנטים קודמים בממשק המשתמש של Bootstrap, ולכן החליטו להציג רכיב ממשק משתמש חדש שנקרא כרטיסים. כרטיסים יחליפו את הבארות לשעבר, תמונות ממוזערות ופאנלים, ויספקו למשתמשים זרימת עבודה יעילה יותר. אל דאגה, כרטיסים ישמור על אלמנטים מוכרים, כגון כותרות, כותרות ותחתונות של בארות, תמונות ממוזערות ולוחות.
ככל שכרטיסים יהיו גמישים יותר מרכיבי ממשק המשתמש הנוכחיים, הם יאפשרו מרחב גדול יותר ליישומים יצירתיים. יש כמה חלוצים שם בחוץ, אשר כבר ניסו ניסויים על Codepen עם Bootstrap כרטיסים. אתה יכול לבדוק אותם, או ליצור כרטיסים משלך.
5. חדש אתחול מחדש מודול
מודול האתחול החדש מחליף את הקוד הקודם normalize.css לאפס את הקובץ. הוא לא נוטש אותו; נהפוך הוא, הוא בונה עליו כללים נוספים. מטרת המהלך היתה לכלול את כל בוררי CSS הגנרית וסגנונות איפוס ב- a יחיד, קל לשימוש קובץ SCSS. אתה יכול להעיף מבט על קוד המקור כאן אם אתה רוצה להבין טוב יותר איך עובד מודול חדש.
זה טוב לדעת כי סגנונות איפוס חדש בחוכמה להגדיר את גודל התיבה CSS רכוש ל גבול הגבול על , ולכן הוא עובר בירושה על ידי כל רכיב ילדים בדף. כלל הסגנון החדש עושה פריסות גמישות יותר לניהול. אם אתה רוצה לחוות את ההבדל בין תוכן תיבת התיבה גבול סוגי הפריסה, תסתכל על זה הדגמה שימושי זה מסופק על ידי CSS-Tricks.com (זה לא נוצר עבור Bootstrap 4, זה רק מראה איך box- גודל בדרך כלל עובד).
6. opt-in תמיכה Flexbox
Bootstrap 4 מאפשר לקחת מינוף של Flexbox Layout של CSS3, עם זאת - כמו Internet Explorer 9 אינו תומך במודול Flexbox - גירסת ברירת המחדל של Bootstrap 4 במקום עושה שימוש לצוף ולהציג תכונות CSS ליישם פריסת נוזל.
Flexbox יש פריסה קלה לשימוש, כי ניתן לנצל מצוין בעיצוב תגובה, שכן הוא מספק מיכל גמיש או מתרחב או מתכווץ עצמו כדי למלא את החלל הזמין בדרך הטובה ביותר. השתמש רק בתכונה Flexbox opt-in אם אתה לא צריך לספק תמיכה עבור IE9.
7. התאמה אישית משתנה יעיל
כל המשתנים של Sass המשמשים במהדורה החדשה של Bootstrap נכללים בקובץ יחיד הנקרא _variables.scss, שיביא לשיפור משמעותי בתהליך הפיתוח. אתה לא צריך לעשות שום דבר אחר מלבד העתקת ההגדרות מקובץ זה לתוך אחד אחר שנקרא _custom.scss כדי לשנות את ערכי ברירת המחדל.
אתה יכול להתאים דברים רבים כגון צבעים, ריווח, סגנונות קישורים, טיפוגרפיה, טבלאות, נקודות אחיזה ברשת ומכלים, מספר עמודות ורוחב מרזב, ועוד רבים.
8. כלי שירות חדשים עבור ריווח
Bootstrap 3 כבר יש הרבה שיעורים מעשיים השירות כגון אלה לשנות צף או clearfix, אבל Bootstrap 4 מוסיף עוד יותר. ה מחלקות ריווח חדשות לאפשר למפתחים לשנות במהירות ריפוד ושוליים על האתרים שלהם.
התחביר עבור השיעורים החדשים הוא פשוט למדי, למשל הוספת .m-a-0 קישורים כלל סגנון זה קובע את השוליים ל -0 בכל הצדדים של האלמנט הנתון (שוליים-כל-0). בעוד שוליים להשתמש M- קידומת, paddings הם מנוסח עם עמ '- קידומת. בפיתוח מסמכים אתה יכול להעיף מבט על כל הכיתות השירות המרווח החדש.
9. tooltips ו Popovers מופעל על ידי קשירת
ב Bootstrap 4 tooltips ו popovers עושה שימוש supercool Tether הספריה, מנוע המיקום המאפשר לשמור על אלמנט ממוקם לחלוטין ליד אלמנט אחר באותו דף. זה אומר tooltips ו popovers ימוקמו באופן אוטומטי על Bootstrap 4 אתרי אינטרנט.
אל תשכח כי כמו Tether היא ספריית צד שלישי JavaScript, אתה צריך בנפרד לכלול את זה ב- HTML לפני bootstrap.js הקובץ שלך.
10. Refactured JavaScript plugins
צוות הפיתוח refactored כל plugin JavaScript עבור המהדורה החדשה באמצעות EcmaScript 6. עם ניצול חכם של specatons האחרונה ואת השיפורים החדשים הם מתכוונים לשפר את חוויית הממשק.
את Bootstrap 4 החדש עבר גם באמצעות שיפורים אחרים JavaScript, כגון בדיקת סוג אפשרות, שיטות גינון גנריות, ו תמיכה ב- UMD, זה יעבוד יחד כדי להפוך את מסגרת Frontend הפופולרי ביותר לרוץ בצורה חלקה יותר מאשר אי פעם בעבר.
עכשיו קרא: 10 חלופות קל Bootstrap & קרן
