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

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

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

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

גלאבאלע סעטטינגס

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

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

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

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

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

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

די סטיילז קענען זיין געפֿונען אין scaffolding.less .

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

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

פעליקייַט גריד סיסטעם

לעבן גריד בייַשפּיל

די פעליקייַט באָאָצטראַפּ גריד סיסטעם ניצט 12 שפאלטן , וואָס מאכט אַ 940 פּקס ברייט קאַנטיינער אָן אָפּרופיק פֿעיִקייטן ענייבאַלד. מיט די אָפּרופיק CSS טעקע צוגעגעבן, די גריד אַדאַפּץ צו זיין 724 פּקס און 1170 פּקס ברייט דיפּענדינג אויף דיין וויופּאָרט. אונטער 767 פּקס וויופּאָרץ, די שפאלטן ווערן פליסיק און אָנלייגן ווערטיקלי.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

יקערדיק גריד HTML

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

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

געגעבן דעם בייַשפּיל, מיר האָבן .span4און .span8, מאכן פֿאַר 12 גאַנץ שפאלטן און אַ גאַנץ רודערן.

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

מאַך שפאלטן צו די רעכט ניצן .offset*קלאסן. יעדער קלאַס ינקריסיז די לינקס גרענעץ פון אַ זייַל מיט אַ גאַנץ זייַל. פֿאַר בייַשפּיל, .offset4באוועגט .span4איבער פיר שפאלטן.

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

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

צו נעסט דיין אינהאַלט מיט די פעליקייַט גריד, לייגן אַ נייַע .rowאון גאַנג פון .span*שפאלטן אין אַ יגזיסטינג .span*זייַל. נעסטעד ראָוז זאָל אַרייַננעמען אַ סכום פון שפאלטן וואָס לייגן אַרויף צו די נומער פון שפאלטן פון זיין פאָטער.

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

פליסיק גריד סיסטעם

לעבן פליסיק גריד בייַשפּיל

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

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

יקערדיק פליסיק גריד HTML

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

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

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

אַפּערייץ די זעלבע וועג ווי די פאַרפעסטיקט גריד סיסטעם אָפסעטטינג: לייגן .offset*צו קיין זייַל צו אָפסעט דורך אַזוי פילע שפאלטן.

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

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

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

פליסיק 12
פלויד 6
פלויד 6
פלויד 6
פלויד 6 
  1. <דייוו קלאַס = "רודערן-פליסיק" > 
  2.   <div class = "span12" > 
  3.     פליסיק 12
  4.     <דייוו קלאַס = "רודערן-פליסיק" > 
  5.       <div class = "span6" > 
  6.         פלויד 6
  7.         <דייוו קלאַס = "רודערן-פליסיק" > 
  8.           <div class = "span6" > פליסיק 6 </div> 
  9.           <div class = "span6" > פליסיק 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > פליסיק 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layouts

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

פּראָווידעס אַ פּראָסט פאַרפעסטיקט-ברייט (און אָפּטיאָנאַללי אָפּרופיק) אויסלייג מיט בלויז <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 אין דיין פּרויעקט דורך אַרייַנגערעכנט די געהעריק מעטאַ קוויטל און נאָך סטילעשעעט אין <head>דיין דאָקומענט. אויב איר האָט צונויפגעשטעלט Bootstrap פֿון די קאַסטאַמייז בלאַט, איר דאַרפֿן בלויז אַרייַננעמען די מעטאַ קוויטל.

  1. <מעטאַ נאָמען = "וויעוופּאָרט" אינהאַלט = "ברייט = מיטל-ברייט, ערשט-וואָג = 1.0" >  
  2. <לינק href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

וועגן אָפּרופיק באָאָצטראַפּ

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

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

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

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

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

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

לאַבעל אויסלייג ברייט זייַל ברייט גוטטער ברייט
גרויס אַרויסווייַזן 1200 פּקס און העכער 70 פּקס 30 פּקס
פעליקייַט 980 פּקס און העכער 60 פּקס 20 פּקס
פּאָרטרעט טאַבלאַץ 768 פּקס און העכער 42px 20 פּקס
פאָנעס צו טאַבלאַץ 767 פּקס און ווייטער פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט
פאָנעס 480 פּקס און ווייטער פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט 
  1. /* גרויס דעסקטאַפּ */
  2. @מעדיע ( מין - ברייט : 1200פּקס ) { ... }     
  3.  
  4. /* פּאָרטרעט טאַבלעט צו לאַנדשאַפט און דעסקטאַפּ */
  5. @מעדיע ( מין - ברייט : 768 פּקס ) און ( מאַקס - ברייט : 979פּקס ) { ... }        
  6.  
  7. /* לאַנדשאַפט טעלעפאָן צו פּאָרטרעט טאַבלעט */
  8. @מעדיע ( מאַקס - ברייט : 767 פּקס ) { ... }     
  9.  
  10. /* לאַנדשאַפט פאָנעס און אַראָפּ */
  11. @מעדיע ( מאַקס - ברייט : 480פּקס ) { ... }

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

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

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

ווען צו נוצן

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

אָפּרופיק יוטילאַטיז פּרובירן פאַל

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

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

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

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

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

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

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