Umntu ngamnye okanye uqokelelwe

Iiplagi zingabandakanywa ngokwahlukeneyo (nangona ezinye zifuna ukuxhomekeka), okanye zonke ngaxeshanye. Zombini i- bootstrap.js kunye ne- bootstrap.min.js ziqulathe zonke iiplagi ezifakiweyo kwifayile enye.

Iimpawu zedatha

Ungasebenzisa zonke iiplagi ze-Bootstrap ngaphandle kwe-API yokuphawula ngaphandle kokubhala umgca omnye weJavaScript. Le yi-API yeklasi yokuqala ye-Bootstrap kwaye kufuneka ibe yingqwalasela yakho yokuqala xa usebenzisa iplagi.

Oko kwathiwa, kwezinye iimeko kunokunqweneleka ukucima lo msebenzi. Ngoko ke, sikwabonelela ngokukwazi ukuvala uphawu loyelelwano lwedatha i-API ngokukhulula zonke iziganeko kumzimba wegama elifakwe `'idatha-api'`. Oku kukhangeleka ngolu hlobo:

$ ( 'umzimba' ). cima ( '.data-api' )

Kungenjalo, ukujolisa iplagin ethile, faka nje igama leplagi njengendawo yegama kunye ne-data-api namespace efana nale:

$ ( 'umzimba' ). cima ( '.alert.data-api' )

Programmatic API

Sikwakholelwa ukuba kufuneka ukwazi ukusebenzisa zonke iiplagi zeBootstrap ngeJavaScript API. Zonke ii-API zikawonke-wonke zinye, iindlela ezibolekwayo, kwaye zibuyisela ingqokelela eyenziwayo.

$ ( ".btn.danger" ). iqhosha ( "toggle" ). addClass ( "amafutha" )

Zonke iindlela kufuneka zamkele into ekhethiweyo yeenketho, umtya ojolise kwindlela ethile, okanye akukho nto (eqalisa iplagin ngokuziphatha okungagqibekanga):

$ ( "#myModal" ). imodal () // iqaliswe ngokumiselweyo                       
$ ( "#myModal" ). imodal ({ ikhibhodi : bubuxoki }) // iqaliswe ngaphandle kwebhodi yezitshixo     
$ ( "#myModal" ). imodal ( 'show' ) // iqalisa kwaye izibhengezo zibonise ngoko nangoko                

I-plugin nganye ikwaveza umakhi wayo ekrwada kwipropati `yoMakhi`: $.fn.popover.Constructor. Ukuba ungathanda ukufumana umzekelo othile we-plugin, yifumane ngokuthe ngqo kwinto: $('[rel=popover]').data('popover').

Iziganeko

I-Bootstrap ibonelela ngeziganeko zesiko kwizinto ezininzi ezizodwa ze-plugin. Ngokubanzi, ezi ziza ngendlela engapheliyo kunye neyexesha elidlulileyo - apho i-infinitive (umz. show) iqaliswa ekuqaleni kwesiganeko, kunye nemo yaso yexesha elidlulileyo ye-participle form (umz. shown) iqala ekugqityweni kwesenzo.

Zonke iziganeko ezingapheliyo zibonelela ngokusebenza kokuthintelaMiselweyo. Oku kunika amandla okumisa ukuphunyezwa kwesenzo phambi kokuba siqale.

$ ( '#myModal' ). kwi ( 'bonisa' , umsebenzi ( e ) {   
    ukuba (! data ) buyisela e . preventDefault () // iyamisa imodal ekubonisweni   
})

Malunga neenguqu

Ngeziphumo ezilula zotshintsho, quka i-bootstrap-transition.js kanye ecaleni kwezinye iifayile ze-JS. Ukuba usebenzisa i compiled (okanye minified) bootstrap.js, akukho mfuneko yokuquka oku—sele kukho.

Sebenzisa iimeko

Imizekelo embalwa ye-plugin yotshintsho:

• Ukutyibilika okanye ukuncipha kwiimodyuli
• Ukucima iithebhu
• Ukucima izilumkiso
• Iipaneli zecarousel ezityibilikayo

Imizekelo

