באָאָטסטראַפּ

סקאַפאַלדינג

באָאָטסטראַפּ איז געבויט אויף אַ אָפּרופיק גריד פון 12 זייַל. מיר האָבן אויך אַרייַנגערעכנט פאַרפעסטיקט און פליסיק-ברייט לייאַוץ באזירט אויף דעם סיסטעם.

גלאבאלע סטיילז פֿאַר CSS באַשטעטיק, טיפּאָגראַפי און לינקס

ריקווייערז HTML5 דאָקטיפּע

Bootstrap ניצט HTML עלעמענטן און CSS פּראָפּערטיעס וואָס דאַרפן די נוצן פון HTML5 דאָקטיפּע. זייט זיכער צו אַרייַננעמען עס אין די אָנהייב פון יעדער באָאָטסטראַפּט בלאַט אין דיין פּרויעקט.

  1. <!DOCTYPE HTML>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

טיפּאָגראַפי און לינקס

ין דער scaffolding.less טעקע, מיר שטעלן יקערדיק גלאבאלע אַרויסווייַזן, טיפּאָגראַפי און לינק סטיילז. ספּעציעל, מיר:

  • אַראָפּנעמען די גרענעץ אויף דעם גוף
  • שטעלן background-color: white;אויף דיbody
  • ניצן די @baseFontFamily, @baseFontSize, און @baseLineHeightאַטריביוץ ווי אונדזער טיפּאָגראַפיק באַזע
  • שטעלן די גלאבאלע לינק קאָליר דורך @linkColorאון צולייגן לינק אַנדערליינז בלויז אויף:hover

באַשטעטיק דורך נאָרמאַלייז

זינט Bootstrap 2, די טראדיציאנעלן קסס באַשטעטיק האט יוואַלווד צו נוצן עלעמענטן פֿון Normalize.css , אַ פּרויעקט פון Nicolas Gallagher וואָס אויך מאַכט די HTML5 בוילערפּלאַטע .

די נייַע באַשטעטיק קענען נאָך זיין געפֿונען אין reset.less , אָבער מיט פילע עלעמענטן אַוועקגענומען פֿאַר ברעוואַטי און אַקיעראַסי.

פעליקייַט גריד סיסטעם 12 שפאלטן מיט אַ אָפּרופיק טוויסט

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

די פעליקייַט גריד סיסטעם צוגעשטעלט ווי אַ טייל פון Bootstrap איז אַ 940 פּקס-ברייט, 12-זייַל גריד .

עס אויך האט פיר אָפּרופיק ווערייישאַנז פֿאַר פאַרשידן דעוויסעס און רעזאַלושאַנז: טעלעפאָן, טאַבלעט פּאָרטרעט, טאַבלעט לאַנדשאַפט און קליין דעסקטאַפּס, און גרויס ווידעסקרעען דעסקטאַפּס.

  1. <דייוו קלאַס = "רודערן" > 
  2.   <דייוו קלאַס = "ספּאַן4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ווי געוויזן דאָ, אַ יקערדיק אויסלייג קענען זיין באשאפן מיט צוויי "שפאלטן", יעדער ספּאַנינג אַ נומער פון די 12 יסודות שפאלטן מיר דיפיינד ווי אַ טייל פון אונדזער גריד סיסטעם.


אָפסעטטינג שפאלטן

4
4 אָפסעט 4
3 אָפסעט 3
3 אָפסעט 3
8 אָפסעט 4 
  1. <דייוו קלאַס = "רודערן" > 
  2.   <דייוו קלאַס = "ספּאַן4" > ... </div> 
  3.   <דייוו קלאַס = "ספּאַן4 אָפסעט4" > ... </div> 
  4. </div>

נעסטינג שפאלטן

מיט די סטאַטיק (ניט-פליסיק) גריד סיסטעם אין באָאָטסטראַפּ, נעסטינג איז גרינג. צו נעסט דיין אינהאַלט, נאָר לייגן אַ נייַע .rowאון גאַנג פון .span*שפאלטן אין אַ יגזיסטינג .span*זייַל.

בייַשפּיל

