Tus kheej los yog muab tso ua ke

Plugins tuaj yeem suav nrog tus kheej (txawm tias qee qhov yuav tsum muaj kev vam khom), lossis tag nrho ib zaug. Ob leeg bootstrap.js thiab bootstrap.min.js muaj tag nrho cov plugins hauv ib cov ntaub ntawv.

Cov ntaub ntawv cwj pwm

Koj tuaj yeem siv tag nrho Bootstrap plugins nkaus xwb los ntawm markup API yam tsis tau sau ib kab ntawm JavaScript. Qhov no yog Bootstrap thawj chav kawm API thiab yuav tsum yog koj thawj qhov kev txiav txim siab thaum siv lub plugin.

Uas tau hais tias, hauv qee qhov xwm txheej nws yuav tsim nyog los tua qhov kev ua haujlwm no. Yog li ntawd, peb kuj muab lub peev xwm los lov tes taw cov ntaub ntawv attribute API los ntawm unbinding tag nrho cov xwm txheej ntawm lub cev namespaced nrog 'data-api''. Qhov no zoo li no:

$ ( 'lub cev' ). tawm ( '.data-api' )

Xwb, txhawm rau tsom ib lub plugin tshwj xeeb, tsuas yog suav nrog lub plugin lub npe ua lub npe chaw nrog rau cov ntaub ntawv-api namespace zoo li no:

$ ( 'lub cev' ). tawm ( '.alert.data-api' )

Programmatic API

Peb kuj ntseeg tias koj yuav tsum tuaj yeem siv tag nrho Bootstrap plugins nkaus xwb los ntawm JavaScript API. Tag nrho cov pej xeem APIs yog ib leeg, chainable txoj kev, thiab xa rov qab cov sau ua raws li.

$ ( ".btn.danger" ). khawm ( "toggle" ). addClass ( "fat" )

Txhua txoj hauv kev yuav tsum lees txais qhov kev xaiv xaiv khoom, ib txoj hlua uas tsom rau ib txoj hauv kev, lossis tsis muaj dab tsi (uas pib lub plugin nrog tus cwj pwm tsis zoo):

$ ( "#myModal" ). modal () // pib nrog defaults                       
$ ( "#myModal" ). modal ({ keyboard : cuav }) // pib nrog tsis muaj keyboard     
$ ( "#myModal" ). modal ( 'show' ) // pib thiab invokes qhia tam sim                

Txhua lub plugin kuj nthuav tawm nws cov neeg tsim khoom nyoos ntawm 'Constructor' cov cuab yeej: $.fn.popover.Constructor. Yog tias koj xav tau ib qho plugin tshwj xeeb, muab nws ncaj qha los ntawm lub caij: $('[rel=popover]').data('popover').

Tsis muaj teeb meem

Qee zaum nws yog qhov tsim nyog los siv Bootstrap plugins nrog rau lwm qhov UI lub luag haujlwm. Hauv cov xwm txheej no, kev sib tsoo ntawm lub npe chaw tuaj yeem tshwm sim qee zaus. Yog tias qhov no tshwm sim, koj tuaj yeem hu .noConflictrau lub plugin koj xav rov qab tus nqi ntawm.

var bootstrapButton = $ . fn kev . khawm . noConflict () // xa $.fn.button rau yav tas los tus nqi 
$ . fn kev . bootstrapBtn = bootstrapButton             // muab $().bootstrapBtn lub bootstrap functionality

Cov xwm txheej

Bootstrap muab cov xwm txheej kev cai rau feem ntau plugin qhov tshwj xeeb ua. Feem ntau, cov no tuaj nyob rau hauv daim ntawv infinitive thiab yav dhau los koom nrog - qhov twg qhov infinitive (ex. show) tshwm sim thaum pib ntawm ib qho kev tshwm sim, thiab nws daim ntawv koom nrog yav dhau los (ex. shown) yog tshwm sim ntawm qhov ua tiav ntawm qhov kev txiav txim.

