Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (na dia mitaky fiankinana aza ny sasany), na indray mandeha. Ny bootstrap.js sy bootstrap.min.js dia samy ahitana ny plugins rehetra ao anaty rakitra iray.

Data attributes

Azonao atao ny mampiasa ny plugins Bootstrap rehetra amin'ny alàlan'ny API markup nefa tsy manoratra andalana iray amin'ny JavaScript. Ity no API kilasy voalohany an'ny Bootstrap ary tokony ho fiheveranao voalohany rehefa mampiasa plugin.

Izany hoe, amin'ny toe-javatra sasany dia mety ilaina ny hamono ity fampiasa ity. Noho izany, izahay koa dia manome ny fahafahana manafoana ny data attribute API amin'ny alàlan'ny fanafoanana ny hetsika rehetra ao amin'ny vatana misy `'data-api'`. Toa izao ity:

$ ( 'vatana' ). maty ( '.data-api ' )

Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:

$ ( 'vatana' ). maty ( ' .alert.data -api' )

Programmatic API

Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina ary mamerina ny fanangonana natao.

$ ( ".btn.danger" ). bokotra ( "toggle" ). addClass ( "matavy" )

Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):

$ ( "#myModal" ). modal () // natomboka tamin'ny default                       
$ ( "#myModal" ). modal ({ keyboard : false }) // natomboka tsy misy fitendry     
$ ( "#myModal" ). modal ( 'show' ) // manomboka sy miantso ny fampisehoana avy hatrany                

Ny plugin tsirairay koa dia mampiseho ny mpanamboatra manta ao amin'ny fananana `Constructor`: $.fn.popover.Constructor. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel=popover]').data('popover').

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo dia mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

var bootstrapButton = $ . fn . bokotra . noConflict () // mamerina $.fn.button amin'ny sanda nomena teo aloha 
$ . fn . bootstrapBtn = bootstrapButton             // manome $().bootstrapBtn ny fiasa bootstrap

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana an'ny plugin. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay misy ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra amin'ny fahavitan'ny hetsika iray.

Ny hetsika infinitive rehetra dia manome fiasa preventDefault. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    raha miverina (! data ) e . preventDefault () // manakana ny modal tsy aseho   
})

Momba ny tetezamita

Ho an'ny vokatry ny tetezamita tsotra dia ampidiro indray mandeha miaraka amin'ireo rakitra JS hafa ny bootstrap-transition.js . Raha mampiasa ny bootstrap.js natambatra (na nohavaozina) ianao, dia tsy ilaina ny mampiditra an'ity—efa eo izany.

Mampiasa tranga

Ohatra vitsivitsy amin'ny plugin transition:

• Sliding na fading in modals
• Manjavona ny tabilao
• Fampandrenesana manjavona
• Karazana sliding carousel

OHATRA

Modals dia mirindra, fa moramora, ny fifampiresahana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Ohatra static

Mody adika miaraka amin'ny lohapejy, vatana, ary andiana hetsika ao amin'ny tongo-tongony.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < karazana bokotra = "button" class = "akaiky" data-dismiss = "modal" aria-hidden = "marina" > × </bokotra>    
    <h3> Lohatenin'ny modely </h3>
  </div>
  <div class = "modal-body" > 
    <p> Vatana tsara iray… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Akatona </a>  
    <a href = "#" class = "btn btn-primary" > Tehirizo ny fanovana </a>  
  </div>
</div>

Demo mivantana

Ampifamadiho ny modal amin'ny alàlan'ny JavaScript amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

<!-- Bokotra hanosika ny modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Alefaso ny modal demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "marina" >      
  <div class = "modal-header" > 
    < karazana bokotra = "button" class = "akaiky" data-dismiss = "modal" aria-hidden = "marina" > × </bt>    
    <h3 id = "myModalLabel" > Lohahevitra modely </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Vatana tsara iray… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Akatona </button>   
    <button class = "btn btn-primary" > Tehirizo ny fanovana </button> 
  </div>
</div>

Fampiasana

Amin'ny alàlan'ny data attributes

Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"na href="#foo"hikendry mody iray manokana hivezivezy.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Alefaso ny modal </button>   

Amin'ny JavaScript

Miantso modal miaraka amin'ny id myModalmisy andalana tokana amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-backdrop="".

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

fomba

.modal(safidy)

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

$ ( '#myModal' ). modal ({
  fitendry : diso 
})

.modal('toggle')

Manova fomba tanana iray.

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

.modal('show')