נעסטעד ראָוז זאָל אַרייַננעמען אַ סכום פון שפאלטן וואָס לייגן אַרויף צו די נומער פון שפאלטן פון זיין פאָטער. פֿאַר בייַשפּיל, צוויי נעסטעד .span3שפאלטן זאָל זיין געשטעלט אין אַ .span6.

מדרגה 1 פון זייַל
מדרגה 2
מדרגה 2 
  1. <דייוו קלאַס = "רודערן" > 
  2.   <div class = "span12" > 
  3.     מדרגה 1 פון זייַל
  4.     <דייוו קלאַס = "רודערן" > 
  5.       <div class = "span6" > מדרגה 2 </div> 
  6.       <div class = "span6" > מדרגה 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

פליסיק גריד סיסטעם 12 אָפּרופיק, פּראָצענט-באזירט שפאלטן

פליסיק שפאלטן

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

פּראָצענט, נישט בילדצעלן

די פליסיק גריד סיסטעם ניצט פּראָצענט פֿאַר זייַל ברייט אַנשטאָט פון פאַרפעסטיקט בילדצעלן. עס אויך האט די זעלבע אָפּרופיק ווערייישאַנז ווי אונדזער פאַרפעסטיקט גריד סיסטעם, ינשורינג געהעריק פּראַפּאָרשאַנז פֿאַר שליסל פאַרשטעלן רעזאַלושאַנז און דעוויסעס.

פליסיק ראָוז

מאַכן קיין רודערן פליסיק פשוט דורך טשאַנגינג .rowצו .row-fluid. די שפאלטן בלייבן די זעלבע, וואָס מאכט עס סופּער גלייך צו פליפּ צווישן פאַרפעסטיקט און פליסיק לייאַוץ.

מאַרקאַפּ

  1. <דייוו קלאַס = "רודערן-פליסיק" > 
  2.   <דייוו קלאַס = "ספּאַן4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

פליסיק נעסטינג

נעסטינג מיט פליסיק גרידס איז אַ ביסל אַנדערש: די נומער פון נעסטעד שפאלטן טאָן ניט דאַרפֿן צו גלייַכן די פאָטער. אַנשטאָט, דיין שפאלטן זענען באַשטעטיק אויף יעדער מדרגה ווייַל יעדער רודערן נעמט 100% פון די פאָטער זייַל.

פליסיק 12
פלויד 6
פלויד 6 
  1. <דייוו קלאַס = "רודערן-פליסיק" > 
  2.   <div class = "span12" > 
  3.     מדרגה 1 פון זייַל
  4.     <דייוו קלאַס = "רודערן-פליסיק" > 
  5.       <div class = "span6" > מדרגה 2 </div> 
  6.       <div class = "span6" > מדרגה 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

קוסטאָמיזאַטיאָן פון גריד

וואַריאַבלע פעליקייַט ווערט באַשרייַבונג
@gridColumns 12 נומער פון שפאלטן
@gridColumnWidth 60 פּקס ברייט פון יעדער זייַל
@gridGutterWidth 20 פּקס נעגאַטיוו פּלאַץ צווישן שפאלטן

וועריאַבאַלז אין ווייניקער

געבויט אין באָאָטסטראַפּ זענען אַ האַנדפול פון וועריאַבאַלז פֿאַר קאַסטאַמייזינג די פעליקייַט 940 פּקס גריד סיסטעם, דאַקיומענטאַד אויבן. אַלע וועריאַבאַלז פֿאַר די גריד זענען סטאָרד אין וועריאַבאַלז.לעסס.

ווי צו קאַסטאַמייז

מאָדיפיצירן די גריד מיטל טשאַנגינג די דריי @grid*וועריאַבאַלז און ריקאָמפּיילינג Bootstrap. טוישן די גריד וועריאַבאַלז אין Variables.less און נוצן איינער פון די פיר וועגן דאַקיומענטאַד צו ריקאָמפּילע . אויב איר לייגן מער שפאלטן, זיין זיכער צו לייגן די CSS פֿאַר יענע אין grid.less.

בלייבן אָפּרופיק

