יחיד אָדער צונויפגעשטעלט

פּלוגינס קענען זיין אַרייַנגערעכנט ינדיווידזשואַלי (כאָטש עטלעכע האָבן פארלאנגט דיפּענדאַנסיז), אָדער אַלע אין אַמאָל. ביידע bootstrap.js און bootstrap.min.js אַנטהאַלטן אַלע פּלוגינס אין אַ איין טעקע.

דאַטן אַטריביוץ

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

אין עטלעכע סיטואַטיאָנס, עס קען זיין דיזייראַבאַל צו קער אַוועק די פאַנגקשאַנאַליטי. דעריבער, מיר אויך צושטעלן די פיייקייט צו דיסייבאַל די דאַטן אַטריביוט אַפּי דורך אַנבינדינג אַלע געשעענישן אויף דעם גוף מיט אַ נאָמען מיט `'data-api'`. דאָס קוקט ווי דאָס:

$ ( 'גוף' ). אַוועק ( '.דאַטאַ-אַפּי' )

אַלטערנאַטיוועלי, צו ציל אַ ספּעציפיש פּלוגין, נאָר אַרייַן די נאָמען פון דעם פּלוגין ווי אַ נאַמעספּאַסע צוזאמען מיט די דאַטן-אַפּי נאַמעספּאַסע ווי דאָס:

$ ( 'גוף' ). אַוועק ( '.alert.data-api' )

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

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

$ ( ".בטנ.דאַנגער" ). קנעפּל ( "טאַגאַל" ). addClass ( "פעט" )

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

$ ( "#מימאָדאַל" ). מאָדאַל () // יניטיאַליזעד מיט דיפאָלץ                       
$ ( "#מימאָדאַל" ). מאָדאַל ({ קלאַוויאַטור : פאַלש }) // יניטיאַלייזד מיט קיין קלאַוויאַטור     
$ ( "#מימאָדאַל" ). מאָדאַל ( 'ווייַזן' ) // יניטיאַלייזיז און ינוואָוקס ווייַזן מיד                

יעדער פּלוגין אויך יקספּאָוזיז זיין רוי קאָנסטרוקטאָר אויף אַ 'קאָנסטרוקטאָר' פאַרמאָג: $.fn.popover.Constructor. אויב איר'ד ווי צו באַקומען אַ באַזונדער פּלוגין בייַשפּיל, צוריקקריגן עס גלייַך פֿון אַן עלעמענט: $('[rel=popover]').data('popover').

קיין קאָנפליקט

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

var bootstrapButton = $ . fn . קנעפּל . נאָקאָנפליקט () // צוריקקומען $. פנ.קנעפּל צו פריער אַסיינד ווערט 
$ . fn . bootstrapBtn = bootstrapButton             // געבן $().bootstrapBtn די באָאָטסטראַפּ פאַנגקשאַנאַליטי

געשעענישן

Bootstrap גיט מנהג events פֿאַר רובֿ יינציק אַקשאַנז פון פּלוגין. בכלל, די קומען אין אַ ינפיניטיווע און פאַרגאַנגענהייט באַטייליקונג פאָרעם - ווו די ינפיניטיווע (למשל show) איז טריגערד אין די אָנהייב פון אַ געשעעניש, און זייַן פאַרגאַנגענהייט באַטייליקונג פאָרעם (למשל shown) איז צינגל אויף די קאַמפּלישאַן פון אַ קאַמף.

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

$ ( '#מימאָדאַל' ). אויף ( 'ווייַזן' , פֿונקציע ( e ) {   
    אויב (! דאַטן ) צוריקקומען ע . preventDefault () // סטאַפּס מאָדאַל פון זייַענדיק געוויזן   
})

וועגן טראַנזישאַנז

פֿאַר פּשוט יבערגאַנג יפעקץ, אַרייַננעמען bootstrap-transition.js אַמאָל צוזאמען מיט די אנדערע JS טעקעס. אויב איר נוצן די צונויפגעשטעלט (אָדער מינאַפייד) bootstrap.js , עס איז ניט דאַרפֿן צו אַרייַננעמען דעם - עס איז שוין דאָרט.

