Mumwe nemumwe kana kuunganidzwa

Mapulagi anogona kuverengerwa ega (kunyangwe mamwe akada zvinoenderana), kana zvese kamwechete. Ose ari maviri bootstrap.js uye bootstrap.min.js ane ese maplugins mufaira rimwe chete.

Data attribute

Unogona kushandisa ese Bootstrap plugins chete kuburikidza neiyo markup API pasina kunyora mutsara mumwechete weJavaScript. Iyi ndiyo Bootstrap yekutanga kirasi API uye inofanirwa kuve yako yekutanga kufunga kana uchishandisa plugin.

Izvozvo zvakati, mune mamwe mamiriro ezvinhu zvingave zvinodiwa kudzima basa iri. Naizvozvo, isu tinopawo kugona kudzima iyo data attribute API nekusunungura zvese zviitiko pane body namespaced ne `'data-api'`. Izvi zvinotaridzika seizvi:

$ ( 'muviri' ). kudzimwa ( '.data-api' )

Neimwe nzira, kunanga imwe plugin, ingo sanganisira zita replugin sezita rezita pamwe chete nedata-api namespace seizvi:

$ ( 'muviri' ). kudzimwa ( '.alert.data-api' )

Purogiramu yepurogiramu

Isu tinotenda zvakare kuti unofanirwa kukwanisa kushandisa ese Bootstrap plugins kuburikidza neJavaScript API. MaAPI ese eruzhinji inzira imwechete, inobatika, uye inodzosa kuunganidzwa kwaitwa.

$ ( ".btn.danger" ). bhatani ( "toggle" ). addClass ( "mafuta" )

Nzira dzese dzinofanirwa kugamuchira chinhu chekusarudza sarudzo, tambo inonangana neimwe nzira, kana hapana (iyo inotanga plugin ine default maitiro):

$ ( "#myModal" ). modal () // yakatanga nema defaults                       
$ ( "#myModal" ). modal ({ keyboard : false }) // yakatanga isina kiibhodhi     
$ ( "#myModal" ). modal ( 'show' ) // inotanga uye invokes kuratidza pakarepo                

Imwe neimwe plugin zvakare inofumura mugadziri wayo mbishi pane `Constructor` pfuma: $.fn.popover.Constructor. Kana iwe uchida kuwana imwe plugin muenzaniso, itore zvakananga kubva kune chinhu: $('[rel=popover]').data('popover').

Hapana Kupokana

Dzimwe nguva zvinodikanwa kushandisa Bootstrap plugins nemamwe maUI maficha. Mumamiriro ezvinhu aya, kudhumhana kwemazita kunogona kuitika dzimwe nguva. Kana izvi zvikaitika, unogona kufonera .noConflictplugin yaunoda kudzorera kukosha kwayo.

var bootstrapButton = $ . fn . bhatani . noConflict () // dzorera $.fn.button kune yakambopiwa kukosha 
$ . fn . bootstrapBtn = bootstrapButton             // ipa $() .bootstrapBtn basa rebootstrap

Zviitiko

Bootstrap inopa zviitiko zvetsika kune akawanda plugin akasarudzika zviito. Kazhinji, izvi zvinouya muchimiro chechirevo chisingaperi uye chekare - apo chisingaperi (ex. show) chinotangwa pakutanga kwechiitiko, uye chimiro chayo chekare (ex. shown) chinokonzeresa pakupedzwa kwechiito.

Zvese zvisingaperi zviitiko zvinopa kudziviriraDefault kushanda. Izvi zvinopa kugona kumisa kuitwa kwechiito chisati chatanga.

$ ( '#myModal' ). pa ( 'show' , basa ( e ) {   
    kana (! data ) dzoka e . kudziviriraDefault () // inomisa modal kubva kuratidzwa   
})

Nezvekuchinja

Kuti uite shanduko iri nyore, sanganisira bootstrap-transition.js kamwe padivi pemamwe mafaera eJS. Kana uri kushandisa compiled (kana minified) bootstrap.js , hapana chikonzero chekuisa izvi-zvatovepo.

Shandisa makesi

Mienzaniso mishoma yeshanduko plugin:

• Kutsvedza kana kupera mumamodhi
• Kudzima ma tabo
• Zviyedzo zvinopera
• Sliding carousel panes

Mienzaniso

Modals inogadziridzwa, asi inoshanduka, dialog inokurudzira ine hushoma hunodiwa mashandiro uye smart defaults.

Muenzaniso wakasimba

A revered modal ine musoro, muviri, uye seti yezviito munyasi.