קוסטאָמיזאַטיאָן פון די גריד אַרבעט בלויז אויף די פעליקייַט מדרגה, די 940 פּקס גריד. צו האַלטן די אָפּרופיק אַספּעקץ פון באָאָטסטראַפּ, איר וועט אויך האָבן צו קאַסטאַמייז די גרידס אין ריספּאַנסיוו.לעסס.

לייאַוט באַסיק טעמפּלאַטעס צו שאַפֿן וועבפּאַגעס

פאַרפעסטיקט אויסלייג

די פעליקייַט און פּשוט 940 פּקס-ברייט, סענטערד אויסלייג פֿאַר כּמעט קיין וועבזייטל אָדער בלאַט צוגעשטעלט דורך אַ איין <div class="container">.

  1. <גוף>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

פליסיק אויסלייג

<div class="container-fluid">גיט פלעקסאַבאַל בלאַט סטרוקטור, מין און מאַקס ברייט, און אַ לינקס זייַט באַר. עס איז גרויס פֿאַר אַפּפּס און דאָקומענטן.

  1. <div class = "container-פליסיק" > 
  2.   <דייוו קלאַס = "רודערן-פליסיק" > 
  3.     <דייוו קלאַס = "ספּאַן2" > 
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!-- גוף אינהאַלט-->
  8.     </div>
  9.   </div>
  10. </div>

אָפּרופיק פּלאַן מידיאַ קוויריז פֿאַר פאַרשידן דעוויסעס און רעזאַלושאַנז

אָפּרופיק דעוויסעס

וואס זיי טוען

מעדיע קוויריז לאָזן מנהג CSS באזירט אויף אַ נומער פון טנאָים-ראַטיאָוז, ברייט, אַרויסווייַזן טיפּ, עטק, אָבער יוזשאַוואַלי פאָוקיסיז אַרום min-widthאון max-width.

  • מאָדיפיצירן די ברייט פון זייַל אין אונדזער גריד
  • אָנלייגן עלעמענטן אַנשטאָט פון לאָזנ שווימען ווו נאָר נייטיק
  • רעסיזע די כעדינגז און טעקסט צו זיין מער צונעמען פֿאַר דעוויסעס

ניצן מעדיע קוויריז ריספּאַנסאַבלי און בלויז ווי אַ אָנהייב צו דיין רירעוודיק וילעם. פֿאַר גרעסערע פּראַדזשעקס, באַטראַכטן דעדאַקייטאַד קאָד באַסעס און נישט לייַערס פון מידיאַ קוויריז.

שטיצט דעוויסעס

באָאָטסטראַפּ שטיצט אַ האַנדפול פון מידיאַ קוויריז אין אַ איין טעקע צו מאַכן דיין פּראַדזשעקס מער צונעמען אויף פאַרשידענע דעוויסעס און פאַרשטעלן רעזאַלושאַנז. דאָ ס וואָס איז אַרייַנגערעכנט:

לאַבעל אויסלייג ברייט זייַל ברייט גוטטער ברייט
סמאַרטפאָנעס 480 פּקס און ווייטער פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט
סמאַרטפאָנעס צו טאַבלאַץ 767 פּקס און ווייטער פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט
פּאָרטרעט טאַבלאַץ 768 פּקס און העכער 42px 20 פּקס
פעליקייַט 980 פּקס און העכער 60 פּקס 20 פּקס
גרויס אַרויסווייַזן 1200 פּקס און העכער 70 פּקס 30 פּקס

ריקוויירז מעטאַ טאַג

צו ענשור אַז דעוויסעס ווייַזן אָפּרופיק בלעטער רעכט, אַרייַננעמען די Viewport מעטאַ קוויטל.

  1. <מעטאַ נאָמען = "וויעוופּאָרט" אינהאַלט = "ברייט = מיטל-ברייט, ערשט-וואָג = 1.0" >

ניצן די מידיאַ קוויריז

