באָאָטסטראַפּ איז געבויט אויף אָפּרופיק 12-זייַל גרידס, לייאַוץ און קאַמפּאָונאַנץ.
Bootstrap ניצט זיכער HTML עלעמענטן און CSS פּראָפּערטיעס וואָס דאַרפן די נוצן פון HTML5 דאָקטיפּע. אַרייַננעמען עס אין די אָנהייב פון אַלע דיין פּראַדזשעקס.
- <!DOCTYPE HTML>
- <html lang = "en" >
- ...
- </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 פּקס וויופּאָרץ, די שפאלטן ווערן פליסיק און אָנלייגן ווערטיקלי.
פֿאַר אַ פּשוט צוויי זייַל אויסלייג, שאַפֿן אַ .row
און לייגן די צונעמען נומער פון .span*
שפאלטן. ווי דאָס איז אַ 12-זייַל גריד, יעדער .span*
ספּאַנס אַ נומער פון די 12 שפאלטן, און זאָל שטענדיק לייגן אַרויף צו 12 פֿאַר יעדער רודערן (אָדער די נומער פון שפאלטן אין די פאָטער).
- <דייוו קלאַס = "רודערן" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
געגעבן דעם בייַשפּיל, מיר האָבן .span4
און .span8
, מאכן פֿאַר 12 גאַנץ שפאלטן און אַ גאַנץ רודערן.
מאַך שפאלטן צו די רעכט ניצן .offset*
קלאסן. יעדער קלאַס ינקריסיז די לינקס גרענעץ פון אַ זייַל מיט אַ גאַנץ זייַל. פֿאַר בייַשפּיל, .offset4
באוועגט .span4
איבער פיר שפאלטן.
- <דייוו קלאַס = "רודערן" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
צו נעסט דיין אינהאַלט מיט די פעליקייַט גריד, לייגן אַ נייַע .row
און גאַנג פון .span*
שפאלטן אין אַ יגזיסטינג .span*
זייַל. נעסטעד ראָוז זאָל אַרייַננעמען אַ סכום פון שפאלטן וואָס לייגן אַרויף צו די נומער פון שפאלטן פון זיין פאָטער.
- <דייוו קלאַס = "רודערן" >
- <div class = "span9" >
- מדרגה 1 זייַל
- <דייוו קלאַס = "רודערן" >
- <div class = "span6" > מדרגה 2 </div>
- <div class = "span3" > מדרגה 2 </div>
- </div>
- </div>
- </div>
די פליסיק גריד סיסטעם ניצט פּראָצענט אַנשטאָט פון בילדצעלן פֿאַר זייַל ברייט. עס האט די זעלבע אָפּרופיק קייפּאַבילאַטיז ווי אונדזער פאַרפעסטיקט גריד סיסטעם, ינשורינג געהעריק פּראַפּאָרשאַנז פֿאַר שליסל פאַרשטעלן רעזאַלושאַנז און דעוויסעס.
מאַכן קיין רודערן "פליסיק" דורך טשאַנגינג .row
צו .row-fluid
. די זייַל קלאסן בלייבן די זעלבע, וואָס מאכט עס גרינג צו פליפּ צווישן פאַרפעסטיקט און פליסיק גרידס.
- <דייוו קלאַס = "רודערן-פליסיק" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
אַפּערייץ די זעלבע וועג ווי די פאַרפעסטיקט גריד סיסטעם אָפסעטטינג: לייגן .offset*
צו קיין זייַל צו אָפסעט דורך אַזוי פילע שפאלטן.
- <דייוו קלאַס = "רודערן-פליסיק" >
- <דייוו קלאַס = "ספּאַן4" > ... </div>
- <דייוו קלאַס = "ספּאַן4 אָפסעט2" > ... </div>
- </div>
פליסיק גרידס נוצן נעסטינג דיפערענטלי: יעדער נעסטעד מדרגה פון שפאלטן זאָל לייגן אַרויף צו 12 שפאלטן. דאָס איז ווייַל די פליסיק גריד ניצט פּערסענטידזשיז, נישט בילדצעלן, פֿאַר באַשטעטיקן ברייט.
- <דייוו קלאַס = "רודערן-פליסיק" >
- <div class = "span12" >
- פליסיק 12
- <דייוו קלאַס = "רודערן-פליסיק" >
- <div class = "span6" >
- פלויד 6
- <דייוו קלאַס = "רודערן-פליסיק" >
- <div class = "span6" > פליסיק 6 </div>
- <div class = "span6" > פליסיק 6 </div>
- </div>
- </div>
- <div class = "span6" > פליסיק 6 </div>
- </div>
- </div>
- </div>
פּראָווידעס אַ פּראָסט פאַרפעסטיקט-ברייט (און אָפּטיאָנאַללי אָפּרופיק) אויסלייג מיט בלויז <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 אין דיין פּרויעקט דורך אַרייַנגערעכנט די געהעריק מעטאַ קוויטל און נאָך סטילעשעעט אין <head>
דיין דאָקומענט. אויב איר האָט צונויפגעשטעלט Bootstrap פֿון די קאַסטאַמייז בלאַט, איר דאַרפֿן בלויז אַרייַננעמען די מעטאַ קוויטל.
- <מעטאַ נאָמען = "וויעוופּאָרט" אינהאַלט = "ברייט = מיטל-ברייט, ערשט-וואָג = 1.0" >
- <לינק 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 פּקס און ווייטער | פליסיק שפאלטן, קיין פאַרפעסטיקט ברייט |
- /* גרויס דעסקטאַפּ */
- @מעדיע ( מין - ברייט : 1200פּקס ) { ... }
- /* פּאָרטרעט טאַבלעט צו לאַנדשאַפט און דעסקטאַפּ */
- @מעדיע ( מין - ברייט : 768 פּקס ) און ( מאַקס - ברייט : 979פּקס ) { ... }
- /* לאַנדשאַפט טעלעפאָן צו פּאָרטרעט טאַבלעט */
- @מעדיע ( מאַקס - ברייט : 767 פּקס ) { ... }
- /* לאַנדשאַפט פאָנעס און אַראָפּ */
- @מעדיע ( מאַקס - ברייט : 480פּקס ) { ... }
פֿאַר פאַסטער רירעוודיק-פרייַנדלעך אַנטוויקלונג, נוצן די נוצן קלאסן צו ווייַזן און באַהאַלטן אינהאַלט דורך מיטל. ונטער איז אַ טיש פון די בנימצא קלאסן און זייער ווירקונג אויף אַ געגעבן מעדיע אָנפֿרעג אויסלייג (לייבאַלד דורך מיטל). זיי קענען זיין געפֿונען אין responsive.less
.
קלאַס | פאָנעס767 פּקס און ווייטער | טאַבלעץ979 צו 768 פּקס | דעסקטאָפּספעליקייַט |
---|---|---|---|
.visible-phone |
קענטיק | פאַרבאָרגן | פאַרבאָרגן |
.visible-tablet |
פאַרבאָרגן | קענטיק | פאַרבאָרגן |
.visible-desktop |
פאַרבאָרגן | פאַרבאָרגן | קענטיק |
.hidden-phone |
פאַרבאָרגן | קענטיק | קענטיק |
.hidden-tablet |
קענטיק | פאַרבאָרגן | קענטיק |
.hidden-desktop |
קענטיק | קענטיק | פאַרבאָרגן |
ניצן אויף אַ לימיטעד יקער און ויסמיידן קריייטינג גאָר פאַרשידענע ווערסיעס פון דער זעלביקער פּלאַץ. אַנשטאָט, נוצן זיי צו דערגאַנג די פּרעזענטירונג פון יעדער מיטל. אָפּרופיק יוטילאַטיז זאָל ניט זיין געוויינט מיט טישן, און ווי אַזאַ זענען נישט געשטיצט.
רעסיזע דיין בלעטערער אָדער לאָדן אויף פאַרשידענע דעוויסעס צו פּרובירן די אויבן קלאסן.
גרין טשעקמאַרקס אָנווייַזן אַז קלאַס איז קענטיק אין דיין קראַנט וויופּאָרט.
דאָ, גרין טשעקמאַרקס אָנווייַזן אַז קלאַס איז פאַרבאָרגן אין דיין קראַנט וויופּאָרט.