<div class = "modal hide fade" > 
  <div kirasi = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ button>    
    <h3> Modal musoro </h3>
  </ div>
  <div kirasi = "modal-muviri" > 
    <p> Muviri mumwe wakanaka… </p>
  </ div>
  <div kirasi = "modal-footer" > 
    <a href = "#" class = "btn"> Vhara </a> _  
    <a href = "#" class = "btn btn-primary"> Chevha shanduko </a>  
  </ div>
</ div>

Live demo

Shandura modal kuburikidza neJavaScript nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

<!-- Bhatani rekutanga modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Tangisa demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "chokwadi" >      
  <div kirasi = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal musoro </h3> 
  </ div>
  <div kirasi = "modal-muviri" > 
    <p> Muviri mumwe wakanaka… </p>
  </ div>
  <div kirasi = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Vhara </button>   
    <button class = "btn btn-primary" > Chengetedza shanduko </button> 
  </ div>
</ div>

Usage

Via data hunhu

Shandisa modal pasina kunyora JavaScript. Gadzirisa data-toggle="modal"chinhu chekutonga, sebhatani, pamwe chete nea data-target="#foo"kana href="#foo"kunanga imwe modhi yekushandura.

<button type = "bhatani" data-toggle = "modal" data-target = "#myModal" > Tanga modal </button>   

Via JavaScript

Fonera modal ine id myModaline mutsara mumwechete weJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-backdrop="".

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

Nzira

.modal(sarudzo)

Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object.

$ ( '#myModal' ). modhi ({
  keyboard : nhema 
})

.modal('toggle')

Pamaoko anoshandura modal.

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

.modal('show')

Nemaoko anovhura modal.

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

.modal('hide')

Anozvivanza modal.

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

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro.

$ ( '#myModal' ). pa ( 'zvakavanzika' , basa () {   
  // ita chimwe chinhu…
})

Mienzaniso

Wedzera mamenu ekudonha kune chero chinhu neiyi plugin iri nyore, kusanganisira iyo navbar, ma tabo, uye mapiritsi.

Mukati menavbar

Mukati mematebhu

Usage

Via data hunhu

Wedzera data-toggle="dropdown"kune chinongedzo kana bhatani kuti uchinje kudonhedza pasi.

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

Kuti uchengetedze maURL akasimba, shandisa data-targethunhu pachinzvimbo che href="#".

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

Via JavaScript

Fonera zvinodonha kuburikidza neJavaScript:

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

Options

Hapana

Nzira

$(). dropdown('toggle')

Iyo programmatic api yekushandura menyu kune yakapihwa navbar kana tabbed navigation.

Muenzaniso mu navbar

Iyo ScrollSpy plugin ndeyekugadzirisa otomatiki zvinangwa zve nav zvichienderana nenzvimbo yekupumburudza. Skrodza nzvimbo iri pazasi pebhari uye tarisa iyo inoshanda kirasi shanduko. Izvo zvinodonhedza sub zvinhu zvicharatidzwa zvakare.

Usage

Via data hunhu

Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, ingo wedzera data-spy="scroll"kune chinhu chaunoda kunosora (kazhinji uyu unenge uri muviri) uye data-target=".navbar"kusarudza kuti ndeipi nav yekushandisa. Iwe unozoda kushandisa scrollspy nechikamu .nav.

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

Via JavaScript

Fonera iyo scrollspy kuburikidza neJavaScript:

$ ( '#navbar' ). scrollspy ()

Nzira

.scrollpy('refresh')

Paunenge uchishandisa scrollspy pamwe nekuwedzera kana kubvisa zvinhu kubva kuDOM, iwe unozofanirwa kufonera nzira yekuzorodza senge:

$ ( '[data-spy="scroll"]' ). chimwe nechimwe ( basa () {  
  var $ spy = $ ( iyi ). scrollspy ( 'refresh' )
});

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset="".

Zviitiko

Muenzaniso tabs

Wedzera nekukurumidza, kusimba kwetabhu kushanda kwekuchinja kuburikidza nemapaneru ezvemukati zvemukati, kunyangwe kuburikidza nekudonhedza menyu.

Usage

Gonesa tabable tabs kuburikidza neJavaScript (tebhu yega yega inoda kuvhurwa yega):

$ ( '#myTab a' ). tinya ( basa ( e ) {  
  e . kudziviriraDefault ();
  $ ( izvi ). tab ( 'kuratidza' );
})

Iwe unogona kumisa ma tabo ega ega munzira dzinoverengeka:

