Mɔgɔ kelen-kelen walima a lajɛlen

Pluginw bɛ Se ka Dòn u kelen-kelen na (hali n’a y’a Sɔrɔ dɔw ye dependencies (daɲɛw) wajibiya), walima u bɛɛ bɛ Se ka Dòn a la siɲɛ kelen. Bootstrap.js ni bootstrap.min.js fila bɛɛ bɛ 'plugin (dakun) bɛɛ Sɔrɔ filen kelen kɔnɔ.

Donanw ka fɛnw

I bɛ se ka baara kɛ ni Bootstrap plugins bɛɛ ye dɔrɔn markup API fɛ k’a sɔrɔ i ma JavaScript sɛrɛ kelen sɛbɛn. Nin ye Bootstrap ka API fɔlɔ ye wa a ka kan ka kɛ i ka jateminɛ fɔlɔ ye ni i bɛ baara kɛ ni plugin ye.

O fɔlen, ko dɔw la, a bɛ se ka kɛ ko a ka ɲi ka nin baarakɛcogo in faga. O la, an bɛ se fana Di ka data attribut API bali ni ko kɛlenw bɛɛ sirili ye farikolo tɔgɔdagalen kan ni `'data-api'` ye. Nin bɛ i n’a fɔ nin cogo in na:

$ ( 'farikolo' ). off ( '.data-api' ) .

O cogo kelen na, walasa ka fɛn kɛrɛnkɛrɛnnen dɔ Laɲini, i bɛ fɛn in tɔgɔ Dòn dɔrɔn i n’a fɔ tɔgɔda-yɔrɔ ka Fàra data-api tɔgɔda-yɔrɔ kan i n’a fɔ nin:

$ ( 'farikolo' ). off ( '.kɔlɔsili.data-api' ) .

API porogaramulen

An dalen b’a la fana ko i ka kan ka se ka baara kɛ ni Bootstrap plugins bɛɛ ye JavaScript API dɔrɔn fɛ. Foroba APIw bɛɛ ye fɛɛrɛ kelenw ye, minnu bɛ se ka siri ni cakɛda ye, ani ka segin dalajɛlen kan min waleyara.

$ ( ".btn.farati" ). butɔni ( "toggle" ). addClass ( "fasa" ) .

Fɛɛrɛ bɛɛ ka kan ka sɔn sugandili fɛn dɔ ma, sɛrɛ min bɛ fɛɛrɛ kɛrɛnkɛrɛnnen dɔ laɲini, walima foyi tɛ (min bɛ fɛn dɔ daminɛ ni kɛcogo kɔrɔ ye):

$ ( "#n ka Modal" ). modal () // daminɛ ni defaults ye                       
$ ( "#n ka Modal" ). modal ({ klaviyeti : nkalon }) // daminɛna ni klaviyeti tɛ     
$ ( "#n ka Modal" ). modal ( 'show' ) // bɛ jirali daminɛ ani k'a wele o yɔrɔnin bɛɛ                

Plugin kelen-kelen bɛɛ fana b’a ka raw constructor jira `Constructor` property kan: $.fn.popover.Constructor. N’i ​​b’a fɛ ka plugin instance kɛrɛnkɛrɛnnen dɔ sɔrɔ, i k’a sɔrɔ k’a ɲɛsin element dɔ ma: $('[rel=popover]').data('popover').

Kɛlɛ tɛ yen

Tuma dɔw la a ka kan ka baara kɛ ni Bootstrap plugins ye ni UI framework wɛrɛw ye. O cogoyaw la, tɔgɔda-yɔrɔ-ko bɛ Se ka Kɛ tuma dɔw la. N'o Kɛra, i bɛ Se ka weleli .noConflictKɛ i b'a fɛ ka min nafa Lasegin.

var bootstrapButɔni = $ . fn ye . butɔni . noConflict () // segin $.fn.button ka nafa min dira ka kɔrɔ 
$ ye . fn ye . bootstrapBtn = bootstrapButton             // ka $().bootstrapBtn di bootstrap baarakɛcogo ma

Ko minnu kɛra

Bootstrap bɛ ko kɛlenw di minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, ka ɲɛsin plugin ka wale kɛrɛnkɛrɛnnenw fanba ma. A ka c’a la, ninnu bɛ Nà daɲɛ-dafalen ni daɲɛ tɛmɛnen cogo la - daɲɛ-dafalen (ex. show) bɛ Daminɛ yɔrɔ min na ko dɔ daminɛ na, wa a daɲɛ tɛmɛnen cogoya (ex. shown) bɛ Daminɛ wale dɔ dafalen na.

