גִישָׁה

למד על העקרונות המנחים, האסטרטגיות והטכניקות המשמשות לבנייה ולתחזוקה של 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

ישנם שני 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 על JS

במידת האפשר, אנו מעדיפים לכתוב HTML ו-CSS על גבי JavaScript. באופן כללי, HTML ו-CSS פוריים יותר ונגישים ליותר אנשים מכל רמות הניסיון השונות. HTML ו-CSS גם מהירים יותר בדפדפן שלך מאשר JavaScript, והדפדפן שלך בדרך כלל מספק הרבה מאוד פונקציונליות עבורך.

עיקרון זה הוא ה-API של JavaScript מהמדרגה הראשונה שלנו המשתמש dataבתכונות. אינך צריך לכתוב כמעט כל JavaScript כדי להשתמש בתוספים שלנו ל-JavaScript; במקום זאת, כתוב HTML. קרא עוד על כך בדף סקירת JavaScript שלנו .

לבסוף, הסגנונות שלנו מבוססים על התנהגויות בסיסיות של רכיבי אינטרנט נפוצים. במידת האפשר, אנו מעדיפים להשתמש במה שהדפדפן מספק. לדוגמה, אתה יכול לשים .btnמחלקה על כמעט כל אלמנט, אבל רוב האלמנטים אינם מספקים שום ערך סמנטי או פונקציונליות של דפדפן. אז במקום זאת, אנו משתמשים ב- <button>s ו- <a>s.

כך גם לגבי רכיבים מורכבים יותר. בעוד שנוכל לכתוב תוסף אימות טפסים משלנו כדי להוסיף מחלקות לרכיב אב בהתבסס על מצב קלט, ובכך לאפשר לנו לעצב את הטקסט באמירה אדום, אנו מעדיפים להשתמש באלמנטים :valid/ :invalidפסאודו שכל דפדפן מספק לנו.

כלי עזר

שיעורי עזר - לשעבר עוזרים ב-Bootstrap 3 - הם בעלי ברית רב עוצמה במאבק בתפיחת CSS וביצועי דפים גרועים. מחלקת שירות היא בדרך כלל זיווג יחיד, בלתי ניתן לשינוי ערך מאפיין, המתבטא כמחלקה (למשל, .d-blockמייצג display: block;). הערעור העיקרי שלהם הוא מהירות השימוש בזמן כתיבת HTML והגבלת כמות ה-CSS המותאם אישית שאתה צריך לכתוב.

במיוחד בנוגע ל-CSS מותאם אישית, כלי עזר יכולים לסייע במאבק בגודל הקובץ הגדל על ידי צמצום צמדי ערך הנכס-ערך השכיחים ביותר שלך למחלקות בודדות. זה יכול להיות השפעה דרמטית בקנה מידה בפרויקטים שלך.

HTML גמיש

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

מוסכמות קוד

Code Guide (מאת Bootstrap co-creator, @mdo) מתעד כיצד אנו כותבים את ה-HTML וה-CSS שלנו ברחבי Bootstrap. הוא מפרט הנחיות לעיצוב כללי, ברירות מחדל של שכל ישר, סדרי מאפיינים ומאפיינים ועוד.

אנו משתמשים ב- Stylint כדי לאכוף תקנים אלה ועוד ב-Sass/CSS שלנו. תצורת Stylelint המותאמת אישית שלנו היא קוד פתוח וזמינה עבור אחרים לשימוש ולהרחבה.

אנו משתמשים ב- vnu-jar כדי לאכוף HTML סטנדרטי וסמנטי, כמו גם לזהות שגיאות נפוצות.