Source

מיגרייטינג צו v4

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

סטאַביל ענדערונגען

מאָווינג פון ביתא 3 צו אונדזער סטאַביל וו4.0 מעלדונג, עס זענען קיין ברייקינג ענדערונגען, אָבער עס זענען עטלעכע נאָוטאַבאַל ענדערונגען.

דרוק

  • פאַרפעסטיקט צעבראכן דרוק יוטילאַטיז. ביז אַהער, ניצן אַ .d-print-*קלאַס וואָלט אומגעריכט אָווועררול קיין אנדערע .d-*קלאַס. איצט, זיי גלייַכן אונדזער אנדערע אַרויסווייַזן יוטילאַטיז און נאָר צולייגן צו די מידיאַ ( @media print).

  • יקספּאַנדיד בנימצא דרוק אַרויסווייַזן יוטילאַטיז צו גלייַכן אנדערע יוטילאַטיז. ביתא 3 און עלטער האָבן בלויז block, inline-block, inline, און none. סטאַביל וו4 צוגעגעבן flex, inline-flex, table, table-row, און table-cell.

  • פאַרפעסטיקט פּריוויו רענדערינג אַריבער בראַוזערז מיט נייַע דרוק סטיילז וואָס ספּעציפיצירן @page size.

ביתא 3 ענדערונגען

בשעת ביתא 2 האָט געזען די מערסטע פון ​​​​אונדזער ברייקינג ענדערונגען בעשאַס די ביתא פאַסע, אָבער מיר נאָך האָבן אַ ביסל וואָס דארף צו זיין אַדרעסד אין די ביתא 3 מעלדונג. די ענדערונגען אַפּלייז אויב איר אַפּדייטינג צו ביתא 3 פֿון ביתא 2 אָדער קיין עלטערע ווערסיע פון ​​באָאָטסטראַפּ.

פאַרשיידענע

  • אַוועקגענומען די אַניוזד $thumbnail-transitionבייַטעוודיק. מיר זענען נישט יבערגאַנג עפּעס, אַזוי עס איז נאָר עקסטרע קאָד.
  • די npm פּעקל ניט מער כולל קיין טעקעס אנדערע ווי אונדזער מקור און דיסט טעקעס; אויב איר רילייד אויף זיי און לויפן אונדזער סקריפּס דורך דער node_modulesטעקע, איר זאָל אַדאַפּט דיין וואָרקפלאָוו.

Forms

  • ריראָוט ביידע מנהג און פעליקייַט טשעקקבאָקסעס און ראַדיאָס. איצט, ביידע האָבן וואָס ריכטן HTML סטרוקטור (ויסווייניקסט <div>מיט סיבלינג <input>און <label>) און די זעלבע אויסלייג סטיילז (סטאַקט פעליקייַט, ינלינע מיט מאָדיפיער קלאַס). דאָס אַלאַוז אונדז צו סטיל די פירמע באזירט אויף די אַרייַנשרייַב שטאַט, סימפּלאַפייינג שטיצן פֿאַר די disabledאַטריביוט (פריער ריקוויירינג אַ פאָטער קלאַס) און בעסער שטיצן אונדזער פאָרעם וואַלאַדיישאַן.

    ווי אַ טייל פון דעם, מיר האָבן פארענדערט די CSS פֿאַר אָנפירונג קייפל background-imageס אויף מנהג פאָרעם טשעקקבאָקסעס און ראַדיאָס. ביז אַהער, די איצט אַוועקגענומען .custom-control-indicatorעלעמענט האט די הינטערגרונט פֿאַרב, גראַדיענט און SVG בילדל. קאַסטאַמייזינג די הינטערגרונט גראַדיענט מענט ריפּלייסינג אַלע פון ​​​​די יעדער מאָל איר דאַרפֿן צו טוישן בלויז איין. איצט, מיר האָבן .custom-control-label::beforeפֿאַר די פּלאָמבירן און גראַדיענט און .custom-control-label::afterכאַנדאַלז די בילדל.

    צו מאַכן אַ מנהג טשעק ינלינע, לייגן .custom-control-inline.

  • דערהייַנטיקט סעלעקטאָר פֿאַר אַרייַנשרייַב-באזירט קנעפּל גרופּעס. אַנשטאָט [data-toggle="buttons"] { }פֿאַר סטיל און נאַטור, מיר נוצן דעם dataאַטריביוט בלויז פֿאַר JS ביכייוויערז און פאַרלאָזנ זיך אַ נייַע .btn-group-toggleקלאַס פֿאַר סטילינג.

  • אַוועקגענומען .col-form-legendאין טויווע פון ​​אַ ביסל ימפּרוווד .col-form-label. דעם וועג .col-form-label-smאון .col-form-label-lgקענען זיין געוויינט אויף <legend>עלעמענטן מיט יז.

  • מנהג טעקע ינפּוץ באקומען אַ ענדערונג צו זייער $custom-file-textSass בייַטעוודיק. עס איז ניט מער אַ נעסטעד סאַס מאַפּע און איצט בלויז כוחות איין שטריקל - דער Browseקנעפּל ווי דאָס איז איצט דער בלויז פּסעוודאָ-עלעמענט דזשענערייטאַד פון אונדזער סאַס. דער Choose fileטעקסט איצט קומט פון די .custom-file-label.