Infinitif events bɛɛ bɛ preventDefault baarakɛcogo di. O bɛ se di ka wale dɔ waleyali jɔ sani a ka daminɛ.

$ ( '#n ka Modal' ). kan ( 'jira' , baara ( e ) { .   
    ni (! data ) segin e . preventDefault () // bɛ modal jirali dabila   
})

Tɛmɛsira ko la

Walasa ka tɛmɛsira nɔgɔmanw sɔrɔ, aw bɛ bootstrap-transition.js don siɲɛ kelen JS filen tɔw kɛrɛfɛ. N’i ​​bɛ baara Kɛ ni bootstrap.js dalajɛlen (walima min Bɔlen dòn) ye, kun t’a la k’o Dòn a la—a bɛ yen kaban.

Baara kɛ ni ko kɛlenw ye

Misali damadɔ bɛ sɔrɔ 'tɛmɛsira 'kɔnɔ:

• Sliding walima fading in modals
• Fading ka bɔ tabs
• Fading out lasɔminiw
• Panneaux de carousel (panneaux carrusels) minnu bɛ sɛgɛsɛgɛ

Misaliw

Modalw bɛ nɔgɔya, nka u bɛ se ka wuli ka bɔ u nɔ na, ​​kumaɲɔgɔnya ɲininkaliw ni baarakɛcogo fitinin wajibiyalenw ani defaults hakilitigiw.

Misali jɔlen

Modal rendered min bɛ ni kuncɛ, farikolo ani walew kulu ye jukɔrɔla la.

<div class = "modal dogolen fade" > 
  <div kalasi = "modal-kunnafoni" > 
    <butɔni suguya = "butɔni" kalasi = "dadon" data-dismiss = "modal" aria-hidden = "tiɲɛ" > × </button> ye    
    <h3> modɛli kuncɛ </h3>
  </div> ye
  <div kalasi = "modal-farikolo" > 
    <p> farikolo ɲuman kelen... </p>
  </div> ye
  <div kalasi = "modali-sen" > 
    <a href = "#" kalasi = "btn" > Dadon </a>  
    <a href = "#" kalasi = "btn btn-primary" > Yɛlɛmaw mara </a>  
  </div> ye
</div> ye

Demo en direct

Modal dɔ wuli ka bɔ JavaScript fɛ ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.

<!-- Butɔn ka modal --> daminɛ
<a href = "#myModal" jɔyɔrɔ = "button" kalasi = "btn" data-toggle = "modal" > Demo modali daminɛ </a>    
 
<!-- Modal -->
<div id = "myModal" kalasi = "modal dogo fade" tabindex = "-1" jɔyɔrɔ = "dialog" aria-labelledby = "myModalLabel" aria-dogolen = "tiɲɛ" >      
  <div kalasi = "modal-kunnafoni" > 
    <butɔni suguya = "butɔni" kalasi = "dadon" data-dismiss = "modal" aria-hidden = "tiɲɛ" > × </button>    
    <h3 id = "myModalLabel" > Modali kuncɛ </h3> 
  </div> ye
  <div kalasi = "modal-farikolo" > 
    <p> farikolo ɲuman kelen... </p>
  </div> ye
  <div kalasi = "modali-sen" > 
    <button class = "btn" data- dismiss = "modal" aria-hidden = "tiɲɛ" > Dadon </button>   
    <button class = "btn btn-primary" > Yɛlɛmaw mara </button> 
  </div> ye
</div> ye

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Modal dɔ baara k’a sɔrɔ i ma JavaScript sɛbɛn. Set data-toggle="modal"on controleur element, i n’a fɔ butɔni, ka fara a kan data-target="#foo"walima href="#foo"ka target modal kɛrɛnkɛrɛnnen dɔ toggle.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal daminɛ </button>   

JavaScript fɛ

Modal dɔ wele ni id myModalye ni JavaScript sɛrɛ kelen ye:

$ ( '#n ka Modal' ). modal ( sugandiliw ) .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-backdrop="".

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

Fɛɛrɛw

.modal(sugandiliw) .