Manokatra modal amin'ny tanana.

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

.modal('afina')

Manafina modal iray amin'ny tanana.

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

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.

$ ( '#myModal' ). on ( 'miafina' , asa () {   
  // manao zavatra…
})

OHATRA

Ampio ny menio midina amin'ny zavatra rehetra miaraka amin'ity plugin tsotra ity, ao anatin'izany ny navbar, tabilao ary pilina.

Ao anaty navbar

Ao anatin'ny tabilao

Fampiasana

Amin'ny alàlan'ny data attributes

Ampio data-toggle="dropdown"amin'ny rohy na bokotra iray mba hivezivezena ny fidina.

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

Mba hitazonana ny URL ho tsy misy dikany dia ampiasao ny data-targettoetra fa tsy href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Velarina
    <b class = "caret" ></b> 
  </a>
  <ul class = "menu dropdown" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Amin'ny JavaScript

Antsoy amin'ny alalan'ny JavaScript ny dropdowns:

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

FANDIKANA

tsy misy

fomba

$().dropdown('toggle')

Api programmatic ho an'ny fanodina ny menus ho an'ny navbar nomena na navigateur misy tabilao.

Ohatra amin'ny navbar

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky. Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa ambany midina.

Fampiasana

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar anao, ampio fotsiny data-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ny vatana izany) ary data-target=".navbar"mifidy izay nav hampiasaina. Te hampiasa scrollspy miaraka amina .navsinga iray ianao.

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

Amin'ny JavaScript

Antsoy ny scrollspy amin'ny alàlan'ny JavaScript:

$ ( '#navbar' ). scrollspy ()

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

$ ( '[data-spy="scroll"]' ). tsirairay ( function () {  
  var $spy = $ ( ity ). scrollspy ( 'refresh' )
});

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

zava-mitranga

Ohatra tabilao

Manampia fampiasa kiheba haingana sy mavitrika amin'ny fifindrana amin'ny alàlan'ny tontonana amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina.

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

$ ( '#myTab a' ). tsindrio ( function ( e ) {  
  e . preventDefault ();
  $ ( ity ). tabilao ( 'show' );
})

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

$ ( '#myTab a[href="#profile"]' ). tabilao ( 'show' ); // Mifidiana tabilao amin'ny anarana 
$ ( '#myTab a:voalohany' ). tabilao ( 'show' ); // Safidio ny tabilao voalohany 
$ ( '#myTab a:last' ). tabilao ( 'show' ); // Fidio ny tabilao farany 
$ ( '#myTab li:eq(2) a' ). tabilao ( 'show' ); // Mifidiana tabilao fahatelo (0-indexed) 

fanamarihana

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ny fampidirana ny navsy ny nav-tabskilasy amin'ny tabilao uldia hampihatra ny styling tab Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Hafatra </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Fikirana </a></li>  
</ul>

fomba

$().tab

Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-targetkendrena hrefny node container ao amin'ny DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Hafatra </a></li> 
  <li><a href = "#settings" > Fikirana </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 = "message" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( asa () {  
    $ ( '#myTab a:last' ). tabilao ( 'show' );
  })
</script>

zava-mitranga

$ ( 'a[data-toggle="tab"]' ). on ( 'aseho' , asa ( e ) {   
  e . tanjona // vakizoro mavitrika
  e . relatedTarget // tabilao teo aloha
})

OHATRA

Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa CSS3 ho an'ny sary mihetsika, ary angona-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Noho ny anton'ny fampandehanana, dia nisafidy ny tondro-fitaovana sy ny popover data-apis, midika izany fa tsy maintsy ataonao voalohany izy ireo .

Mitsangàna eo amin'ny rohy eto ambany raha te hahita fitaovana:

Lalana efatra

Torohevitra amin'ny vondrona fampidirana

Rehefa mampiasa toro-hevitra sy popovers miaraka amin'ny vondrona fampidirana Bootstrap ianao dia tsy maintsy mametraka ny containersafidy (voarakitra eto ambany) mba hialana amin'ny voka-dratsy tsy ilaina.

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

$ ( '#ohatra' ). tooltip ( safidy )

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

fanamarihana

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > mitsingevaheva eo amboniny </a>   

fomba

$().tooltip(safidy)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray.

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

.tooltip('manafina')

Manafina ny tondro-fitaovan'ny singa iray.

$ ( '#element' ). tondro -fitaovana ( 'manafina' )

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray.

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

.tooltip('destroy')

Manafina sy manimba ny tondro-fitaovan'ny singa iray.