ניצן קאַסעס

עטלעכע ביישפילן פון די יבערגאַנג פּלוגין:

• סליידינג אָדער פאַדינג אין מאָדס
• פאַרקלענערן די טאַבס
• פיידינג אויס אַלערץ
• סליידינג קעראַסעל פּאַנאַלז

ביישפילן

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

סטאַטיק בייַשפּיל

א רענדערד מאָדאַל מיט כעדער, גוף און גאַנג פון אַקשאַנז אין די פוטער.

<דייוו קלאַס = "מאָדאַל באַהאַלטן וועלקן" > 
  <דייוו קלאַס = "מאָדאַל-כעדער" > 
    <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > & מאל; </button>    
    <h3> מאָדאַל כעדער </h3>
  </div>
  <דייוו קלאַס = "מאָדאַל גוף" > 
    <p> איין פייַן גוף ... </p>
  </div>
  <דייוו קלאַס = "מאָדאַל-פאָטער" > 
    <a href = "#" class = "btn" > נאָענט </a>  
    <a href = "#" class = "btn btn-primary" > היט ענדערונגען </a>  
  </div>
</div>

לעבן דעמאָ

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

<!-- קנעפּל צו צינגל מאָדאַל -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > קאַטער דעמאָ מאָדאַל </a>    
 
<!-- מאָדאַל -->
<div id = "myModal" class = "מאָדאַל באַהאַלטן וועלקן" tabindex = "-1" ראָלע = "דיאַלאָג" aria-labelledby = "myModalLabel" aria-hidden = "אמת" >      
  <דייוו קלאַס = "מאָדאַל-כעדער" > 
    <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > × </button>    
    <h3 id = "myModalLabel" > מאָדאַל כעדער </h3> 
  </div>
  <דייוו קלאַס = "מאָדאַל גוף" > 
    <p> איין פייַן גוף ... </p>
  </div>
  <דייוו קלאַס = "מאָדאַל-פאָטער" > 
    <button class = "btn" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > נאָענט </button>   
    <button class = "btn btn-primary" > היט ענדערונגען </button> 
  </div>
</div>

באַניץ

דורך דאַטן אַטריביוץ

אַקטאַווייט אַ מאָדאַל אָן שרייבן דזשאַוואַסקריפּט. שטעלן data-toggle="modal"אויף אַ קאָנטראָללער עלעמענט, ווי אַ קנעפּל, צוזאמען מיט אַ data-target="#foo"אָדער href="#foo"צו ציל אַ ספּעציפיש מאָדאַל צו טאַגאַל.

<button type = "button" data-toggle = "מאָדאַל" data-target = "#myModal" > קאַטער מאָדאַל </button>   

דורך דזשאַוואַסקריפּט

רופן אַ מאָדאַל מיט שייַן myModalמיט אַ איין שורה פון דזשאַוואַסקריפּט:

$ ( '#מימאָדאַל' ). מאָדאַל ( אָפּציעס )

אָפּציעס

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

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

מעטהאָדס

.מאָדאַל (אָפּציעס)

אַקטאַווייץ דיין אינהאַלט ווי אַ מאָדאַל. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

$ ( '#מימאָדאַל' ). מאָדאַל ({
  קלאַוויאַטור : פאַלש 
})

.modal('טאַגאַל')

מאַניואַלי טאַגאַלז אַ מאָדאַל.

$ ( '#מימאָדאַל' ). מאָדאַל ( 'טאַגאַל' )

.modal('ווייַזן')

מאַניואַלי אָפּענס אַ מאָדאַל.

$ ( '#מימאָדאַל' ). מאָדאַל ( 'ווייַזן' )

.modal('באַהאַלטן')

מאַניואַלי כיידז אַ מאָדאַל.

$ ( '#מימאָדאַל' ). מאָדאַל ( 'באַהאַלטן' )

געשעענישן

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

$ ( '#מימאָדאַל' ). אויף ( 'פאַרבאָרגן' , פֿונקציע () {   
  // טאָן עפּעס ...
})

ביישפילן

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

ין אַ נאַוובאַר