אַרייַנשרייַב גרופּעס

  • אַרייַנשרייַב גרופּע אַדדאָנס זענען איצט ספּעציפיש צו זייער פּלייסמאַנט קאָרעוו צו אַ אַרייַנשרייַב. מי ר האב ן זי ך אראפגעלאז ט או ן .input-group-addonפאר .input-group-btnן צװ ײ נײ ע קלאסן , .input-group-prependאו ן .input-group-append. איר מוזן בפירוש נוצן אַ צוגעבן אָדער אַ פּרעפּענד איצט, סימפּלאַפייינג פיל פון אונדזער CSS. ין אַ צוגעבן אָדער פּרעפּענד, שטעלן דיין קנעפּלעך ווי זיי וואָלט עקסיסטירן ערגעץ אַנדערש, אָבער ייַנוויקלען טעקסט אין .input-group-text.

  • וואַלאַדיישאַן סטיילז זענען איצט געשטיצט, ווי אויך קייפל ינפּוץ (כאָטש איר קענען בלויז וואַלאַדייט איין אַרייַנשרייַב פּער גרופּע).

  • סייזינג קלאסן מוזן זיין אויף די פאָטער .input-groupאון נישט די יחיד פאָרעם עלעמענטן.

ביתא 2 ענדערונגען

אין ביתא, מיר צילן צו האָבן קיין ברייקינג ענדערונגען. אָבער, די טינגז טאָן ניט שטענדיק גיין ווי פּלאַננעד. ונטער זענען די ברייקינג ענדערונגען צו האַלטן אין זינען ווען מאָווינג פון ביתא 1 צו ביתא 2.