$ ( '#myTab a[href="#profile"]' ). tab ( 'kuratidza' ); // Sarudza tab nezita 
$ ( '#myTab a:first' ). tab ( 'kuratidza' ); // Sarudza yekutanga tab 
$ ( '#myTab a:kupedzisira' ). tab ( 'kuratidza' ); // Sarudza yekupedzisira tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'kuratidza' ); // Sarudza yechitatu tebhu (0-indexed) 

Markup

Unogona kumisikidza tebhu kana piritsi kufamba usinganyore chero JavaScript nekungotsanangura data-toggle="tab"kana data-toggle="pill"pane chinhu. Kuwedzera iyo navuye nav-tabsmakirasi kune iyo tebhu ulichashandisa iyo Bootstrap tebhu styling.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Kumba </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Profile </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Mameseji </a> </li >  
  <li><a href = "#settings" data-toggle = "tab"> Zvirongwa </a></li >  
</ul>

Nzira

$().tab

Inomisikidza chinhu chetabhu uye mudziyo wemukati. Tab inofanirwa kunge iine data-targetkana hrefyakanangana nemudziyo node muDOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home"> Kumba </a></li >  
  <li><a href = "#profile"> Profile </a> </li> 
  <li><a href = "#messages"> maMessages </a> </li> 
  <li><a href = "#settings"> Zvirongwa </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane inoshanda" id = "kumba" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</ div>
 
<script>
  $ ( basa () {  
    $ ( '#myTab a:kupedzisira' ). tab ( 'kuratidza' );
  })
</script>

Zviitiko

$ ( 'a[data-toggle="tab"]' ). pa ( 'inoratidzwa' , basa ( e ) {   
  e . chinangwa // activated tab
  e . yakabatanaTarget // yapfuura tab
})

Mienzaniso

Yakafuridzirwa neyakanakisa jQuery.tipsy plugin yakanyorwa naJason Frame; Maturusi ivhezheni yakagadziridzwa, isingavimbi nemifananidzo, shandisa CSS3 yemifananidzo, uye data-maitiro ekuchengetera mazita enzvimbo.

Nekuda kwezvikonzero zvekuita, iyo tooltip uye popover data-apis vanopinda, zvichireva kuti unofanira kuzvitangisa iwe pachako .

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

Nzira ina

Zvishandiso mumapoka ekuisa

Paunenge uchishandisa maturusi uye popovers neBootstrap ekuisa mapoka, iwe unofanirwa kuseta iyo container(yakanyorwa pazasi) sarudzo kudzivirira zvisingadiwe mhedzisiro.

Usage

Tamba chishandiso kuburikidza neJavaScript:

$ ( '#muenzaniso' ). tooltip ( sarudzo )

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "tooltip yekutanga"> tenderera pamusoro pangu </a>   

Nzira

$().tip(sarudzo)

Inonamira chibatiso cheturusi kune muunganidzwa wezvinhu.

.tooltip('show')

Inoratidza chekushandisa chechinhu.

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

.tooltip('hide')

Inovanza zano rekushandisa.

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

.tooltip('toggle')

Inoshandura matipi echinhu.

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

.tooltip('paradza')

Inoviga nekuparadza mudziyo wekushandisa.

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

Mienzaniso

Wedzera zvidiki zvakafukidzwa zvemukati, sezviya zviri paPadad, kune chero chinhu cheimba yechipiri ruzivo. Famba pamusoro pebhatani kuti utange popover. Inoda Tooltip kuti ibatanidzwe.

Static popover

Sarudzo ina dziripo: kumusoro, kurudyi, pasi, uye kuruboshwe zvakaenderana.

Hapana markup inoratidzwa sepopovers inogadzirwa kubva kuJavaScript uye zviri mukati datamehunhu.

Live demo

Nzira ina

Usage

Gonesa mapopovers kuburikidza neJavaScript:

$ ( '#muenzaniso' ). popover ( sarudzo )

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Markup

Nekuda kwezvikonzero zvekuita, Tooltip nePopover data-apis vanosarudza kupinda. Kana uchida kuzvishandisa ingotaura sarudzo yekusarudza.

Nzira

$().popover(sarudzo)

Inotanga popover yekuunganidza zvinhu.

.popover('show')

Inoburitsa zvinhu popover.

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

.popover('hide')

Inoviga zvinhu zvinobuda.

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

.popover('toggle')

Toggles an elements popover.

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

.popover('destroy')

Inoviga uye inoparadza popover yechinhu.

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

Muenzaniso chenjedzo