A bɛ i ka kɔnɔkow baara i n’a fɔ modal. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

$ ( '#n ka Modal' ). modɛli ({
  klaviyeti : nkalon 
})

.modal('toggle') .

A bɛ modal dɔ wuli ni bolo ye.

$ ( '#n ka Modal' ). modali ( 'toggle' ) .

.modal(' jira')

A bɛ modal dɔ da wuli ni bolo ye.

$ ( '#n ka Modal' ). modal ( 'jira' ) .

.modal('ka dogo')

A bɛ modal dɔ dogo ni bolo ye.

$ ( '#n ka Modal' ). modal ( 'dogo' ) .

Ko minnu kɛra

Bootstrap ka modal class bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ modal baarakɛcogo la.

$ ( '#n ka Modal' ). kan ( 'dogolen' , baara () { .   
  // ka fɛn dɔ kɛ...
})

Misaliw

Aw bɛ fɛnw fara fɛn o fɛn kan ni nin fɛn nɔgɔman in ye, i n’a fɔ navbar, tabs ani furakisɛw.

Navbar dɔ kɔnɔ

Tabw kɔnɔ

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

A fara a kan data-toggle="dropdown"ka kɛ lien walima butɔni dɔ ye walasa ka fɛn dɔ wuli ka bɔ a nɔ na.

<div kalasi = "dɔnkilida" > 
  <a class = "jigin-ka-bɔ" data-toggle = "jigin-ka-bɔ" href = "#" > Jigin-ka-bɔ-minɛn </a>   
  <ul kalasi = "dugukolo-yɔrɔ" jɔyɔrɔ = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div> ye

Walasa ka URLw to u cogo la, baara kɛ ni o data-targetfɛnsɛbɛn ye href="#".

<div kalasi = "dɔnkilida" > 
  <a kalasi = "jigin-ka-bɔ" id = "dLabel" jɔyɔrɔ = "button" kunnafoni-falen = "jigin" kunnafoni-laɲini = "#" href = "/page.html" >      
    Dropdown (Donkilidala).
    <b kalasi = "karɛti" </b> 
  </a>
  <ul kalasi = "dugukolo-yɔrɔ" jɔyɔrɔ = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div> ye

JavaScript fɛ

Aw bɛ fɛnw wele JavaScript fɛ:

$ ( '.dɔgɔtɔrɔso-toggle' ). jiginɛ () .

Sugandili minnu bɛ kɛ

Foɲisi

Fɛɛrɛw

$().dropdown('toggle') Bamako, Mali.

Porogaramu api min bɛ kɛ ka menuw wuli ka taa navbar walima tabbed navigation dilen dɔ la.

Misali la navbar kɔnɔ

ScrollSpy plugin ye nav laɲiniw ladamuni ye a yɛrɛma ka da scroll jɔyɔrɔ kan. I ka yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ. Fɛn fitinin minnu bɛ jigin, olu fana bɛna jira.

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Walasa ka scrollspy kɛcogo Fàra nɔgɔya la i ka topbar navigation kan, data-spy="scroll"i b’a fɛ ka spy min Kɛ, i bɛ Fàra o kan dɔrɔn (a ka c’a la nin bɛ Kɛ farikolo ye) ani data-target=".navbar"ka nav min sugandi i bɛ baara Kɛ ni min ye. I b’a fɛ ka baara kɛ ni scrollspy ye ni .navcomponent dɔ ye.

<farikolo data-spy = "scroll" data-laɲini = ".navbar" > ... </body>  

JavaScript fɛ

Aw bɛ scrollspy wele JavaScript fɛ:

$ ( '#navbar' ye ) ye. sɛbɛnfura () .

Fɛɛrɛw

.scrollspy('lakurayali')

Ni aw bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, aw bɛna a ɲini ka refresh fɛɛrɛ wele i n’a fɔ:

$ ( '[data-spy="sɛbɛnni"]' ). kelen-kelen bɛɛ ( baara () { .  
  var $spy = $ ( nin ). scrollspy ( ‘lafiɲɛbɔ’ ) .
});

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-offset="".

Ko minnu kɛra

Misali tablɛtiw

Tab baarakɛcogo teliyalen, fangama dɔ fara a kan walasa ka tɛmɛ ni sigida kɔnɔkow pannew ye, hali ni fɛnw ye minnu bɛ jigin.

Baarakɛcogo