$ ( '#element' ). tondro fitaovana ( 'manimba' )

OHATRA

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra ho an'ny fampahalalam-baovao faharoa. Atsofohy eo ambonin'ny bokotra hanetsika ny popover. Mitaky Tooltip ampidirina.

Static popover

Misy safidy efatra: ambony, havanana, ambany ary ankavia mifanandrify.

Tsy misy marika aseho amin'ny hoe popover dia avy amin'ny JavaScript sy ny atiny ao anatin'ny datatoetra iray.

Demo mivantana

Lalana efatra

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

$ ( '#ohatra' ). popover ( safidy )

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

fanamarihana

Noho ny antony fampandehanana, ny Tooltip sy Popover data-apis dia nifidy.

fomba

$().popover(safidy)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Manambara singa popover.

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

.popover('afeno')

Manafina singa popover.

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

.popover('toggle')

Manova singa popover.

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

.popover('mandrava')

Manafina sy manimba ny popover singa iray.

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

Fampandrenesana ohatra

Ampio ny fampiasa fandroahana amin'ny hafatra fanairana rehetra miaraka amin'ity plugin ity.

Fampiasana

Alefaso ny fandroahana fanairana amin'ny alàlan'ny JavaScript:

$ ( ".alert" ). mailo ()

fanamarihana

Ampio fotsiny data-dismiss="alert"amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy.

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

fomba

$().alert()

Manarona ny fanairana rehetra miaraka amin'ny fiasa akaiky. Mba hahatonga ny fampandrenesanao hivoaka rehefa mihidy, ataovy azo antoka fa efa nampiharina tamin'izy ireo ny .fadesy kilasy..in

.alert('akaiky')

Manidy fanairana.

$ ( ".alert" ). fanairana ( 'akaiky' )

zava-mitranga

Ny kilasy fanairana ao amin'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa fanairana.

$ ( '#my-alert' ). mamatotra ( 'nakatona' , asa () {   
  // manao zavatra…
})

Fampiasana ohatra

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia milaza na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Stateful

Ampio data-loading-text="Loading..."mba hampiasa ny toetry ny entana amin'ny bokotra.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Fametrahana fanjakana </button>   

Toggle tokana

Ampio data-toggle="button"mba hampavitrika ny famadihana amin'ny bokotra tokana.

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

Checkbox

Ampio data-toggle="buttons-checkbox"ho an'ny fomba fanodikodinana amin'ny btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  < karazana bokotra = "bokotra" class = "btn btn-primary" > Ankavia </bt>  
  < karazana bokotra = "tombontsoa" class = " btn btn-primary" > Afovoany </button>  
  < karazana bokotra = "bokotra" class = "btn btn-primary" > havanana </bt>  
</div>

fampielezam-peo

Ampio data-toggle="buttons-radio"amin'ny fomba fampielezam-peo amin'ny btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  < karazana bokotra = "bokotra" class = "btn btn-primary" > Ankavia </bt>  
  < karazana bokotra = "tombontsoa" class = " btn btn-primary" > Afovoany </button>  
  < karazana bokotra = "bokotra" class = "btn btn-primary" > havanana </bt>  
</div>

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny bokotra:

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

fanamarihana

Ny toetran'ny data dia tafiditra ao amin'ny plugin bokotra. Jereo ny kaody ohatra etsy ambany ho an'ny karazana marika isan-karazany.

FANDIKANA

tsy misy

fomba

$().button('toggle')

Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.

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

$().button('loading')

Mametraka ny toetry ny bokotra amin'ny fametahana - manafoana ny bokotra ary manova lahatsoratra amin'ny fandefasana lahatsoratra. Ny fametahana lahatsoratra dia tokony hofaritana amin'ny singa bokotra amin'ny fampiasana ny toetra angona data-loading-text.

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

$().button('reset')

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany.

$().button(string)

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny toetry ny lahatsoratra voafaritra.

< karazana bokotra = "button" class = "btn" data-complete-text = "vita!" > ... </bokotra>    
<script>
  $ ( '.btn' ). bokotra ( 'feno' )
</script>

About

Mahazoa fomba fototra sy fanohanana mora azo ho an'ny singa azo harodana toy ny akorandriaka sy ny fitetezana.

* Mila ampidirina ny plugin Transitions.

Ohatra accordion

Amin'ny fampiasana ny plugin collapse, dia nanamboatra widget fomba accordion tsotra izahay:

