מגרש משחקים של Bootstrap Flex
בנו פריסות flex של Bootstrap 5.3 בצורה חזותית והעתיקו את מחלקות העזר המדויקות — d-flex, justify-content, align-items, order, grow ועוד.
—
הכול רץ בדפדפן שלכם — שום דבר לא מועלה.
המחלקות שתגדירו חלות מנקודת שבירה זו ומעלה. החליפו בין נקודות שבירה כדי לבנות פריסות רספונסיביות.
אודות מגרש משחקים של Bootstrap Flex
מגרש המשחקים של Bootstrap Flex מאפשר לבנות פריסות flexbox עם מחלקות שירות אמיתיות של Bootstrap 5.3 במקום CSS גולמי. הגדירו את המכיל — כיוון, גלישה, justify-content, align-items, מרווח — עם פקדים מקוטעים, לחצו על כל פריט כדי להגדיר את align-self, סדר, גדילה וכיווץ משלו, וצפו בתצוגה המקדימה החיה מסתדרת מחדש מיידית.
מחליף נקודות השבירה הוא מה שהופך אותו ליותר מצעצוע: בחרו sm, md, lg, xl או xxl והמחלקות שאתם מגדירים מאותה נקודה קדימה מקבלות את הקידומת הרספונסיבית — justify-content-md-between, flex-lg-row — בדיוק כפי שמערכת ה-mobile-first של Bootstrap מיישמת אותן מנקודת שבירה זו ומעלה. הוסיפו עד 12 פריטים כדי לדמות רכיב ריאליסטי.
כשהפריסה נראית נכון, העתיקו את קוד ה-HTML שנוצר או רק את מחלקות המכיל והדביקו ישירות בפרויקט שלכם. הכול פועל בדפדפן שלכם וכלום לא מועלה.
כיצד להשתמש ב-מגרש משחקים של Bootstrap Flex
- הגדירו את מחלקות שירות המכיל — כיוון, גלישה, justify-content, align-items ומרווח — עם הפקדים המקוטעים.
- הוסיפו או הסירו פריטים (2 עד 12) כדי להתאים לרכיב האמיתי שלכם.
- לחצו על פריט כדי לתת לו מחלקות שירות align-self, סדר או גודל flex משלו.
- החליפו נקודות שבירה כדי להוסיף וריאנטים רספונסיביים החלים מ-sm, md, lg, xl או xxl ומעלה.
- בדקו את התצוגה המקדימה החיה, ואז העתיקו את קוד ה-HTML שנוצר או את מחלקות המכיל.