Tabable tabs daminɛ JavaScript fɛ (tab kelen-kelen bɛɛ ka kan ka baara kɛ kelen-kelen):

$ ( '#n ka Tab a' ). digi ( baarakɛcogo ( e ) { .  
  e . baliDefault ();
  $ ( nin ). tab ( 'jira' );
})

Aw bɛ se ka tablo kelen-kelen bɛɛ baara cogo caman na:

$ ( '#ne ka Tab a[href="#profile"]' ). tab ( 'jira' ); // Tab sugandi tɔgɔ fɛ 
$ ( '#n ka Tab a:fɔlɔ' ). tab ( 'jira' ); // Tab fɔlɔ sugandi 
$ ( '#n ka Tab a: laban' ). tab ( 'jira' ); // Tab laban sugandi 
$ ( '#n ka Tab li:eq(2) a' ). tab ( 'jira' ); // Tab sabanan sugandi (0-indexed) . 

Markup (Marka) ye

I bɛ se ka tab walima pill navigation dɔ baara k’a sɔrɔ i ma JavaScript si sɛbɛn ni i ye element dɔ jira dɔrɔn data-toggle="tab"walima a kan. data-toggle="pill"Ni i ye navand nav-tabsclasses fara tab kan ul, o bɛna Bootstrap tab styling waleya.

<ul kalasi = "nav nav-tabs" > 
  <li><a href = "#so" data-toggle = "tab" > So </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Ɲɛjirali </a></li>  
  <li><a href = "#cikanw" data-toggle = "tab" > Cikanw </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Labɛnw </a></li>  
</ul>

Fɛɛrɛw

$().tab ye

A bɛ tab element ni kɔnɔkow minɛn dɔ baara. Tab ka kan ka kɛ ni a ye data-targetwalima ni hreftargeting a container node ye DOM kɔnɔ.

<ul kalasi = "nav nav-tabs" id = "ne ka Tab" >  
  <li kalasi = "baarakɛ" ><a href = "#so" > So </a></li>  
  <li><a href = "#profile" > Ɲɛjirali </a></li> 
  <li><a href = "#cikanw" > Cikanw </a></li> 
  <li><a href = "#settings" > Labɛnw </a></li> 
</ul>
 
<div kalasi = "tablo-kɔnɔkow" > 
  <div kalasi = "tablo-pane active" id = "so" > ... </div>  
  <div kalasi = "tab-pane" id = "profil" > ... </div>  
  <div kalasi = "tab-pane" id = "cikanw" > ... </div>  
  <div kalasi = "tab-pane" id = "labɛnw" > ... </div>  
</div> ye
 
<sɛbɛnni>
  $ ( baara () { .  
    $ ( '#n ka Tab a: laban' ). tab ( 'jira' );
  })
</script> ye

Ko minnu kɛra

$ ( 'a[data-toggle="tab"]' ). kan ( 'jiralen' , baara ( e ) { .   
  e . laɲini // tab min bɛ baara kɛ
  e . relatedTarget // tab tɛmɛnen
})

Misaliw

A lawulilen don ni jQuery.tipsy plugin ɲumanba ye min sɛbɛnna Jason Frame fɛ; Baarakɛminɛnw ye sɛgɛsɛgɛli kura ye, minnu tɛ u jigi da jaw kan, u bɛ baara kɛ ni CSS3 ye animationw kama, ani data-attributes sigida tɔgɔw marali kama.

Baarakɛcogo kunw na, baarakɛminɛnw ni popover data-apis bɛ opt in, o kɔrɔ ye ko i yɛrɛ ka kan k’u daminɛ .

I bolo digi jukɔrɔla yɔrɔw kan walasa ka baarakɛminɛnw lajɛ:

Sira naani

Baarakɛminɛnw ladilikanw donna kuluw kɔnɔ

Ni i bɛ baara kɛ ni baarakɛminɛnw ni popovers ye ni Bootstrap donna kuluw ye, i bɛna container(sɛbɛnni min bɛ duguma) sugandi walasa ka i yɛrɛ tanga kɔlɔlɔw ma minnu man ɲi.

Baarakɛcogo

Baarakɛminɛn in daminɛ JavaScript fɛ:

$ ( '#misali' ). baarakɛminɛnw ( sugandiliw ) .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-animation="".

Markup (Marka) ye

