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

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

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

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

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

בייַשפּיל

<דייוו קלאַס = "רודערן" > 
  <div class = "span12" > 
    מדרגה 1 פון זייַל
    <דייוו קלאַס = "רודערן" > 
      <div class = "span6" > מדרגה 2 </div> 
      <div class = "span6" > מדרגה 2 </div> 
    </div>
  </div>
</div>

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

געבויט אין באָאָטסטראַפּ זענען אַ האַנדפול פון וועריאַבאַלז פֿאַר קאַסטאַמייזינג די פעליקייַט 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>

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

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

וואס זיי טוען

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

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

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

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

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

  // לאַנדשאַפט פאָנעס און אַראָפּ
  @מעדיע ( מאַקס - ברייט : 480פּקס ) { ... }     
 
  // לאַנדשאַפט טעלעפאָן צו פּאָרטרעט טאַבלעט
  @מעדיע ( מאַקס - ברייט : 768 פּקס ) { ... }     
 
  // פּאָרטרעט טאַבלעט צו לאַנדשאַפט און דעסקטאַפּ
  @מעדיע ( מין - ברייט : 768 פּקס ) און ( מאַקס - ברייט : 940פּקס ) { ... }        
 
  // גרויס דעסקטאַפּ
  @מעדיע ( מין - ברייט : 1200פּקס ) { .. }