באָאָטסטראַפּ ינקלודז ניט אויטאָמאַטיש די מידיאַ קוויריז, אָבער צו פֿאַרשטיין און לייגן זיי איז זייער גרינג און ריקווייערז מינימאַל סעטאַפּ. איר האָבן אַ ביסל אָפּציעס פֿאַר אַרייַנגערעכנט די אָפּרופיק פֿעיִקייטן פון Bootstrap:

  1. ניצן די קאַמפּיילד אָפּרופיק ווערסיע, bootstrap-responsive.css
  2. לייג @import "responsive.less" און רעקאָמפּילע באָאָטסטראַפּ
  3. מאָדיפיצירן און רעקאָמפּילע ריספּאַנסיוו.לעסס ווי אַ באַזונדער טעקע

פארוואס נישט נאָר אַרייַננעמען עס? דער אמת געזאָגט, ניט אַלץ דאַרף זיין אָפּרופיק. אַנשטאָט צו מוטיקן דעוועלאָפּערס צו באַזייַטיקן דעם שטריך, מיר רעכענען עס בעסטער צו געבן עס.

  1.   // לאַנדשאַפט פאָנעס און אַראָפּ
  2.   @מעדיע ( מאַקס - ברייט : 480פּקס ) { ... }     
  3.  
  4.   // לאַנדשאַפט טעלעפאָן צו פּאָרטרעט טאַבלעט
  5.   @מעדיע ( מאַקס - ברייט : 767 פּקס ) { ... }     
  6.  
  7.   // פּאָרטרעט טאַבלעט צו לאַנדשאַפט און דעסקטאַפּ
  8.   @מעדיע ( מין - ברייט : 768 פּקס ) און ( מאַקס - ברייט : 979פּקס ) { ... }        
  9.  
  10.   // גרויס דעסקטאַפּ
  11.   @מעדיע ( מין - ברייט : 1200פּקס ) { ... }

אָפּרופיק נוצן קלאסן

וואס זענען זיי

פֿאַר פאַסטער רירעוודיק-פרייַנדלעך אַנטוויקלונג, נוצן די יקערדיק נוצן קלאסן צו ווייַזן און באַהאַלטן אינהאַלט דורך מיטל.

ווען צו נוצן

ניצן אויף אַ לימיטעד יקער און ויסמיידן קריייטינג גאָר פאַרשידענע ווערסיעס פון דער זעלביקער פּלאַץ. אַנשטאָט, נוצן זיי צו דערגאַנג די פּרעזענטירונג פון יעדער מיטל.

פֿאַר בייַשפּיל, איר קען ווייַזן אַ <select>עלעמענט פֿאַר נאַוו אויף רירעוודיק לייאַוץ, אָבער נישט אויף טאַבלאַץ אָדער דעסקטאַפּס.

שטיצן קלאסן

געוויזן דאָ איז אַ טיש פון די קלאסן וואָס מיר שטיצן און זייער ווירקונג אויף אַ געגעבן מעדיע אָנפֿרעג אויסלייג (לייבאַלד דורך מיטל). זיי קענען זיין געפֿונען אין responsive.less.

קלאַס פאָנעס480 פּקס און ווייטער טאַבלעץ767 פּקס און ווייטער דעסקטאָפּס768 פּקס און העכער
.visible-phone קענטיק
.visible-tablet קענטיק
.visible-desktop קענטיק
.hidden-phone קענטיק קענטיק
.hidden-tablet קענטיק קענטיק
.hidden-desktop קענטיק קענטיק

טעסט פאַל

רעסיזע דיין בלעטערער אָדער לאָדן אויף פאַרשידענע דעוויסעס צו פּרובירן די אויבן קלאסן.

קענטיק אויף ...

גרין טשעקמאַרקס אָנווייַזן אַז קלאַס איז קענטיק אין דיין קראַנט וויופּאָרט.

  • טעלעפאָן✔ טעלעפאָן
  • טאַבלעט✔ טאַבלעט
  • דעסקטאָפּ✔ דעסקטאָפּ

פאַרבאָרגן אויף ...

דאָ, גרין טשעקמאַרקס אָנווייַזן אַז קלאַס איז פאַרבאָרגן אין דיין קראַנט וויופּאָרט.

  • טעלעפאָן✔ טעלעפאָן
  • טאַבלעט✔ טאַבלעט
  • דעסקטאָפּ✔ דעסקטאָפּ