מגרש משחקים של Bootstrap Flex

כל הכלים

בנו פריסות flex של Bootstrap 5.3 בצורה חזותית והעתיקו את מחלקות העזר המדויקות — d-flex, justify-content, align-items, order, grow ועוד.

תצוגה מקדימה לחצו על פריט כדי לערוך אותו
HTML שנוצר
—

הכול רץ בדפדפן שלכם — שום דבר לא מועלה.

המחלקות שתגדירו חלות מנקודת שבירה זו ומעלה. החליפו בין נקודות שבירה כדי לבנות פריסות רספונסיביות.

מכל
פריטים
0
פריט נבחר

אודות מגרש משחקים של 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

  1. הגדירו את מחלקות שירות המכיל — כיוון, גלישה, justify-content, align-items ומרווח — עם הפקדים המקוטעים.
  2. הוסיפו או הסירו פריטים (2 עד 12) כדי להתאים לרכיב האמיתי שלכם.
  3. לחצו על פריט כדי לתת לו מחלקות שירות align-self, סדר או גודל flex משלו.
  4. החליפו נקודות שבירה כדי להוסיף וריאנטים רספונסיביים החלים מ-sm, md, lg, xl או xxl ומעלה.
  5. בדקו את התצוגה המקדימה החיה, ואז העתיקו את קוד ה-HTML שנוצר או את מחלקות המכיל.

שאלות נפוצות

Bootstrap הוא mobile-first: מחלקה שהוגדרה בנקודת שבירה חלה מאותו רוחב ומעלה. הגדרת justify-content-between כאשר md נבחר מפיקה justify-content-md-between, שנכנסת לתוקף ב-768 פיקסלים ונשארת פעילה במסכים גדולים יותר.

כלי זה מפיק מחלקות שירות של Bootstrap 5.3 (d-flex, justify-content-center, order-2) מוכנות לפרויקט Bootstrap. מגרש המשחקים Flexbox מייצר במקום זאת מאפייני CSS פשוטים — בחרו את המתאים למחסנית שלכם.

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

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

כן, הוא חינמי ופועל כולו בדפדפן שלכם — ללא הרשמה, וכלום ממה שאתם בונים לא מועלה לשום מקום.
שתף זאת
כלים קשורים
בונה חתימת אימייל עצב חתימת אימייל HTML מקצועית מ-30 תבניות, התאם אישית ושמור. חינם
אייקון ל-PNG המר Bootstrap Icons, Font Awesome ועוד לתמונות PNG מותאמות אישית — בחינם, בדפדפן שלך. חינם
מחולל אייקוני אפליקציה צור סט אייקוני אפליקציה שלם ומוכן לחנות עבור App Store ו-Google Play — גרדיאנט פרימיום, רקעי mesh ותבניות, נבנה מהלוגו שלך. חינם
מחולל Favicon בנה חבילת favicon שלמה מלוגו, אייקון גופן או מונוגרמה — favicon.ico, קובצי PNG מודרניים, אייקון Apple touch, אייקוני PWA, מניפסט ווב וקטע HTML. חינם
מחולל CSS Box Shadow צור box-shadows מרובדות ב-CSS עם מחוונים חיים לזז, טשטוש, פיזור, צבע, אטימות ו-inset — תצוגה מקדימה על אלמנט אמיתי והעתק CSS מוכן להדבקה מיידית. חינם
מחולל CSS Border Radius עצב border-radius של CSS באופן חזותי עם תצוגה מקדימה חיה והעתק קוד מוכן לייצור. חינם
חיפושים פופולריים
מגרש משחקים flex של Bootstrap מחולל flexbox של Bootstrap מחלקות flex של Bootstrap 5 מחולל מחלקת d-flex justify-content align-items ב-Bootstrap בונה מחלקות flex של Bootstrap כלי flexbox רספונסיבי ל-Bootstrap
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.