צוגאַנג

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

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

קיצער

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

• קאַמפּאָונאַנץ זאָל זיין אָפּרופיק און רירעוודיק-ערשטער
• קאַמפּאָונאַנץ זאָל זיין געבויט מיט אַ באַזע קלאַס און עקסטענדעד דורך מאָדיפיער קלאסן
• קאָמפּאָנענט שטאַטן זאָל פאָלגן אַ פּראָסט ז-אינדעקס וואָג
• ווען מעגלעך, בעסער אַ HTML און CSS ימפּלאַמענטיישאַן איבער דזשאַוואַסקריפּט
• ווען מעגלעך, נוצן יוטילאַטיז איבער מנהג סטיילז
• ווען מעגלעך, ויסמיידן ענפאָרסינג שטרענג HTML רעקווירעמענץ (קינדער סעלעקטאָרס)

אָפּרופיק

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

אַריבער Bootstrap, איר וועט זען דעם רובֿ קלאר אין אונדזער מעדיע פֿראגן. אין רובֿ קאַסעס, מיר נוצן min-widthקוויריז וואָס אָנהייבן צו צולייגן אין אַ ספּעציפיש ברייקפּוינט און פירן אַרויף דורך די העכער ברייקפּאָינט. פֿאַר בייַשפּיל, אַ .d-noneאַפּלייז פון min-width: 0צו ומענדיקייַט. אויף די אנדערע האַנט, אַ .d-md-noneאַפּלייז פון די מיטל ברייקפּוינט און אַרויף.

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

קלאסן

חוץ אונדזער רעבאָאָט, אַ קרייַז-בלעטערער נאָרמאַליזיישאַן סטילעשעעט, אַלע אונדזער סטיילז צילן צו נוצן קלאסן ווי סעלעקטאָרס. דעם מיטל סטירינג קלאָר פון טיפּ סעלעקטאָרס (למשל, input[type="text"]) און עקסטרייניאַס פאָטער קלאסן (למשל, .parent .child) וואָס מאַכן סטיילז צו ספּעציפיש צו לייכט אָווועררייד.

ווי אַזאַ, קאַמפּאָונאַנץ זאָל זיין געבויט מיט אַ באַזע קלאַס וואָס הייזער פּראָסט, ניט-צו-זיין אָווועררידאַן פאַרמאָג-ווערט פּערז. פֿאַר בייַשפּיל, .btnאון .btn-primary. מיר נוצן .btnפֿאַר אַלע פּראָסט סטיילז ווי display, padding, און border-width. דערנאָך מיר נוצן מאָדיפיערס ווי .btn-primaryצו לייגן די קאָליר, הינטערגרונט-קאָליר, גרענעץ-קאָליר, עטק.

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

ז-אינדעקס וואָג

עס זענען צוויי z-indexוואָג אין Bootstrap - עלעמענטן אין אַ קאָמפּאָנענט און אָוווערליי קאַמפּאָונאַנץ.

קאָמפּאָנענט עלעמענטן

• עטלעכע קאַמפּאָונאַנץ אין Bootstrap זענען געבויט מיט אָוווערלאַפּינג עלעמענטן צו פאַרמייַדן טאָפּל געמארקן אָן מאָדיפיצירן די borderפאַרמאָג. פֿאַר בייַשפּיל, קנעפּל גרופּעס, אַרייַנשרייַב גרופּעס און פּאַדזשאַניישאַן.
• די קאַמפּאָונאַנץ טיילן אַ נאָרמאַל z-indexוואָג פון 0דורך 3.
• 0איז פעליקייַט (ערשט), 1איז :hover, 2איז :active/ .active, און 3איז :focus.
• דער צוגאַנג גלייַכן אונדזער עקספּעקטיישאַנז פון העכסטן באַניצער בילכערקייַט. אויב אַן עלעמענט איז פאָוקיסט, עס איז אין מיינונג און אין די ופמערקזאַמקייַט פון די באַניצער. אַקטיוו עלעמענטן זענען צווייט העכסטן ווייַל זיי אָנווייַזן שטאַט. האָווער איז דריט העכסטן ווייַל עס ינדיקייץ באַניצער קאַוואָנע, אָבער כּמעט אַלץ קענען זיין כאַווערד.

אָוווערליי קאַמפּאָונאַנץ

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

