גִישָׁה

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

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

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