גִישָׁה
למד על העקרונות המנחים, האסטרטגיות והטכניקות המשמשות לבנייה ולתחזוקה של Bootstrap כדי שתוכל להתאים אישית ולהרחיב אותו בקלות רבה יותר בעצמך.
בעוד שעמודי ההתחלה מספקים סיור היכרות עם הפרויקט ומה הוא מציע, מסמך זה מתמקד מדוע אנו עושים את הדברים שאנו עושים ב-Bootstrap. זה מסביר את הפילוסופיה שלנו לבנייה באינטרנט כדי שאחרים יוכלו ללמוד מאיתנו, לתרום איתנו ולעזור לנו להשתפר.
רואה משהו שלא נשמע נכון, או שאולי אפשר לעשות זאת טוב יותר? פתח בעיה - נשמח לדון בה איתך.
נצלול יותר לכל אחד מהם לאורך כל הדרך, אבל ברמה גבוהה, זה מה שמנחה את הגישה שלנו.
- הרכיבים צריכים להיות רספונסיביים ומותאמים לנייד
- יש לבנות רכיבים עם מחלקה בסיסית ולהרחיב אותם באמצעות מחלקות משנה
- מצבי רכיב צריכים לציית לסולם Z-index משותף
- במידת האפשר, העדיפו יישום HTML ו-CSS על פני JavaScript
- במידת האפשר, השתמש בכלי עזר על פני סגנונות מותאמים אישית
- במידת האפשר, הימנע מאכיפת דרישות HTML קפדניות (בוררי ילדים)
הסגנונות הרספונסיביים של Bootstrap בנויים להיות רספונסיביים, גישה שלעתים קרובות מכונה " מובייל תחילה" . אנחנו משתמשים במונח הזה במסמכים שלנו ומסכימים איתו במידה רבה, אבל לפעמים הוא יכול להיות רחב מדי. אמנם לא כל רכיב חייב להיות מגיב לחלוטין ב-Bootstrap, אך גישה מגיבה זו עוסקת בהפחתת עקיפות CSS על ידי דחיפה להוסיף סגנונות ככל שנקודת התצוגה הופכת גדולה יותר.
ברחבי Bootstrap, תראה זאת בצורה הברורה ביותר בשאילתות המדיה שלנו. ברוב המקרים, אנו משתמשים min-widthבשאילתות שמתחילות להחיל בנקודת עצירה ספציפית ועוברות את נקודות השבירה הגבוהות יותר. לדוגמה, a .d-noneחל מ min-width: 0עד אינסוף. מצד שני, a .d-md-noneחל מנקודת השבירה הבינונית ומעלה.
לפעמים נשתמש max-widthכאשר המורכבות המובנית של רכיב מחייבת זאת. לעיתים, העקפות הללו ברורות יותר מבחינה תפקודית ומנטלית ליישום ולתמיכה מאשר שכתוב פונקציונליות הליבה מהרכיבים שלנו. אנו שואפים להגביל גישה זו, אך נשתמש בה מעת לעת.
מלבד אתחול מחדש שלנו, גיליון סגנונות נורמליזציה בין דפדפנים, כל הסגנונות שלנו שואפים להשתמש במחלקות כבוררים. משמעות הדבר היא הימנעות מבוררי סוגים (למשל, input[type="text"]) ומשיעורי הורים זרים (למשל, .parent .child) שהופכים סגנונות ספציפיים מכדי לעקוף אותם בקלות.
ככזה, יש לבנות רכיבים עם מחלקה בסיס המאכלסת צמדי ערך נכסים נפוצים, שאין לעקוף אותם. לדוגמה, .btnו .btn-primary. אנו משתמשים .btnבכל הסגנונות הנפוצים כמו display, padding, ו border-width. לאחר מכן אנו משתמשים בשינויים כמו .btn-primaryלהוסיף את הצבע, צבע הרקע, צבע הגבול וכו'.
יש להשתמש במחלקות משנה רק כאשר יש מאפיינים מרובים או ערכים שיש לשנות על פני וריאציות מרובות. לא תמיד יש צורך בשינויים, אז ודא שאתה באמת שומר שורות קוד ומונע עקיפות מיותרות בעת יצירתם. דוגמאות טובות לשינויים הם כיתות צבע הנושא שלנו וגרסאות גודל.
ישנם שני z-indexסולמות ב-Bootstrap - אלמנטים בתוך רכיב ורכיבי שכבת-על.
- חלק מהרכיבים ב-Bootstrap בנויים עם אלמנטים חופפים כדי למנוע גבולות כפולים מבלי לשנות את
borderהמאפיין. לדוגמה, קבוצות לחצנים, קבוצות קלט ועימוד. z-indexרכיבים אלה חולקים סולם סטנדרטי של0דרך3.0הוא ברירת מחדל (ראשוני),1הוא:hover,2הוא:active/.active, ו ,3הוא:focus.- גישה זו תואמת את הציפיות שלנו לגבי עדיפות המשתמש הגבוהה ביותר. אם אלמנט ממוקד, הוא נמצא בעין ובתשומת לב המשתמש. האלמנטים הפעילים הם השניים בגובהם מכיוון שהם מציינים מצב. הרחף הוא השלישי בגובהו מכיוון שהוא מציין את כוונת המשתמש, אך ניתן לרחף כמעט על כל דבר .
Bootstrap כולל מספר רכיבים שמתפקדים כשכבת-על מסוג כלשהו. זה כולל, בסדר הגבוה ביותר z-index, תפריטים נפתחים, סרגלי ניווט קבועים ודביקים, מודלים, עצות כלים ופופ-אוברים. לרכיבים אלה יש סולם משלהם z-indexשמתחיל ב- 1000. מספר התחלתי זה הוא אקראי ומשמש כחיץ קטן בין הסגנונות שלנו לבין הסגנונות המותאמים אישית של הפרויקט שלך.
כל רכיב שכבת-על מגדיל z-indexמעט את ערכו, באופן שעקרונות ממשק משתמש נפוצים מאפשרים לאלמנטים ממוקדים או מרחפים למשתמש להישאר בתצוגה בכל עת. לדוגמה, מודאל הוא חסימת מסמכים (למשל, אינך יכול לבצע שום פעולה אחרת מלבד פעולת המודאל), אז שמנו זאת מעל סרגלי הניווט שלנו.
למידע נוסף על כך z-indexבדף הפריסה שלנו .
במידת האפשר, אנו מעדיפים לכתוב HTML ו-CSS על גבי JavaScript. באופן כללי, HTML ו-CSS פוריים יותר ונגישים ליותר אנשים מכל רמות הניסיון השונות. HTML ו-CSS הם גם מהירים יותר בדפדפן שלך מאשר JavaScript, והדפדפן שלך באופן כללי מספק הרבה מאוד פונקציונליות עבורך.
עיקרון זה הוא dataתכונות ה-JavaScript API מהמדרגה הראשונה שלנו. אינך צריך לכתוב כמעט כל JavaScript כדי להשתמש בתוספים שלנו ל-JavaScript; במקום זאת, כתוב HTML. קרא עוד על כך בדף סקירת JavaScript שלנו .
לבסוף, הסגנונות שלנו מבוססים על התנהגויות בסיסיות של רכיבי אינטרנט נפוצים. במידת האפשר, אנו מעדיפים להשתמש במה שהדפדפן מספק. לדוגמה, אתה יכול לשים .btnמחלקה על כמעט כל אלמנט, אבל רוב האלמנטים אינם מספקים שום ערך סמנטי או פונקציונליות של דפדפן. אז במקום זאת, אנו משתמשים ב- <button>s ו- <a>s.
כך גם לגבי רכיבים מורכבים יותר. בעוד שנוכל לכתוב תוסף אימות טפסים משלנו כדי להוסיף מחלקות לרכיב אב בהתבסס על מצב קלט, ובכך לאפשר לנו לעצב את הטקסט באמירה אדום, אנו מעדיפים להשתמש באלמנטים :valid/ :invalidפסאודו שכל דפדפן מספק לנו.
שיעורי עזר - לשעבר עוזרים ב-Bootstrap 3 - הם בעלי ברית רב עוצמה במאבק בתפיחת CSS וביצועי דפים גרועים. מחלקת שירות היא בדרך כלל זיווג יחיד, בלתי ניתן לשינוי ערך מאפיין, המתבטא כמחלקה (למשל, .d-blockמייצג display: block;). הערעור העיקרי שלהם הוא מהירות השימוש בזמן כתיבת HTML והגבלת כמות ה-CSS המותאם אישית שאתה צריך לכתוב.
במיוחד בנוגע ל-CSS מותאם אישית, כלי עזר יכולים לסייע במאבק בגודל הקובץ הגדל על ידי צמצום צמדי ערך הנכס-ערך השכיחים ביותר שלך למחלקות בודדות. זה יכול להיות השפעה דרמטית בקנה מידה בפרויקטים שלך.
למרות שלא תמיד אפשרי, אנו שואפים להימנע מלהיות דוגמטיים מדי בדרישות ה-HTML שלנו לרכיבים. לפיכך, אנו מתמקדים בכיתות בודדות בבוררי ה-CSS שלנו ומנסים להימנע מבוררי ילדים מיידיים ( ~). זה נותן לך יותר גמישות ביישום שלך ועוזר לשמור על ה-CSS שלנו פשוט יותר ופחות ספציפי.