יעדער אָוווערליי קאָמפּאָנענט ינקריסיז זיין z-indexווערט אַ ביסל אין אַזאַ אַ וועג אַז פּראָסט וי פּרינסאַפּאַלז לאָזן באַניצער פאָוקיסט אָדער כאַווערד עלעמענטן צו בלייבן אין מיינונג אין אַלע צייט. פֿאַר בייַשפּיל, אַ מאָדאַל איז דאָקומענט בלאַקינג (למשל, איר קענען נישט נעמען קיין אנדערע קאַמף חוץ פֿאַר די מאָדאַל ס קאַמף), אַזוי מיר שטעלן דעם אויבן אונדזער נאַוובאַרס.

לערן מער וועגן דעם אין אונדזער z-indexאויסלייג בלאַט .

HTML און CSS איבער JS

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

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

לעסאָף, אונדזער סטיילז בויען אויף די פונדאַמענטאַל ביכייוויערז פון פּראָסט וועב עלעמענטן. ווען מעגלעך, מיר בעסער וועלן צו נוצן וואָס דער בלעטערער גיט. פֿאַר בייַשפּיל, איר קענען שטעלן אַ .btnקלאַס אויף כּמעט קיין עלעמענט, אָבער רובֿ עלעמענטן טאָן ניט צושטעלן קיין סעמאַנטיק ווערט אָדער בלעטערער פאַנגקשאַנאַליטי. אַזוי אַנשטאָט, מיר נוצן <button>s און <a>s.

דער זעלביקער גייט פֿאַר מער קאָמפּליצירט קאַמפּאָונאַנץ. כאָטש מיר קען שרייַבן אונדזער אייגענע פאָרעם וואַלאַדיישאַן פּלוגין צו לייגן קלאסן צו אַ פאָטער עלעמענט באזירט אויף אַן אַרייַנשרייַב שטאַט, דערמיט אַלאַוינג אונדז צו סטיל די טעקסט זאָגן רויט, מיר בעסער וועלן צו נוצן די :valid/ :invalidפּסעוודאָ-עלעמענץ וואָס יעדער בלעטערער גיט אונדז.

יוטילאַטיז

נוצן קלאסן - אַמאָל העלפּערס אין Bootstrap 3 - זענען אַ שטאַרק אַליירט אין קאַמבאַטינג CSS בלאָוטינג און נעבעך בלאַט פאָרשטעלונג. א נוצן קלאַס איז טיפּיקלי אַ איין, ימיוטאַבאַל פאַרמאָג-ווערט פּערינג אויסגעדריקט ווי אַ קלאַס (למשל, .d-blockרעפּראַזענץ display: block;). זייער ערשטיק אַפּעלירן איז די גיכקייַט פון נוצן בשעת שרייבן HTML און לימאַטינג די סומע פון ​​מנהג CSS איר האָבן צו שרייַבן.

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

פלעקסאַבאַל HTML

כאָטש ניט שטענדיק מעגלעך, מיר שטרעבן צו ויסמיידן צו זיין אַ דאָגמאַטיק אין אונדזער HTML רעקווירעמענץ פֿאַר קאַמפּאָונאַנץ. אזוי, מיר פאָקוס אויף איין קלאסן אין אונדזער CSS סעלעקטאָרס און פּרובירן צו ויסמיידן באַלדיק קינדער סעלעקטאָרס ( >). דאָס גיט איר מער בייגיקייט אין דיין ימפּלאַמענטיישאַן און העלפּס צו האַלטן אונדזער CSS סימפּלער און ווייניקער ספּעציפיש.

קאָד קאַנווענשאַנז

קאָד גייד (פֿון Bootstrap קאָ-באשעפער, @mdo) דאָקומענטן ווי מיר שרייַבן אונדזער HTML און CSS אַריבער Bootstrap. עס ספּעציפיצירט גיידליינז פֿאַר אַלגעמיין פאָרמאַטטינג, סייכל דיפאָלץ, פאַרמאָג און אַטריביוט אָרדערס, און מער.

מיר נוצן Stylelint צו דורכפירן די סטאַנדאַרדס און מער אין אונדזער Sass / CSS. אונדזער מנהג סטילינט קאַנפיגיעריישאַן איז אָפֿן מקור און בנימצא פֿאַר אנדערע צו נוצן און פאַרברייטערן.

מיר נוצן vnu-jar צו דורכפירן נאָרמאַל און סעמאַנטיק HTML, ווי געזונט ווי דיטעקטינג פּראָסט ערראָרס.