<a href = "#" data-toggle = "baarakɛminɛnw" title = "baarakɛminɛn fɔlɔw" > i bolo digi ne kan </a>   

Fɛɛrɛw

$().baarakɛminɛnw(sugandiliw) .

A bɛ baarakɛminɛn dɔ nɔrɔ fɛnw lajɛlen dɔ la.

.tooltip(' jira') .

A bɛ element dɔ ka baarakɛminɛnw jira.

$ ( '#fɛn' ). baarakɛminɛnw ɲɛfɔli ( 'jira' ) .

.tooltip('dogo') .

A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo.

$ ( '#fɛn' ). baarakɛminɛnw ɲɛfɔli ( 'dogo' ) .

.baarakɛminɛnw ɲɛfɔli('toggle')

A bɛ fɛn dɔ ka baarakɛminɛnw sɛgɛsɛgɛli wuli.

$ ( '#fɛn' ). baarakɛminɛnw ɲɛfɔli ( 'toggle' ) .

.tooltip('ka tiɲɛni')

A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo ani k’a Tiɲɛ.

$ ( '#fɛn' ). baarakɛminɛnw ɲɛfɔli ( 'hakili' ) .

Misaliw

Aw bɛ kɔnɔkow dacogo misɛnninw fara ɲɔgɔn kan, i n’a fɔ iPad kan, fɛn o fɛn na walasa ka kunnafoni filananw sigi. Aw bɛ aw bolo digi butɔni kan walasa ka popover daminɛ. A bɛ Tooltip wajibiya ka don a kɔnɔ.

Popover statique ye

Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ.

Marka si ma jira iko popovers tɛ sɔrɔ JavaScript ni kɔnɔkow la fɛn dɔ kɔnɔ data.

Demo en direct

Sira naani

Baarakɛcogo

Popovers baara kɛ JavaScript fɛ:

$ ( '#misali' ). popover ( sugandiliw ) .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-animation="".

Markup (Marka) ye

Baarakɛcogo kunw na, Tooltip ani Popover data-apis bɛ opt in. N’i b’a fɛ ka baara kɛ n’u ye, i ka sugandili sugandilen dɔ jira dɔrɔn.

Fɛɛrɛw

$().popover(sugandiliw) .

A bɛ popovers daminɛ ka ɲɛsin element collection dɔ ma.

.popover(' jira')

A bɛ elements popover dɔ jira.

$ ( '#fɛn' ). popover ( 'jira' ) .

.popover('ka dogo')

A bɛ dogo ni elements popover ye.

$ ( '#fɛn' ). popover ( 'dogo' ) .

.popover('toggle') .

Toggles an éléments popover.

$ ( '#fɛn' ). popover ( 'kɔnɔnafili' ) .

.popover('ka tiɲɛni kɛ')

A bɛ element dɔ ka popover dogo ani k’a tiɲɛ.

$ ( '#fɛn' ). popover ( 'hakili' ) .

Misali lasɔminiw

Aw bɛ dismiss baarakɛcogo fara lasɔmini cikanw bɛɛ kan ni nin plugin in ye.

Baarakɛcogo

A’ ye lasɔmini dɔ bilali daminɛ JavaScript fɛ:

$ ( ".kɔlɔsili" ). lasɔmini () .

Markup (Marka) ye

Dɔrɔn dɔ fara data-dismiss="alert"i ka dadon butɔni kan walasa ka a yɛrɛma ka alert close functionality di.

<a kalasi = "dadon" data-dismiss = "kɔlɔsili" href = "#" > &waatiw; </a>   

Fɛɛrɛw

$().alert() ye.

A bɛ lasɔminiw bɛɛ siri ni baarakɛcogo surun ye. Walasa i ka lasɔminiw ka ɲɛnamaya kɛ ni u datugulen don, i k’a lajɛ k’u ka .fadeand .inclass (kalanso) bɛ u kan kaban.

.alert('daga')

A bɛ lasɔmini dɔ datugu.

$ ( ".kɔlɔsili" ). alert ( 'dakun' ) .

Ko minnu kɛra

Bootstrap ka lasɔmini kalan bɛ ko damadɔw jira kɛnɛ kan walasa ka jɛgɛn ka don lasɔmini baarakɛcogo la.

$ ( '#ne ka-lasɔmini' ). bind ( 'dafalen' , baara () { .   
  // ka fɛn dɔ kɛ...
})

