דוגמאות לרשת אתחול

פריסות רשת בסיסיות כדי להכיר את הבנייה בתוך מערכת הרשת Bootstrap.

בדוגמאות אלה .themed-grid-colהכיתה מתווספת לעמודות כדי להוסיף קצת נושא. זה לא מחלקה שזמינה ב-Bootstrap כברירת מחדל.

חמש שכבות רשת

ישנן חמש שכבות למערכת ה-Bootstrap grid, אחת לכל טווח של מכשירים שאנו תומכים בהם. כל שכבה מתחילה בגודל יציאת תצוגה מינימלית ומתייחסת אוטומטית למכשירים הגדולים יותר, אלא אם כן היא מדרסת.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

שלושה עמודים שווים

קבל שלוש עמודות ברוחב שווה, החל ממחשבים שולחניים וקנה מידה למחשבים שולחניים גדולים . במכשירים ניידים, בטאבלטים ומטה, העמודות ייערמו באופן אוטומטי.

.col-md-4
.col-md-4
.col-md-4

שלוש עמודות שוות חלופה

על ידי שימוש .row-cols-*במחלקות, אתה יכול בקלות ליצור רשת עם עמודות שוות.

.colילד של .row-cols-md-3
.colילד של .row-cols-md-3
.colילד של .row-cols-md-3

שלושה טורים לא שווים

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

.col-md-3
.col-md-6
.col-md-3

שני עמודים

קבל שתי עמודות החל ממחשבים שולחניים וקנה מידה למחשבים שולחניים גדולים .

.col-md-8
.col-md-4

רוחב מלא, עמודה אחת

אין צורך בשיעורי רשת עבור אלמנטים ברוחב מלא.

שתי עמודות עם שתי עמודות מקוננות

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

בגדלים של מכשירים ניידים, בטאבלטים ומטה, העמודות הללו והעמודות המקוננות שלהן ייערמו.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

מעורב: נייד ושולחן עבודה

למערכת Bootstrap v5 grid יש שש שכבות של מחלקות: xs (קטן במיוחד, אינפיקס מחלקה זה אינו בשימוש), sm (קטן), md (בינוני), lg (גדול), xl (x-גדול) ו-xxl (xx -גָדוֹל). אתה יכול להשתמש כמעט בכל שילוב של מחלקות אלה כדי ליצור פריסות דינמיות וגמישות יותר.

כל שכבה של מחלקות מתרחבת, כלומר אם אתה מתכנן להגדיר את אותם רוחבים עבור md, lg, xl ו-xxl, אתה רק צריך לציין md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

מעורב: נייד, טאבלט ושולחן עבודה

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

מרזבים

עם .gx-*שיעורים, ניתן להתאים את המרזבים האופקיים.

.colעם .gx-4מרזבים
.colעם .gx-4מרזבים
.colעם .gx-4מרזבים
.colעם .gx-4מרזבים
.colעם .gx-4מרזבים
.colעם .gx-4מרזבים

השתמש .gy-*בשיעורים כדי לשלוט במרזבים האנכיים.

.colעם .gy-4מרזבים
.colעם .gy-4מרזבים
.colעם .gy-4מרזבים
.colעם .gy-4מרזבים
.colעם .gy-4מרזבים
.colעם .gy-4מרזבים

עם .g-*כיתות, ניתן להתאים את המרזבים לשני הכיוונים.

.colעם .g-3מרזבים
.colעם .g-3מרזבים
.colעם .g-3מרזבים
.colעם .g-3מרזבים
.colעם .g-3מרזבים
.colעם .g-3מרזבים

מיכלים

מחלקות נוספות שנוספו ב-Bootstrap v4.4 מאפשרות מיכלים ברוחב של 100% עד לנקודת שבירה מסוימת. v5 מוסיף xxlנקודת שבירה חדשה.

.מְכוֹלָה
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.מיכל-נוזל