Tag nrho cov xwm txheej infinitive muab kev tiv thaivDefault functionality. Qhov no muab lub peev xwm los nres qhov kev txiav txim ua ntej nws pib.

$ ( '#myModal' ). ntawm ( 'show' , function ( e ) {   
    yog tias (! data ) rov e . PreventDefault () // nres modal los ntawm kev qhia   
})

Hais txog kev hloov

Rau kev hloov pauv yooj yim, suav nrog bootstrap-transition.js ib zaug nrog rau lwm cov ntaub ntawv JS. Yog tias koj siv cov compiled (los yog minified) bootstrap.js , tsis tas yuav suav nrog qhov no - nws twb muaj lawm.

Siv cov ntaub ntawv

Qee qhov piv txwv ntawm kev hloov pauv plugin:

• Sliding los yog fading nyob rau hauv modals
• Fading tawm tabs
• Fading tawm ceeb toom
• Sliding carousel panes

Piv txwv

Modals yog streamlined, tab sis saj zawg zog, dialog prompts nrog yam tsawg kawg nkaus yuav tsum tau functionality thiab ntse defaults.

Piv txwv li

Ib tug rendered modal nrog header, lub cev, thiab txheej ntawm kev ua nyob rau hauv lub footer.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "kaw" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ib lub cev zoo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn"> Kaw </a> _ _ _ _ _  
    <a href="#" class="btn btn-primary"> Txuag hloov pauv </a> _ _  
  </div>
</div>

Nyob demo

Toggle modal ntawm JavaScript los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.

<!-- Khawm los ua qauv qauv -->
<a href="#myModal" role="button" class="btn" data-toggle = "modal"> Launch demo modal </a> _ _ _ _ _    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labeledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "kaw" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ib lub cev zoo… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Kaw </button>   
    <button class = "btn btn-primary" > Txuag hloov pauv </button> 
  </div>
</div>

Kev siv

Los ntawm cov ntaub ntawv attributes

Qhib lub modal yam tsis tau sau JavaScript. Teem data-toggle="modal"rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-target="#foo"lossis href="#foo"rau lub hom phiaj ib qho kev hloov pauv.

<khawm hom = "button" data-toggle = "modal" data-target = "#myModal" > Launch modal </button>   

Ntawm JavaScript

Hu rau modal nrog id myModalnrog ib kab ntawm JavaScript:

$ ( '#myModal' ). modal ( kev xaiv )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-backdrop="".

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

Cov txheej txheem

.modal(options)

Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object.

$ ( '#myModal' ). modal ({
  keyboard : cuav 
})

.modal('toggle')

Manually toggles ib modal.

$ ( '#myModal' ). modal ( 'toggle' )

.modal('qhia')

Manually qhib lub modal.

$ ( '#myModal' ). modal ( 'qhia' )

.modal('hide')

Manually hides ib modal.

$ ( '#myModal' ). modal ( 'Hide' )

Cov xwm txheej

Bootstrap's modal class exposes ob peb txheej xwm rau hooking rau hauv modal functionality.

$ ( '#myModal' ). ntawm ( 'hidden' , function () {   
  // ua ib yam dab tsi…
})

Piv txwv

Ntxiv dropdown menus rau yuav luag txhua yam nrog no yooj yim plugin, nrog rau cov navbar, tabs, thiab tshuaj.

Nyob rau hauv ib tug navbar

Hauv tabs

Kev siv

Los ntawm cov ntaub ntawv attributes

Ntxiv data-toggle="dropdown"rau qhov txuas lossis khawm kom toggle ib qho kev poob.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

Txhawm rau khaws URLs kom zoo, siv tus data-targetcwj pwm tsis yog href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" lub luag haujlwm = "khawm" data-toggle = "dropdown" data-target = "#" href = "/page.html">      
    poob
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

Ntawm JavaScript

Hu rau dropdowns ntawm JavaScript:

$ ( '.dropdown-toggle' ). poob ( )

Kev xaiv

Tsis muaj

Cov txheej txheem

$().dropdown('toggle')

Programmatic api rau toggling menus rau ib tug muab navbar los yog tabbed navigation.