Misaliw bɛ baara kɛ ni minnu ye

Aw bɛ dɔ fara a kan ni butɔni ye. Kontrɔli butɔni bɛ fɔ walima ka butɔni kuluw Dabɔ yɔrɔ caman kama i n’a fɔ baarakɛminɛnw.

Jamanatigi

Fàra o kan data-loading-text="Loading..."walasa ka baara Kɛ ni doni cogoya ye butɔni dɔ kan.

<button type = "button" class = "btn btn-primary" data-loading-text = "Lase..." > Lase cogoya </button>   

Toggle kelen

A fara a kan data-toggle="button"walasa ka toggling baara kɛ butɔni kelen kan.

<butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" data-toggle = "button" > Toggle kelen </button>   

A’ ye yɔrɔ lajɛ

A bɛ fara a kan data-toggle="buttons-checkbox"ka ɲɛsin checkbox style toggling ma btn-group kan.

<div kalasi = "btn-kulu" data-toggle = "butɔni-sɛgɛsɛgɛli kɛsu" >  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Nɛgɛbere </button>  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Cɛmancɛ </button>  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Kiɲɛ </button>  
</div> ye

Arajo la

A fara a kan data-toggle="buttons-radio"ka arajo cogoya toggling kan btn-group kan.

<div kalasi = "btn-kulu" data-toggle = "butɔni-arajo" >  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Nɛgɛbere </button>  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Cɛmancɛ </button>  
  <butɔni suguya = "butɔni" kalasi = "btn btn-fɔlɔ" > Kiɲɛ </button>  
</div> ye

Baarakɛcogo

Butɔnw daminɛni JavaScript fɛ:

$ ( '.nav-tabs' ). butɔni () .

Markup (Marka) ye

Donanw ka fɛnw ye fɛnba ye min bɛ butɔni plugin kɔnɔ. Aw ye misali kode lajɛ min bɛ duguma walasa ka taamasiyɛn suguya caman sɔrɔ.

Sugandili minnu bɛ kɛ

Foɲisi

Fɛɛrɛw

$().button('toggle') Bamako, Mali.

Toggles push jamana. A bɛ butɔni di i n’a fɔ a bɛ baara la.

<butɔni suguya = "butɔni" kalasi = "btn" data-toggle = "butɔni" > ... </butɔni>    

$().button('ka doni')

A bɛ butɔni cogoya sigi doni la - a bɛ butɔni bali ani ka sɛbɛnniw ɲɔgɔn falen ka sɛbɛnniw doni. sɛbɛnniw doni ka kan ka ɲɛfɔ butɔni yɔrɔ kan ni data attribute ye data-loading-text.

<button type = "button" class = "btn" data-loading-text = "fɛnw doni..." > ... </button>    

$().button('segin') .

A bɛ butɔni cogoya lasegin - a bɛ sɛbɛnniw falen-falen ka kɛ sɛbɛn fɔlɔ ye.

$().button(sɛgɛsɛgɛli) .

A bɛ butɔni cogoya lasegin - a bɛ sɛbɛnniw ɲɔgɔn falen-falen ka kɛɲɛ ni sɛbɛnni cogoya o kunnafoni ɲɛfɔlen ye.

<butɔni suguya = "butɔni" kalasi = "btn" data-complete-text = "ban!" > ... </butɔni>    
<sɛbɛnni>
  $ ( '.btn' ye ) ye. butɔni ( 'dafalen' ) .
</script> ye

Kan

Aw ye basigi cogoyaw sɔrɔ ani dɛmɛn min bɛ se ka wuli ka bɔ a nɔ na i n’a fɔ accordions ani navigation.

* A b’a ɲini Transitions plugin ka don a kɔnɔ.

Misali la, accordéon

Baara kɛli ni collapse plugin ye, an ye accordéon style widget nɔgɔman dɔ jɔ:

