געטינג סטאַרטעד
אַן איבערבליק פון Bootstrap, ווי צו אָפּלאָדירן און נוצן, יקערדיק טעמפּלאַטעס און ביישפילן, און מער.
אַן איבערבליק פון Bootstrap, ווי צו אָפּלאָדירן און נוצן, יקערדיק טעמפּלאַטעס און ביישפילן, און מער.
באָאָטסטראַפּ (דערווייַל וו3.4.1) האט עטלעכע גרינג וועגן צו אָנהייבן געשווינד, יעדער אַפּילינג צו אַ אַנדערש בקיעס און נוצן פאַל. לייענען דורך צו זען וואָס סוץ דיין באַזונדער באדערפענישן.
קאָמפּילעד און מיניפיעד CSS, דזשאַוואַסקריפּט און פאַנץ. קיין דאָקומענטן אָדער אָריגינעל מקור טעקעס זענען אַרייַנגערעכנט.
מקור ווייניקער, דזשאַוואַסקריפּט און שריפֿט טעקעס, צוזאַמען מיט אונדזער דאָקומענטן. ריקוויירז אַ ווייניקער קאַמפּיילער און עטלעכע סעטאַפּ.
באָאָטסטראַפּ טראַנספּאָרטאַד פון ווייניקער צו סאַס פֿאַר גרינג ינקלוזשאַן אין ראַילס, קאָמפּאַס אָדער סאַס-בלויז פּראַדזשעקס.
די מענטשן ביי jsDelivr צושטעלן גנעדיק CDN שטיצן פֿאַר Bootstrap ס CSS און דזשאַוואַסקריפּט. נאָר נוצן די jsDelivr לינקס.
איר קענען אויך ינסטאַלירן און פירן Bootstrap ס ווייניקער, CSS, דזשאַוואַסקריפּט און פאַנץ ניצן Bower :
איר קענען אויך ינסטאַלירן Bootstrap ניצן npm :
require('bootstrap')
וועט לאָדן אַלע Bootstrap ס jQuery פּלוגינס אויף די jQuery כייפעץ. דער bootstrap
מאָדולע זיך טוט נישט אַרויספירן עפּעס. איר קענען מאַניואַלי לאָדן Bootstrap ס jQuery פּלוגינס ינדיווידזשואַלי דורך לאָודינג די /js/*.js
טעקעס אונטער די פּעקל ס שפּיץ-מדרגה וועגווייַזער.
Bootstrap's package.json
כּולל עטלעכע נאָך מעטאַדאַטאַ אונטער די פאלגענדע שליסלען:
less
- דרך צו באָאָטסטראַפּ ס הויפּט ווייניקער מקור טעקעstyle
- דרך צו די ניט-מינאַפייד CSS פון Bootstrap וואָס איז געווען פּריקאָמפּיילד מיט די פעליקייַט סעטטינגס (קיין קוסטאָמיזאַטיאָן)איר קענען אויך ינסטאַלירן און פירן Bootstrap ס ווייניקער, CSS, דזשאַוואַסקריפּט און פאַנץ ניצן קאַמפּאָוזער :
Bootstrap ניצט Autoprefixer צו האַנדלען מיט CSS פאַרקויפער פּרעפיקסיז . אויב איר קאַמפּיילינג Bootstrap פֿון זיין ווייניקער / סאַס מקור און נישט ניצן אונדזער Gruntfile, איר דאַרפֿן צו ויסשטימען אַוטאָפּרעפיקסער אין דיין בויען פּראָצעס זיך. אויב איר נוצן פּרעקאָמפּיילד באָאָטסטראַפּ אָדער ניצן אונדזער Gruntfile, איר טאָן ניט דאַרפֿן צו זאָרג וועגן דעם ווייַל Autoprefixer איז שוין ינאַגרייטיד אין אונדזער Gruntfile.
באָאָטסטראַפּ איז דאָוונלאָאַדאַבלע אין צוויי פארמען, אין וואָס איר וועט געפֿינען די פאלגענדע דיירעקטעריז און טעקעס, לאַדזשיקלי גרופּינג פּראָסט רעסורסן און צושטעלן ביידע קאַמפּיילד און מיניפיעד ווערייישאַנז.
ביטע טאָן אַז אַלע דזשאַוואַסקריפּט פּלוגינס דאַרפן דזשקווערי צו זיין אַרייַנגערעכנט, ווי געוויזן אין די סטאַרטער מוסטער . באַראַטנ אונדזערbower.json
צו זען וואָס ווערסיעס פון jQuery זענען געשטיצט.
אַמאָל דאַונלאָודיד, אַנזיפּ די קאַמפּרעסט טעקע צו זען די סטרוקטור פון (די קאַמפּיילד) Bootstrap. איר וועט זען עפּעס ווי דאָס:
דאָס איז די מערסט יקערדיק פאָרעם פון Bootstrap: פּריקאָמפּיילד טעקעס פֿאַר שנעל קאַפּ-אין נוצן אין כּמעט קיין וועב פּרויעקט. מיר צושטעלן קאַמפּיילד CSS און JS ( bootstrap.*
), ווי געזונט ווי קאַמפּיילד און מיניפיעד CSS און JS ( bootstrap.min.*
). CSS מקור מאַפּס ( bootstrap.*.map
) זענען בנימצא פֿאַר נוצן מיט זיכער בראַוזערז 'דעוועלאָפּער מכשירים. פאַנץ פון Glyphicons זענען אַרייַנגערעכנט, ווי איז די אַפּשאַנאַל באָאָטסטראַפּ טעמע.
די באָאָטסטראַפּ מקור קאָד אראפקאפיע ינקלודז די פּריקאָמפּיילד CSS, דזשאַוואַסקריפּט און שריפֿט אַסעץ, צוזאַמען מיט מקור ווייניקער, דזשאַוואַסקריפּט און דאַקיומענטיישאַן. מער ספּאַסיפיקלי, עס כולל די פאלגענדע און מער:
די less/
, js/
, און fonts/
זענען די מקור קאָד פֿאַר אונדזער CSS, JS און ייקאַן פאַנץ (ריספּעקטיוולי). דער dist/
טעקע כולל אַלץ ליסטעד אין די פּרעקאָמפּיילד אראפקאפיע אָפּטיילונג אויבן. דער docs/
טעקע ינקלודז די מקור קאָד פֿאַר אונדזער דאַקיומענטיישאַן און examples/
באָאָטסטראַפּ באַניץ. חוץ דעם, קיין אנדערע אַרייַנגערעכנט טעקע גיט שטיצן פֿאַר פּאַקאַדזשאַז, דערלויבעניש אינפֿאָרמאַציע און אַנטוויקלונג.
Bootstrap ניצט Grunt פֿאַר זיין בויען סיסטעם, מיט באַקוועם מעטהאָדס פֿאַר ארבעטן מיט די פריימווערק. דאָס איז ווי מיר צונויפנעמען אונדזער קאָד, לויפן טעסץ און מער.
צו ינסטאַלירן Grunt, איר מוזן ערשטער אראפקאפיע און ינסטאַלירן node.js (וואָס כולל npm). npm שטייט פֿאַר נאָדע פּאַקידזשד מאַדזשולז און איז אַ וועג צו פירן אַנטוויקלונג דיפּענדאַנסיז דורך node.js.
דערנאָך, פֿון די באַפֿעלן שורה:grunt-cli
גלאָובאַלי מיט npm install -g grunt-cli
./bootstrap/
וועגווייַזער, און לויפן npm install
. npm וועט קוקן אין דער package.json
טעקע און אויטאָמאַטיש ינסטאַלירן די נייטיק היגע דיפּענדאַנסיז ליסטעד דאָרט.ווען געענדיקט, איר וועט קענען צו לויפן די פאַרשידן גרונט קאַמאַנדז צוגעשטעלט פֿון די באַפֿעלן שורה.
grunt dist
(נאָר צונויפנעמען CSS און דזשאַוואַסקריפּט)רידזשענערייץ די /dist/
וועגווייַזער מיט קאַמפּיילד און מיניפיעד CSS און דזשאַוואַסקריפּט טעקעס. ווי אַ באָאָטסטראַפּ באַניצער, דאָס איז נאָרמאַלי דער באַפֿעל איר ווילן.
grunt watch
(היטן)וואַטשיז די ווייניקער מקור טעקעס און אויטאָמאַטיש ריקאָמפּיילז זיי צו CSS ווען איר ראַטעווען אַ ענדערונג.
grunt test
(לויפן טעסץ)לויפט JSHint און לויפט די QUnit טעסץ אין פאַקטיש בראַוזערז דאַנק צו קאַרמאַ .
grunt docs
(בויען און פּרובירן די דאָקומענטן אַסעץ)בויען און טעסץ CSS, דזשאַוואַסקריפּט און אנדערע אַסעץ וואָס זענען געניצט ווען פליסנדיק די דאַקיומענטיישאַן לאָוקאַלי דורך bundle exec jekyll serve
.
grunt
(בויען לעגאַמרע אַלץ און לויפן טעסץ)קאַמפּיילז און מינאַפייז CSS און דזשאַוואַסקריפּט, בויען די דאַקיומענטיישאַן וועבזייטל, ראַנז די HTML5 וואַלידאַטאָר קעגן די דאָקומענטן, רידזשענערייץ די קוסטאָמיזער אַסעץ, און מער. ריקווייערז Jekyll . יוזשאַוואַלי נאָר נייטיק אויב איר כאַקינג אויף Bootstrap זיך.
אויב איר טרעפן פּראָבלעמס מיט ינסטאָלינג דיפּענדאַנסיז אָדער לויפן גרונט קאַמאַנדז, ערשטער ויסמעקן די /node_modules/
וועגווייַזער דזשענערייטאַד דורך npm. דערנאָך, ריראַנז npm install
.
אָנהייבן מיט דעם יקערדיק HTML מוסטער, אָדער מאָדיפיצירן די ביישפילן . מיר האָפן אַז איר וועט קאַסטאַמייז אונדזער טעמפּלאַטעס און ביישפילן, צופּאַסן זיי צו דיין דאַרף.
נאָכמאַכן די HTML אונטן צו אָנהייבן ארבעטן מיט אַ מינימאַל באָאָטסטראַפּ דאָקומענט.
בויען אויף די יקערדיק מוסטער אויבן מיט Bootstrap ס פילע קאַמפּאָונאַנץ. מיר מוטיקן איר צו קאַסטאַמייז און אַדאַפּט באָאָטסטראַפּ צו פּאַסן די באדערפענישן פון דיין יחיד פּרויעקט.
באַקומען די מקור קאָד פֿאַר יעדער ביישפּיל אונטן דורך דאַונלאָודינג די Bootstrap ריפּאַזאַטאָרי . ביישפילן קענען זיין געפֿונען אין די docs/examples/
Directory.
גאָרנישט אָבער די באַסיקס: קאַמפּיילד CSS און דזשאַוואַסקריפּט צוזאַמען מיט אַ קאַנטיינער.
יקערדיק סטרוקטור פֿאַר אַ אַדמיניסטראַטאָר דאַשבאָרד מיט פאַרפעסטיקט סיידבאַר און נאַוובאַר.
שאַפֿן אַ מנהג נאַוובאַר מיט גערעכטפארטיקט לינקס. קאָפּ אַרויף! נישט צו סאַפאַרי פרייַנדלעך.
לייכט דיסייבאַל די ריספּאַנסיוונאַס פון Bootstrap לויט אונדזער דאָקומענטן .
Bootlint איז דער באַאַמטער Bootstrap HTML לינטער געצייַג. עס אויטאָמאַטיש טשעק פֿאַר עטלעכע פּראָסט HTML מיסטייקס אין וועבפּאַגעס וואָס נוצן Bootstrap אין אַ פערלי "וואַניל" וועג. די קאַמפּאָונאַנץ / ווידזשיץ פון Vanilla Bootstrap דאַרפן זייער פּאַרץ פון די DOM צו קאַנפאָרם צו זיכער סטראַקטשערז. באָאָטלינט טשעקס אַז ינסטאַנסיז פון באָאָטסטראַפּ קאַמפּאָונאַנץ האָבן ריכטיק סטראַקטשערד HTML. באַטראַכטן צו לייגן Bootlint צו דיין Bootstrap וועב אַנטוויקלונג מכשירים אַזוי אַז קיין פון די פּראָסט מיסטייקס פּאַמעלעך די אַנטוויקלונג פון דיין פּרויעקט.
בלייבן דערהייַנטיקט אויף דער אַנטוויקלונג פון Bootstrap און דערגרייכן די קהל מיט די נוציק רעסורסן.
irc.freenode.net
סערווער, אין די ##באָאָטסטראַפּ קאַנאַל .twitter-bootstrap-3
.bootstrap
אויף פּאַקאַדזשאַז וואָס מאָדיפיצירן אָדער לייגן צו די פאַנגקשאַנאַליטי פון Bootstrap ווען דיסטריביוטינג דורך npm אָדער ענלעך עקספּרעס מעקאַניזאַמז פֿאַר מאַקסימום דיסקאַווערד.איר קענט אויך נאָכפאָלגן @getbootstrap אויף טוויטטער פֿאַר די לעצטע יענטע און אָסאַם מוזיק ווידיאס.
באָאָטסטראַפּ אַדאַפּט דיין בלעטער אויטאָמאַטיש פֿאַר פאַרשידן פאַרשטעלן סיזעס. דאָ ס ווי צו דיסייבאַל דעם שטריך אַזוי דיין בלאַט אַרבעט ווי דעם ניט-אָפּרופיק בייַשפּיל .
<meta>
דערמאנט אין די CSS דאָקומענטןwidth
פֿאַר .container
יעדער גריד ריי מיט אַ איין ברייט, פֿאַר בייַשפּיל width: 970px !important;
זייט זיכער אַז דאָס קומט נאָך די פעליקייַט באָאָצטראַפּ קסס. איר קענען אָפּטיאָנאַללי ויסמיידן די !important
מיט מידיאַ קוויריז אָדער עטלעכע סעלעקטאָר-פו..col-xs-*
קלאסן אין אַדישאַן צו אָדער אין פּלאַץ פון די מיטל / גרויס. צי ניט זאָרג, די עקסטרע-קליין מיטל גריד וואָג צו אַלע רעזאַלושאַנז.איר וועט נאָך דאַרפֿן Respond.js פֿאַר IE8 (זינט אונדזער מידיאַ קוויריז זענען נאָך דאָרט און דאַרפֿן צו זיין פּראַסעסט). דאָס דיסייבאַלז די "רירעוודיק פּלאַץ" אַספּעקץ פון באָאָטסטראַפּ.
מיר האָבן געווענדט די סטעפּס צו אַ בייַשפּיל. לייענען זיין מקור קאָד צו זען די ימפּלאַמענאַד ספּעציפיש ענדערונגען.
איר זוכט צו מייגרייט פון אַן עלטערע ווערסיע פון Bootstrap צו v3.x? קוק אין אונדזער מייגריישאַן פירער .
באָאָטסטראַפּ איז געבויט צו אַרבעטן בעסטער אין די לעצטע דעסקטאַפּ און רירעוודיק בראַוזערז, טייַטש עלטערע בראַוזערז קען ווייַזן דיפערענטלי סטיילד, כאָטש גאָר פאַנגקשאַנאַל, רענדערינגז פון זיכער קאַמפּאָונאַנץ.
ספּעציעל, מיר שטיצן די לעצטע ווערסיעס פון די פאלגענדע בראַוזערז און פּלאַטפאָרמס.
אַלטערנאַטיווע בראַוזערז וואָס נוצן די לעצטע ווערסיע פון WebKit, Blink אָדער Gecko, צי גלייך אָדער דורך די וועב View API פון דער פּלאַטפאָרמע, זענען נישט בפירוש געשטיצט. אָבער, Bootstrap זאָל (אין רובֿ פאלן) אַרויסווייַזן און פונקציאָנירן ריכטיק אין די בראַוזערז אויך. מער ספּעציפיש שטיצן אינפֿאָרמאַציע איז צוגעשטעלט אונטן.
בכלל גערעדט, Bootstrap שטיצט די לעצטע ווערסיעס פון די פעליקייַט בראַוזערז פון יעדער הויפּט פּלאַטפאָרמע. באַמערקונג אַז פּראַקסי בראַוזערז (אַזאַ ווי אָפּעראַ מיני, אָפּעראַ מאָביל ס טורבאָ מאָדע, UC בראַוזער מיני, אַמאַזאָן סילק) זענען נישט געשטיצט.
קראָום | פירעפאָקס | סאַפאַרי | |
---|---|---|---|
אַנדרויד | געשטיצט | געשטיצט | N/A |
יאָס | געשטיצט | געשטיצט | געשטיצט |
סימילאַרלי, די לעצטע ווערסיעס פון רובֿ דעסקטאַפּ בראַוזערז זענען געשטיצט.
קראָום | פירעפאָקס | Internet Explorer | אָפּעראַ | סאַפאַרי | |
---|---|---|---|---|---|
מעק | געשטיצט | געשטיצט | N/A | געשטיצט | געשטיצט |
Windows | געשטיצט | געשטיצט | געשטיצט | געשטיצט | ניט געשטיצט |
אויף Windows, מיר שטיצן Internet Explorer 8-11 .
פֿאַר Firefox, אין אַדישאַן צו די לעצטע נאָרמאַל סטאַביל מעלדונג, מיר אויך שטיצן די לעצטע עקסטענדעד סופּפּאָרט ריליס (ESR) ווערסיע פון Firefox.
אַנאַפישאַלי, Bootstrap זאָל קוקן און ביכייוו געזונט גענוג אין Chromium און Chrome פֿאַר לינוקס, פירעפאָקס פֿאַר לינוקס און Internet Explorer 7, ווי געזונט ווי Microsoft Edge, כאָטש זיי זענען נישט אַפישאַלי געשטיצט.
פֿאַר אַ רשימה פון עטלעכע פון די בלעטערער באַגז וואָס Bootstrap האט צו האַנדלען מיט, זען אונדזער וואנט פון בלעטערער באַגז .
Internet Explorer 8 און 9 זענען אויך געשטיצט, אָבער, ביטע זיין אַווער אַז עטלעכע CSS3 פּראָפּערטיעס און HTML5 עלעמענטן זענען נישט גאָר געשטיצט דורך די בראַוזערז. אין אַדישאַן, Internet Explorer 8 ריקווייערז די נוצן פון Respond.js צו געבן מעדיע אָנפֿרעג שטיצן.
שטריך | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
ניט געשטיצט | געשטיצט |
box-shadow |
ניט געשטיצט | געשטיצט |
transform |
ניט געשטיצט | געשטיצט, מיט -ms פּרעפיקס |
transition |
ניט געשטיצט | |
placeholder |
ניט געשטיצט |
באַזוכן קענען איך נוצן ... פֿאַר דעטאַילס וועגן בלעטערער שטיצן פון CSS3 און HTML5 פֿעיִקייטן.
היט אייך פון די פאלגענדע קייוויאַץ ווען איר נוצן Respond.js אין דיין אַנטוויקלונג און פּראָדוקציע ינווייראַנמאַנץ פֿאַר Internet Explorer 8.
ניצן Respond.js מיט CSS כאָוסטיד אויף אַ אַנדערש (סאַב) פעלד (למשל, אויף אַ CDN) ריקווייערז עטלעכע נאָך סעטאַפּ. זען די Respond.js דאָקומענטן פֿאַר דעטאַילס.
file://
רעכט צו בלעטערער זיכערהייט כּללים, Respond.js טוט נישט אַרבעטן מיט בלעטער וויוד דורך דעם file://
פּראָטאָקאָל (ווי ווען עפן אַ היגע HTML טעקע). צו פּרובירן אָפּרופיק פֿעיִקייטן אין IE8, קוק דיין בלעטער איבער HTTP(S). זען די Respond.js דאָקומענטן פֿאַר דעטאַילס.
@import
Respond.js אַרבעט נישט מיט CSS וואָס איז רעפעררעד דורך @import
. אין באַזונדער, עטלעכע דרופּאַל קאַנפיגיעריישאַנז זענען באקאנט צו נוצן @import
. זען די Respond.js דאָקומענטן פֿאַר דעטאַילס.
IE8 שטיצט נישט גאָר box-sizing: border-box;
ווען קאַמביינד מיט min-width
, max-width
, min-height
, אָדער max-height
. פֿאַר דעם סיבה, ווי פון וו3.0.1, מיר ניט מער נוצן max-width
אויף .container
s.
IE8 האט עטלעכע ישוז @font-face
ווען קאַמביינד מיט :before
. Bootstrap ניצט די קאָמבינאַציע מיט זיין גליפיקאָנס. אויב אַ בלאַט איז קאַשט, און לאָודיד אָן די מויז איבער די פֿענצטער (ד"ה שלאָגן די דערפרישן קנעפּל אָדער לאָדן עפּעס אין אַ יפאַמע) דעמאָלט דער בלאַט געץ רענדערד איידער די שריפֿט לאָודז. כאַווערינג איבער די בלאַט (גוף) וועט ווייַזן עטלעכע פון די ייקאַנז און כאַווערינג איבער די רוען ייקאַנז וועט אויך ווייַזן די. זען אַרויסגעבן #13863 פֿאַר פרטים.
באָאָטסטראַפּ איז נישט געשטיצט אין די אַלט Internet Explorer קאַמפּאַטאַבילאַטי מאָדעס. צו זיין זיכער אַז איר נוצן די לעצטע רענדערינג מאָדע פֿאַר IE, באַטראַכטן אַרייַנגערעכנט די צונעמען <meta>
קוויטל אין דיין בלעטער:
באַשטעטיקן דעם דאָקומענט מאָדע דורך עפן די דיבאַגינג מכשירים: דריקן F12און קאָנטראָלירן די "דאָקומענט מאָדע".
דער קוויטל איז אַרייַנגערעכנט אין אַלע באָאָטסטראַפּ ס דאַקיומענטיישאַן און ביישפילן צו ענשור דער בעסטער רענדערינג מעגלעך אין יעדער שטיצט ווערסיע פון Internet Explorer.
זען דעם StackOverflow קשיא פֿאַר מער אינפֿאָרמאַציע.
Internet Explorer 10 טוט נישט דיפערענשיייט מיטל ברייט פון וויופּאָרט ברייט , און אַזוי טוט נישט צולייגן די מידיאַ קוויריז אין באָאָטסטראַפּ ס CSS. נאָרמאַללי איר וואָלט נאָר לייגן אַ שנעל סניפּאַט פון CSS צו פאַרריכטן דעם:
אָבער, דאָס קען נישט אַרבעטן פֿאַר דעוויסעס וואָס לויפן Windows Phone 8 ווערסיעס עלטער ווי דערהייַנטיקן 3 (אַקאַ GDR3) , ווייַל אַזאַ דעוויסעס ווייַזן אַ מערסטנס דעסקטאַפּ מיינונג אַנשטאָט פון שמאָל "טעלעפאָן" מיינונג. צו אַדרעס דעם, איר דאַרפֿן צו אַרייַננעמען די פאלגענדע CSS און דזשאַוואַסקריפּט צו אַרבעטן אַרום דעם זשוק .
פֿאַר מער אינפֿאָרמאַציע און באַניץ גיידליינז, לייענען Windows Phone 8 און דיווייס-ברייט .
ווי אַ קאָפּ אַרויף, מיר אַרייַננעמען דעם אין אַלע פון Bootstrap ס דאַקיומענטיישאַן און ביישפילן ווי אַ דעמאַנסטריישאַן.
די רענדערינג מאָטאָר פון ווערסיעס פון סאַפאַרי פריערדיק צו וו7.1 פֿאַר אַס רענטגענ און סאַפאַרי פֿאַר יאָס וו8.0 האט עטלעכע קאָנפליקט מיט די נומער פון דעצימאַל ערטער געניצט אין אונדזער .col-*-1
גריד קלאסן. אַזוי אויב איר האָט 12 יחיד גריד שפאלטן, איר וואָלט באַמערקן אַז זיי זענען קורץ קאַמפּערד מיט אנדערע ראָוז פון שפאלטן. חוץ אַפּגריידינג Safari / יאָס, איר האָבן עטלעכע אָפּציעס פֿאַר וואָרקאַראָונדס:
.pull-right
צו דיין לעצטע גריד זייַל צו באַקומען די שווער-רעכט אַליינמאַנטשטיצן פֿאַר overflow: hidden
די <body>
עלעמענט איז גאַנץ לימיטעד אין יאָס און אַנדרויד. צו דעם סוף, ווען איר מעגילע פאַרגאַנגענהייט די שפּיץ אָדער דנאָ פון אַ מאָדאַל אין איינער פון די בראַוזערז פון די דעוויסעס, דער <body>
אינהאַלט וועט אָנהייבן צו מעגילע. זען קראָום זשוק #175502 (פאַרפעסטיקט אין קראָום וו40) און וועבקיט זשוק #153852 .
זינט יאָס 9.3, בשעת אַ מאָדאַל איז אָפן, אויב דער ערשט פאַרבינדן פון אַ מעגילע האַווייַע איז ין דער גרענעץ פון אַ טעקסט <input>
אָדער אַ <textarea>
, די <body>
אינהאַלט אונטער די מאָדאַל וועט זיין סקראָלאַלד אַנשטאָט פון די מאָדאַל זיך. זען וועבקיט זשוק #153856 .
באַמערקונג אויך אַז אויב איר נוצן אַ פאַרפעסטיקט נאַוובאַר אָדער ניצן ינפּוץ אין אַ מאָדאַל, יאָס האט אַ רענדערינג זשוק וואָס קען נישט דערהייַנטיקן די שטעלע פון פאַרפעסטיקט עלעמענטן ווען די ווירטואַל קלאַוויאַטור איז טריגערד. עטלעכע וואָרקאַראָונדס פֿאַר דעם אַרייַננעמען יבערמאַכן דיין עלעמענטן צו position: absolute
אָדער ינוואָוקינג אַ טייַמער אויף פאָקוס צו פּרובירן צו פאַרריכטן די פּאַזישאַנינג מאַניואַלי. דאָס איז נישט כאַנדאַלד דורך Bootstrap, אַזוי עס איז אַרויף צו איר צו באַשליסן וואָס לייזונג איז בעסטער פֿאַר דיין אַפּלאַקיישאַן.
דער .dropdown-backdrop
עלעמענט איז נישט געניצט אויף יאָס אין די נאַוו ווייַל פון די קאַמפּלעקסיטי פון ז-ינדעקסינג. אַזוי, צו פאַרמאַכן דראָפּדאָוונס אין נאַוובאַרס, איר מוזן גלייך גיט די דראָפּדאָוון עלעמענט (אָדער קיין אנדערע עלעמענט וואָס וועט פייערן אַ קליק געשעעניש אין יאָס ).
בלאַט זומינג ינעוואַטאַבלי גיט רענדערינג אַרטאַפאַקץ אין עטלעכע קאַמפּאָונאַנץ, ביידע אין באָאָטסטראַפּ און די רעשט פון די וועב. דעפּענדינג אויף דעם אַרויסגעבן, מיר קען זיין ביכולת צו פאַרריכטן עס (זוכן ערשטער און דעמאָלט עפענען אַן אַרויסגעבן אויב נייטיק). אָבער, מיר טענד צו איגנאָרירן די ווייַל זיי אָפט האָבן קיין דירעקט לייזונג אנדערע ווי כאַקי וואָרקאַראָונדס.
:hover
/ :focus
אויף רירעוודיקכאָטש פאַקטיש כאַווערינג איז ניט מעגלעך אויף רובֿ טאָוטש סקרינז, רובֿ רירעוודיק בראַוזערז עמיאַלייט כאַווערינג שטיצן און מאַכן :hover
"קלעפּיק". אין אנדערע ווערטער, :hover
סטיילז אָנהייבן אַפּלייינג נאָך טאַפּינג אַן עלעמענט און נאָר האַלטן אַפּלייינג נאָך דער באַניצער טאַפּס עטלעכע אנדערע עלעמענט. דאָס קען אָנמאַכן די :hover
שטאַט פון Bootstrap צו ווערן אַנדיזייראַבאַל "סטאַק" אויף אַזאַ בראַוזערז. עטלעכע רירעוודיק בראַוזערז אויך מאַכן :focus
סימאַלערלי קלעפּיק. עס איז דערווייַל קיין פּשוט וואָרקאַראָונד פֿאַר די ישוז אנדערע ווי רימוווינג אַזאַ סטיילז לעגאַמרע.
אפילו אין עטלעכע מאָדערן בראַוזערז, דרוקן קענען זיין קווערקי.
אין באַזונדער, ווי פון Chrome v32 און ראַגאַרדלאַס פון גרענעץ סעטטינגס, Chrome ניצט אַ וויופּאָרט ברייט באטייטיק נעראָוער ווי די גשמיות פּאַפּיר גרייס ווען ריזאַלווינג מידיאַ קוויריז בשעת דרוקן אַ וועב בלאַט. דאָס קען רעזולטאַט אין די עקסטרע-קליין גריד פון Bootstrap איז אַניקספּעקטיד אַקטיווייטיד ווען דרוקן. זען אַרויסגעבן #12078 און קראָום זשוק #273306 פֿאַר עטלעכע דעטאַילס. פארגעלייגט וואָרקאַראָונדס:
@screen-*
ווייניקער וועריאַבאַלז אַזוי אַז דיין דרוקער פּאַפּיר איז מער ווי עקסטרע קליין.אויך, ווי פון Safari v8.0, פאַרפעסטיקט-ברייט .container
ס קענען אָנמאַכן סאַפאַרי צו נוצן אַ אַניוזשואַלי קליין שריפֿט גרייס ווען דרוקן. זען #14868 און WebKit זשוק #138192 פֿאַר מער דעטאַילס. איין פּאָטענציעל וואָרקאַראָונד פֿאַר דעם איז אַדינג די פאלגענדע CSS:
אויס פון די קעסטל, אַנדרויד 4.1 (און אפילו עטלעכע נייַער ריליסיז משמעות) שיף מיט די בראַוזער אַפּ ווי די פעליקייַט וועב בלעטערער פון ברירה (ווי קעגן צו קראָום). צום באַדויערן, די בראַוזער אַפּ האט פילע באַגז און ינגקאַנסיסטענסיז מיט CSS אין אַלגעמיין.
אויף <select>
עלעמענטן, דער אַנדרויד לאַגער בלעטערער וועט נישט ווייַזן די זייַט קאָנטראָלס אויב עס איז אַ border-radius
און / אָדער border
געווענדט. (זען דעם StackOverflow קשיא פֿאַר דעטאַילס.) ניצן די סניפּאַט פון קאָד אונטן צו באַזייַטיקן די אַפענדינג CSS און מאַכן דעם <select>
ווי אַן אַנסטיילד עלעמענט אין די אַנדרויד לאַגער בלעטערער. דער באַניצער אַגענט סניפינג אַוווידז ינטערפיראַנס מיט קראָום, סאַפאַרי און מאָזיללאַ בראַוזערז.
ווילן צו זען אַ בייַשפּיל? טשעק דעם JS Bin דעמאָ.
אין סדר צו צושטעלן די בעסטער מעגלעך דערפאַרונג צו אַלט און וואָגן בראַוזערז, Bootstrap ניצט CSS בלעטערער כאַקס אין עטלעכע ערטער צו ציל ספּעציעלע CSS צו זיכער בלעטערער ווערסיעס צו אַרבעטן אַרום באַגז אין די בראַוזערז זיך. די כאַקס פאַרשטיייק פאַרשאַפן CSS וואַלאַדייטערז צו באַקלאָגנ זיך אַז זיי זענען פאַרקריפּלט. אין עטלעכע ערטער, מיר אויך נוצן בלידינג-ברעג CSS פֿעיִקייטן וואָס זענען נאָך נישט גאָר סטאַנדערדייזד, אָבער זיי זענען בלויז געניצט פֿאַר פּראָגרעסיוו ענכאַנסמאַנט.
די וואַלאַדיישאַן וואָרנינגז טאָן ניט ענין אין פיר זינט די ניט-כאַקי חלק פון אונדזער CSS איז גאָר וואַלאַדייטאַד און די כאַקי פּאָרשאַנז טאָן ניט אַרייַנמישנ זיך מיט די געהעריק פאַנגקשאַנינג פון די ניט-כאַקי חלק, דערפאר מיר דיליבראַטלי איגנאָרירן די באַזונדער וואָרנינגז.
אונדזער HTML דאָקס אויך האָבן עטלעכע טריוויאַל און ינקאַנסעקווענטשאַל HTML וואַלאַדיישאַן וואָרנינגז רעכט צו אונדזער ינקלוזשאַן פון אַ וואָרקאַראָונד פֿאַר אַ זיכער Firefox זשוק .
כאָטש מיר טאָן ניט אַפישאַלי שטיצן קיין דריט-פּאַרטיי פּלוגינס אָדער אַדישאַנז, מיר פאָרשלאָגן עטלעכע נוציק עצה צו ויסמיידן פּאָטענציעל ישוז אין דיין פּראַדזשעקס.
עטלעכע דריט-פּאַרטיי ווייכווארג, אַרייַנגערעכנט Google מאַפּס און Google מנהג זוך ענגינע, קאָנפליקט מיט Bootstrap רעכט צו * { box-sizing: border-box; }
, אַ הערשן וואָס מאכט עס אַזוי padding
טוט נישט ווירקן די לעצט קאַמפּיוטאַד ברייט פון אַן עלעמענט. לערן מער וועגן קעסטל מאָדעל און סייזינג ביי CSS טריקס .
דעפּענדינג אויף דעם קאָנטעקסט, איר קען אָווועררייד ווי-נייד (אָפּציע 1) אָדער באַשטעטיק די קעסטל-סייזינג פֿאַר גאַנץ מקומות (אָפּציע 2).
Bootstrap גייט פּראָסט וועב סטאַנדאַרדס און - מיט מינימאַל עקסטרע מי - קענען ווערן גענוצט צו שאַפֿן זייטלעך וואָס זענען צוטריטלעך פֿאַר יענע וואָס נוצן AT .
אויב דיין נאַוויגאַציע כּולל פילע פֿאַרבינדונגען און קומט איידער די הויפּט אינהאַלט אין די DOM, לייגן אַ Skip to main content
לינק איידער די נאַוויגאַציע (פֿאַר אַ פּשוט דערקלערונג, זען דעם A11Y פּראָיעקט אַרטיקל אויף האָפּקען נאַוויגאַציע לינקס ). ניצן די .sr-only
קלאַס וועט וויזשוואַלי באַהאַלטן די האָפּקען לינק, און דער .sr-only-focusable
קלאַס וועט ענשור אַז דער לינק ווערט קענטיק אַמאָל פאָוקיסט (פֿאַר סייטאַד קלאַוויאַטור יוזערז).
רעכט צו לאַנג-שטייענדיק שאָרטקאָמינגס / באַגז אין קראָום (זען אַרויסגעבן 262171 אין די Chromium זשוק טראַקער ) און Internet Explorer (זען דעם אַרטיקל אויף אין-בלאַט פֿאַרבינדונגען און פאָקוס סדר ), איר וועט דאַרפֿן צו מאַכן זיכער אַז די ציל פון דיין האָפּקען לינק איז לפּחות פּראָגראַממאַטיק פאָוקיסינג דורך אַדינג tabindex="-1"
.
אין אַדישאַן, איר קען וועלן צו בפירוש פאַרשטיקן אַ קענטיק פאָקוס אָנווייַז אויף דעם ציל (ספּעציעל ווייַל Chrome דערווייַל פאָוקיסיז אויף עלעמענטן tabindex="-1"
ווען זיי זענען קליקט מיט די מויז) מיט #content:focus { outline: none; }
.
באַמערקונג אַז דער זשוק וועט אויך ווירקן קיין אנדערע אין-בלאַט פֿאַרבינדונגען וואָס דיין פּלאַץ קען נוצן, און מאַכן זיי אַרויסגעוואָרפן פֿאַר קלאַוויאַטור יוזערז. איר קען באַטראַכטן צו לייגן אַן ענלעך האַלטן-ריס פאַרריכטן צו אַלע אנדערע געהייסן אַנגקערז / פראַגמענט ידענטיפיערס וואָס אַקט ווי לינק טאַרגאַץ.
ווען נעסטינג כעדינגז ( <h1>
- <h6>
), דיין ערשטיק דאָקומענט כעדער זאָל זיין אַן <h1>
. סאַבסאַקוואַנט כעדינגז זאָל מאַכן לאַדזשיקאַל נוצן <h2>
- <h6>
אַזוי אַז פאַרשטעלן לייענער קענען בויען אַ אינהאַלט אינהאַלט פֿאַר דיין בלעטער.
לערן מער אין HTML CodeSniffer און Penn State's AccessAbility .
דערווייַל, עטלעכע פון די פעליקייַט קאָליר קאַמבאַניישאַנז בנימצא אין Bootstrap (אַזאַ ווי די פאַרשידן סטיילד קנעפּל קלאסן, עטלעכע פון די קאָד כיילייטינג פארבן געניצט פֿאַר יקערדיק קאָד בלאַקס , די .bg-primary
קאָנטעקסטואַל הינטערגרונט העלפּער קלאַס און די פעליקייַט לינק קאָליר ווען געוויינט אויף אַ ווייַס הינטערגרונט) האָבן אַ נידעריק קאַנטראַסט פאַרהעלטעניש (ונטער די רעקאַמענדיד פאַרהעלטעניש פון 4.5: 1 ). דאָס קען פאַרשאַפן פּראָבלעמס פֿאַר ניצערס מיט נידעריק זעאונג אָדער וואָס זענען קאָליר בלינד. די פעליקייַט פארבן קען זיין מאַדאַפייד צו פאַרגרעסערן זייער קאַנטראַסט און לעדזשאַביליטי.
Bootstrap איז באפרייט אונטער די MIT דערלויבעניש און איז קאַפּירייט 2019 Twitter. בוילד אַראָפּ צו קלענערער שטיקער, עס קענען זיין דיסקרייבד מיט די פאלגענדע טנאָים.
די פול באָאָטסטראַפּ דערלויבעניש איז ליגן אין די פּרויעקט ריפּאַזאַטאָרי פֿאַר מער אינפֿאָרמאַציע.
קהל מיטגלידער האָבן איבערגעזעצט באָאָטסטראַפּ ס דאַקיומענטיישאַן אין פאַרשידן שפּראַכן. קיינער איז אַפישאַלי געשטיצט און זיי קען נישט שטענדיק זיין דערהייַנטיקט.
מיר העלפֿן נישט אָרגאַניזירן אָדער באַלעבאָס איבערזעצונגען, מיר נאָר לינק צו זיי.
פאַרטיק אַ נייַע אָדער בעסער איבערזעצונג? עפֿענען אַ ציען בעטן צו לייגן עס צו אונדזער רשימה.