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

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

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

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

.col-md-4
.col-md-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-6
.col-md-4

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

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

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

ניקוי עמודות

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

.col-xs-6 .col-sm-3
שנה את גודל יציאת התצוגה שלך או בדוק אותו בטלפון שלך לדוגמא.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

קיזוז, דחיפה ומשיכה מתאפסים

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

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0