<div kalasi = "accordion" id = "accordion2" >  
  <div kalasi = "accordion-kulu" > 
    <div class = "accordion-kunnafoni" > 
      <a class = "accordion-toggle" data-toggle = "dafalen" donan-bangebagaw = "#accordion2" href = "#collapseOne" >    
        Jɛkulu ka fɛn #1 min bɛ se ka da ɲɔgɔn kan
      </a>
    </div> ye
    <div id = "collapseOne" class = "accordion-farikolo bɛ bin" >  
      <div kalasi = "accordion-kɔnɔna" > 
        Anim pariatur cliché ye...
      </div> ye
    </div> ye
  </div> ye
  <div kalasi = "accordion-kulu" > 
    <div class = "accordion-kunnafoni" > 
      <a class = "accordion-toggle" data-toggle = "dafalen" donan-bangebagaw = "#accordion2" href = "#collapseTwo" >    
        Jɛkulu min bɛ se ka da ɲɔgɔn kan, o ye fɛn #2 ye
      </a>
    </div> ye
    <div id = "collapseTwo" class = "akɔdi-farikolo bɔgɔlan" >  
      <div kalasi = "accordion-kɔnɔna" > 
        Anim pariatur cliché ye...
      </div> ye
    </div> ye
  </div> ye
</div> ye
...

Aw bɛ se fana ka baara kɛ ni plugin ye ni accordéon taamasiyɛn tɛ. Aw bɛ butɔni dɔ kɛ ka fɛn wɛrɛ bonya ni a bincogo wuli.

<butɔni suguya = "butɔni" kalasi = "btn btn-farati" data-toggle = "collapse" data-target = "#demo" >    
  nɔgɔman min bɛ se ka wuli
</button> ye
 
<div id = "demo" kalasi = "dafalen don" > ... </div>  

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Dɔrɔn farali data-toggle="collapse"ani a data-targetto element ka otomatiki assign control de un collapsible element. Attribut data-targetbɛ sɔn css sugandili ma walasa ka collapse kɛ a kan. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan in.

Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ akordeyɔn, o fara kunnafoni-falen-falen-falen-falen-falen kan, i ka kunnafoni-falen-falen-falen-falen-falen-falen fara a kan data-parent="#selector". Aw ye demo lajɛ walasa ka nin ye wale la.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

$ ( ".dafalen" ). bɔgɔbɔgɔ () .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-parent="".

Fɛɛrɛw

.collapse(sugandiliw) .

A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

$ ( '#ne ka Collapsible' ). bɔgɔbɔgɔ ({
  toggle : nkalon 
})

.collapse('toggle') Bamako, Mali.

A bɛ fɛn dɔ wuli ka bɔ a nɔ na ka taa jira walima ka dogo.

.collapse(' jira')

A bɛ fɛn dɔ jira min bɛ se ka wuli.

.collapse('dogo') .

A bɛ fɛn dɔ dogo min bɛ Se ka Dabɔ.

Ko minnu kɛra

Bootstrap ka collapse class bɛ ko damadɔw bɔ kɛnɛ kan ka ɲɛsin hooking into collapse functionality ma.

$ ( '#ne ka Collapsible' ). kan ( 'dogolen' , baara () { .   
  // ka fɛn dɔ kɛ...
})

Misali la, carousel

Slide jirali min bɛ duguma, o bɛ fɛn dɔ jira min bɛ wele ko plugin generic ani component min bɛ kɛ ka cycling kɛ fɛnw fɛ i n’a fɔ carousel.

Fɔlɔ Label min bɛ wele ko Thumbnail

Cras justo odio, dapibus ac facilisis in, a ka baara ye ka mɔgɔw kalan. Donec id elit non mi porta gravida ye eget metus ye. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

Label fitinin filanan

Cras justo odio, dapibus ac facilisis in, a ka baara ye ka mɔgɔw kalan. Donec id elit non mi porta gravida ye eget metus ye. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

Label fitinin sabanan

Cras justo odio, dapibus ac facilisis in, a ka baara ye ka mɔgɔw kalan. Donec id elit non mi porta gravida ye eget metus ye. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

‹ Bamako › Bamako

<div id = "ne kaKarosel" kalasi = "karosel slide" >  
  <ol kalasi = "karɔsi-jiralanw" > 
    <li data-target = "#myCarousel" data-slide-to = "0" kalasi = "baarakɛ" </li>   
    <li kunnafoni-laɲini = "#myCarousel" kunnafoni-sɛbɛn-ka-bɔ = "1" </li>  
    <li kunnafoni-laɲini = "#myCarousel" kunnafoni-sɛbɛn-ka-bɔ = "2" </li>  
  </ol> , o ye
  <!-- Karɔsi fɛnw -->
  <div kalasi = "karɔsi-kɔnɔna" > 
    <div kalasi = "fɛn min bɛ baara kɛ" > ... </div> 
    <div kalasi = "fɛn" > ... </div> 
    <div kalasi = "fɛn" > ... </div> 
  </div> ye
  <!-- Karosel nav -->
  <a class = "karosel-kunnafoni kinin fɛ" href = "#ne kaKarosel" data-slide = "kɔrɔlen" > ‹ </a>   
  <a kalasi = "karosel-kunnafoni kinin fɛ" href = "#ne kaKarosel" data-slide = "nata" > › </a>   
