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

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

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

חמש שכבות רשת

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

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

.col-md-4

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

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

.col-md-3

.col-md-6

.col-md-3

שני עמודים

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

.col-md-8

.col-md-4

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

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

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

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

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

.col-md-8

.col-md-6

.col-md-4

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

למערכת הרשת Bootstrap v4 יש חמש שכבות של מחלקות: xs (קטן במיוחד), sm (קטן), md (בינוני), lg (גדול) ו-xl (גדול במיוחד). אתה יכול להשתמש כמעט בכל שילוב של מחלקות אלה כדי ליצור פריסות דינמיות וגמישות יותר.

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

.col-12 .col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4