Piv txwv hauv navbar

Lub ScrollSpy plugin yog rau kev hloov kho nav lub hom phiaj raws li txoj haujlwm scroll. Scroll thaj tsam hauv qab ntawm navbar thiab saib cov chav kawm hloov pauv. Lub dropdown sub cov khoom yuav raug highlighted thiab.

Kev siv

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv tus cwj pwm scrollspy rau koj qhov topbar navigation, tsuas yog ntxiv data-spy="scroll"rau lub caij koj xav kom neeg soj xyuas rau (feem ntau qhov no yuav yog lub cev) thiab data-target=".navbar"xaiv qhov twg siv nav. Koj yuav xav siv scrollspy nrog ib .navfeem.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Ntawm JavaScript

Hu rau scrollspy ntawm JavaScript:

$ ( '#navbar' ). scrollspy ()

Cov txheej txheem

.scrollspy('refresh')

Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:

$ ( '[data-spy="scroll"]' ). txhua ( function () {  
  var $spy = $ ( this ). scrollspy ( 'tshiab' )
});

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-offset="".

Cov xwm txheej

Piv txwv tabs

Ntxiv ceev, dynamic tab functionality rau kev hloov mus los ntawm panes ntawm cov ntsiab lus hauv zos, txawm tias ntawm dropdown menus.

Kev siv

Qhib tabbable tabs ntawm JavaScript (txhua tab yuav tsum tau qhib ib tus zuj zus):

$ ( '#myTab a' ). nyem ( function ( e ) {  
  e . PreventDefault ();
  $ ( qhov no ). tab ( 'show' );
})

Koj tuaj yeem qhib ib tus neeg tab hauv ntau txoj hauv kev:

$ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Xaiv tab los ntawm lub npe 
$ ( '#myTab a: ua ntej' ). tab ( 'show' ); // Xaiv thawj tab 
$ ( '#myTab a:last' ). tab ( 'show' ); // Xaiv lub tab kawg 
$ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Xaiv thib peb tab (0-indexed) 

Markup

Koj tuaj yeem qhib lub tab lossis ntsiav tshuaj navigation yam tsis tau sau ib qho JavaScript los ntawm kev qhia yooj yim data-toggle="tab"lossis data-toggle="pill"ntawm lub ntsiab lus. Ntxiv cov navthiab nav-tabscov chav kawm rau lub tab ulyuav siv Bootstrap tab styling.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Tsev </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Profile </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Messages </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Settings </a></li >  
</ul>

Cov txheej txheem

$().tab

Activates lub tab element thiab cov ntsiab lus ntim. Tab yuav tsum muaj ib data-targetlossis ib lub hrefhom phiaj rau lub thawv ntim hauv DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home"> Tsev </a></li >  
  <li><a href = "#profile"> Profile </a> </li> 
  <li><a href = "#messages"> Messages </a> </li> 
  <li><a href = "#settings"> Chaw </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'show' );
  })
</script>

Cov xwm txheej

$ ( 'a[data-toggle="tab"]' ). on ( 'qhia' , function ( e ) {   
  e . phiaj // activated tab
  e . RelatedTarget // yav dhau los tab
})

Piv txwv

Kev tshoov siab los ntawm qhov zoo tshaj plaws jQuery.tipsy plugin sau los ntawm Jason Frame; Cov lus qhia yog ib qho kev hloov kho tshiab, uas tsis tso siab rau cov duab, siv CSS3 rau cov yeeb yaj kiab, thiab cov ntaub ntawv-tus cwj pwm rau cov npe hauv zos.

Rau cov laj thawj kev ua tau zoo, cov lus qhia thiab cov ntaub ntawv popover-apis yog xaiv rau hauv, txhais tau tias koj yuav tsum pib lawv tus kheej .

Hover tshaj qhov txuas hauv qab no kom pom cov lus qhia:

Plaub txoj kev

Cov lus qhia hauv pab pawg tswv yim

