באָאָטסטראַפּ איז געבויט אויף אַ אָפּרופיק גריד פון 12 זייַל. מיר האָבן אויך אַרייַנגערעכנט פאַרפעסטיקט און פליסיק-ברייט לייאַוץ באזירט אויף דעם סיסטעם.
די פעליקייַט גריד סיסטעם צוגעשטעלט ווי אַ טייל פון Bootstrap איז אַ 940 פּקס-ברייט, 12-זייַל גריד .
עס אויך האט פיר אָפּרופיק ווערייישאַנז פֿאַר פאַרשידן דעוויסעס און רעזאַלושאַנז: טעלעפאָן, טאַבלעט פּאָרטרעט, טיש לאַנדשאַפט און קליין דעסקטאַפּס, און גרויס ווידעסקרעען דעסקטאַפּס.
- <דייוו קלאַס = "רודערן" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ווי געוויזן דאָ, אַ יקערדיק אויסלייג קענען זיין באשאפן מיט צוויי "שפאלטן," יעדער ספּאַנינג אַ נומער פון די 12 יסודות שפאלטן מיר דיפיינד ווי אַ טייל פון אונדזער גריד סיסטעם.
- <דייוו קלאַס = "רודערן" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <דייוו קלאַס = "ספּאַן4 אָפסעט4" > ... </div>
- </div>
מיט די סטאַטיק (ניט-פליסיק) גריד סיסטעם אין באָאָטסטראַפּ, נעסטינג איז גרינג. צו נעסט דיין אינהאַלט, נאָר לייגן אַ נייַע .row
און גאַנג פון .span*
שפאלטן אין אַ יגזיסטינג .span*
זייַל.
נעסטעד ראָוז זאָל אַרייַננעמען אַ סכום פון שפאלטן וואָס לייגן אַרויף צו די נומער פון שפאלטן פון זיין פאָטער. פֿאַר בייַשפּיל, צוויי נעסטעד .span3
שפאלטן זאָל זיין געשטעלט אין אַ .span6
.
- <דייוו קלאַס = "רודערן" >
- <div class = "span12" >
- מדרגה 1 פון זייַל
- <דייוו קלאַס = "רודערן" >
- <div class = "span6" > מדרגה 2 </div>
- <div class = "span6" > מדרגה 2 </div>
- </div>
- </div>
- </div>
די פליסיק גריד סיסטעם ניצט פּראָצענט פֿאַר זייַל ווידטס אַנשטאָט פון פאַרפעסטיקט בילדצעלן. עס אויך האט די זעלבע אָפּרופיק ווערייישאַנז ווי אונדזער פאַרפעסטיקט גריד סיסטעם, ינשורינג געהעריק פּראַפּאָרשאַנז פֿאַר שליסל פאַרשטעלן רעזאַלושאַנז און דעוויסעס.
מאַכן קיין רודערן פליסיק פשוט דורך טשאַנגינג .row
צו .row-fluid
. די שפאלטן בלייבן די זעלבע, וואָס מאכט עס סופּער גלייך צו פליפּ צווישן פאַרפעסטיקט און פליסיק לייאַוץ.
- <דייוו קלאַס = "רודערן-פליסיק" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
נעסטינג מיט פליסיק גרידס איז אַ ביסל אַנדערש: די נומער פון נעסטעד שפאלטן טאָן ניט דאַרפֿן צו גלייַכן די פאָטער. אַנשטאָט, דיין שפאלטן זענען באַשטעטיק אויף יעדער מדרגה ווייַל יעדער רודערן נעמט 100% פון די פאָטער זייַל.
- <דייוו קלאַס = "רודערן-פליסיק" >
- <div class = "span12" >
- מדרגה 1 פון זייַל
- <דייוו קלאַס = "רודערן-פליסיק" >
- <div class = "span6" > מדרגה 2 </div>
- <div class = "span6" > מדרגה 2 </div>
- </div>
- </div>
- </div>
וואַריאַבלע | פעליקייַט ווערט | באַשרייַבונג |
---|---|---|
@gridColumns |
12 | נומער פון שפאלטן |
@gridColumnWidth |
60 פּקס | ברייט פון יעדער זייַל |
@gridGutterWidth |
20 פּקס | נעגאַטיוו פּלאַץ צווישן שפאלטן |
@siteWidth |
קאַמפּיוטאַד סאַכאַקל פון אַלע שפאלטן און גאַטערז | קאַונץ נומער פון שפאלטן און גאַטערז צו שטעלן די ברייט פון די .container-fixed() מיקסין |
געבויט אין באָאָטסטראַפּ זענען אַ האַנדפול פון וועריאַבאַלז פֿאַר קאַסטאַמייזינג די פעליקייַט 940 פּקס גריד סיסטעם, דאַקיומענטאַד אויבן. אַלע וועריאַבאַלז פֿאַר די גריד זענען סטאָרד אין וועריאַבאַלז.לעסס.
מאָדיפיצירן די גריד מיטל טשאַנגינג די דריי @grid*
וועריאַבאַלז און ריקאָמפּיילינג Bootstrap. טוישן די גריד וועריאַבאַלז אין Variables.less און נוצן איינער פון די פיר וועגן דאַקיומענטאַד צו ריקאָמפּילע . אויב איר לייגן מער שפאלטן, זיין זיכער צו לייגן די CSS פֿאַר יענע אין grid.less.
קוסטאָמיזאַטיאָן פון די גריד אַרבעט בלויז אויף די פעליקייַט מדרגה, די 940 פּקס גריד. צו האַלטן די אָפּרופיק אַספּעקץ פון באָאָטסטראַפּ, איר וועט אויך האָבן צו קאַסטאַמייז די גרידס אין ריספּאַנסיוו.לעסס.
די פעליקייַט און פּשוט 940 פּקס-ברייט, סענטערד אויסלייג פֿאַר כּמעט קיין וועבזייטל אָדער בלאַט צוגעשטעלט דורך אַ איין <div class="container">
.
- <גוף>
- <div class = "container" >
- ...
- </div>
- </body>
<div class="container-fluid">
גיט פלעקסאַבאַל בלאַט סטרוקטור, מין און מאַקס ברייט, און אַ לינקס זייַט באַר. עס איז גרויס פֿאַר אַפּפּס און דאָקומענטן.
- <div class = "container-פליסיק" >
- <דייוו קלאַס = "רודערן-פליסיק" >
- <דייוו קלאַס = "ספּאַן2" >
- <!--Sidebar content-->
- </div>
- <div class = "span10" >
- <!-- גוף אינהאַלט-->
- </div>
- </div>
- </div>
באָאָטסטראַפּ שטיצט אַ האַנדפול פון מידיאַ קוויריז אין אַ איין טעקע צו מאַכן דיין פּראַדזשעקס מער צונעמען אויף פאַרשידענע דעוויסעס און פאַרשטעלן רעזאַלושאַנז. דאָ ס וואָס איז אַרייַנגערעכנט:
לאַבעל | אויסלייג ברייט | זייַל ברייט | גוטטער ברייט |
---|---|---|---|
סמאַרטפאָנעס | 480 פּקס און ווייטער | פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט | |
פּאָרטרעט טאַבלאַץ | 480 פּקס צו 768 פּקס | פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט | |
לאַנדשאַפט טאַבלאַץ | 768 צו 979 פּקס | 42px | 20 פּקס |
פעליקייַט | 980 פּקס און העכער | 60 פּקס | 20 פּקס |
גרויס אַרויסווייַזן | 1210 פּקס און העכער | 70 פּקס | 30 פּקס |
צו ענשור אַז דעוויסעס ווייַזן אָפּרופיק בלעטער רעכט, אַרייַננעמען די Viewport מעטאַ קוויטל.
- <מעטאַ נאָמען = "וויעוופּאָרט" אינהאַלט = "ברייט = מיטל-ברייט, ערשט-וואָג = 1.0" >
מעדיע קוויריז לאָזן מנהג CSS באזירט אויף אַ נומער פון טנאָים-ראַטיאָוז, ברייט, אַרויסווייַזן טיפּ, עטק, אָבער יוזשאַוואַלי פאָוקיסיז אַרום min-width
און max-width
.
באָאָטסטראַפּ ינקלודז ניט אויטאָמאַטיש די מידיאַ קוויריז, אָבער צו פֿאַרשטיין און לייגן זיי איז זייער גרינג און ריקווייערז מינימאַל סעטאַפּ. איר האָבן אַ ביסל אָפּציעס פֿאַר אַרייַנגערעכנט די אָפּרופיק פֿעיִקייטן פון Bootstrap:
פארוואס נישט נאָר אַרייַננעמען עס? דער אמת געזאָגט, ניט אַלץ דאַרף זיין אָפּרופיק. אַנשטאָט צו מוטיקן דעוועלאָפּערס צו באַזייַטיקן דעם שטריך, מיר רעכענען עס בעסטער צו געבן עס.
- // לאַנדשאַפט פאָנעס און אַראָפּ
- @מעדיע ( מאַקס - ברייט : 480פּקס ) { ... }
- // לאַנדשאַפט טעלעפאָן צו פּאָרטרעט טאַבלעט
- @מעדיע ( מאַקס - ברייט : 768 פּקס ) { ... }
- // פּאָרטרעט טאַבלעט צו לאַנדשאַפט און דעסקטאַפּ
- @מעדיע ( מין - ברייט : 768 פּקס ) און ( מאַקס - ברייט : 980פּקס ) { ... }
- // גרויס דעסקטאַפּ
- @מעדיע ( מין - ברייט : 1200פּקס ) { .. }