</div> ye

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Baara kɛ ni data attributes ye walasa ka carousel jɔyɔrɔ kɔlɔsi nɔgɔya la. data-slidebɛ sɔn daɲɛ kolomaw ma prevwalima next, min bɛ slide jɔyɔrɔ Changer ka kɛɲɛ n'a jɔyɔrɔ ye sisan. O cogo kelen na, baara kɛ ni data-slide-toka tɛmɛ ni slide index raw ye ka taa carousel data-slide-to="2"la , o min bɛ pan's slide position ka taa index kɛrɛnkɛrɛnnen dɔ la min bɛ daminɛ ni 0.

JavaScript fɛ

Aw bɛ carousel wele ni bolo ye ni:

$ ( '.karɔsi' ). karosel () .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScriptz fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-interval="".

Fɛɛrɛw

.carousel(sugandiliw) .

A bɛ carousel daminɛ ni options options ye objectani ka cycle daminɛ fɛnw fɛ.

$ ( '.karɔsi' ). karɔsili ({
  cɛmancɛ : san 2000 
})

.karosel('cycle') .

A bɛ cycle kɛ carousel fɛnw kɔnɔ ka bɔ numan fɛ ka taa kinin fɛ.

.carousel('lafiɲɛbɔ') .

A bɛ carousel bali ka boli ka tɛmɛ fɛnw fɛ.

.karosel(numéro) .

A bɛ carousel cycle kɛ ka taa frame kɛrɛnkɛrɛnnen dɔ la (0 basigilen, a bɛ tali kɛ array dɔ la).

.carousel('kɔrɔlen') .

Sikiliw bɛ taa fɛn tɛmɛnen na.

.carousel('nata') .

Sikiliw bɛ taa fɛn nata la.

Ko minnu kɛra

Bootstrap ka carousel kalan bɛ ko fila jira ka ɲɛsin hooking ka carousel baarakɛcogo ma.

Misaliya

Plugin basigilen, min bɛ se ka bonya nɔgɔya la walasa ka teliya ka typeahead cɛɲiw dilan ni foroko sɛbɛnni sɛbɛnni suguya o suguya ye.

<doncogo suguya = "sɛbɛn" data-provide = "suguya ɲɛfɛ" >  

I b’a fɛ ka sigi autocomplete="off"walasa ka navigatɔrɔn ka menu defaultw bali ka bɔ Bootstrap typeahead yɔrɔ la.

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Donanw ka fɛnw fara ɲɔgɔn kan walasa ka fɛn dɔ sɛbɛn ni typeahead baarakɛcogo ye i n’a fɔ a jiralen bɛ cogo min na misali la sanfɛ.

JavaScript fɛ

Aw bɛ typeahead wele ni aw bolo ye ni:

$ ( '.sɛbɛnni ɲɛfɛ' ). sɛbɛnni ɲɛfɛ () .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-source="".

Fɛɛrɛw

.typeahead(sugandiliw) .

A bɛ donnakow daminɛ ni typeahead ye.

Misaliya

Subnavigation min bɛ kinin fɛ, o ye affix plugin ka demo ɲɛnama ye.

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Walasa ka affix kɛcogo fara nɔgɔya la fɛn o fɛn kan, data-spy="affix"i b’a fɛ ka fɛn min sɛgɛsɛgɛ dɔrɔn, i ka o fara a kan. O kɔfɛ, baara kɛ ni offsets ye walasa k’a ɲɛfɔ waati min na i ka kan ka fɛn dɔ pinɛcogo wuli ani ka a ban.

<div data-spy = "affix" kunnafoni-falen-falen-sanfɛ = "200" > ... </div>  

JavaScript fɛ

Affix plugin wele JavaScript fɛ:

$ ( '#navbar' ye ) ye. farankan () .

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-offset-top="200".