מיגרייטינג צו v4
Bootstrap 4 איז אַ הויפּט רירייט פון די גאנצע פּרויעקט. די מערסט נאָוטאַבאַל ענדערונגען זענען סאַמערייזד אונטן, נאכגעגאנגען דורך מער ספּעציפיש ענדערונגען צו באַטייַטיק קאַמפּאָונאַנץ.
סטאַביל ענדערונגען
מאָווינג פון ביתא 3 צו אונדזער סטאַביל וו4.קס מעלדונג, עס זענען קיין ברייקינג ענדערונגען, אָבער עס זענען עטלעכע נאָוטאַבאַל ענדערונגען.
דרוק
-
פאַרפעסטיקט צעבראכן דרוק יוטילאַטיז. ביז אַהער, ניצן אַ
.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-text
Sass בייַטעוודיק. עס איז ניט מער אַ נעסטעד סאַס מאַפּע און איצט בלויז כוחות איין שטריקל - דער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 בילדל שריפֿט. אויב איר דאַרפֿן ייקאַנז, עטלעכע אָפּציעס זענען:
- די אַפּסטרים ווערסיע פון 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-control
s. - צוגעלייגט נייַ
.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.js
jQuery פּלוגין איז דראַפּט. דאָס כולל די$().button(string)
און$().button('reset')
מעטהאָדס. מיר רעקאָמענדירן ניצן אַ קליינטשיק ביסל פון מנהג דזשאַוואַסקריפּט אַנשטאָט, וואָס וועט האָבן די נוץ פון ביכייווז פּונקט ווי איר ווילט.- באַמערקונג אַז די אנדערע פֿעיִקייטן פון די פּלוגין (קנעפּל טשעקקבאָקסעס, קנעפּל ראַדיאָס, איין-טאַגאַל קנעפּלעך) זענען ריטיינד אין וו4.
- טוישן די קנעפּלעך
[disabled]
ווי:disabled
IE9+ שטיצט: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 זיך.
Navs
- ריראָוט קאָמפּאָנענט מיט פלעקסבאָקס.
- דראַפּט כּמעט אַלע
>
סעלעקטאָרס פֿאַר סימפּלער סטילינג דורך ניט-נעסטיד קלאסן. - אַנשטאָט HTML-ספּעציפיש סעלעקטאָרס ווי
.nav > li > a
, מיר נוצן באַזונדער קלאסן פֿאַר.nav
s,.nav-item
s, און.nav-link
s. דאָס מאכט דיין HTML מער פלעקסאַבאַל און ברענגט אַ פאַרגרעסערן אין עקסטענסיביליטי.
נאַוובאַר
די נאַוובאַר איז גאָר ריריטאַן אין פלעקסבאָקס מיט ימפּרוווד שטיצן פֿאַר אַליינמאַנט, ריספּאַנסיוונאַס און קוסטאָמיזאַטיאָן.
- אָפּרופיק נאַוובאַר ביכייוויערז זענען איצט געווענדט צו דער
.navbar
קלאַס דורך די פארלאנגט.navbar-expand-{breakpoint}
ווו איר קלייַבן ווו צו ייַנבראָך די נאַוובאַר. ביז אַהער, דאָס איז געווען אַ ווייניקער וועריאַבאַל מאַדאַפאַקיישאַן און פארלאנגט ריקאָמפּיילינג. .navbar-default
איז איצט.navbar-light
, כאָטש.navbar-dark
בלייבט די זעלבע. איינער פון די איז פארלאנגט אויף יעדער נאַוובאַר. אָבער, די קלאסן ניט מער שטעלןbackground-color
s; אַנשטאָט זיי יסענשאַלי בלויז ווירקן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-colors
Sass מאַפּע.
פּראָגרעס
- ריפּלייסט קאָנטעקסטואַל
.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 פֿאַר סימפּלער סעלעקטאָרס.
- צוגעגעבן פאַרקערט טיש וואַריאַנט.
יוטילאַטיז
- ווייַז, פאַרבאָרגן און מער:
- געמאכט ווייַז יוטילאַטיז אָפּרופיק (למשל,
.d-none
אוןd-{sm,md,lg,xl}-none
). - דראַפּט די פאַרנעם פון
.hidden-*
יוטילאַטיז פֿאַר נייַע אַרויסווייַזן יוטילאַטיז . פֿאַר בייַשפּיל, אַנשטאָט פון.hidden-sm-up
, נוצן.d-sm-none
. ריניימד די.hidden-print
יוטילאַטיז צו נוצן די אַרויסווייַזן נוצן נאַמינג סכעמע. מער אינפֿאָרמאַציע אונטער די אָפּרופיק יוטילאַטיז אָפּטיילונג פון דעם בלאַט. - צוגעגעבן
.float-{sm,md,lg,xl}-{left,right,none}
קלאסן פֿאַר אָפּרופיק פלאָוץ און אַוועקגענומען.pull-left
און.pull-right
זינט זיי זענען יבעריק צו.float-left
און.float-right
.
- געמאכט ווייַז יוטילאַטיז אָפּרופיק (למשל,
- טיפּ:
- צוגעלייגט אָפּרופיק ווערייישאַנז צו אונדזער טעקסט אַליינמאַנט קלאסן
.text-{sm,md,lg,xl}-{left,center,right}
.
- צוגעלייגט אָפּרופיק ווערייישאַנז צו אונדזער טעקסט אַליינמאַנט קלאסן
- אַליינמאַנט און ספּייסינג:
- צוגעלייגט נייַ אָפּרופיק גרענעץ און וואַטן יוטילאַטיז פֿאַר אַלע זייטן, פּלוס ווערטיקאַל און האָריזאָנטאַל שאָרטהאַנדס.
- צוגעגעבן באָאָטלאָאַד פון פלעקסבאָקס יוטילאַטיז .
- געפאלן
.center-block
פֿאַר די נייַע.mx-auto
קלאַס.
- 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-property
transition-timing-function
transition-transform
translate
translate3d
user-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-breakpoints
Sass מאַפּע אַנשטאָט.
אונדזער אָפּרופיק נוצן קלאסן זענען לאַרגעלי אַוועקגענומען אין טויווע פון יקספּליסאַט display
יוטילאַטיז.
- די
.hidden
און.show
קלאסן זענען אַוועקגענומען ווייַל זיי קאָנפליקט מיט jQuery ס$(...).hide()
און$(...).show()
מעטהאָדס. אַנשטאָט, פּרוּווט טאַגאַלינג די[hidden]
אַטריביוט אָדער נוצן ינלינע סטיילז וויstyle="display: none;"
אוןstyle="display: block;"
. - אַלע
.hidden-
קלאסן זענען אַוועקגענומען, חוץ פֿאַר די דרוק יוטילאַטיז וואָס האָבן שוין ריניימד.- אראפגענומען פון וו3:
.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
- אראפגענומען פון וו3:
- פּרינט יוטילאַטיז ניט מער אָנהייבן מיט
.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 אין אַזאַ קאַסעס.