Thaum siv cov lus qhia thiab popovers nrog Bootstrap cov tswv yim pab pawg, koj yuav tau teeb tsa container(cov ntaub ntawv hauv qab no) kev xaiv kom tsis txhob muaj kev phiv tsis zoo.

Kev siv

Tig lub cuab yeej ntawm JavaScript:

$ ( '#example' ). tooltip ( Options )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "thawj tooltip" > hover over me </a>   

Cov txheej txheem

$().tooltip(options)

Txuas tus tooltip handler rau ib qho khoom sau.

.tooltip('show')

Qhia ib lub ntsiab lus qhia.

$ ( '#element' ). tooltip ( 'show' )

.tooltip('hide')

Hide ib lub ntsiab lus qhia.

$ ( '#element' ). tooltip ( 'Hide' )

.tooltip('toggle')

Toggles ib lub ntsiab lus qhia.

$ ( '#element' ). tooltip ( 'toggle' )

.tooltip('ua kom puas')

Nias thiab rhuav tshem cov ntsiab lus ntawm cov cuab yeej.

$ ( '#element' ). tooltip ( 'ua kom puas' )

Piv txwv

Ntxiv me me ntawm cov ntsiab lus, zoo li cov hauv iPad, rau txhua lub hauv paus rau cov ntaub ntawv thib ob hauv tsev. Hover tshaj lub khawm kom ua rau lub popover. Yuav tsum muaj Tooltip kom suav nrog.

Static popover

Plaub txoj kev xaiv muaj: sab saum toj, sab xis, hauv qab, thiab sab laug dlhos.

Tsis muaj qhov cim qhia tias popovers yog tsim los ntawm JavaScript thiab cov ntsiab lus hauv tus datacwj pwm.

Nyob demo

Plaub txoj kev

Kev siv

Qhib popovers ntawm JavaScript:

$ ( '#example' ). popover ( kev xaiv )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-animation="".

Markup

Rau kev ua tau zoo vim li cas, Tooltip thiab Popover cov ntaub ntawv-apis yog xaiv rau hauv. Yog tias koj xav siv lawv tsuas yog qhia qhov kev xaiv xaiv.

Cov txheej txheem

$().popover(options)

Initializes popovers rau ib qho khoom sau.

.popover('show')

Tshaj tawm cov ntsiab lus popover.

$ ( '#element' ). popover ( 'show' )

.popover('hide')

Hide cov ntsiab lus popover.

$ ( '#element' ). popover ( 'hide' )

.popover('toggle')

Toggles lub ntsiab lus popover.

$ ( '#element' ). popover ( 'toggle' )

.popover('ua kom puas')

Nias thiab rhuav tshem lub ntsiab lus popover.

$ ( '#element' ). popover ( 'ua kom puas' )

Piv txwv ceeb toom

Ntxiv tso tawm haujlwm rau tag nrho cov lus ceeb toom nrog cov plugin no.

Kev siv

Pab kom tshem tawm kev ceeb toom ntawm JavaScript:

$ ( ".alert" ). ceeb toom ( )

Markup

Tsuas yog ntxiv data-dismiss="alert"rau koj lub khawm kaw kom tau txais kev ceeb toom kaw ua haujlwm.

<a class = "kaw" data-dismiss = "alert" href = "#" > × </a>   

Cov txheej txheem

$().alert()

Wraps tag nrho cov lus ceeb toom nrog ze functionality. Txhawm rau kom koj cov lus ceeb toom tawm thaum kaw, xyuas kom lawv muaj cov chav kawm .fadethiab .incov chav kawm twb tau thov rau lawv.

.alert('kaw')

Kaw ceeb toom.

$ ( ".alert" ). ceeb toom ( 'kaw' )

Cov xwm txheej

Bootstrap's alert class exposes ob peb txheej xwm rau hooking rau hauv alert functionality.

$ ( '#my-alert' ). khi ( 'kaw' , ua haujlwm () {   
  // ua ib yam dab tsi…
})

Piv txwv siv

Ua ntau nrog cov nyees khawm. Tswj khawm hais los yog tsim pab pawg ntawm cov nyees khawm rau ntau yam xws li toolbars.