<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" >    
        Vondrona azo harodana Item #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Item #2 vondrona azo rava
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Azonao atao koa ny mampiasa ny plugin tsy misy marika accordion. Manaova bokotra havitrika ny fanitarana sy ny firodanan'ny singa iray hafa.

< karazana bokotra = "bokotra" class = "btn btn-danger" data-toggle = "mirodana" data-target = "#demo" >    
  tsotra collapsible
</bokotra>
 
<div id = "demo" class = "collapse in" > … </div>  

Fampiasana

Amin'ny alàlan'ny data attributes

Ampio fotsiny data-toggle="collapse"ary ny data-targetsinga iray mba hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-targettoetra dia manaiky mpifidy css hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny in.

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetra angona data-parent="#selector". Jereo ny demo raha te hahita izany amin'ny hetsika.

Amin'ny JavaScript

Alefa tanana amin'ny:

$ ( ".collapse" ). mirodana ()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-parent="".

fomba

.collapse(safidy)

Manetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

$ ( '#myCollapsible' ). mirodana ({
  toggle : diso 
})

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina.

.collapse('show')

Mampiseho singa azo harodana.

.collapse('afina')

Manafina singa azo harodana.

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa mirodana.

$ ( '#myCollapsible' ). on ( 'miafina' , asa () {   
  // manao zavatra…
})

Ohatra carousel

Ny sarimiaina etsy ambany dia mampiseho plugin sy singa ankapobeny ho an'ny bisikileta amin'ny singa toy ny carousel.

Etikety Thumbnail voalohany

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. 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 slide" >  
  <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>
  <!-- Zavatra carousel -->
  <div class = "carousel-inner" > 
    <div class = "zavatra mavitrika" > … </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-control right" href = "#myCarousel" data-slide = "manaraka" > › </a>   
</div>

Fampiasana

Amin'ny alàlan'ny data attributes

Mampiasà toetra angona mba hifehezana mora foana ny toerana misy ny carousel. data-slidemanaiky ny teny fanalahidy prevna next, izay manova ny toeran'ny slide raha oharina amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-slide-tony fampitaovana fanondroana misesy manta mankany amin'ny carousel data-slide-to="2", izay mitsambikina ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny 0.

Amin'ny JavaScript

Antsoy amin'ny tanana ny carousel amin'ny:

$ ( '.carousel' ). carousel ()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScriptz. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-interval="".

fomba

.carousel(safidy)

Manomboka ny carousel miaraka amin'ny safidy azo atao objectary manomboka mandehandeha amin'ny entana.

$ ( '.carousel' ). carousel ({
  elanelam-potoana : 2000 
})

.carousel('cycle')

Mihodikodina amin'ireo singa carousel miankavia miankavanana.

.carousel('pause')

Manakana ny carousel tsy hivezivezy amin'ny entana.

.carousel(isa)

Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array).

.carousel('prev')

Mihodina mankany amin'ilay singa teo aloha.

.carousel('manaraka')

Mihodina mankany amin'ny singa manaraka.

zava-mitranga

Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel.

OHATRA

Plugin fototra sy mora miitatra ho an'ny famoronana haingana karazana loha-hevitra kanto miaraka amin'ny endri-tsoratra rehetra.

< karazana fampidirana = "text" data-provide = "typeahead" >  

Te-hametraka ianao autocomplete="off"mba hisakanana ny menio navigateur default tsy hiseho eo amin'ny fidinan'ny karazana bootstrap.

Fampiasana

Amin'ny alàlan'ny data attributes

Manampia toetra angon-drakitra hanoratana singa iray misy fampiasa amin'ny typeahead araka ny aseho amin'ny ohatra etsy ambony.

Amin'ny JavaScript

Antsoy amin'ny tanana amin'ny:

$ ( '.typeahead' ). litera ()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-source="".

fomba

.typeahead(safidy)

Manomboha fampidirana miaraka amin'ny lohamilina.

OHATRA

Ny subnavigation eo ankavia dia demo mivantana amin'ny plugin affix.

Fampiasana

Amin'ny alàlan'ny data attributes

Mba hanampiana mora foana ny fitondran-tena affix amin'ny singa rehetra, ampio fotsiny data-spy="affix"amin'ny singa tianao hitsikilo. Ampiasao avy eo ny offset mba hamaritana ny fotoana hamehezana sy hamonoana ny fametahana singa iray.

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

Amin'ny JavaScript

Antsoy ny plugin affix amin'ny JavaScript:

$ ( '#navbar' ). affix ()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset-top="200".