Wedzera mashandiro ekudzinga kune ese mameseji echenjedzo ane plugin iyi.

Usage

Ita kuti chenjedzo iraswe kuburikidza neJavaScript:

$ ( ".alert" ). chenjerera ()

Markup

Ingo wedzera data-dismiss="alert"kune yako bhatani rekuvhara kuti upe otomatiki yambiro yepedyo kushanda.

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

Nzira

$().chenjedzo()

Inopeta chenjedzo dzese nekushanda kwepedyo. Kuti zviziviso zvako zvibude kana zvakavharwa, ita shuwa kuti vane .fadeuye .inkirasi yatoiswa kwazviri.

.alert('kuvhara')

Inovhara chenjedzo.

$ ( ".alert" ). chenjedzo ( 'vhara' )

Zviitiko

Bootstrap's alert kirasi inofumura zviitiko zvishoma zvekukochekera mukuita kweyambiro.

$ ( '#my-alert' ). sunga ( 'yakavharwa' , basa () {   
  // ita chimwe chinhu…
})

Mienzaniso inoshandiswa

Ita zvakawanda nemabhatani. Kudzora bhatani rinotaura kana kugadzira mapoka emabhatani ezvimwe zvinhu zvakaita sematurusi.

Stateful

Wedzera data-loading-text="Loading..."kushandisa mamiriro ekurodha pane bhatani.

<button type = "button" class = "btn btn-primary" data-loading-text = "Kutakura..." > Kurodha mamiriro </button>   

Single toggle

Wedzera data-toggle="button"ku activate toggling pane rimwe bhatani.

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

Checkbox

Wedzera data-toggle="buttons-checkbox"bhokisi rekutarisa kushandura pabtn-boka.

<div class = "btn-group" data-toggle = "mabhatani-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Kuruboshwe </button>  
  <button type = "button" class = "btn btn-primary" > Pakati </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</ div>

Radio

Wedzera data-toggle="buttons-radio"kune redhiyo style toggling pabtn-group.

<div class = "btn-group" data-toggle = "mabhatani-redhiyo" >  
  <button type = "button" class = "btn btn-primary" > Kuruboshwe </button>  
  <button type = "button" class = "btn btn-primary" > Pakati </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</ div>

Usage

Vhura mabhatani kuburikidza neJavaScript:

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

Markup

Mamiriro e data akakosha kune bhatani plugin. Tarisa kodhi yemuenzaniso pazasi yemhando dzakasiyana dzemakapu.

Options

Hapana

Nzira

$().bhatani('toggle')

Toggles push state. Inopa bhatani kutaridzika kuti rakaitwa.

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

$().bhatani('loading')

Gadzirisa bhatani mamiriro ekurodha - inodzima bhatani uye kuchinjanisa mavara kuti atakure mavara. Kurodha mavara kunofanirwa kutsanangurwa pane bhatani chinhu uchishandisa data hunhu data-loading-text.

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

$().bhatani('reset')

Reset mamiriro ebhatani - kuchinjanisa mavara kune mavara ekutanga.

$().bhatani(tambo)

Resets bhatani mamiriro - swaps mavara kune chero data yakatsanangurwa mameseji mamiriro.

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

About

Tora masitaera epasi uye inochinjika tsigiro yezvinhu zvinoputsika senge maaccordion uye kufamba.

* Inoda iyo Transitions plugin kuti ibatanidzwe.

Muenzaniso accordion

Tichishandisa iyo yekudonha plugin, isu takavaka yakapusa accordion style widget:

<div kirasi = "accordion" id = "accordion2" >  
  <div kirasi = "accordion-boka" > 
    <div kirasi = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Chinopindika Boka Chinhu #1
      </a>
    </ div>
    <div id = "collapseOne" kirasi = "accordion-muviri kudonha mukati" >  
      <div kirasi = "accordion-mukati" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
  <div kirasi = "accordion-boka" > 
    <div kirasi = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Collapsible Boka Chinhu #2
      </a>
    </ div>
    <div id = "collapseTwo" kirasi = "accordion-body collapse" >  
      <div kirasi = "accordion-mukati" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
</ div>
...

Iwe unogona zvakare kushandisa plugin pasina accordion markup. Gadzira bhatani kushandura kuwedzera uye kudonha kwechimwe chinhu.

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

Usage

Via data hunhu

Ingo wedzera data-toggle="collapse"uye data-targetkune chinhu kuti ugozvigadzika kutonga kwechinhu chinodonha. Hunhu data-targethunogashira css selector yekushandisa kuputsika. Iva nechokwadi chekuwedzera kirasi collapsekune chinhu chinoputika. Kana uchida kuti risavhurika, wedzera imwe kirasi in.