ין טאַבס

באַניץ

דורך דאַטן אַטריביוץ

לייג data-toggle="dropdown"צו אַ לינק אָדער קנעפּל צו באַשטימען אַ דראָפּדאָוון.

<דייוו קלאַס = "דראָפּדאָוון" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > דראָפּדאָוון צינגל </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

צו האַלטן URL ס בעשאָלעם, נוצן די data-targetאַטריביוט אַנשטאָט פון href="#".

<דייוו קלאַס = "דראָפּדאָוון" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    דראָפּדאָוון
    <b class = "קאַרעט" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

דורך דזשאַוואַסקריפּט

רופן די דראָפּדאָוונס דורך דזשאַוואַסקריפּט:

$ ( '.דראָפּדאָוון-טאַגאַל' ). דראָפּדאָוון ()

אָפּציעס

קיינער

מעטהאָדס

$().דראָפּדאָוון('טאַגאַל')

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

בייַשפּיל אין נאַוובאַר

די ScrollSpy פּלוגין איז פֿאַר אויטאָמאַטיש אַפּדייטינג נאַוו טאַרגאַץ באזירט אויף מעגילע שטעלע. מעגילע די געגנט אונטער די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן. די דראָפּדאָוון סאַב-ייטאַמז וועט זיין כיילייטיד אויך.

באַניץ

דורך דאַטן אַטריביוץ

צו לייכט לייגן סקראָלספּי נאַטור צו דיין טאַפּבאַר נאַוויגאַציע, נאָר לייגן data-spy="scroll"צו די עלעמענט איר ווילן צו שפּיאָן אויף (רובֿ טיפּיקלי דאָס וואָלט זיין דער גוף) און data-target=".navbar"צו אויסקלייַבן וואָס נאַוו צו נוצן. איר וועט וועלן צו נוצן סקראָלספּי מיט אַ .navקאָמפּאָנענט.

<body data-spy = "מעגילע" data-target = ".נאַוובאַר" > ... </body>  

דורך דזשאַוואַסקריפּט

רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:

$ ( '# נאַוובאַר' ). סקראָלספּי ()

מעטהאָדס

.סקראָלספּי('דערפרישן')

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

$ ( '[דאַטן-שפּיאָן = מעגילע"]' ). יעדער ( פונקציע () {  
  וואַר $ספּיאָן = $ ( דעם ). סקראָלספּי ( 'דערפרישן' )
});

אָפּציעס

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

געשעענישן

בייַשפּיל טאַבס

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

באַניץ

