דזשאַוואַסקריפּט
ברענגען די באָאָטסטראַפּ ס קאַמפּאָונאַנץ צו לעבן מיט איבער אַ טוץ מנהג jQuery פּלוגינס. לייכט אַרייַננעמען זיי אַלע, אָדער איינער דורך איינער.
ברענגען די באָאָטסטראַפּ ס קאַמפּאָונאַנץ צו לעבן מיט איבער אַ טוץ מנהג jQuery פּלוגינס. לייכט אַרייַננעמען זיי אַלע, אָדער איינער דורך איינער.
פּלוגינס קענען זיין אַרייַנגערעכנט ינדיווידזשואַלי (ניצן באָאָטסטראַפּ ס יחיד *.js
טעקעס), אָדער אַלע אין אַמאָל (ניצן bootstrap.js
אָדער די מיניפיעד bootstrap.min.js
).
ביידע bootstrap.js
און bootstrap.min.js
אַנטהאַלטן אַלע פּלוגינס אין אַ איין טעקע. אַרייַננעמען בלויז איין.
עטלעכע פּלוגינס און קסס קאַמפּאָונאַנץ אָפענגען אויף אנדערע פּלוגינס. אויב איר ינקלודז פּלוגינס ינדיווידזשואַלי, מאַכן זיכער צו קאָנטראָלירן פֿאַר די דיפּענדאַנסיז אין די דאָקומענטן. אויך טאָן אַז אַלע פּלוגינס אָפענגען אויף דזשקווערי (דאָס מיטל דזשקווערי מוזן זיין אַרייַנגערעכנט איידער די פּלוגין טעקעס). באַראַטנ אונדזערbower.json
צו זען וואָס ווערסיעס פון jQuery זענען געשטיצט.
איר קענען נוצן אַלע באָאָטסטראַפּ פּלוגינס ריין דורך די מאַרקאַפּ אַפּי אָן שרייבן אַ איין שורה פון דזשאַוואַסקריפּט. דאָס איז באָאָטסטראַפּ ס ערשטער-קלאַס אַפּי און זאָל זיין דיין ערשטער באַטראַכטונג ווען איר נוצן אַ פּלוגין.
אין עטלעכע סיטואַטיאָנס, עס קען זיין דיזייראַבאַל צו קער אַוועק די פאַנגקשאַנאַליטי. דעריבער, מיר אויך צושטעלן די פיייקייט צו דיסייבאַל די דאַטן אַטריביוט אַפּי דורך אַנבינדינג אַלע געשעענישן אויף דעם דאָקומענט מיט נאָמען data-api
. דאָס קוקט ווי דאָס:
אַלטערנאַטיוועלי, צו ציל אַ ספּעציפיש פּלוגין, נאָר אַרייַן די נאָמען פון דעם פּלוגין ווי אַ נאַמעספּאַסע צוזאמען מיט די דאַטן-אַפּי נאַמעספּאַסע ווי דאָס:
דו זאלסט נישט נוצן דאַטן אַטריביוץ פון קייפל פּלוגינס אויף דער זעלביקער עלעמענט. פֿאַר בייַשפּיל, אַ קנעפּל קען נישט האָבן אַ טאָאָלטיפּ און טאַגאַל אַ מאָדאַל. צו דערגרייכן דעם, נוצן אַ ראַפּינג עלעמענט.
מיר אויך גלויבן אַז איר זאָל קענען צו נוצן אַלע באָאָטסטראַפּ פּלוגינס ריין דורך די דזשאַוואַסקריפּט אַפּי. אַלע עפנטלעך אַפּיס זענען איין, טשיינדאַבאַל מעטהאָדס, און צוריקקומען די זאַמלונג אַקטאַד אויף.
אַלע מעטהאָדס זאָל אָננעמען אַן אַפּשאַנאַל אָפּציעס כייפעץ, אַ שטריקל וואָס טאַרגאַץ אַ באַזונדער אופֿן, אָדער גאָרנישט (וואָס ינישיאַץ אַ פּלוגין מיט פעליקייַט נאַטור):
יעדער פּלוגין אויך יקספּאָוזיז זיין רוי קאַנסטראַקטער אויף אַ Constructor
פאַרמאָג: $.fn.popover.Constructor
. אויב איר'ד ווי צו באַקומען אַ באַזונדער פּלוגין בייַשפּיל, צוריקקריגן עס גלייַך פֿון אַן עלעמענט: $('[rel="popover"]').data('popover')
.
איר קענען טוישן די פעליקייַט סעטטינגס פֿאַר אַ פּלוגין דורך מאָדיפיצירן די פּלוגין ס Constructor.DEFAULTS
כייפעץ:
מאל עס איז נייטיק צו נוצן Bootstrap פּלוגינס מיט אנדערע וי פראַמעוואָרקס. אין די צושטאנדן, נאַמעספּאַסע קאַליזשאַנז קענען טייל מאָל פּאַסירן. אויב דאָס כאַפּאַנז, איר קענט רופן .noConflict
דעם פּלוגין וואָס איר ווילט צוריקקריגן די ווערט פון.
Bootstrap גיט מנהג events פֿאַר די יינציק אַקשאַנז פון רובֿ פּלוגינס. בכלל, די קומען אין אַ ינפיניטיווע און פאַרגאַנגענהייט באַטייליקונג פאָרעם - ווו די ינפיניטיווע (למשל show
) איז טריגערד אין די אָנהייב פון אַ געשעעניש, און זיין פאַרגאַנגענהייט פּאַרטיסיפּול פאָרעם (למשל shown
) איז טריגערד אויף די קאַמפּלישאַן פון אַ קאַמף.
זינט 3.0.0, אַלע באָאָצטראַפּ געשעענישן זענען נאַמעספּאַסעד.
כל ינפיניטיווע געשעענישן צושטעלן preventDefault
פאַנגקשאַנאַליטי. דאָס גיט די פיייקייט צו האַלטן די דורכפירונג פון אַ קאַמף איידער עס סטאַרץ.
די ווערסיע פון יעדער פון Bootstrap ס jQuery פּלוגינס קענען זיין אַקסעסט דורך די VERSION
פאַרמאָג פון די פּלאַגין ס קאַנסטראַקטער. פֿאַר בייַשפּיל, פֿאַר די טאָאָלטיפּ פּלוגין:
באָאָטסטראַפּ ס פּלוגינס טאָן ניט פאַלן צוריק ספּעציעל גראַציעז ווען דזשאַוואַסקריפּט איז פאַרקריפּלט. אויב איר זאָרגן וועגן די באַניצער דערפאַרונג אין דעם פאַל, נוצן <noscript>
צו דערקלערן די סיטואַציע (און ווי צו געבן דזשאַוואַסקריפּט) צו דיין יוזערז, און / אָדער לייגן דיין אייגענע מנהג פאָלבאַקס.
באָאָטסטראַפּ שטיצט נישט אַפישאַלי דריט-פּאַרטיי דזשאַוואַסקריפּט לייברעריז ווי פּראָטאָטיפּע אָדער דזשקווערי וי. טראָץ .noConflict
און נאַמעספּאַסעד געשעענישן, עס קען זיין קאַמפּאַטאַבילאַטי פראבלעמען וואָס איר דאַרפֿן צו פאַרריכטן אויף דיין אייגענע.
פֿאַר פּשוט יבערגאַנג יפעקץ, אַרייַננעמען transition.js
אַמאָל צוזאמען די אנדערע JS טעקעס. אויב איר נוצן די קאָמפּילעד (אָדער מינאַפייד) bootstrap.js
, עס איז ניט דאַרפֿן צו אַרייַננעמען דעם - עס איז שוין דאָרט.
Transition.js איז אַ יקערדיק העלפּער פֿאַר transitionEnd
געשעענישן און אַ CSS יבערגאַנג עמולאַטאָר. עס איז געניצט דורך די אנדערע פּלוגינס צו קאָנטראָלירן פֿאַר CSS יבערגאַנג שטיצן און צו כאַפּן כאַנגגינג טראַנזישאַנז.
טראַנזישאַנז קענען זיין גלאָובאַלי פאַרקריפּלט ניצן די פאלגענדע דזשאַוואַסקריפּט סניפּאַט, וואָס מוזן קומען נאָך transition.js
(אָדער bootstrap.js
אָדער bootstrap.min.js
, ווי די פאַל קען זיין) איז לאָודיד:
מאָדאַלס זענען סטרימליינד, אָבער פלעקסאַבאַל, דיאַלאָג פּראַמפּס מיט די מינימום פארלאנגט פאַנגקשאַנאַליטי און קלוג דיפאָלץ.
זייט זיכער נישט צו עפֿענען אַ מאָדאַל בשעת אן אנדער איז נאָך קענטיק. ווייזן מער ווי איין מאָדאַל אין אַ צייַט ריקווייערז מנהג קאָד.
שטענדיק פּרובירן צו שטעלן אַ מאָדאַל ס HTML קאָד אין אַ שפּיץ-מדרגה שטעלע אין דיין דאָקומענט צו ויסמיידן אנדערע קאַמפּאָונאַנץ וואָס ווירקן די מאָדאַל ס אויסזען און / אָדער פאַנגקשאַנאַליטי.
עס זענען עטלעכע קייוויאַץ וועגן די נוצן פון מאָדאַלז אויף רירעוודיק דעוויסעס. זען אונדזער בלעטערער שטיצן דאָקומענטן פֿאַר דעטאַילס.
רעכט צו ווי HTML5 דיפיינז זייַן סעמאַנטיקס, די autofocus
HTML אַטריביוט האט קיין ווירקונג אין באָאָטסטראַפּ מאָדאַלז. צו דערגרייכן די זעלבע ווירקונג, נוצן עטלעכע מנהג דזשאַוואַסקריפּט:
א רענדערד מאָדאַל מיט כעדער, גוף און גאַנג פון אַקשאַנז אין די פוטער.
טאַגאַל אַ מאָדאַל דורך דזשאַוואַסקריפּט דורך געבן אַ קליק דעם קנעפּל אונטן. עס וועט רוק אַראָפּ און וועלקן אין די שפּיץ פון די בלאַט.
זייט זיכער צו לייגן role="dialog"
און aria-labelledby="..."
, רעפערענסינג די מאָדאַל טיטל, צו .modal
, און role="document"
צו .modal-dialog
זיך.
דערצו, איר קענט געבן אַ באַשרייַבונג פון דיין מאָדאַל דיאַלאָג מיט aria-describedby
אויף .modal
.
עמבעדדינג יאָוטובע ווידיאס אין מאָדאַלס ריקווייערז נאָך דזשאַוואַסקריפּט ניט אין באָאָטסטראַפּ צו אויטאָמאַטיש האַלטן פּלייבאַק און מער. זען דעם נוציק Stack Overflow פּאָסטן פֿאַר מער אינפֿאָרמאַציע.
מאָדאַלס האָבן צוויי אַפּשאַנאַל סיזעס, בנימצא דורך מאָדיפיער קלאסן צו זיין געשטעלט אויף אַ .modal-dialog
.
פֿאַר מאָדאַלס וואָס פשוט דערשייַנען אלא ווי וועלקן אין צו זען, אַראָפּנעמען די .fade
קלאַס פון דיין מאָדאַל מאַרקאַפּ.
צו נוצן די Bootstrap גריד סיסטעם אין אַ מאָדאַל, נאָר נעסט עס .row
אין די .modal-body
און דעמאָלט נוצן די נאָרמאַל גריד סיסטעם קלאסן.
האָבן אַ בינטל פון קנעפּלעך וואָס אַלע צינגל די זעלבע מאָדאַל, נאָר מיט אַ ביסל אַנדערש אינהאַלט? ניצן event.relatedTarget
און HTML data-*
אַטריביוץ (עפשער דורך jQuery ) צו בייַטן די אינהאַלט פון די מאָדאַל דיפּענדינג אויף וואָס קנעפּל איז קליקט. זען די מאָדאַל עווענט דאָקומענטן פֿאַר דעטאַילס אויף relatedTarget
,
די מאָדאַל פּלוגין טאַגאַלז דיין פאַרבאָרגן אינהאַלט אויף פאָדערונג, דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. עס אויך מוסיף .modal-open
צו די <body>
אָווועררייד פעליקייַט סקראָללינג נאַטור און דזשענערייץ אַ .modal-backdrop
צו צושטעלן אַ גיט געגנט פֿאַר דימיסינג געוויזן מאָדאַלז ווען קליקינג אַרויס די מאָדאַל.
אַקטאַווייט אַ מאָדאַל אָן שרייבן דזשאַוואַסקריפּט. שטעלן data-toggle="modal"
אויף אַ קאָנטראָללער עלעמענט, ווי אַ קנעפּל, צוזאמען מיט אַ data-target="#foo"
אָדער href="#foo"
צו ציל אַ ספּעציפיש מאָדאַל צו טאַגאַל.
רופן אַ מאָדאַל מיט שייַן myModal
מיט אַ איין שורה פון דזשאַוואַסקריפּט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-backdrop=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
באַקדראַפּ | באָאָלעאַן אָדער די שטריקל'static' |
אמת | כולל אַ מאָדאַל-באַקדראַפּ עלעמענט. אַלטערנאַטיוועלי, ספּעציפיצירן static פֿאַר אַ באַקדראַפּ וואָס טוט נישט פאַרמאַכן די מאָדאַל אויף גיט. |
קיבארד | בוליאַן | אמת | קלאָוזיז די מאָדאַל ווען אַנטלויפן שליסל איז געדריקט |
ווייַזן | בוליאַן | אמת | ווייזט די מאָדאַל ווען ינישאַלייזד. |
ווייַט | דרך | פאַלש | דער אָפּציע איז דיפּרישיייטיד זינט וו3.3.0 און איז אַוועקגענומען אין וו4. מיר רעקאָמענדירן אַנשטאָט ניצן קליענט-זייַט טעמפּלאַטינג אָדער אַ דאַטן ביינדינג פריימווערק, אָדער רופן jQuery.load זיך. אויב אַ ווייַט URL איז צוגעשטעלט, אינהאַלט וועט זיין לאָודיד איין מאָל דורך jQuery ס |
.modal(options)
אַקטאַווייץ דיין אינהאַלט ווי אַ מאָדאַל. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object
.
.modal('toggle')
מאַניואַלי טאַגאַלז אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.modal
אָדער hidden.bs.modal
געשעעניש אַקערז).
.modal('show')
מאַניואַלי אָפּענס אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.modal
געשעעניש אַקערז).
.modal('hide')
מאַניואַלי כיידז אַ מאָדאַל. קערט צו די קאַללער איידער די מאָדאַל איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.modal
געשעעניש אַקערז).
.modal('handleUpdate')
רעדזשוסט די פּאַזישאַנינג פון די מאָדאַל צו אַנטקעגנשטעלנ אַ סקראָלבאַר אין פאַל איינער זאָל דערשייַנען, וואָס וואָלט מאַכן די מאָדאַל שפּרינגען צו די לינקס.
נאָר דארף ווען די הייך פון די מאָדאַל ענדערונגען בשעת עס איז אָפן.
די מאָדאַל קלאַס פון Bootstrap יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין מאָדאַל פאַנגקשאַנאַליטי.
אַלע מאָדאַל געשעענישן זענען פייערד אין די מאָדאַל זיך (ד"ה אין די <div class="modal">
).
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.modal | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. אויב געפֿירט דורך אַ קליק, די קליקט עלעמענט איז בנימצא ווי די relatedTarget פאַרמאָג פון דער געשעעניש. |
געוויזן.בס.מאָדאַל | דער געשעעניש איז פייערד ווען די מאָדאַל איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). אויב געפֿירט דורך אַ קליק, די קליקט עלעמענט איז בנימצא ווי די relatedTarget פאַרמאָג פון דער געשעעניש. |
hide.bs.modal | דעם געשעעניש איז פייערד מיד ווען די hide בייַשפּיל אופֿן איז גערופן. |
hidden.bs.modal | דער געשעעניש איז פייערד ווען די מאָדאַל איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
loaded.bs.modal | דעם געשעעניש איז פייערד ווען די מאָדאַל האט לאָודיד אינהאַלט ניצן די remote אָפּציע. |
לייג דראָפּדאָוון מעניוז צו כּמעט אַלץ מיט דעם פּשוט פּלוגין, אַרייַנגערעכנט די נאַוובאַר, טאַבס און פּילז.
דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, די דראָפּדאָוון פּלוגין טאַגאַלז פאַרבאָרגן אינהאַלט (דראָפּדאָוון מעניוז) דורך טאַגאַלינג די .open
קלאַס אויף דער פאָטער רשימה נומער.
אויף רירעוודיק דעוויסעס, עפן אַ דראָפּדאָוון מוסיף אַ .dropdown-backdrop
ווי אַ צאַפּן געגנט פֿאַר קלאָוזינג דראָפּדאָוון מעניוז ווען טאַפּינג אַרויס די מעניו, אַ פאָדערונג פֿאַר געהעריק יאָס שטיצן.דעם מיטל אַז באַשטימען פון אַן אָפֿן דראָפּדאָוון מעניו צו אַ אַנדערש דראָפּדאָוון מעניו ריקווייערז אַן עקסטרע צאַפּן אויף רירעוודיק.
באַמערקונג: די data-toggle="dropdown"
אַטריביוט איז רילייד אויף פֿאַר קלאָוזינג דראָפּדאָוון מעניוז אויף אַ אַפּלאַקיישאַן מדרגה, אַזוי עס איז אַ גוטע געדאַנק צו שטענדיק נוצן עס.
לייג data-toggle="dropdown"
צו אַ לינק אָדער קנעפּל צו באַשטימען אַ דראָפּדאָוון.
צו האַלטן URL ס בעשאָלעם מיט לינק קנעפּלעך, נוצן די data-target
אַטריביוט אַנשטאָט פון href="#"
.
רופן די דראָפּדאָוונס דורך דזשאַוואַסקריפּט:
data-toggle="dropdown"
נאָך פארלאנגטצי איר רופן דיין דראָפּדאָוון דורך דזשאַוואַסקריפּט אָדער אַנשטאָט ניצן די דאַטן-אַפּי, עס data-toggle="dropdown"
איז שטענדיק פארלאנגט צו זיין פאָרשטעלן אויף די צינגל עלעמענט פון די דראָפּדאָוון.
קיינער
$().dropdown('toggle')
טאַגאַלס די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.
אַלע דראָפּדאָוון געשעענישן זענען פייערד אין די .dropdown-menu
פאָטער עלעמענט.
אַלע דראָפּדאָוון געשעענישן האָבן אַ relatedTarget
פאַרמאָג, וועמענס ווערט איז די טאַגאַלינג אַנקער עלעמענט.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.dropdown | די געשעעניש פירט גלייך ווען די ווייַזן בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.דראָפּדאָוון | דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.dropdown | דעם געשעעניש איז פייערד מיד ווען די באַהאַלטן בייַשפּיל אופֿן איז גערופן. |
hidden.bs.dropdown | דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
די ScrollSpy פּלוגין איז פֿאַר אויטאָמאַטיש אַפּדייטינג נאַוו טאַרגאַץ באזירט אויף מעגילע שטעלע. מעגילע די געגנט אונטער די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן. די דראָפּדאָוון סאַב-ייטאַמז וועט אויך זיין כיילייטיד.
אַד לעגינגז קייטאַר, בראַנטש שייַן קונסט פּאַרטיי דאָלאָר אַרבעט. פּיטשפאָרק יר ענים לא-פי איידער זיי סאָלד אויס קווי. טומבלר פאַרם-צו-טיש וועלאָסיפּעד רעכט וועלכער. אַני קעפיה קאַרדיגאַן. וועליט סעיטאַן מקססוועעעני ס פאָטאָ בוט 3 וואָלף לבנה ירורע. קאָסבי סוועטער לאָמאָ דזשין קורצע הייזלעך, וויליאַמסבורג האָאָדיע מינים וואָס איר מיסטאָמע האָבן נישט געהערט פון זיי און קאַרדיגאַן טראַסט פאָנד culpa biodiesel Wes anderson esthetic. ניהיל טאַטוד אַקסאַמוס, קרעד איראָניע ביאָדיעסעל קעפייעה האַרטמאַן וללאַמקאָ קאָנסעקוואַט.
וועניאַם מאַרפאַ וואָנצעס סקייטבאָרד, אַדאַפּיסיסינג פוגיאַט וועליט פּיטשפאָרק באָרד. פרעעגאַן באָרד אַליקוואַפּידאַטאַט מאַקסוועיני ס וועראָ. קופּידאַט פיר לאָקאָ ניסי, ea helvetica nulla carles. טאַטאָאָעד קאָסבי סוועטער עסנוואַרג טראָק, Mcsweeney's איז ניט פריגאַן וויינאַל. לאָ-פי וואס אַנדערסאָן +1 סאַרטאָריאַל. קאַרלעס ניט עסטעטיש עקסערסיטיישאַן quis gentrify. ברוקלין אַדאַפּיסיסינג מעלאָכע ביר וויצע קיטאַר דעזעראַנט.
Occaecat commodo aliqua delectus. Fap קראַפט ביר דעסערט סקייטבאָרד עאַ. לאָמאָ וועלאָסיפּעד רעכט אַדאַפּיסיסינג באַה מי, און איר וועט זיין ווייַטער מדרגה לאָקאַוואָרע איין-אָריגינעל קאַווע אין מאַגנאַ וועניאַם. הויך-לעבן שייַן וויינאַל, עקאָו פּאַרק קאַנסעקוואַט מיט אַלעליקוויפּ באַן מי פּיטשפאָרק. וועראָ VHS איז אַדאַפּייזינג. קאָנסעקטעטור איז DIY מינים שליח זעקל. קרעד עקס אין, סאַסטיינאַבאַל דעלעקטוס קאַנסעקטור פאַני פּאַק יפאָנע.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
קיטאַר צוויי בלאָג, אַ שליח טאַש מיט וועלכער דילעקטוס עסנוואַרג טראָק. סאַפּיענט סינטה שייַן אַססומענדאַ. לאָקאַוואָרע סעד העלוועטיקאַ קליינטשיק איראָניע, טאַנדערקאַץ איר מיסטאָמע האָבן נישט געהערט פון זיי קאָנסעקוואַט האָאָדיע גלוטען-פֿרייַ לאָ-פי פאַפּ אַליקוויפּ. לאַבאָר עליט אָרט איידער זיי סאָלד אויס, טערי ריטשאַרדסאָן פּראָידענט בראַנטש נעססיונט quis cosby sweater pariatur keffiyeh ut helvetica artisan. קאַרדיגאַן מעלאָכע ביר סעיטאַן פאַרטיק וועליט. VHS chambray laboris tempor veniam. אַנימע מאָלליט מינימאַל קאָממאָדאָ וללאַמקאָ טאַנדערקאַץ.
נאַוובאַר פֿאַרבינדונגען מוזן האָבן ריזאַלווד שייַן טאַרגאַץ. פֿאַר בייַשפּיל, אַ <a href="#home">home</a>
מוזן שטימען צו עפּעס אין די DOM ווי <div id="home"></div>
.
:visible
ציל עלעמענטן איגנאָרירטציל עלעמענטן וואָס זענען נישט :visible
לויט jQuery וועט זיין איגנאָרירט און זייער קאָראַספּאַנדינג נאַוו ייטאַמז וועט קיינמאָל זיין כיילייטיד.
ניט קיין ענין די ימפּלאַמענטיישאַן אופֿן, סקראָלספּי ריקווייערז די נוצן פון position: relative;
דעם עלעמענט איר ספּייינג. אין רובֿ פאלן, דאָס איז די יו <body>
. ווען סקראָלספּיינג אויף אנדערע עלעמענטן ווי די <body>
, זיין זיכער צו האָבן אַ height
גאַנג און overflow-y: scroll;
געווענדט.
צו לייכט לייגן סקראָלספּי נאַטור צו דיין טאַפּבאַר נאַוויגאַציע, לייגן data-spy="scroll"
צו די עלעמענט איר ווילן צו שפּיאָן אויף (רובֿ טיפּיקלי דאָס וואָלט זיין די <body>
). דערנאָך לייגן דעם data-target
אַטריביוט מיט די שייַן אָדער קלאַס פון די פאָטער עלעמענט פון קיין באָאָטסטראַפּ .nav
קאָמפּאָנענט.
נאָך אַדינג position: relative;
דיין CSS, רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:
.scrollspy('refresh')
ווען איר נוצן סקראָלספּי אין קאַנדזשאַנגקשאַן מיט אַדינג אָדער רימוווינג עלעמענטן פון די DOM, איר דאַרפֿן צו רופן דעם דערפרישן אופֿן ווי אַזוי:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-offset=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אָפסעט | נומער | 10 | פּיקסעלס צו פאָטאָ פון שפּיץ ווען קאַלקיאַלייטינג די שטעלע פון די מעגילע. |
געשעעניש טיפּ | באַשרייַבונג |
---|---|
אַקטאַווייט.בס.סקראָלספּי | דער געשעעניש פירט ווען אַ נייַ נומער ווערט אַקטיווייטיד דורך די סקראָלספּי. |
לייג שנעל, דינאַמיש קוויטל פאַנגקשאַנאַליטי צו יבערגאַנג דורך פּאַנעס פון היגע אינהאַלט, אפילו דורך דראָפּדאָוון מעניוז. נעסטעד טאַבס זענען נישט געשטיצט.
רוי דענים איר מיסטאָמע האָבן נישט געהערט פון זיי דזשין קורצע הייזלעך אַוסטין. Nesciunt Tofu Stumptown Aliqua, רעטראָ סינטה בעל רייניקן. וואָנצעס קליינטשיק טעמפּער, וויליאַמסבורג קאַרלעס וועגאַן העלוועטיקאַ. רעפּרעהענדעריט בוטשער רעטראָ קעפיה דרעאַמקאַטשער סינטה. קאָסבי סוועטער אי.יו. באַנה מי, וואָס איז געווען טערי ריטשאַרדסאָן עקס טינטפיש. ייַנטיילן דעם פּלאַץ פון יפאָנע. סעיטאַן אַליקוויפּ מיט קאַרדיגאַן אמעריקאנער קליידונג, קאַצעוו וואָלופּטאַטע איז ניט גענוגיק.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
דעם פּלוגין יקסטענדז די טאַבבעד נאַוויגאַציע קאָמפּאָנענט צו לייגן טאַבבאַבלע געביטן.
געבן טאַבבאַבלע טאַבס דורך דזשאַוואַסקריפּט (יעדער קוויטל דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):
איר קענען אַקטאַווייט יחיד טאַבס אין עטלעכע וועגן:
איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן data-toggle="tab"
אָדער data-toggle="pill"
אויף אַן עלעמענט. אַדינג די nav
און nav-tabs
קלאסן צו די קוויטל ul
וועט צולייגן די באָאָטסטראַפּ קוויטל סטילינג , בשעת אַדינג די nav
און nav-pills
קלאסן וועט צולייגן פּיל סטילינג .
צו מאַכן טאַבס וועלקן אין, לייגן .fade
צו יעדער .tab-pane
. דער ערשטער קוויטל שויב מוזן אויך .in
מאַכן די ערשט אינהאַלט קענטיק.
$().tab
אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-target
אָדער אַ href
טאַרגאַטינג אַ קאַנטיינער נאָדע אין די DOM. אין די אויבן ביישפילן, די טאַבס זענען די <a>
s מיט data-toggle="tab"
אַטריביוץ.
.tab('show')
סאַלעקץ די געגעבן קוויטל און ווייזט זייַן פֿאַרבונדן אינהאַלט. קיין אנדערע קוויטל וואָס איז געווען פריער אויסגעקליבן, ווערט אַנסעלעקטעד און זיין פארבונדן אינהאַלט איז פאַרבאָרגן. קערט צו די קאַללער איידער די קוויטל שויב איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.tab
געשעעניש אַקערז).
ווען איר ווייַזן אַ נייַע קוויטל, די געשעענישן לויפן אין די פאלגענדע סדר:
hide.bs.tab
(אויף די איצטיקע אַקטיווע קוויטל)show.bs.tab
(אויף די צו-ווייַזן קוויטל)hidden.bs.tab
(אויף די פריערדיקע אַקטיוו קוויטל, די זעלבע ווי פֿאַר די hide.bs.tab
געשעעניש)shown.bs.tab
(אויף די ניי-אַקטיוו פּונקט געוויזן קוויטל, די זעלבע ווי פֿאַר די show.bs.tab
געשעעניש)אויב קיין קוויטל איז שוין אַקטיוו, די hide.bs.tab
און hidden.bs.tab
געשעענישן וועט נישט זיין פייערד.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.tab | דער געשעעניש פירט אויף די קוויטל ווייַזן, אָבער איידער די נייַע קוויטל איז געוויזן. ניצן event.target און event.relatedTarget צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי. |
געוויזן.בס.טאַב | דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן event.target און event.relatedTarget צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי. |
hide.bs.tab | דער געשעעניש פירז ווען אַ נייַ קוויטל איז צו זיין געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל זאָל זיין פאַרבאָרגן). ניצן event.target און event.relatedTarget צו ציל די קראַנט אַקטיוו קוויטל און די נייַע באַלד-צו-זיין-אַקטיוו קוויטל ריספּעקטיוולי. |
hidden.bs.tab | דער געשעעניש פירט נאָך אַ נייַע קוויטל איז געוויזן (און אַזוי די פריערדיקע אַקטיוו קוויטל איז פאַרבאָרגן). ניצן event.target און event.relatedTarget צו ציל די פריערדיקע אַקטיוו קוויטל און די נייַע אַקטיוו קוויטל ריספּעקטיוולי. |
ינספּייערד דורך די ויסגעצייכנט jQuery.tipsy פּלוגין געשריבן דורך Jason Frame; Tooltips זענען אַ דערהייַנטיקט ווערסיע וואָס טאָן ניט פאַרלאָזנ זיך בילדער, נוצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.
מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.
האָווער אויף די לינקס אונטן צו זען מכשירים:
ענג הויזן ווייַטער מדרגה קעפיה איר מיסטאָמע נישט געהערט פון זיי. פאָטאָ בוט באָרד רוי דענים לעטטערפּרעסס וועגאַן מעסינדזשער זעקל סטאַמפּטאָוון. פאַרם-צו-טיש סעיטאַן, מאַקסוועעניי ס פיקסי סאַסטיינאַבאַל קווינאָאַ 8-ביסל אמעריקאנער קליידונג האָבן אַ טערי ריטשאַרדסאָן וויינאַל טשאַמברייַ. באָרד סטאַמפּטאָוון, קאַרדיגאַנז באַן מי לאָמאָ טאַנדערקאַץ. טאָפו ביאָדיעסעל וויליאַמסבורג מאַרפאַ, פיר לאָקאָ מאַקסוועיני ס רייניקן וועגאַן טשאַמברייַ. א טאַקע ייראַניק באַל - מעלאָכע, וועלכער קייטאַר , סצענעסטער פאַרם-צו-טיש באַנקסי אַוסטין טוויטטער שעפּן פרעעגאַן קרעד רוי דענים איין-אָריגינעל קאַווע וויראַל.
פיר אָפּציעס זענען בנימצא: שפּיץ, רעכט, דנאָ און לינקס אַליינד.
פֿאַר פאָרשטעלונג סיבות, די טאָאָלטיפּ און פּאָפּאָווער דאַטן-אַפּיס זענען אַפּט-אין, טייַטש איר מוזן ינישאַלייז זיי זיך .
איין וועג צו ינישאַלייז אַלע מכשירים אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggle
אַטריביוט:
די טאָאָלטיפּ פּלוגין דזשענערייץ אינהאַלט און מאַרקאַפּ אויף מאָנען, און דורך פעליקייַט לייגט מכשירים נאָך זייער צינגל עלעמענט.
צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:
די פארלאנגט מאַרקאַפּ פֿאַר אַ טאָאָלטיפּ איז בלויז אַ data
אַטריביוט און title
אויף די HTML עלעמענט איר ווילט האָבן אַ טאָאָלטיפּ. די דזשענערייטאַד מאַרקאַפּ פון אַ טאָאָלטיפּ איז גאַנץ פּשוט, כאָטש עס דאַרף אַ שטעלע (דורך פעליקייַט, באַשטימט top
דורך די פּלוגין).
מאל איר ווילן צו לייגן אַ טאָאָלטיפּ צו אַ כייפּערלינגק וואָס ראַפּס קייפל שורות. די פעליקייַט נאַטור פון די טאָאָלטיפּ פּלוגין איז צו צענטער עס כאָריזאַנטאַלי און ווערטיקלי. לייג white-space: nowrap;
צו דיין אַנגקערז צו ויסמיידן דעם.
ווען איר נוצן מכשירים אויף עלעמענטן אין אַ .btn-group
אָדער אַן .input-group
, אָדער אויף טיש-פֿאַרבונדענע עלעמענטן ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), איר וועט האָבן צו ספּעציפיצירן די אָפּציע container: 'body'
(דאַקיאַמענטאַד אונטן) צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט גראָוינג ברייט און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די טאָאָלטיפּ איז טריגערד).
פֿאַר יוזערז וואָס נאַוויגירן מיט אַ קלאַוויאַטור, און ספּעציעל יוזערז פון אַסיסטאַטיוו טעקנאַלאַדזשיז, איר זאָל נאָר לייגן מכשירים צו קלאַוויאַטור-פאָוקאָוסאַבאַל עלעמענטן אַזאַ ווי לינקס, פאָרעם קאָנטראָלס אָדער קיין אַרביטראַריש עלעמענט מיט אַ tabindex="0"
אַטריביוט.
צו לייגן אַ טאָאָלטיפּ צו אַ disabled
אָדער .disabled
עלעמענט, שטעלן דעם עלעמענט ין אַ <div>
און אָנווענדן די טאָאָלטיפּ צו אַז <div>
אַנשטאָט.
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-animation=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אַנאַמיישאַן | בוליאַן | אמת | צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָאָלטיפּ |
קאנטעינער | שטריקל | פאַלש | פאַלש | אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענט. בייַשפּיל: |
פאַרהאַלטן | נומער | כייפעץ | 0 | פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז: |
HTML | בוליאַן | פאַלש | אַרייַנלייגן HTML אין די טאָאָלטיפּ. אויב פאַלש, די text מעטאָד פון jQuery וועט זיין געניצט צו אַרייַנלייגן אינהאַלט אין די DOM. ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן. |
פּלייסמאַנט | שטריקל | פֿונקציע | 'אויבן' | ווי צו שטעלן די מכשירים - שפּיץ | דנאָ | לינקס | רעכט | אַוטאָ. ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די טאָאָלטיפּ DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער |
סעלעקטאָר | שטריקל | פאַלש | אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז געניצט צו געבן דינאַמיש HTML אינהאַלט צו לייגן מכשירים. זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל . |
מוסטער | שטריקל | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
באַזע HTML צו נוצן ווען קריייטינג די טאָאָלטיפּ. די טאָאָלטיפּ
די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די |
טיטל | שטריקל | פֿונקציע | '' | פעליקייַט טיטל ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
צינגל | שטריקל | 'האָווער פאָקוס' | ווי מכשיר עצה איז טריגערד - גיט | האָווער | פאָקוס | מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ. manual קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל. |
viewport | שטריקל | כייפעץ | פֿונקציע | {סעלעקטאָר: 'גוף', וואַטן: 0} | האלט די טאָאָלטיפּ ין די גווול פון דעם עלעמענט. בייַשפּיל: אויב אַ פֿונקציע איז געגעבן, עס איז גערופן מיט די טריגערינג עלעמענט DOM נאָדע ווי זיין בלויז אַרגומענט. דער |
אָפּציעס פֿאַר יחיד מכשירים קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.
$().tooltip(options)
אַטאַטשיז אַ טאָאָלטיפּ האַנדלער צו אַן עלעמענט זאַמלונג.
.tooltip('show')
ריווילז אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים. מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.
.tooltip('hide')
באַהאַלט אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי פאַרבאָרגן (ד"ה איידער די hidden.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים.
.tooltip('toggle')
טאָגלעס אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.tooltip
אָדער hidden.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים.
.tooltip('destroy')
באַהאַלטן און דיסטרויז אַן עלעמענט ס מכשירים. מכשירים וואָס נוצן דעלאַגיישאַן (וואָס זענען באשאפן מיט די selector
אָפּציע ) קענען ניט זיין ינדיווידזשואַלי חרובֿ אויף אָפּשטאַמלינג צינגל עלעמענטן.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.tooltip | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.מכשיר עצה | דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.tooltip | דעם געשעעניש איז פייערד מיד ווען די hide בייַשפּיל אופֿן איז גערופן. |
hidden.bs.tooltip | דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
inserted.bs.tooltip | דער געשעעניש איז פייערד נאָך די show.bs.tooltip געשעעניש ווען די טאָאָלטיפּ מוסטער איז צוגעגעבן צו די DOM. |
לייג קליין אָוווערלייז פון אינהאַלט, ווי די אויף די iPad, צו קיין עלעמענט פֿאַר האָוסינג צווייטיק אינפֿאָרמאַציע.
פּאָפּאָווערס וועמענס טיטל און אינהאַלט זענען נול-לענג זענען קיינמאָל געוויזן.
פּאָפּאָווערס דאַרפן די טאָאָלטיפּ פּלוגין צו זיין אַרייַנגערעכנט אין דיין ווערסיע פון באָאָטסטראַפּ.
פֿאַר פאָרשטעלונג סיבות, די טאָאָלטיפּ און פּאָפּאָווער דאַטן-אַפּיס זענען אַפּט-אין, טייַטש איר מוזן ינישאַלייז זיי זיך .
איין וועג צו ינישאַלייז אַלע פּאָפּאָווערס אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggle
אַטריביוט:
ווען איר נוצן פּאָפּאָווערס אויף עלעמענטן אין אַ .btn-group
אָדער אַן .input-group
, אָדער אויף טיש-פֿאַרבונדענע עלעמענטן ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), איר וועט האָבן צו ספּעציפיצירן די אָפּציע container: 'body'
(דאַקיאַמענטאַד אונטן) צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט גראָוינג ברייט און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די פּאָפּאָווער איז טריגערד).
צו לייגן אַ פּאָפּאָווער צו אַ disabled
אָדער .disabled
עלעמענט, שטעלן דעם עלעמענט ין אַ <div>
און צולייגן די פּאָפּאָווער צו אַז <div>
אַנשטאָט.
מאל איר ווילן צו לייגן אַ פּאָפּאָווער צו אַ כייפּערלינגק וואָס ראַפּס קייפל שורות. די פעליקייַט נאַטור פון די פּאָפּאָווער פּלוגין איז צו צענטער עס כאָריזאַנטאַלי און ווערטיקלי. לייג white-space: nowrap;
צו דיין אַנגקערז צו ויסמיידן דעם.
פיר אָפּציעס זענען בנימצא: שפּיץ, רעכט, דנאָ און לינקס אַליינד.
Sed posuere consectetur est at lobortis. אַענעאַן eu leo quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. אַענעאַן eu leo quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. אַענעאַן eu leo quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. אַענעאַן eu leo quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.
ניצן די focus
צינגל צו אָפּזאָגן פּאָפּאָווערס אויף דער ווייַטער גיט אַז דער באַניצער מאכט.
פֿאַר געהעריק קרייז-בלעטערער און קרייַז-פּלאַטפאָרמע נאַטור, איר מוזן נוצן די <a>
קוויטל, נישט די <button>
קוויטל, און איר מוזן אויך אַרייַננעמען די role="button"
און tabindex
אַטריביוץ.
געבן פּאָפּאָווערס דורך דזשאַוואַסקריפּט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-animation=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אַנאַמיישאַן | בוליאַן | אמת | צולייגן אַ CSS וועלקן יבערגאַנג צו די פּאָפּאָווער |
קאנטעינער | שטריקל | פאַלש | פאַלש | אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענט. בייַשפּיל: |
אינהאַלט | שטריקל | פֿונקציע | '' | פעליקייַט אינהאַלט ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
פאַרהאַלטן | נומער | כייפעץ | 0 | פאַרהאַלטן ווייזן און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז: |
HTML | בוליאַן | פאַלש | אַרייַנלייגן HTML אין די פּאָפּאָווער. אויב פאַלש, די text מעטאָד פון jQuery וועט זיין געניצט צו אַרייַנלייגן אינהאַלט אין די DOM. ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן. |
פּלייסמאַנט | שטריקל | פֿונקציע | 'רעכט' | ווי צו שטעלע די פּאָפּאָווער - שפּיץ | דנאָ | לינקס | רעכט | אַוטאָ. ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די פּאָפּאָווער DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער |
סעלעקטאָר | שטריקל | פאַלש | אויב אַ סעלעקטאָר איז צוגעשטעלט, פּאָפּאָווער אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז געניצט צו געבן דינאַמיש HTML אינהאַלט צו לייגן פּאָפּאָווערס. זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל . |
מוסטער | שטריקל | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
באַזע HTML צו נוצן ווען קריייטינג די פּאָפּאָווער. די פּאָפּאָווער ס די פּאָפּאָווער ס
די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די |
טיטל | שטריקל | פֿונקציע | '' | פעליקייַט טיטל ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
צינגל | שטריקל | 'קליק' | ווי פּאָפּאָווער איז טריגערד - גיט | האָווער | פאָקוס | מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ. manual קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל. |
viewport | שטריקל | כייפעץ | פֿונקציע | {סעלעקטאָר: 'גוף', וואַטן: 0} | האלט די פּאָפּאָווער ין די גווול פון דעם עלעמענט. בייַשפּיל: אויב אַ פֿונקציע איז געגעבן, עס איז גערופן מיט די טריגערינג עלעמענט DOM נאָדע ווי זיין בלויז אַרגומענט. דער |
אָפּציעס פֿאַר יחיד פּאָפּאָווערס קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.
$().popover(options)
יניטיאַליזעס פּאָפּאָווערס פֿאַר אַן עלעמענט זאַמלונג.
.popover('show')
ריווילז אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.popover
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער. פּאָפּאָווערס וועמענס טיטל און אינהאַלט זענען נול-לענג זענען קיינמאָל געוויזן.
.popover('hide')
כיידז אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.popover
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער.
.popover('toggle')
טאָגלעס אַן עלעמענט ס פּאָפּאָווער. קערט צו די קאַללער איידער די פּאָפּאָווער איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.popover
אָדער hidden.bs.popover
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די פּאָפּאָווער.
.popover('destroy')
כיידז און דיסטרויז אַן עלעמענט ס פּאָפּאָווער. פּאָפּאָווערס וואָס נוצן דעלאַגיישאַן (וואָס זענען באשאפן מיט די selector
אָפּציע ) קענען ניט זיין ינדיווידזשואַלי חרובֿ אויף אָפּשטאַמלינג צינגל עלעמענטן.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.popover | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.פּאָפּאָווער | דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.popover | דעם געשעעניש איז פייערד מיד ווען די hide בייַשפּיל אופֿן איז גערופן. |
hidden.bs.popover | דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
ינסערטאַד.בס.פּאָפּאָווער | דער געשעעניש איז פייערד נאָך די show.bs.popover געשעעניש ווען די פּאָפּאָווער מוסטער איז צוגעגעבן צו די DOM. |
לייג אָפּזאָגן פאַנגקשאַנאַליטי צו אַלע פלינק אַרטיקלען מיט דעם פּלוגין.
ווען איר נוצן אַ .close
קנעפּל, עס מוזן זיין דער ערשטער קינד פון דעם .alert-dismissible
און קיין טעקסט אינהאַלט קען קומען איידער עס אין די מאַרקאַפּ.
טוישן דעם און אַז און פּרובירן ווידער. דויס מאָליס, עס איז ניט קאָממאָדאָ לאַקטוס, עס איז קיין פּאָרטטיטאָר ליגולאַ, לעגאַט לאַסין אָדיאָו ווי ניט עליט. Cras Mattis Consectetur Purus Sit Amet Fermentum.
נאָר לייגן data-dismiss="alert"
צו דיין נאָענט קנעפּל צו אויטאָמאַטיש געבן אַ פלינק נאָענט פאַנגקשאַנאַליטי. קלאָוזינג אַ פלינק רימוווז עס פון די DOM.
צו האָבן דיין אַלערץ ניצן אַנאַמיישאַן ווען קלאָוזינג, מאַכן זיכער אַז זיי האָבן די .fade
און .in
קלאסן שוין געווענדט צו זיי.
$().alert()
מאכט אַ פלינק צו הערן פֿאַר קליק געשעענישן אויף אָפּשטאַמלינג עלעמענטן וואָס האָבן די data-dismiss="alert"
אַטריביוט. (ניט נייטיק ווען ניצן די דאַטן-אַפּי ס אַוטאָ-ינטאַליאַזיישאַן.)
$().alert('close')
קלאָוזיז אַ פלינק דורך רימוווינג עס פון די DOM. אויב די .fade
און .in
קלאסן זענען פאָרשטעלן אויף דעם עלעמענט, די פלינק וועט וועלקן אויס איידער עס איז אַוועקגענומען.
Bootstrap ס פלינק פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
נאָענט.בס.אַלערט | דער געשעעניש פירט גלייך ווען דער close בייַשפּיל אופֿן איז גערופן. |
פֿאַרמאַכט.בס.אַלערט | דער געשעעניש איז פייערד ווען די פלינק איז פארמאכט (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
טאָן מער מיט קנעפּלעך. קאָנטראָל קנעפּלעך אָדער שאַפֿן גרופּעס פון קנעפּלעך פֿאַר מער קאַמפּאָונאַנץ ווי טאָאָלבאַרס.
פירעפאָקס בלייַבט פאָרעם קאָנטראָל שטאַטן (פאַרקריפּלט און אָפּגעשטעלט) איבער בלאַט לאָודז . א וואָרקאַראָונד פֿאַר דעם איז צו נוצן autocomplete="off"
. זען מאָזיללאַ זשוק #654072 .
לייג data-loading-text="Loading..."
צו נוצן אַ לאָודינג שטאַט אויף אַ קנעפּל.
דער שטריך איז דיפּרישיייטיד זינט וו3.3.5 און איז אַוועקגענומען אין וו4.
פֿאַר דעם דעמאַנסטריישאַן, מיר נוצן data-loading-text
און $().button('loading')
, אָבער דאָס איז נישט דער בלויז שטאַט איר קענען נוצן. זען מער אויף דעם אונטן אין די $().button(string)
דאַקיומענטיישאַן .
לייג data-toggle="button"
צו אַקטאַווייט טאַגאַלינג אויף אַ איין קנעפּל.
.active
אוןaria-pressed="true"
פֿאַר פאַר-טאַגאַלד קנעפּלעך, איר מוזן לייגן די .active
קלאַס און די aria-pressed="true"
אַטריביוט צו די button
זיך.
לייג data-toggle="buttons"
צו אַ .btn-group
מיט טשעקקבאָקס אָדער ראַדיאָ ינפּוץ צו געבן טאַגאַלינג אין זייער ריספּעקטיוו סטיילז.
.active
פֿאַר פּריסעלעקטעד אָפּציעס, איר מוזן לייגן די .active
קלאַס צו די אַרייַנשרייַב label
זיך.
אויב די אָפּגעשטעלט שטאַט פון אַ טשעקקבאָקס קנעפּל איז דערהייַנטיקט אָן פירינג אַ click
געשעעניש אויף דעם קנעפּל (למשל דורך <input type="reset">
אָדער דורך באַשטעטיקן די checked
פאַרמאָג פון די אַרייַנשרייַב), איר וועט דאַרפֿן צו באַשטימען די .active
קלאַס אויף די אַרייַנשרייַב ס label
זיך.
$().button('toggle')
באַשטימען די שטופּן שטאַט. גיט דעם קנעפּל די אויסזען אַז עס איז אַקטיווייטיד.
$().button('reset')
רעסעץ קנעפּל שטאַט - סוואַפּס טעקסט צו אָריגינעל טעקסט. דער אופֿן איז ייסינגקראַנאַס און קערט איידער די רעסעטטינג איז אַקשלי געענדיקט.
$().button(string)
סוואַפּס טעקסט צו קיין דאַטן דיפיינד טעקסט שטאַט.
פלעקסאַבאַל פּלוגין וואָס ניצט אַ האַנדפול פון קלאסן פֿאַר גרינג טאַגאַל נאַטור.
ייַנבראָך ריקווייערז די טראַנזישאַנז פּלוגין צו זיין אַרייַנגערעכנט אין דיין ווערסיע פון באָאָטסטראַפּ.
דריקט אויף די קנעפּלעך אונטן צו ווייַזן און באַהאַלטן אן אנדער עלעמענט דורך קלאַס ענדערונגען:
.collapse
באַהאַלט אינהאַלט.collapsing
איז געווענדט בעשאַס טראַנזישאַנז.collapse.in
ווייזט אינהאַלטאיר קענען נוצן אַ לינק מיט די href
אַטריביוט, אָדער אַ קנעפּל מיט די data-target
אַטריביוט. אין ביידע קאַסעס, עס data-toggle="collapse"
איז פארלאנגט.
פאַרברייטערן די פעליקייַט ייַנבראָך נאַטור צו שאַפֿן אַ אַקאָרדיאַן מיט די טאַפליע קאָמפּאָנענט.
עס איז אויך מעגלעך צו ויסבייַטן .panel-body
s מיט .list-group
s.
זייט זיכער צו לייגן aria-expanded
צו די קאָנטראָל עלעמענט. דער אַטריביוט דיפיינז בפירוש די קראַנט שטאַט פון די קאַלאַפּסאַבאַל עלעמענט צו פאַרשטעלן לייענער און ענלעך אַסיסטאַנץ טעקנאַלאַדזשיז. אויב די קאַלאַפּסאַבאַל עלעמענט איז פארמאכט דורך פעליקייַט, עס זאָל האָבן אַ ווערט פוןaria-expanded="false"
. אויב איר האָט באַשטימט די קאַלאַפּסאַבאַל עלעמענט צו זיין אָפן דורך פעליקייַט ניצן די in
קלאַס, שטעלן aria-expanded="true"
אויף די קאָנטראָל אַנשטאָט. דער פּלוגין וועט אויטאָמאַטיש באַשטימען דעם אַטריביוט באזירט אויף צי די קאַלאַפּסאַבאַל עלעמענט איז געעפנט אָדער פֿאַרמאַכט.
אַדדיטיאָנאַללי, אויב דיין קאָנטראָל עלעמענט איז טאַרגאַטינג אַ איין קאַלאַפּסאַבאַל עלעמענט - ד"ה די data-target
אַטריביוט איז ווייזן צו אַ id
סעלעקטאָר - איר קען לייגן אַן נאָך aria-controls
אַטריביוט צו די קאָנטראָל עלעמענט, וואָס כּולל id
די קאַלאַפּסאַבאַל עלעמענט. מאָדערן סקרין לייענער און ענלעך אַסיסטאַנץ טעקנאַלאַדזשיז נוצן דעם אַטריביוט צו צושטעלן יוזערז נאָך דורכוועג צו נאַוויגירן גלייך צו די קאַלאַפּסאַבאַל עלעמענט זיך.
די ייַנבראָך פּלוגין ניצט אַ ביסל קלאסן צו שעפּן די שווער ליפטינג:
.collapse
באַהאַלט דעם אינהאַלט.collapse.in
ווייזט די אינהאַלט.collapsing
איז מוסיף ווען די יבערגאַנג סטאַרץ, און אַוועקגענומען ווען עס ענדיקןדי קלאסן קענען זיין געפֿונען אין component-animations.less
.
נאָר לייגן data-toggle="collapse"
און אַ data-target
צו דעם עלעמענט צו אויטאָמאַטיש באַשטימען קאָנטראָל פון אַ קאַלאַפּסאַבאַל עלעמענט. דער data-target
אַטריביוט אַקסעפּץ אַ CSS סעלעקטאָר צו צולייגן די ייַנבראָך. זייט זיכער צו לייגן די קלאַס collapse
צו די קאַלאַפּסאַבאַל עלעמענט. אויב איר ווילט אַז עס זאָל זיין פעליקייַט עפענען, לייגן די נאָך קלאַס in
.
צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל קאָנטראָל, לייגן די דאַטן אַטריביוט data-parent="#selector"
. אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף.
געבן מאַניואַלי מיט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-parent=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
פאָטער | סעלעקטאָר | פאַלש | אויב אַ סעלעקטאָר איז צוגעשטעלט, אַלע קאַלאַפּסאַבאַל עלעמענטן אונטער די ספּעסיפיעד פאָטער וועט זיין פארמאכט ווען דעם קאַלאַפּסאַבאַל נומער איז געוויזן. (ענלעך צו טראדיציאנעלן אַקאָרדיאַן נאַטור - דאָס איז אָפענגיק אויף די panel קלאַס) |
טאַגאַל | בוליאַן | אמת | טאָגלעס די קאַלאַפּסאַבאַל עלעמענט אויף ינוואָקאַטיאָן |
.collapse(options)
אַקטאַווייץ דיין אינהאַלט ווי אַ קאַלאַפּסאַבאַל עלעמענט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object
.
.collapse('toggle')
טאָגלעס אַ קאַלאַפּסאַבאַל עלעמענט צו געוויזן אָדער פאַרבאָרגן. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.collapse
אָדער hidden.bs.collapse
געשעעניש אַקערז).
.collapse('show')
ווייזט אַ קאַלאַפּסאַבאַל עלעמענט. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז פאקטיש געוויזן (ד"ה איידער די shown.bs.collapse
געשעעניש אַקערז).
.collapse('hide')
כיידז אַ קאַלאַפּסאַבאַל עלעמענט. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.collapse
געשעעניש אַקערז).
Bootstrap ס ייַנבראָך קלאַס יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין ייַנבראָך פאַנגקשאַנאַליטי.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.collapse | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.ייַנבראָך | דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.collapse | דעם געשעעניש איז פייערד מיד ווען דער hide אופֿן איז גערופן. |
פאַרבאָרגן.בס.ייַנבראָך | דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
א סלידעשאָוו קאָמפּאָנענט פֿאַר סייקלינג דורך עלעמענטן, ווי אַ קעראַסעל. נעסטעד קעראַסאַלז זענען נישט געשטיצט.
די קעראַסעל קאָמפּאָנענט איז בכלל נישט געהאָרכיק מיט אַקסעסאַביליטי סטאַנדאַרדס. אויב איר דאַרפֿן צו זיין געהאָרכיק, ביטע באַטראַכטן אנדערע אָפּציעס פֿאַר פּריזענטינג דיין אינהאַלט.
באָאָטסטראַפּ ניצט אויסשליסלעך CSS3 פֿאַר זיין אַנאַמיישאַנז, אָבער Internet Explorer 8 און 9 שטיצן נישט די נייטיק CSS פּראָפּערטיעס. אזוי, עס זענען קיין רוק יבערגאַנג אַנאַמיישאַנז ווען איר נוצן די בראַוזערז. מיר האָבן בעקיוון באַשלאָסן נישט צו אַרייַננעמען jQuery-באזירט פאָלבאַקס פֿאַר די טראַנזישאַנז.
די .active
קלאַס דאַרף זיין מוסיף צו איינער פון די סליידז. אַנדערש, די קעראַסעל וועט נישט זיין קענטיק.
די .glyphicon .glyphicon-chevron-left
און .glyphicon .glyphicon-chevron-right
קלאסן זענען ניט דאַווקע דארף פֿאַר די קאָנטראָלס. באָאָטסטראַפּ גיט .icon-prev
און .icon-next
ווי קלאָר אוניקאָד אַלטערנאַטיוועס.
לייג קאַפּשאַנז צו דיין סליידז לייכט מיט דעם .carousel-caption
עלעמענט אין קיין .item
. אָרט כּמעט קיין אַפּשאַנאַל HTML אין עס און עס וועט זיין אויטאָמאַטיש אַליינד און פאָרמאַטטעד.
קעראַסאַלז דאַרפן די נוצן פון אַן id
אויף די ויסווייניקסט קאַנטיינער (די .carousel
) פֿאַר קעראַסעל קאָנטראָלס צו פונקציאָנירן רעכט. ווען אַדינג קייפל קעראַסאַלז, אָדער ווען טשאַנגינג אַ קעראַסעל id
, זיין זיכער צו דערהייַנטיקן די באַטייַטיק קאָנטראָלס.
ניצן דאַטן אַטריביוץ צו לייכט קאָנטראָלירן די שטעלע פון די קעראַסעל. data-slide
אַקסעפּץ די טערמינען prev
אָדער next
, וואָס ענדערונגען די רוק שטעלע קאָרעוו צו זייַן קראַנט שטעלע. אַלטערנאַטיוועלי, נוצן data-slide-to
צו פאָרן אַ רוי רוק אינדעקס צו די קעראַסעל data-slide-to="2"
, וואָס שיפץ די רוק שטעלע צו אַ באַזונדער אינדעקס אָנהייב מיט 0
.
דער data-ride="carousel"
אַטריביוט איז געניצט צו צייכן אַ קעראַסעל ווי אַנאַמייטינג סטאַרטינג בייַ בלאַט מאַסע. עס קענען ניט זיין געוויינט אין קאָמבינאַציע מיט (יבעריק און ומנייטיק) יקספּליסאַט דזשאַוואַסקריפּט יניטיאַליזאַטיאָן פון דער זעלביקער קעראַסעל.
רופן קעראַסעל מאַניואַלי מיט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-interval=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
מעהאַלעך | נומער | 5000 | די סומע פון צייט צו פאַרהאַלטן צווישן אויטאָמאַטיש סייקלינג אַ נומער. אויב פאַלש, קעראַסעל וועט נישט אויטאָמאַטיש ציקל. |
פּויזע | שטריקל | null | "שוועבן" | אויב שטעלן צו "hover" , פּאָזאַז די סייקלינג פון די קעראַסעל אויף mouseenter און ריסומז די סייקלינג פון די קעראַסעל אויף mouseleave . אויב שטעלן צו null , כאַווערינג איבער די קעראַסעל וועט נישט פּויזע עס. |
ייַנוויקלען | בוליאַן | אמת | צי די קעראַסעל זאָל קאַנטיניואַסלי ציקל אָדער האָבן שווער סטאַפּס. |
קיבארד | בוליאַן | אמת | צי די קעראַסעל זאָל רעאַגירן צו קלאַוויאַטור געשעענישן. |
.carousel(options)
יניטיאַליזעס די קעראַסעל מיט אַפּשאַנאַל אָפּציעס object
און סטאַרץ סייקלינג דורך זאכן.
.carousel('cycle')
סיקאַלז דורך די קעראַסעל זאכן פון לינקס צו רעכט.
.carousel('pause')
סטאַפּס די קעראַסעל פון סייקלינג דורך זאכן.
.carousel(number)
סיקלעס די קעראַסעל צו אַ באַזונדער ראַם (0 באזירט, ענלעך צו אַ מענגע).
.carousel('prev')
סיקלעס צו די פריערדיקע נומער.
.carousel('next')
סיקלעס צו דער ווייַטער נומער.
Bootstrap ס קעראַסעל קלאַס יקספּאָוזיז צוויי געשעענישן פֿאַר כוקינג אין קעראַסעל פאַנגקשאַנאַליטי.
ביידע געשעענישן האָבן די פאלגענדע נאָך פּראָפּערטיעס:
direction
: די ריכטונג אין וואָס די קעראַסעל איז סליידינג (אָדער "left"
אָדער "right"
).relatedTarget
: דער DOM עלעמענט וואָס איז סליד אין פּלאַץ ווי די אַקטיוו נומער.אַלע קעראַסעל געשעענישן זענען פייערד בייַ די קעראַסעל זיך (ד"ה בייַ די <div class="carousel">
).
געשעעניש טיפּ | באַשרייַבונג |
---|---|
slide.bs.carousel | דער געשעעניש פירט גלייך ווען דער slide בייַשפּיל אופֿן איז ינוואָוקט. |
סליד.בס.קעראַסעל | דעם געשעעניש איז פייערד ווען די קעראַסעל האט געענדיקט זיין רוק יבערגאַנג. |
די אַפיקס פּלוגין טאַגאַלז position: fixed;
אויף און אַוועק, עמיאַלייטינג די ווירקונג געפֿונען מיט position: sticky;
. די סובנאַוויגיישאַן אויף די רעכט איז אַ לעבן דעמאָ פון די אַפיקס פּלוגין.
ניצן די אַפיקס פּלוגין דורך דאַטן אַטריביוץ אָדער מאַניואַלי מיט דיין אייגענע דזשאַוואַסקריפּט. אין ביידע סיטואַטיאָנס, איר מוזן צושטעלן CSS פֿאַר די פּאַזישאַנינג און ברייט פון דיין אַפיקסט אינהאַלט.
באַמערקונג: דו זאלסט נישט נוצן די אַפיקס פּלוגין אויף אַן עלעמענט קאַנטיינד אין אַ לעפיערעך פּאַזישאַנד עלעמענט, אַזאַ ווי אַ פּולד אָדער פּושט זייַל, רעכט צו אַ סאַפאַרי רענדערינג זשוק .
די אַפיקס פּלוגין טאַגאַלז צווישן דריי קלאסן, יעדער רעפּריזענטינג אַ באַזונדער שטאַט: .affix
, .affix-top
, און .affix-bottom
. איר מוזן צושטעלן די סטיילז, מיט די ויסנעם פון position: fixed;
אויף .affix
, פֿאַר די קלאסן זיך (פרייַ פון דעם פּלוגין) צו שעפּן די פאַקטיש שטעלעס.
דאָ ס ווי די אַפיקס פּלוגין אַרבעט:
.affix-top
צו אָנווייַזן אַז דער עלעמענט איז אין זיין שפּיץ-מערסט שטעלע. אין דעם פונט קיין CSS פּאַזישאַנינג איז פארלאנגט..affix
ריפּלייסיז .affix-top
און שטעלט position: fixed;
(צוגעשטעלט דורך Bootstrap ס CSS)..affix
מיט .affix-bottom
. זינט אָפסעץ זענען אַפּשאַנאַל, באַשטעטיקן איינער ריקווייערז איר צו שטעלן די צונעמען CSS. אין דעם פאַל, לייגן position: absolute;
אויב נייטיק. דער פּלוגין ניצט די דאַטן אַטריביוט אָדער דזשאַוואַסקריפּט אָפּציע צו באַשליסן ווו צו שטעלן דעם עלעמענט פֿון דאָרט.גיי די אויבן סטעפּס צו שטעלן דיין CSS פֿאַר איינער פון די באַניץ אָפּציעס אונטן.
צו לייכט לייגן אַפיקס נאַטור צו קיין עלעמענט, נאָר לייגן data-spy="affix"
צו די עלעמענט איר ווילן צו שפּיאָן אויף. ניצן אָפסעץ צו דעפינירן ווען צו טאַגאַל די פּינינג פון אַן עלעמענט.
רופן די אַפיקס פּלוגין דורך דזשאַוואַסקריפּט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-offset-top="200"
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אָפסעט | נומער | פֿונקציע | כייפעץ | 10 | פּיקסעלס צו פאָטאָ פון פאַרשטעלן ווען קאַלקיאַלייטינג די שטעלע פון די מעגילע. אויב אַ איין נומער איז צוגעשטעלט, די פאָטאָ וועט זיין געווענדט אין ביידע שפּיץ און דנאָ אינסטרוקציעס. צו צושטעלן אַ יינציק, דנאָ און שפּיץ פאָטאָ נאָר צושטעלן אַ כייפעץ offset: { top: 10 } אָדער offset: { top: 10, bottom: 5 } . ניצן אַ פֿונקציע ווען איר דאַרפֿן צו דינאַמיקאַללי רעכענען אַ פאָטאָ. |
ציל | סעלעקטאָר | נאָדע | jQuery עלעמענט | די window כייפעץ |
ספּעציפיצירט די ציל עלעמענט פון די אַפיקס. |
.affix(options)
אַקטאַווייץ דיין אינהאַלט ווי אַפיקסט אינהאַלט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object
.
.affix('checkPosition')
רעקאַלקולאַטעס די שטאַט פון די אַפיקס באזירט אויף די דימענשאַנז, שטעלע און מעגילע שטעלע פון די באַטייַטיק עלעמענטן. די .affix
, .affix-top
, און .affix-bottom
קלאסן זענען מוסיף צו אָדער אַוועקגענומען פון די אַפיקסט אינהאַלט לויט די נייַע שטאַט. דער אופֿן דאַרף זיין גערופֿן ווען די דימענשאַנז פון די אַפיקסט אינהאַלט אָדער די ציל עלעמענט זענען פארענדערט, צו ענשור די ריכטיק פּאַזישאַנינג פון די אַפיקסט אינהאַלט.
באָאָטסטראַפּ ס אַפיקס פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין אַפיקס פאַנגקשאַנאַליטי.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
affix.bs.affix | דעם געשעעניש פירז מיד איידער די עלעמענט איז אַפיקסט. |
אַפיקסט.בס.אַפפיקס | דעם געשעעניש איז פייערד נאָך די עלעמענט איז אַפיקסט. |
affix-top.bs.affix | דעם געשעעניש פירז מיד איידער די עלעמענט איז געווען אַפיקסט-שפּיץ. |
אַפיקסט-שפּיץ.בס.אַפפיקס | דעם געשעעניש איז פייערד נאָך די עלעמענט איז געווען אַפיקסט-שפּיץ. |
affix-bottom.bs.affix | דעם געשעעניש פירז מיד איידער די עלעמענט איז געווען אַפיקסט-דנאָ. |
אַפיקסעד-bottom.bs.affix | דעם געשעעניש איז פייערד נאָך די עלעמענט איז געווען אַפיקסט-דנאָ. |