ברייקינג

  • אַוועקגענומען $badge-colorבייַטעוודיק און זייַן באַניץ אויף .badge. מיר נוצן אַ קאָליר קאַנטראַסט פונקציע צו קלייַבן אַ colorבאזירט אויף די background-color, אַזוי די בייַטעוודיק איז ומנייטיק.
  • ריניימד grayscale()פונקציע צו gray()ויסמיידן ברייקינג קאָנפליקט מיט די CSS געבוירן grayscaleפילטער.
  • ריניימד .table-inverse, .thead-inverse, און .thead-defaultצו .*-darkאון .*-light, וואָס ריכטן זיך אונדזער קאָליר סקימז געניצט אנדערש.
  • אָפּרופיק טישן איצט דזשענערייט קלאסן פֿאַר יעדער גריד ברייקפּוינט. דאָס ברייקס פֿון ביתא 1, ווייַל די וואָס .table-responsiveאיר האָט געוויינט איז מער ווי .table-responsive-md. איר קענט איצט נוצן .table-responsiveאָדער .table-responsive-{sm,md,lg,xl}ווי דארף.
  • דראַפּט באָווער שטיצן ווי דער פּעקל פאַרוואַלטער איז דיפּרישיייטיד פֿאַר אַלטערנאַטיוועס (למשל, יאַרן אָדער נפּם). זען בוער / באָווער # 2298 פֿאַר פרטים.
  • באָאָטסטראַפּ נאָך ריקווייערז דזשקווערי 1.9.1 אָדער העכער, אָבער איר זענט אַדווייזד צו נוצן ווערסיע 3.x זינט וו3.קס ס שטיצט בראַוזערז זענען די וואָס Bootstrap שטיצט פּלוס v3.x האט עטלעכע זיכערהייט פיקסיז.
  • אראפגענומען די נישט באנוצטע .form-control-labelקלאס. אויב איר האָט גענוצט דעם קלאַס, עס איז געווען דופּליקאַט פון די .col-form-labelקלאַס וואָס איז ווערטיקלי סענטערד <label>מיט די פֿאַרבונדן אַרייַנשרייַב אין האָריזאָנטאַל פאָרעם לייאַוץ.
  • טשיינדזשד די color-yiqפון אַ מיקסין וואָס ינקלודעד די colorפאַרמאָג צו אַ פונקציע וואָס קערט אַ ווערט, אַלאַוינג איר צו נוצן עס פֿאַר קיין CSS פאַרמאָג. פֿאַר בייַשפּיל, אַנשטאָט פון color-yiq(#000), איר וואָלט שרייַבן color: color-yiq(#000);.

כיילייץ

  • באַקענענ נייַע pointer-eventsבאַניץ אויף מאָדאַלס. די ויסווייניקסט .modal-dialogפּאַסיז דורך געשעענישן מיט pointer-events: noneפֿאַר מנהג קליק האַנדלינג (מאַכן עס מעגלעך צו נאָר הערן אויף די .modal-backdropפֿאַר קיין קליקס), און דאַן קאַונטעראַקץ עס פֿאַר די פאַקטיש .modal-contentמיט pointer-events: auto.

קיצער

דאָ זענען די גרויס בילעט זאכן איר וועט וועלן צו זיין אַווער פון ווען איר מאַך פון v3 צו v4.

בלעטערער שטיצן

  • דראַפּט IE8, IE9 און יאָס 6 שטיצן. v4 איז איצט בלויז IE10+ און יאָס 7+. פֿאַר זייטלעך וואָס דאַרפֿן איינער פון די, נוצן v3.
  • צוגעגעבן באַאַמטער שטיצן פֿאַר אַנדרויד וו5.0 לאַליפּאָפּ ס בראַוזער און וועבוויעוו. פריער ווערסיעס פון אַנדרויד בראַוזער און וועבוויעוו בלייבן בלויז אַנאַפישאַלי געשטיצט.

גלאבאלע ענדערונגען

  • פלעקסבאָקס איז ענייבאַלד דורך פעליקייַט. אין אַלגעמיין, דאָס מיטל אַ מאַך אַוועק פון פלאַץ און מער אַריבער אונדזער קאַמפּאָונאַנץ.
  • סוויטשט פון ווייניקער צו סאַס פֿאַר אונדזער מקור CSS טעקעס.
  • סוויטשט פֿון pxאונדזער remערשטיק CSS אַפּאַראַט, כאָטש בילדצעלן זענען נאָך געניצט פֿאַר מעדיע פֿראגן און גריד נאַטור, ווייַל די וויופּאָרץ פון די מיטל זענען נישט אַפעקטאַד דורך די גרייס.
  • גלאבאלע שריפֿט גרייס געוואקסן פון 14pxצו 16px.
  • ריוואַמפּט גריד טיערס צו לייגן אַ פינפט אָפּציע (אַדרעסינג קלענערער דעוויסעס ביי 576pxאון אונטן) און אַוועקגענומען די -xsינפיקס פון די קלאסן. בייַשפּיל: .col-6.col-sm-4.col-md-3.
  • ריפּלייסט די באַזונדער אַפּשאַנאַל טעמע מיט קאַנפיגיעראַבאַל אָפּציעס דורך SCSS וועריאַבאַלז (למשל, $enable-gradients: true).
  • בויען סיסטעם אָוווערכאָולד צו נוצן אַ סעריע פון ​​נפּם סקריפּס אַנשטאָט פון גרונט. זען package.jsonפֿאַר אַלע סקריפּס, אָדער אונדזער פּרויעקט לייענען פֿאַר היגע אַנטוויקלונג דאַרף.
  • ניט-אָפּרופיק נוצן פון Bootstrap איז ניט מער געשטיצט.
  • דראַפּט די אָנליין קוסטאָמיזער אין טויווע פון ​​מער ברייט סעטאַפּ דאַקיומענטיישאַן און קאַסטאַמייזד בויען.
  • צוגעגעבן דאַזאַנז פון נייַ נוצן קלאסן פֿאַר פּראָסט CSS פאַרמאָג ווערט פּערז און גרענעץ / וואַטן ספּייסינג שאָרטקאַץ.

גריד סיסטעם

  • אריבערגעפארן צו פלעקסבאָקס.
    • צוגעגעבן שטיצן פֿאַר פלעקסבאָקס אין די גריד מיקסינס און פּרעדעפינעד קלאסן.
    • ווי אַ טייל פון פלעקסבאָקס, ינקלודעד שטיצן פֿאַר ווערטיקאַל און האָריזאָנטאַל אַליינמאַנט קלאסן.
  • דערהייַנטיקט גריד קלאַס נעמען און אַ נייַ גריד ריי.
    • צוגעלייגט אַ נייַע smגריד ריי אונטן 768pxפֿאַר מער גראַניאַלער קאָנטראָל. מיר איצט האָבן xs, sm, md, lgאון xl. דאָס אויך מיטל אַז יעדער ריי איז באַמפּט אַרויף איין שטאַפּל (אַזוי .col-md-6אין וו3 איז איצט .col-lg-6אין וו4).
    • xsגריד קלאסן האָבן שוין מאַדאַפייד צו נישט דאַרפן די ינפיקס צו מער אַקיעראַטלי פאָרשטעלן אַז זיי אָנהייבן אַפּלייינג סטיילז אין min-width: 0און נישט אַ באַשטימט פּיקסעל ווערט. אנשטאט .col-xs-6, עס איז איצט .col-6. אַלע אנדערע גריד טיערס דאַרפן די ינפיקס (למשל, sm).
  • דערהייַנטיקט גריד סיזעס, מיקסינס און וועריאַבאַלז.
    • גריד גאַטערז איצט האָבן אַ סאַסס מאַפּע אַזוי איר קענען ספּעציפיצירן ספּעציפיש גאָוטער ווידטס ביי יעדער ברייקפּוינט.
    • דערהייַנטיקט גריד מיקסינס צו נוצן אַ make-col-readyפּרעפּ מיקסין און אַ make-colצו שטעלן די flexאון max-widthפֿאַר יחיד זייַל סייזינג.
    • טשיינדזשד גריד סיסטעם מעדיע אָנפֿרעג ברייקפּאָינץ און קאַנטיינער ווידטס צו חשבון פֿאַר נייַ גריד ריי און ענשור שפאלטן זענען יוואַנלי דיוויזאַבאַל מיט 12זייער מאַקסימום ברייט.
    • גריד ברעאַקפּאָינץ און קאַנטיינער ווידטס זענען איצט כאַנדאַלד דורך Sass מאַפּס ( $grid-breakpointsאון $container-max-widths) אַנשטאָט פון אַ האַנדפול פון באַזונדער וועריאַבאַלז. די פאַרבייַטן די @screen-*וועריאַבאַלז לעגאַמרע און לאָזן איר צו גאָר קאַסטאַמייז די גריד טיערס.
    • מעדיע פֿראגן האָבן אויך געביטן. אַנשטאָט ריפּיטינג אונדזער מידיאַ אָנפֿרעג דעקלעריישאַנז מיט דער זעלביקער ווערט יעדער מאָל, מיר איצט האָבן @include media-breakpoint-up/down/only. איצט, אַנשטאָט פון שרייבן @media (min-width: @screen-sm-min) { ... }, איר קענען שרייַבן @include media-breakpoint-up(sm) { ... }.

קאַמפּאָונאַנץ

  • דראַפּט פּאַנאַלז, טהומבנאַילס און וועלז פֿאַר אַ נייַ אַלע-ענקאַמפּאַסינג קאָמפּאָנענט, קאַרדס .
  • דראַפּט די Glyphicons בילדל שריפֿט. אויב איר דאַרפֿן ייקאַנז, עטלעכע אָפּציעס זענען:
  • דראַפּט די Affix jQuery פּלוגין.
    • מיר רעקאָמענדירן ניצן position: stickyאַנשטאָט. זען די HTML5 ביטע פּאָזיציע פֿאַר דעטאַילס און ספּעציפיש פּאָליפיל רעקאַמאַנדיישאַנז. איין פאָרשלאָג איז צו נוצן אַ @supportsהערשן פֿאַר ימפּלאַמענינג עס (למשל, @supports (position: sticky) { ... })/
    • אויב איר האָט געוויינט Affix צו צולייגן נאָך, ניט- positionסטיילז, די פּאָליפיללס קען נישט שטיצן דיין נוצן פאַל. איין אָפּציע פֿאַר אַזאַ ניצט איז די דריט-פּאַרטיי ScrollPos-Styler ביבליאָטעק.
  • דראַפּט די פּאַדזשער קאָמפּאָנענט ווייַל עס איז געווען בייסיקלי אַ ביסל קאַסטאַמייזד קנעפּלעך.
  • ריפאַקטאָרעד קימאַט אַלע קאַמפּאָונאַנץ צו נוצן מער ניט-נעסטעד קלאַס סעלעקטאָרס אַנשטאָט פון איבער-ספּעציפיש קינדער סעלעקטאָרס.

דורך קאָמפּאָנענט

די רשימה כיילייץ שליסל ענדערונגען דורך קאָמפּאָנענט צווישן וו3.קסקס און וו4.0.0.

רעבאָאָט

נייַ צו Bootstrap 4 איז די רעבאָאָט , אַ נייַע סטילעשעעט וואָס איז געבויט אויף נאָרמאַלייז מיט אונדזער אייגענע באַשטעטיק סטיילז. סעלעקטאָרס וואָס דערשייַנען אין דעם טעקע נוצן בלויז עלעמענטן - עס זענען קיין קלאסן דאָ. דאָס יזאָלייץ אונדזער באַשטעטיק סטיילז פון אונדזער קאָמפּאָנענט סטיילז פֿאַר אַ מער מאַדזשאַלער צוגאַנג. עטלעכע פון ​​​​די מערסט וויכטיק ריסעץ וואָס דאָס כולל זענען די box-sizing: border-boxענדערונג, מאָווינג פון emצו remוניץ אויף פילע עלעמענטן, לינק סטיילז און פילע פאָרעם עלעמענט ריסעץ.

טיפּאָגראַפי

  • אריבערגעפארן אַלע .text-יוטילאַטיז צו דער _utilities.scssטעקע.
  • דראַפּט .page-headerווייַל די סטיילז קענען זיין געווענדט דורך יוטילאַטיז.
  • .dl-horizontalאיז אראפגעפאלן. אַנשטאָט, נוצן און נוצן גריד זייַל קלאסן (אָדער מיקסינס) אויף זיין .rowאון קינדער .<dl><dt><dd>
  • רידיזיינד בלאַקקוואָטעס, מאָווינג זייער סטיילז פון די <blockquote>עלעמענט צו אַ איין קלאַס, .blockquote. דראַפּט די .blockquote-reverseמאָדיפיער פֿאַר טעקסט יוטילאַטיז.
  • .list-inlineאיצט ריקווייערז אַז זייַן קינדער רשימה ייטאַמז האָבן די נייַע .list-inline-itemקלאַס געווענדט צו זיי.

בילדער

  • ריניימד .img-responsiveצו .img-fluid.
  • ריניימד .img-roundedצו.rounded
  • ריניימד .img-circleצו.rounded-circle

טישן

  • קימאַט אַלע ינסטאַנסיז פון די >סעלעקטאָר זענען אַוועקגענומען, טייַטש נעסטעד טישן וועט איצט אויטאָמאַטיש ירשענען סטיילז פון זייער עלטערן. דאָס סימפּלאַפייז זייער סעלערז און פּאָטענציעל קוסטאָמיזאַטיאָנס.
  • ריניימד .table-condensedצו .table-smפֿאַר קאָנסיסטענסי.
  • צוגעגעבן אַ נייַע .table-inverseאָפּציע.
  • צוגעגעבן טיש כעדער מאָדיפיערס: .thead-defaultאון .thead-inverse.
  • ריניימד קאָנטעקסטואַל קלאסן צו האָבן אַ .table-פּרעפיקס. דערפאר .active, .success, .warning, .dangerאון .infoצו .table-active, .table-success, און . .table-warning_.table-danger.table-info

Forms

  • אריבערגעפארן עלעמענט ריסעץ צו דער _reboot.scssטעקע.
  • ריניימד .control-labelצו .col-form-label.
  • ריניימד .input-lgאון .input-smצו .form-control-lgאון .form-control-sm, ריספּעקטיוולי.
  • פארפאלן .form-group-*קלאסן פאר די פשטות. ניצן .form-control-*קלאסן אַנשטאָט איצט.
  • דראַפּט .help-blockאון ריפּלייסט עס מיט .form-textפֿאַר בלאָק-מדרגה הילף טעקסט. פֿאַר ינלינע הילף טעקסט און אנדערע פלעקסאַבאַל אָפּציעס, נוצן נוצן קלאסן ווי .text-muted.
  • געפאלן .radio-inlineאון .checkbox-inline.
  • קאָנסאָלידירט .checkboxאון .radioאין .form-checkאון די פאַרשידן .form-check-*קלאסן.
  • האָריזאָנטאַל פארמען אָוווערכאָולד:
    • דראַפּט די .form-horizontalקלאַס פאָדערונג.
    • .form-groupניט מער אַפּלייז סטיילז פון די .rowדורך מיקסין, אַזוי עס .rowאיז איצט פארלאנגט פֿאַר האָריזאָנטאַל גריד לייאַוץ (למשל, <div class="form-group row">).
    • צוגעגעבן נייַ .col-form-labelקלאַס צו ווערטיקלי צענטער לאַבעלס מיט .form-controls.
    • צוגעלייגט נייַ .form-rowפֿאַר סאָליד פאָרעם לייאַוץ מיט די גריד קלאסן (ויסבייַטן דיין .rowפֿאַר אַ .form-rowאון גיין).
  • צוגעלייגט שטיצן פֿאַר מנהג פארמען (פֿאַר טשעקקבאָקסעס, ראַדיאָס, סאַלעקץ און טעקע ינפּוץ).
  • ריפּלייסט .has-error, .has-warning, און .has-successקלאסן מיט HTML5 פאָרם וואַלאַדיישאַן דורך CSS ס :invalidאון :validפּסעוודאָ-קלאסן.
  • ריניימד .form-control-staticצו .form-control-plaintext.

קנעפּלעך

  • ריניימד .btn-defaultצו .btn-secondary.
  • דראַפּט די .btn-xsקלאַס לעגאַמרע ווי .btn-smפּראַפּאָרשאַנאַל פיל קלענערער ווי וו3 ס.
  • די סטייטפול קנעפּל שטריך פון די button.jsjQuery פּלוגין איז דראַפּט. דאָס כולל די $().button(string)און $().button('reset')מעטהאָדס. מיר רעקאָמענדירן ניצן אַ קליינטשיק ביסל פון מנהג דזשאַוואַסקריפּט אַנשטאָט, וואָס וועט האָבן די נוץ פון ביכייווז פּונקט ווי איר ווילט.
    • באַמערקונג אַז די אנדערע פֿעיִקייטן פון די פּלוגין (קנעפּל טשעקקבאָקסעס, קנעפּל ראַדיאָס, איין-טאַגאַל קנעפּלעך) זענען ריטיינד אין וו4.
  • טוישן די קנעפּלעך [disabled]ווי :disabledIE9+ שטיצט :disabled. אָבער fieldset[disabled]איז נאָך נייטיק ווייַל געבוירן פאַרקריפּלט פעלדזעץ זענען נאָך וואָגן אין IE11 .

קנעפּל גרופּע

  • ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
  • אראפגענומען .btn-group-justified. ווי אַ פאַרבייַט איר קענען נוצן <div class="btn-group d-flex" role="group"></div>ווי אַ ראַפּער אַרום עלעמענטן מיט .w-100.
  • דראַפּט די .btn-group-xsקלאַס אין גאנצן געגעבן באַזייַטיקונג פון .btn-xs.
  • אַוועקגענומען יקספּליסאַט ספּייסינג צווישן קנעפּל גרופּעס אין קנעפּל טאָאָלבאַרס; נוצן גרענעץ יוטילאַטיז איצט.
  • ימפּרוווד דאַקיומענטיישאַן פֿאַר נוצן מיט אנדערע קאַמפּאָונאַנץ.
  • סוויטשט פון פאָטער סעלעקטאָרס צו מעשונעדיק קלאסן פֿאַר אַלע קאַמפּאָונאַנץ, מאָדיפיערס, עטק.
  • סימפּליפיעד דראָפּדאָוון סטיילז צו ניט מער שיקן מיט אַרוף אָדער דאַונווערד אַראָוז אַטאַטשט צו די דראָפּדאָוון מעניו.
  • דראָפּדאָוונס קענען זיין געבויט מיט <div>s אָדער <ul>s איצט.
  • ריבילט דראָפּדאָוון סטיילז און מאַרקאַפּ צו צושטעלן גרינג, געבויט-אין שטיצן פֿאַר <a>און <button>באזירט דראָפּדאָוון זאכן.
  • ריניימד .dividerצו .dropdown-divider.
  • דראָפּדאָוון זאכן איצט דאַרפן .dropdown-item.
  • דראָפּדאָוון טאַגאַלז ניט מער דאַרפן אַ יקספּליסאַט <span class="caret"></span>; דאָס איז איצט אויטאָמאַטיש צוגעשטעלט דורך CSS ::afterאויף .dropdown-toggle.

גריד סיסטעם

  • צוגעגעבן אַ נייַ 576pxגריד ברייקפּוינט ווי sm, טייַטש עס זענען איצט פינף גאַנץ טיערס ( xs, sm, md, lg, און xl).
  • ריניימד די אָפּרופיק גריד מאָדיפיער קלאסן פֿון .col-{breakpoint}-{modifier}-{size}צו .{modifier}-{breakpoint}-{size}פֿאַר סימפּלער גריד קלאסן.
  • דראַפּט שטופּן און ציען מאָדיפיער קלאסן פֿאַר די נייַע פלעקסבאָקס-פּאַוערד orderקלאסן. פֿאַר בייַשפּיל, אַנשטאָט פון .col-8.push-4און .col-4.pull-8, איר וואָלט נוצן .col-8.order-2און .col-4.order-1.
  • צוגעלייגט פלעקסבאָקס נוצן קלאסן פֿאַר גריד סיסטעם און קאַמפּאָונאַנץ.

רשימה גרופּעס

  • ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
  • ריפּלייסט a.list-group-itemמיט אַ יקספּליסאַט קלאַס, .list-group-item-action, פֿאַר סטילינג לינק און קנעפּל ווערסיעס פון רשימה גרופּע זאכן.
  • צוגעגעבן .list-group-flushקלאַס פֿאַר נוצן מיט קאַרדס.
  • ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
  • ווען איר מאַך צו פלעקסבאָקס, די אַליינמאַנט פון אָפּזאָגן ייקאַנז אין די כעדער איז מסתּמא צעבראכן ווייַל מיר נוצן ניט מער פלאַץ. פלאָוטיד אינהאַלט קומט ערשטער, אָבער מיט פלעקסבאָקס דאָס איז ניט מער דער פאַל. דערהייַנטיקן דיין אָפּזאָגן ייקאַנז צו קומען נאָך מאָדאַל טיטלען צו פאַרריכטן.
  • די remoteאָפּציע (וואָס קען זיין געוויינט צו אויטאָמאַטיש לאָדן און אַרייַנשפּריצן פונדרויסנדיק אינהאַלט אין אַ מאָדאַל) און די קאָראַספּאַנדינג loaded.bs.modalגעשעעניש זענען אַוועקגענומען. מיר רעקאָמענדירן אַנשטאָט ניצן קליענט-זייַט טעמפּלאַטינג אָדער אַ דאַטן ביינדינג פריימווערק, אָדער רופן jQuery.load זיך.
  • ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
  • דראַפּט כּמעט אַלע >סעלעקטאָרס פֿאַר סימפּלער סטילינג דורך ניט-נעסטיד קלאסן.
  • אַנשטאָט HTML-ספּעציפיש סעלעקטאָרס ווי .nav > li > a, מיר נוצן באַזונדער קלאסן פֿאַר .navs, .nav-items, און .nav-links. דאָס מאכט דיין HTML מער פלעקסאַבאַל און ברענגט אַ פאַרגרעסערן אין עקסטענסיביליטי.

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

  • אָפּרופיק נאַוובאַר ביכייוויערז זענען איצט געווענדט צו דער .navbarקלאַס דורך די פארלאנגט .navbar-expand-{breakpoint} ווו איר קלייַבן ווו צו ייַנבראָך די נאַוובאַר. ביז אַהער, דאָס איז געווען אַ ווייניקער וועריאַבאַל מאַדאַפאַקיישאַן און פארלאנגט ריקאָמפּיילינג.
  • .navbar-defaultאיז איצט .navbar-light, כאָטש .navbar-darkבלייבט די זעלבע. איינער פון די איז פארלאנגט אויף יעדער נאַוובאַר. אָבער, די קלאסן ניט מער שטעלן background-colors; אַנשטאָט זיי יסענשאַלי בלויז ווירקן color.
  • נאַוובאַרס איצט דאַרפן אַ הינטערגרונט דעקלאַראַציע פון ​​​​אַ מין. קלייַבן פון אונדזער הינטערגרונט יוטילאַטיז ( .bg-*) אָדער שטעלן דיין אייגענע מיט די ליכט / פאַרקערט קלאסן אויבן פֿאַר מעשוגע קוסטאָמיזאַטיאָן .
  • געגעבן פלעקסבאָקס סטיילז, נאַוובאַרס קענען איצט נוצן פלעקסבאָקס יוטילאַטיז פֿאַר גרינג אַליינמאַנט אָפּציעס.
  • .navbar-toggleאיז איצט .navbar-togglerאון האט פאַרשידענע סטיילז און ינער מאַרקאַפּ (ניט מער דריי <span>ס).
  • געפאלן די .navbar-formקלאַס אין גאנצן. עס איז ניט מער נייטיק; אַנשטאָט, נאָר נוצן .form-inlineאון צולייגן גרענעץ יוטילאַטיז ווי נייטיק.
  • נאַוובאַרס ניט מער אַרייַננעמען margin-bottomאָדער border-radiusדורך פעליקייַט. ניצן יוטילאַטיז ווי נייטיק.
  • אַלע ביישפילן מיט נאַוובאַרס זענען דערהייַנטיקט צו אַרייַננעמען נייַ מאַרקאַפּ.

פּאַginיישאַן

  • ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
  • אויף די קינדסקינדער .page-itemפון ס.page-link.pagination
  • דראַפּט די .pagerקאָמפּאָנענט לעגאַמרע ווייַל עס איז געווען אַ ביסל מער ווי קאַסטאַמייזד אַוטליין קנעפּלעך.
  • אַ בפירושער קלאַס, .breadcrumb-item, דאַרף איצט אויף די קינדסקינדער פון .breadcrumbש

לאַבעלס און באַדזשיז

  • קאַנסאַלאַדייטאַד .labelאון .badgeדיסאַמביגיוייט פון די <label>עלעמענט און פאַרפּאָשעטערן פֿאַרבונדענע קאַמפּאָונאַנץ.
  • צוגעגעבן .badge-pillווי מאָדיפיער פֿאַר ראַונדיד "פּיל" קוק.
  • באַדזשיז זענען ניט מער פלאָוטאַד אויטאָמאַטיש אין רשימה גרופּעס און אנדערע קאַמפּאָונאַנץ. נוצן קלאסן זענען איצט פארלאנגט פֿאַר דעם.
  • .badge-defaultהאט שוין דראַפּט און .badge-secondaryצוגעגעבן צו גלייַכן קאָמפּאָנענט מאָדיפיער קלאסן געניצט אנדערש.

פּאַנאַלז, טהומבנאַילס, און וועלז

דראַפּט לעגאַמרע פֿאַר די נייַ קאָרט קאָמפּאָנענט.

פּאַנעלס

  • .panelצו .card, איצט געבויט מיט פלעקסבאָקס.
  • .panel-defaultאַוועקגענומען און קיין פאַרבייַט.
  • .panel-groupאַוועקגענומען און קיין פאַרבייַט. .card-groupאיז נישט אַ פאַרבייַט, עס איז אַנדערש.
  • .panel-headingצו.card-header
  • .panel-titleצו .card-title. דעפּענדינג אויף די געבעטן קוק, איר קען אויך וועלן צו נוצן כעדינג עלעמענטן אָדער קלאסן (למשל <h3>, .h3) אָדער דרייסט עלעמענטן אָדער קלאסן (למשל <strong>, <b>, .font-weight-bold). באַמערקונג אַז .card-title, בשעת סימילאַרלי געהייסן, טראגט אַ אַנדערש קוק ווי .panel-title.
  • .panel-bodyצו.card-body
  • .panel-footerצו.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, און .panel-dangerהאָבן שוין דראַפּט פֿאַר .bg-, .text-, און .borderיוטילאַטיז דזשענערייטאַד פון אונדזער $theme-colorsSass מאַפּע.

פּראָגרעס

  • ריפּלייסט קאָנטעקסטואַל .progress-bar-*קלאסן מיט .bg-*יוטילאַטיז. פֿאַר בייַשפּיל, class="progress-bar progress-bar-danger"ווערט class="progress-bar bg-danger".
  • ריפּלייסט .activeפֿאַר אַנימאַטעד פּראָגרעס באַרס מיט .progress-bar-animated.
  • אָוווערכאָלעד די גאנצע קאָמפּאָנענט צו פאַרפּאָשעטערן פּלאַן און סטילינג. מיר האָבן ווייניקערע סטיילז פֿאַר איר צו אָווועררייד, נייַ ינדיקאַטאָרס און נייַ ייקאַנז.
  • אַלע CSS איז ניט-נעסטיד און ריניימד, ינשורינג יעדער קלאַס איז פּרעפיקסעד מיט .carousel-.
    • פֿאַר קעראַסעל זאכן, .next, .prev, .left, און .rightזענען איצט .carousel-item-next, .carousel-item-prev, .carousel-item-left, און .carousel-item-right.
    • .itemאיז אויך איצט .carousel-item.
    • פֿאַר פריער / ווייַטער קאָנטראָלס, .carousel-control.rightאון .carousel-control.leftזענען איצט .carousel-control-nextאון .carousel-control-prev, טייַטש זיי ניט מער דאַרפן אַ ספּעציפיש באַזע קלאַס.
  • אַוועקגענומען אַלע אָפּרופיק סטילינג, דיפערינג צו יוטילאַטיז (למשל, ווייַזונג קאַפּשאַנז אויף זיכער וויופּאָרץ) און מנהג סטיילז ווי דארף.
  • אַוועקגענומען בילד אָוווערריידז פֿאַר בילדער אין קעראַסעל זאכן, דיפערינג צו יוטילאַטיז.
  • טוויקט די קעראַסעל ביישפּיל צו אַרייַננעמען די נייַע מאַרקאַפּ און סטיילז.

טישן

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

יוטילאַטיז

  • ווייַז, פאַרבאָרגן און מער:
  • טיפּ:
    • צוגעלייגט אָפּרופיק ווערייישאַנז צו אונדזער טעקסט אַליינמאַנט קלאסן .text-{sm,md,lg,xl}-{left,center,right}.
  • אַליינמאַנט און ספּייסינג:
  • Clearfix דערהייַנטיקט צו פאַלן שטיצן פֿאַר עלטערע בלעטערער ווערסיעס.

פאַרקויפער פּרעפיקס מיקסינס

Bootstrap 3 ס פאַרקויפער פּרעפיקס מיקסינס, וואָס זענען דיפּרישיייטיד אין וו3.2.0, זענען אַוועקגענומען אין Bootstrap 4. זינט מיר נוצן אַוטאָפּרעפיקסער , זיי זענען ניט מער נייטיק.

די פאלגענדע מיקסינס זענען אַוועקגענומען : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_transition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

דאָקומענטאַטיאָן

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

  • מיר נאָך נוצן Jekyll, אָבער מיר האָבן פּלוגינס אין די מישן:
    • bugify.rbאיז געניצט צו יפישאַנטלי רשימה די איינסן אויף אונדזער בלעטערער באַגז בלאַט.
    • example.rbאיז אַ מנהג גאָפּל פון די פעליקייַט highlight.rbפּלוגין, אַלאַוינג פֿאַר גרינגער ביישפּיל-קאָד האַנדלינג.
    • callout.rbאיז אַ ענלעך מנהג גאָפּל פון וואָס, אָבער דיזיינד פֿאַר אונדזער ספּעציעל דאָקס קאַללאָוץ.
    • jekyll-toc איז געניצט צו דזשענערייט אונדזער אינהאַלט אינהאַלט.
  • כל דאָקומענטן אינהאַלט איז ריריטאַן אין מאַרקדאַון (אַנשטאָט HTML) פֿאַר גרינגער עדיטינג.
  • בלעטער האָבן שוין ריאָרגאַנייזד פֿאַר סימפּלער אינהאַלט און אַ מער אַפּראָוטשאַבאַל כייעראַרקי.
  • מיר אריבערגעפארן פון רעגולער CSS צו SCSS צו נוצן די וועריאַבאַלז פון Bootstrap, מיקסינס און מער.

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

אַלע @screen-וועריאַבאַלז האָבן שוין אַוועקגענומען אין וו4.0.0. ניצן די media-breakpoint-up(), media-breakpoint-down(), אָדער media-breakpoint-only()Sass מיקסינס אָדער די $grid-breakpointsSass מאַפּע אַנשטאָט.

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

  • די .hiddenאון .showקלאסן זענען אַוועקגענומען ווייַל זיי קאָנפליקט מיט jQuery ס $(...).hide()און $(...).show()מעטהאָדס. אַנשטאָט, פּרוּווט טאַגאַלינג די [hidden]אַטריביוט אָדער נוצן ינלינע סטיילז ווי style="display: none;"און style="display: block;".
  • אַלע .hidden-קלאסן זענען אַוועקגענומען, חוץ פֿאַר די דרוק יוטילאַטיז וואָס האָבן שוין ריניימד.
    • אראפגענומען פון v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • אַוועקגענומען פון v4 אַלפאַס:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • פּרינט יוטילאַטיז ניט מער אָנהייבן מיט .hidden-אָדער .visible-, אָבער מיט .d-print-.
    • אַלטע נעמען: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • נײַע קלאסן: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

אלא ווי ניצן יקספּליסאַט .visible-*קלאסן, איר מאַכן אַן עלעמענט קענטיק דורך פשוט נישט באַהאַלטן עס אין די פאַרשטעלן גרייס. איר קענען פאַרבינדן איין .d-*-noneקלאַס מיט איין .d-*-blockקלאַס צו ווייַזן אַן עלעמענט בלויז אויף אַ געגעבן מעהאַלעך פון פאַרשטעלן סיזעס (למשל .d-none.d-md-block.d-xl-noneווייזט די עלעמענט בלויז אויף מיטל און גרויס דעוויסעס).

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