Iimodyuli zilungelelanisiwe, kodwa zibhetyebhetye, iingxoxo zencoko yababini ezinobuncinci obufunekayo obufunekayo kunye nokungagqibekanga okuhlakaniphile.

Umzekelo omileyo

Imodali enikezelweyo enesihloko, umzimba, kunye neseti yezenzo kumbhalo osemazantsi.

<div iklasi = "i-modal hide fade" > 
  <div class = "modal-header" > 
    < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ iqhosha>    
    <h3> imodal header </h3>
  </ div>
  <div class = "modal-body" > 
    <p> Umzimba omnye olungileyo… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" iklasi = "btn"> Vala </a> _  
    <a href = "#" class = "btn btn-primary"> Gcina utshintsho </a>  
  </ div>
</ div>

Idemo ephilayo

Guqula imodal usebenzisa iJavaScript ngokucofa iqhosha elingezantsi. Iza kutyibilika phantsi kwaye iphele ukusuka phezulu ephepheni.

<!-- Iqhosha lokucupha imodal -->
<a href = "#myModal" role = "iqhosha" iklasi = "btn" data-toggle = "modal" > Qalisa indlela yedemo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" indima = "dialog" aria-labelledby = "myModalLabel" aria- hidden = "true" >      
  <div class = "modal-header" > 
    < uhlobo lweqhosha = "iqhosha" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ iqhosha>    
    <h3 id = "myModalLabel" > Intloko yeModal </h3> 
  </ div>
  <div class = "modal-body" > 
    <p> Umzimba omnye olungileyo… </p>
  </ div>
  <div class = "modal-footer" > 
    < iklasi yeqhosha = "btn" data-dismiss = "modal" aria-hidden = "true" > Vala </ iqhosha>   
    < iklasi yeqhosha = "btn btn-primary" > Gcina utshintsho </ iqhosha> 
  </ div>
</ div>

Ukusetyenziswa

Ngeempawu zedatha

Vula imodali ngaphandle kokubhala iJavaScript. Cwangcisa data-toggle="modal"isiqalelo somlawuli, njengeqhosha, kunye ne data-target="#foo"okanye href="#foo"ukujolisa kwindlela ethile yokuguqula.

< uhlobo lweqhosha = "iqhosha" data-toggle = "modal" data-target = "#myModal" > Yandulula indlela </iqhosha>   

NgeJavaScript

Fowunela i-modal ene-id myModalngomgca omnye weJavaScript:

$ ( '#myModal' ). imodeli ( iinketho )

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-backdrop="".

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

Iindlela

.modal(iinketho)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

$ ( '#myModal' ). imodeli ({
  keyboard : bubuxoki 
})

.modal('tshintsha')

Yenza imodal ngesandla.

$ ( '#myModal' ). imodali ( 'tshintsha' )

.modal('umboniso')

Ivula imodali ngesandla.

$ ( '#myModal' ). imodali ( 'bonisa' )

.modal('fihla')

Ufihla imodali ngesandla.

$ ( '#myModal' ). imodali ( 'fihla' )

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

$ ( '#myModal' ). kwi ( 'ifihliwe' , umsebenzi () {   
  // Yenza into…
})

Imizekelo

Yongeza imenyu eyehlayo kuyo yonke into eneplagi elula, kubandakanya i-navbar, iithebhu, kunye neepilisi.

Ngaphakathi kwenavbar

Ngaphakathi kweethebhu

Ukusetyenziswa

Ngeempawu zedatha

Yongeza data-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

<div iklasi = "ukwehla" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Isiqhumiso sokuwisa </a>   
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

Ukugcina ii-URL zicocekile, sebenzisa data-targetuphawu loyelelwano endaweni ye href="#".

<div iklasi = "ukwehla" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "iqhosha" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Lahla phantsi
    <b iklasi = "inkathalo" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "imenyu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

$ ( '.ukuhla-ukuguqula' ). ukwehla ()

Iinketho

Akukho nanye

Iindlela

$().ukwehla('tshintsha')

I-api yenkqubo yokuguqula iimenu zebar ye navbar enikiweyo okanye ukhangelo lwe tabbed.

Umzekelo kwi-navbar

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola. Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Imiba esezantsi yokwehla nayo iya kuphawulwa.