Kuwedzera accordion-senge boka manejimendi kune inodonha kutonga, wedzera iyo data hunhu data-parent="#selector". Tarisa kune demo kuti uone izvi mukuita.

Via JavaScript

Vhura nemaoko ne:

$ ( ".collapse" ). kuputsika ()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-parent="".

Nzira

.collapse(sarudzo)

Inobatisa zvirimo sechinhu chinogoneka. Inobvuma sarudzo dzaungada object.

$ ( '#myCollapsible' ). kuparara ({
  toggle : nhema 
})

.collapse('toggle')

Inoshandura chinhu chinopeta kuti chiratidze kana kuvanzwa.

.collapse('show')

Inoratidza chinhu chinopeta.

.collapse('hide')

Inoviga chinhu chinopeta.

Zviitiko

Bootstrap's kudonha kirasi inofumura zviitiko zvishoma zvekukochekera mukudonha kushanda.

$ ( '#myCollapsible' ). pa ( 'zvakavanzika' , basa () {   
  // ita chimwe chinhu…
})

Muenzaniso carousel

Slideshow iri pazasi inoratidza generic plugin uye chikamu chekuchovha bhasikoro kuburikidza nezvinhu zvakaita secarousel.

Chekutanga Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id 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" kirasi = "carousel slide" >  
  <ol kirasi = "carousel-zviratidzo" > 
    <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 zvinhu -->
  <div kirasi = "carousel-mukati" > 
    <div kirasi = "chinhu chinoshanda" > ... </div> 
    <div class = "chinhu" > ... </div> 
    <div class = "chinhu" > ... </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 = "inotevera" > › </a>   
</ div>

Usage

Via data hunhu

Shandisa data hunhu kudzora zviri nyore chinzvimbo checarousel. data-slideinogamuchira mazwi makuru prevkana next, iyo inoshandura nzvimbo yemasiraidhi maererano neyairi ikozvino. Neimwe nzira, shandisa data-slide-tokupfuudza masiraidhi index kune carousel data-slide-to="2", inosvetuka ndiyo nzvimbo yemasiraidhi kune imwe index inotanga na 0.

Via JavaScript

Fonera carousel nemaoko ne:

$ ( '.carousel' ). carousel ()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScriptz. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-interval="".

Nzira

.carousel(sarudzo)

Inotanga carousel ine sarudzo yesarudzo objectuye inotanga kuchovha bhasikoro kuburikidza nezvinhu.

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

.carousel('cycle')

Kutenderera nepakati pezvinhu zvecarousel kubva kuruboshwe kuenda kurudyi.

.carousel('pause')

Inomisa carousel kubva kubhasikoro kuburikidza nezvinhu.

.carousel(nhamba)

Inotenderedza carousel kune imwe furemu (0 yakavakirwa, yakafanana neyakarongwa).

.carousel('prev')

Kutenderera kune chinhu chapfuura.

.carousel('inotevera')

Kutenderera kuenda kuchinhu chinotevera.

Zviitiko

Bootstrap's carousel kirasi inofumura zviitiko zviviri zvekukochekera mukuita kwecarousel.

Muenzaniso

Yekutanga, yakawedzerwa zviri nyore plugin yekukurumidza kugadzira anoyevedza typeaheads nechero fomu yekunyora mameseji.

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

Iwe autocomplete="off"unozoda kuseta kudzivirira default browser mamenu kuti asaonekwe pamusoro peBootstrap typeahead kudonha.

Usage

Via data hunhu

Wedzera data hunhu kunyoresa chinhu chine typeahead mashandiro sezvakaratidzwa mumuenzaniso uri pamusoro.

Via JavaScript

Fonera iyo typeahead nemaoko ne:

$ ( '.typeahead' ).typehead ()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-source="".

Nzira

.typeahead(sarudzo)

Inotanga inopinza ine typeahead.

Muenzaniso

Iyo subnavigation kuruboshwe idemo mhenyu yeaffix plugin.

Usage

Via data hunhu

Kuti uwedzere nyore affix maitiro kune chero chinhu, ingo wedzera data-spy="affix"kune chinhu chaunoda kunosora. Wobva washandisa maoffset kutsanangura nguva yekushandura kupinza kwechinhu nekudzima.

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

Via JavaScript

Fonera iyo affix plugin kuburikidza neJavaScript:

$ ( '#navbar' ). simbisa ()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset-top="200".