Xeev

Ntxiv data-loading-text="Loading..."rau siv lub xeev loading ntawm ib lub pob.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Chaw thau khoom xeev </button>   

Ib leeg toggle

Ntxiv data-toggle="button"rau qhib toggling ntawm ib lub pob.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Ib Leeg Toggle </button>   

Checkbox

Ntxiv data-toggle="buttons-checkbox"rau checkbox style toggling ntawm btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > laug </button>  
  <button type = "button" class = "btn btn-primary" > nruab nrab </button>  
  <button type = "button" class = "btn btn-primary" > Txoj Cai </button>  
</div>

Xov tooj cua

Ntxiv data-toggle="buttons-radio"rau xov tooj cua style toggling ntawm btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > laug </button>  
  <button type = "button" class = "btn btn-primary" > nruab nrab </button>  
  <button type = "button" class = "btn btn-primary" > Txoj Cai </button>  
</div>

Kev siv

Qhib cov nyees khawm ntawm JavaScript:

$ ( '.nav-tabs' ). khawm ( )

Markup

Cov ntaub ntawv tus cwj pwm yog ib qho tseem ceeb rau lub khawm plugin. Txheeb xyuas qhov piv txwv hauv qab no rau ntau hom cim.

Kev xaiv

Tsis muaj

Cov txheej txheem

$().button('toggle')

Toggles thawb lub xeev. Muab lub pob kom pom tias nws tau qhib.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('loading')

Teem khawm lub xeev rau kev thauj khoom - disables khawm thiab swaps ntawv rau loading ntawv. Loading ntawv yuav tsum tau txhais nyob rau hauv lub khawm caij siv cov ntaub ntawv attribute data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading khoom..." > ... </button>    

$().button('reset')

Resets khawm lub xeev - swaps ntawv rau cov ntawv qub.

$().button(string)

Resets khawm lub xeev - swaps cov ntawv mus rau cov ntaub ntawv teev cov ntawv hauv xeev.

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>    
<script>
  $ ( '.btn' ). khawm ( 'ua tiav' )
</script>

Txog

Tau txais cov qauv tsim thiab hloov pauv hloov pauv rau cov khoom sib tsoo zoo li accordions thiab navigation.

* Yuav tsum muaj Transitions plugin kom suav nrog.

Piv txwv accordion

Siv lub cev qhuav dej, peb tsim ib qho yooj yim accordion style widget:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Collapsible Group Yam #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-lub cev poob rau hauv" >  
      <div class = "accordion-inner" > 
        Dab neeg poj ntxoog...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Collapsible Group Yam #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-lub cev ploj" >  
      <div class = "accordion-inner" > 
        Dab neeg poj ntxoog...
      </div>
    </div>
  </div>
</div>
...

Koj tuaj yeem siv lub plugin yam tsis muaj accordion markup. Ua ib lub pob toggle lub expanding thiab collapsing ntawm lwm lub caij.

<khawm hom = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  yooj yim collapsible
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Kev siv

Los ntawm cov ntaub ntawv attributes

Tsuas yog ntxiv data-toggle="collapse"thiab ib qho data-targetrau lub caij kom tau txais kev tswj hwm ntawm lub caij collapsible. Tus data-targetcwj pwm lees txais css xaiv los siv lub cev qhuav dej rau. Nco ntsoov ntxiv cov chav kawm collapserau lub caij collapsible. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv in.

Txhawm rau ntxiv accordion-zoo li pawg tswj hwm rau kev tswj hwm, ntxiv cov ntaub ntawv tus cwj pwm data-parent="#selector". Xa mus rau qhov demo kom pom qhov no hauv kev nqis tes ua.

Ntawm JavaScript

Qhib manually nrog:

$ ( ".collapse" ). poob ( )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-parent="".

Cov txheej txheem

.collapse(options)

Activates koj cov ntsiab lus raws li lub ntsiab collapsible. Txais ib qho kev xaiv xaiv object.

$ ( '#myCollapsible' ). ploj ({
  toggle : cuav 
})