Ukusetyenziswa

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"nje kwinto ofuna ukuyihlola (ubukhulu becala lo iyakuba ngumzimba) kwaye data-target=".navbar"ukhethe ukuba yeyiphi nav oza kuyisebenzisa. Uya kufuna ukusebenzisa iscrollspy kunye .navnecandelo.

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

NgeJavaScript

Fowunela iscrollspy ngeJavaScript:

$ ( '#navbar' ). skrola ()

Iindlela

.skrola('hlaziya')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

$ ( '[data-spy="scroll"]' ). Nganye ( umsebenzi () {  
  var $ hlola = $ ( le ). scrollspy ( 'hlaziya' )
});

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Iziganeko

Iithebhu zemizekelo

Yongeza ngokukhawuleza, ukusebenza kwethebhu eguquguqukayo kwi-transiton ngokusebenzisa iipaneli zomxholo wasekhaya, nangeemenyu ezihlayo.

Ukusetyenziswa

Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):

$ ( '#myTab a' ). cofa ( umsebenzi ( e ) {  
  e . preventDefault ();
  $ ( oku ). ithebhu ( 'bonisa' );
})

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

$ ( '#myTab a[href="#profile"]' ). ithebhu ( 'bonisa' ); // Khetha isithuba ngegama 
$ ( '#myTab a:first' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yokuqala 
$ ( '#myTab a:last' ). ithebhu ( 'bonisa' ); // Khetha isithuba sokugqibela 
$ ( '#myTab li:eq(2) a' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yesithathu (0-isalathisi) 

IMarkup

Unokwenza ithebhu okanye ujongo lwepilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwithebhu ulkuya kusebenzisa isimbo se-Bootstrap tab.

<ul class = "nav nav-tabs" > 
  <li><a href = "#ikhaya" data-toggle = "tab"> Ekhaya </a> < /li>  
  <li><a href = "#profile" data-toggle = "tab"> Inkangeleko yesimo </a></li >  
  <li><a href = "# imiyalezo" data-toggle = "tab"> Imiyalezo </a> < /li>  
  <li><a href = "#settings" data-toggle = "tab"> Useto </a> </li>  
</ul>

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li iklasi = "esebenzayo" > <a href = "#ikhaya"> Ekhaya </a></li>  
  <li><a href = "#profile"> Inkangeleko yesimo </a></li> 
  <li><a href = "#imiyalezo"> Imiyalezo </a> </li> 
  <li><a href = "#iisetingi"> Useto </a> </li> 
</ul>
 
<div class = "ithebhu-umxholo" > 
  <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>  
  <div class = "i-tab-pane" id = "iprofayile" > ... </div>  
  <div class = "i-tab-pane" id = "imiyalezo" > ... </div>  
  <div class = "i-tab-pane" id = "iisetingi" > ... </div>  
</ div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '#myTab a:last' ). ithebhu ( 'bonisa' );
  })
</script>

Iziganeko

$ ( 'a[data-toggle="tab"]' ). kwi ( 'ibonisiwe' , umsebenzi ( e ) {   
  e . ekujoliswe kuko // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambili
})

Imizekelo

Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-CSS3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Iindlela ezine

Ukusetyenziswa

Qalisa ingcebiso yesixhobo ngeJavaScript:

$ ( '#example' ). incam yesixhobo ( iinketho )

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

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

.tooltip('hide')

Hides an element's tooltip.

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

.tooltip('toggle')

Toggles an element's tooltip.

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

.tooltip('destroy')

Hides and destroys an element's tooltip.

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

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.

Static popover

Four options are available: top, right, bottom, and left aligned.

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

Four directions

Usage

Enable popovers via JavaScript:

$('#example').popover(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

.popover('toggle')

Toggles an elements popover.

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

.popover('destroy')

Hides and destroys an element's popover.

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

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

$('#my-alert').bind('closed', function () {
  // do something…
})

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

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

Single toggle

Add data-toggle="button" to activate toggling on a single button.

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

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Usage

Enable buttons via JavaScript:

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

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

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

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

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

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

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

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple 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 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">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
 
<div id="demo" class="collapse in"> … </div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First 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.

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">
  <!-- Carousel items -->
  <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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Usage

Via data attributes

...

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

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

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".