געבן טאַבאַבלע טאַבס דורך דזשאַוואַסקריפּט (יעדער קוויטל דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

$ ( '#מיין טאַב אַ' ). גיט ( פֿונקציע ( e ) {  
  ע . פאַרהיטןDefault ();
  $ ( דעם ). קוויטל ( 'ווייַזן' );
})

איר קענען אַקטאַווייט יחיד טאַבס אין עטלעכע וועגן:

$ ( '#מיטאַב אַ[הרעף="#פּראָפיל"]' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן קוויטל דורך נאָמען 
$ ( '#myTab a:first' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן ערשטער קוויטל 
$ ( '#myTab a:last' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן לעצט קוויטל 
$ ( '#myTab li:eq(2) a' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן דריט קוויטל (0-ינדעקסט) 

מאַרקאַפּ

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן data-toggle="tab"אָדער data-toggle="pill"אויף אַן עלעמענט. אַדינג די navאון nav-tabsקלאסן צו די קוויטל ulוועט צולייגן די Bootstrap קוויטל סטילינג.

<ul class = "נאַוו נאַוו-טאַבס" > 
  <li><a href = "#היים" data-toggle = "tab" > היים </a></li>  
  <li><a href = "#פּראָפיל" data-toggle = "tab" > פּראָפיל </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > אַרטיקלען </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > סעטטינגס </a></li>  
</ul>

מעטהאָדס

$().tab

אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-targetאָדער אַ hrefטאַרגאַטינג אַ קאַנטיינער נאָדע אין די DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > היים </a></li>  
  <li><a href = "#פּראָפיל" > פּראָפיל </a></li> 
  <li><a href = "#מעססאַגעס" > אַרטיקלען </a></li> 
  <li><a href = "#סעטטינגס" > סעטטינגס </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "היים" > ... </div>  
  <div class = "tab-pane" id = "פּראָפיל" > ... </div>  
  <div class = "tab-pane" id = " אַרטיקלען " > ... </div>  
  <div class = "tab-pane" id = "סעטטינגס" > ... </div>  
</div>
 
<שריפט>
  $ ( פונקציע () {  
    $ ( '#myTab a:last' ). קוויטל ( 'ווייַזן' );
  })
</script>

געשעענישן

$ ( 'אַ [דאַטן-טאָגגל ​​= "טאַב"]' ). אויף ( 'געוויזן' , פֿונקציע ( e ) {   
  ע . ציל // אַקטיווייטיד קוויטל
  ע . RelatedTarget // פרייַערדיק קוויטל
})

ביישפילן

ינספּייערד דורך די ויסגעצייכנט jQuery.tipsy פּלוגין געשריבן דורך Jason Frame; Tooltips זענען אַ דערהייַנטיקט ווערסיע וואָס טאָן ניט פאַרלאָזנ זיך בילדער, נוצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.

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

האָווער אויף די לינקס אונטן צו זען מכשירים:

פיר אינסטרוקציעס

מכשירים אין אַרייַנשרייַב גרופּעס

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

באַניץ

צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:

$ ( '#עקסאַמפּלע' ). tooltip ( אָפּציעס )

אָפּציעס

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

מאַרקאַפּ

<a href = "#" data-toggle = "tooltip" title = "ערשטער Tooltip" > הייב איבער מיר </a>   

מעטהאָדס

$().מכשיר עצה(אָפּציעס)

אַטאַטשיז אַ טאָאָלטיפּ האַנדלער צו אַן עלעמענט זאַמלונג.

.tooltip('ווייַזן')

ריווילז אַן עלעמענט ס מכשירים.

$ ( '# עלעמענט' ). tooltip ( 'ווייַזן' )

.tooltip('באַהאַלטן')

באַהאַלט אַן עלעמענט ס מכשירים.

$ ( '# עלעמענט' ). tooltip ( 'באַהאַלטן' )

.tooltip('טאַגאַל')

טאָגלעס אַן עלעמענט ס מכשירים.

$ ( '# עלעמענט' ). tooltip ( 'טאַגאַל' )

.tooltip('פאַרניכטן')

באַהאַלטן און דיסטרויז אַן עלעמענט ס מכשירים.

$ ( '# עלעמענט' ). tooltip ( 'פאַרניכטן' )

ביישפילן

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

סטאַטיק פּאָווער

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

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

לעבן דעמאָ

פיר אינסטרוקציעס

באַניץ

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

$ ( '#עקסאַמפּלע' ). פּאָפּאָווער ( אָפּציעס )

אָפּציעס

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

מאַרקאַפּ

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

מעטהאָדס

$().פּאָפּאָווער(אָפּציעס)

יניטיאַליזעס פּאָפּאָווערס פֿאַר אַן עלעמענט זאַמלונג.

.popover('ווייַזן')

ריווילז אַן עלעמענט פּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'ווייַזן' )

.popover('באַהאַלטן')

כיידז אַן עלעמענטן פּאָפּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'באַהאַלטן' )

.popover('טאַגאַל')

טאָגלעס אַן עלעמענט פּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'טאַגאַל' )

.popover('פאַרניכטן')

כיידז און דיסטרויז אַן עלעמענט ס פּאָפּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'פאַרניכטן' )

בייַשפּיל אַלערץ

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

באַניץ

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

$ ( ".אַלערט" ). פלינק ()

מאַרקאַפּ

נאָר לייגן data-dismiss="alert"צו דיין נאָענט קנעפּל צו אויטאָמאַטיש געבן אַ פלינק נאָענט פאַנגקשאַנאַליטי.

<אַ קלאַס = "נאָענט"   " data-dismiss " אַלערט" href = "#" > & מאל; </a> 

מעטהאָדס

$().אַלערט()

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

.alert('נאָענט')

קלאָוזיז אַ פלינק.

$ ( ".אַלערט" ). פלינק ( 'נאָענט' )

געשעענישן

Bootstrap ס פלינק קלאַס יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.

$ ( '#מיין-אַלערט' ). בינדן ( 'פארמאכט' , פֿונקציע ()    {
  // טאָן עפּעס ...
})

בייַשפּיל ניצט

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

סטעיטפול

לייג data-loading-text="Loading..."צו נוצן אַ לאָודינג שטאַט אויף אַ קנעפּל.

<button type = "button" class = "btn btn-primary" data-loading-text = "לאָודינג..." > לאָודינג שטאַט </button>   

איין קנעפּל

לייג data-toggle="button"צו אַקטאַווייט טאַגאַלינג אויף אַ איין קנעפּל.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > איין טאַגאַל </button>   

טשעקקבאָקס

לייג data-toggle="buttons-checkbox"פֿאַר טשעקקבאָקס נוסח טאַגאַלינג אויף btn-גרופּע.

<div class = "btn-group" data-toggle = "קנעפּל-טשעקבאָקס" >  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטן-ערשטיק" > לינקס </קנעפּל>  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > מיטל </קנעפּל>  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > רעכט </קנעפּל>  
</div>

ראַדיאָ

לייג data-toggle="buttons-radio"פֿאַר ראַדיאָ סטיל טאַגאַלינג אויף btn-גרופּע.

<div class = "btn-group" data-toggle = "קנעפּל-ראַדיאָ" >  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטן-ערשטיק" > לינקס </קנעפּל>  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > מיטל </קנעפּל>  
  <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > רעכט </קנעפּל>  
</div>

באַניץ

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

$ ( '.nav-tabs' ). קנעפּל ()

מאַרקאַפּ

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

אָפּציעס

קיינער

מעטהאָדס

$().קנעפּל('טאַגאַל')

טאַגאַלז שטופּן שטאַט. גיט דעם קנעפּל די אויסזען אַז עס איז אַקטיווייטיד.

<קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן" דאַטן-טאַגאַל = "קנעפּל" > … </button>    

$().button('לאָודינג')

באַשטעטיקט קנעפּל שטאַט צו לאָודינג - דיסייבאַלז קנעפּל און סוואַפּס טעקסט צו לאָודינג טעקסט. לאָודינג טעקסט זאָל זיין דיפיינד אויף די קנעפּל עלעמענט מיט די דאַטן אַטריביוט data-loading-text.

<button type = "button" class = "btn" data-loading-text = "לאָודינג שטאָפּן ..." > ... </button>    

$().button('באַשטעטיק')

רעסעץ קנעפּל שטאַט - סוואַפּס טעקסט צו אָריגינעל טעקסט.

$().קנעפּל(שטריקל)

רעסעץ קנעפּל שטאַט - סוואַפּס טעקסט צו קיין דאַטן דיפיינד טעקסט שטאַט.

<קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן" data-complete-text = "פאַרטיק!" > ... </button>    
<שריפט>
  $ ( '.בטן' ). קנעפּל ( 'גאַנץ' )
</script>

וועגן

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

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

בייַשפּיל אַקאָרדיאַן

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

<דייוו קלאַס = "אַקאָרדיאָן" שייַן = "אַקאָרדיאָן2" >  
  <דייוו קלאַס = "אַקאָרדיאַן-גרופּע" > 
    <דייוו קלאַס = "אַקאָרדיאַן-כעדינג" > 
      < אַ קלאַס = "אַקאָרדיאָן -טאַגאַל" data- toggle = "ייַנבראָך " דאַטן- פאָטער = "# אַקאָרדיאָן2" href = "#קאַלאַפּסעאָנע" >    
        קאַלאַפּסאַבאַל גרופע נומער #1
      </a>
    </div>
    <div id = "collapseOne" קלאַס = "אַקאָרדיאַן גוף ייַנבראָך אין" >  
      <דייוו קלאַס = "אַקאָרדיאַן-ינער" > 
        אַניוועסדיק קליינטשיק ...
      </div>
    </div>
  </div>
  <דייוו קלאַס = "אַקאָרדיאַן-גרופּע" > 
    <דייוו קלאַס = "אַקאָרדיאַן-כעדינג" > 
      < אַ קלאַס = "אַקאָרדיאָן -טאַגאַל" data- toggle = "ייַנבראָך " דאַטן- פאָטער = "# אַקאָרדיאָן2" href = "#קאַלאַפּסטוואָ" >    
        קאַלאַפּסאַבאַל גרופע נומער #2
      </a>
    </div>
    <div id = "collapseTwo" קלאַס = "אַקאָרדיאַן גוף ייַנבראָך" >  
      <דייוו קלאַס = "אַקאָרדיאַן-ינער" > 
        אַניוועסדיק קליינטשיק ...
      </div>
    </div>
  </div>
</div>
...

איר קענט אויך נוצן דעם פּלוגין אָן די אַקאָרדיאַן מאַרקאַפּ. מאַכן אַ קנעפּל טאַגאַל די יקספּאַנדינג און קאַלאַפּסינג פון אן אנדער עלעמענט.

<קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטן-דאַנגער" data-toggle = "ייַנבראָך" דאַטן-ציל = "# דעמאָ" >    
  פּשוט קאַלאַפּסאַבאַל
</button>
 
<div id = "דעמאָ" קלאַס = "ייַנבראָך אין" > … </div>  

באַניץ

דורך דאַטן אַטריביוץ

נאָר לייגן data-toggle="collapse"און אַ data-targetצו עלעמענט צו אויטאָמאַטיש באַשטימען קאָנטראָל פון אַ קאַלאַפּסאַבאַל עלעמענט. דער data-targetאַטריביוט אַקסעפּץ אַ CSS סעלעקטאָר צו צולייגן די ייַנבראָך. זייט זיכער צו לייגן די קלאַס collapseצו די קאַלאַפּסאַבאַל עלעמענט. אויב איר ווילט אַז עס זאָל זיין פעליקייַט עפענען, לייגן די נאָך קלאַס in.

צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל קאָנטראָל, לייגן די דאַטן אַטריביוט data-parent="#selector". אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף.

דורך דזשאַוואַסקריפּט

געבן מאַניואַלי מיט:

$ ( ". קאַלאַפּס" ). ייַנבראָך ()

אָפּציעס

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

מעטהאָדס

.collapse (אָפּציעס)

אַקטאַווייץ דיין אינהאַלט ווי אַ קאַלאַפּסאַבאַל עלעמענט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

$ ( '#myCollapsible' ). ייַנבראָך ({
  טאַגאַל : פאַלש 
})

.collapse('טאַגאַל')

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

.collapse('ווייַזן')

ווייזט אַ קאַלאַפּסאַבאַל עלעמענט.

.collapse('באַהאַלטן')

כיידז אַ קאַלאַפּסאַבאַל עלעמענט.

געשעענישן

Bootstrap ס ייַנבראָך קלאַס יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין ייַנבראָך פאַנגקשאַנאַליטי.

$ ( '#myCollapsible' ). אויף ( 'פאַרבאָרגן' , פֿונקציע () {   
  // טאָן עפּעס ...
})

בייַשפּיל קעראַסעל

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

ערשטער טאַמנייל פירמע

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

צווייטע טאַמנייל פירמע

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

דריט טאַמנייל פירמע

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

‹ ›

<div id = "myCarousel" קלאַס = "קעראַסעל רוק" >  
  <אָל קלאַס = "קעראַסעל-ינדיקאַטאָרס" > 
    <li data-target = "#myCarousel" data-slide-to = "0" קלאַס = "אַקטיוו" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- קאַראָוסעל זאכן -->
  <דייוו קלאַס = "קעראַסעל-ינער" > 
    <דייוו קלאַס = "אַקטיוו נומער" > … </div> 
    <דייוו קלאַס = "נומער" > … </div> 
    <דייוו קלאַס = "נומער" > … </div> 
  </div>
  <!-- קאַראָוסעל נאַוו -->
  < אַ קלאַס = "קעראַסעל-קאָנטראָל לינקס" href = "#מיקאַראָוסעל" דאַטן- רוק = "פּרעוו" > & לסאַקוו ; </a>   
  < אַ קלאַס = "קעראַסעל-קאָנטראָל רעכט" href = "#מיקאַראָוסעל" דאַטן- רוק = "ווייַטער" > & rsaquo ; </a>   
</div>

באַניץ

דורך דאַטן אַטריביוץ

ניצן דאַטן אַטריביוץ צו לייכט קאָנטראָלירן די שטעלע פון ​​די קעראַסעל. data-slideאַקסעפּץ די טערמינען prevאָדער next, וואָס ענדערונגען די רוק שטעלע קאָרעוו צו די קראַנט שטעלע. אַלטערנאַטיוועלי, נוצן data-slide-toצו פאָרן אַ רוי רוק אינדעקס צו די קעראַסעל data-slide-to="2", וואָס שפּרינגען איז די רוק שטעלע צו אַ באַזונדער אינדעקס אָנהייב מיט 0.

דורך דזשאַוואַסקריפּט

רופן קעראַסעל מאַניואַלי מיט:

$ ( '.קאַראָוסעל' ). קעראַסעל ()

אָפּציעס

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

מעטהאָדס

.קאַראָוסעל (אָפּציעס)

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

$ ( '.קאַראָוסעל' ). קעראַסעל ({
  מעהאַלעך : 2000 
})

.carousel('ציקל')

סיקאַלז דורך די קעראַסעל זאכן פון לינקס צו רעכט.

.carousel('פּזע')

סטאַפּס די קעראַסעל פון סייקלינג דורך זאכן.

.קאַראָוסעל(נומער)

סיקלעס די קעראַסעל צו אַ באַזונדער ראַם (0 באזירט, ענלעך צו אַ מענגע).

.carousel('prev')

סיקלעס צו די פריערדיקע נומער.

.carousel('ווייַטער')

סיקלעס צו דער ווייַטער נומער.

געשעענישן

Bootstrap ס קעראַסעל קלאַס יקספּאָוזיז צוויי געשעענישן פֿאַר כוקינג אין קעראַסעל פאַנגקשאַנאַליטי.

בייַשפּיל

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

<אינפּוט טיפּ = "טעקסט" data-provide = "טיפּ פאָרויס" >  

איר וועט וועלן צו שטעלן autocomplete="off"צו פאַרהיטן פעליקייַט בלעטערער מעניוז פון די דראָפּדאָוון פון Bootstrap טיפּ.

באַניץ

דורך דאַטן אַטריביוץ

לייג דאַטן אַטריביוץ צו פאַרשרייַבן אַן עלעמענט מיט טיפּאַהעאַד פאַנגקשאַנאַליטי ווי געוויזן אין דעם בייַשפּיל אויבן.

דורך דזשאַוואַסקריפּט

רופן די טיפּ-העאַד מאַניואַלי מיט:

$ ( '. טיפּאַהעאַד' ). דרוקן ()

אָפּציעס

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

מעטהאָדס

.typeahead (אָפּציעס)

יניטיאַליזעס אַ אַרייַנשרייַב מיט אַ טיפּאַהעאַד.

בייַשפּיל

די סובנאַוויגיישאַן אויף די לינקס איז אַ לעבן דעמאָ פון די אַפיקס פּלוגין.

באַניץ

דורך דאַטן אַטריביוץ

צו לייכט לייגן אַפיקס נאַטור צו קיין עלעמענט, נאָר לייגן data-spy="affix"צו די עלעמענט איר ווילן צו שפּיאָן אויף. דערנאָך נוצן אָפסעץ צו דעפינירן ווען צו באַשטימען די פּינינג פון אַן עלעמענט אויף און אַוועק.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

דורך דזשאַוואַסקריפּט

רופן די אַפיקס פּלוגין דורך דזשאַוואַסקריפּט:

$ ( '# נאַוובאַר' ). צוגעבן ()

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-offset-top="200".