.collapse('toggle')

Toggles lub caij collapsible kom pom los yog zais.

.collapse('show')

Qhia ib lub caij collapsible.

.collapse('hide')

Hide ib lub caij collapsible.

Cov xwm txheej

Bootstrap's collapse class exposes ob peb txheej xwm rau hooking mus rau hauv vau functionality.

$ ( '#myCollapsible' ). ntawm ( 'hidden' , function () {   
  // ua ib yam dab tsi…
})

Piv txwv carousel

Cov slideshow hauv qab no qhia tau hais tias ib tug generic plugin thiab tivthaiv rau cycling los ntawm lub ntsiab zoo li ib tug carousel.

Thawj Thumbnail daim ntawv lo

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel swb" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Carousel khoom -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-tswj txoj cai" href = "#myCarousel" data-slide = "tom ntej" > › </a>   
</div>

Kev siv

Los ntawm cov ntaub ntawv attributes

Siv cov ntaub ntawv cwj pwm kom yooj yim tswj txoj hauj lwm ntawm lub carousel. data-slidelees txais cov lus tseem ceeb prevlossis next, uas hloov txoj haujlwm swb txheeb ze rau nws txoj haujlwm tam sim no. Xwb, siv data-slide-tokom dhau qhov ntsuas qhov ntsuas tsis tau rau lub carousel data-slide-to="2", uas dhia yog qhov swb mus rau qhov ntsuas tshwj xeeb pib nrog 0.

Ntawm JavaScript

Hu rau carousel manually nrog:

$ ( '.carousel' ). carousel ()

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScriptz. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-interval="".

Cov txheej txheem

.carousel(xaiv)

Pib lub carousel nrog ib qho kev xaiv xaiv objectthiab pib caij tsheb kauj vab los ntawm cov khoom.

$ ( '.carousel' ). carousel ({
  Lub sijhawm : 2000 
})

.carousel('koob')

Cycles los ntawm cov khoom carousel ntawm sab laug mus rau sab xis.

.carousel('pause')

Nres lub carousel los ntawm kev caij tsheb kauj vab los ntawm cov khoom.

.carousel(ntau)

Cycles lub carousel rau ib lub thav duab tshwj xeeb (0 raws, zoo ib yam li ib qho array).

.carousel('prev')

Lub voj voog mus rau qhov khoom dhau los.

.carousel('tom ntej')

Cycles mus rau yam khoom tom ntej.

Cov xwm txheej

Bootstrap's carousel class exposes ob txheej xwm rau hooking rau hauv carousel functionality.

Piv txwv

Ib qho yooj yim, yooj yim txuas ntxiv plugin rau sai sai tsim elegant typeaheads nrog rau cov ntawv sau ntawv nkag.

<input type = "text" data-provide = "typeahead" >  

Koj yuav xav teem caij autocomplete="off"los tiv thaiv cov ntawv qhia zaub mov tsis zoo los ntawm qhov tshwm sim ntawm Bootstrap typeahead dropdown.

Kev siv

Los ntawm cov ntaub ntawv attributes

Ntxiv cov ntaub ntawv tus cwj pwm los sau npe ib lub caij nrog typeahead functionality raws li qhia hauv qhov piv txwv saum toj no.

Ntawm JavaScript

Hu rau typeahead manually nrog:

$ ( '.typeahead' ). ntaus ntawv ( )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-source="".

Cov txheej txheem

.typeahead(options)

Initializes ib tug input nrog ib tug typeahead.

Piv txwv

Lub subnavigation nyob rau sab laug yog ib tug nyob demo ntawm affix plugin.

Kev siv

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv affix cwj pwm rau txhua lub caij, tsuas yog ntxiv data-spy="affix"rau lub caij koj xav soj ntsuam. Tom qab ntawd siv offsets los txhais thaum twg los hloov lub pinning ntawm ib lub caij rau thiab tawm.

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

Ntawm JavaScript

Hu rau affix plugin ntawm JavaScript:

$ ( '#navbar' ). affix ( )

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-offset-top="200".