Modalw ko la

A streamlined, nka flexible, take on the traditional javascript modal plugin ni dɔrɔn baarakɛcogo fitinin wajibiyalenw ani hakilitigiw ka defaults.

Misali jɔlen

Dugukolo kan, o ye modɛli ye min bɛ jira cogo la min bɛ wele ko statique.

Demo en direct

Toggle a modal via javascript ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.

Baara kɛ ni bootstrap-modal ye

Aw bɛ modal wele javascript fɛ:

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

Sugandili minnu bɛ kɛ

Markup (Marka) ye

I bɛ Se ka modɛliw baara i ka ɲɛ kan nɔgɔya la k’a sɔrɔ i ma javascript sɛrɛ kelen sɛbɛn. Dɔrɔn set data-toggle="modal"on controleur element ni a data-target="#foo"walima href="#foo"min bɛ bɛn modal element id ma, ni a digilen don, a bɛna i ka modal daminɛ.

Ani fana, walasa ka sugandiliw Fàra i ka modal instance kan, i k’u Dòn dɔrɔn i n’a fɔ data attributs (daɲɛw) fɛn wɛrɛw kan control element (kɔlɔsili-yɔrɔ) walima modal markup yɛrɛ kan.

<a kalasi = "btn" data-toggle = "modal" href = "#myModal" > Modal daminɛ </a>    

<div kalasi = "modal" id = "ne ka Modal" >  
  <div kalasi = "modal-kunnafoni" > 
    <a kalasi = "dadon" data-dismiss = "modal" > × </a>  
    <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

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ɛ...
})

Dropdownw ko la

A' ye 'fɛnɲɛnɛmaw Fàra fɛn o fɛn kan Bootstrap kɔnɔ ni nin 'plugin nɔgɔman in ye. Bootstrap bɛ dɛmɛ dafalen jira min bɛ sɔrɔ menu kɔnɔ min bɛ navbar kɔnɔ, tabs kɔnɔ, ani furakisɛw kɔnɔ.

Misaliw

Nav links minnu bɛ duguma, olu digi navbar kɔnɔ ani furakisɛw kan minnu bɛ duguma walasa ka dropdownw sɛgɛsɛgɛ.

• Lien régulier
• Dropdown (Donkilidala).
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2. Bamako, Mali
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3. Bamako, Mali
  • Action
  • Another action
  • Something else here
  • Separated link

Baara kɛ ni bootstrap-dropdown.js ye

Aw bɛ fɛnw wele javascript fɛ:

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

Markup (Marka) ye

Walasa ka teliya ka dropdown baarakɛcogo Fàra element o element kan, i bɛ Fàra dɔrɔn data-toggle="dropdown"ani bootstrap dropdown min bɛ Se ka Kɛ o bɛ baara Kɛ a yɛrɛma.

<ul kalasi = "nav nav-furakisɛw" > 
  <li kalasi = "baarakɛ" ><a href = "#" > Jɛɲɔgɔnya sabatilen </a></li>  
  <li kalasi = "dakun " id = "menu1" >  
    <a class = "jigin-ka-bɔ" data-toggle = "jigin-ka-bɔ" href = "#menu1" >   
      Dropdown (Donkilidala).
      <b kalasi = "karɛti" </b> 
    </a>
    <ul kalasi = "dakun-yɔrɔ" > 
      <li><a href = "#" > wale </a></li> 
      <li><a href = "#" > wale wɛrɛ </a></li> 
      <li><a href = "#" > fɛn wɛrɛ bɛ yan </a></li> 
      <li kalasi = "jatebɔlan" </li> 
      <li><a href = "#" > Jɛɲɔgɔnya faralen ɲɔgɔn kan </a></li> 
    </ul>
  </li>
  ...
</ul>

Fɛɛrɛw

$().dɔgɔtɔrɔso() .

Api programatic min bɛ menuw baara ka ɲɛsin navbar walima tabbed navigation dilen ma.

ScrollSpy plugin ye nav laɲiniw ladamuni ye a yɛrɛma ka da scroll jɔyɔrɔ kan.

Misali navbar ni scrollspy

Yɔrɔ min bɛ duguma, i ka o yɔrɔ lajɛ ani ka navigatiɔn kura lajɛ. Fɛn fitinin minnu bɛ jigin, olu fana bɛna jira. A’ ye a lajɛ!

Baara kɛ ni bootstrap-scrollspy.js ye

Aw bɛ scrollspy wele javascript fɛ:

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

Markup (Marka) ye

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

<farikolo data-spy = "sɛbɛnni" > ... </body>  

Sugandili minnu bɛ kɛ

Nin plugin in bɛ tab ni pill baarakɛcogo teliyalen, fangama dɔ fara a kan walasa ka tɛmɛ ni sigida kɔnɔkow ye.

Misali tablɛtiw

Tab minnu bɛ duguma, olu digi walasa ka fɛnw caman ɲɔgɔn falen-falen yɔrɔ dogolenw ni ɲɔgɔn cɛ, hali ni menu (yɔrɔ) minnu bɛ jigin.

• So
• Porofili
• Dropdown (Donkilidala).
  • @fat
  • @mdo

Baara kɛ ni bootstrap-tab.js ye

Tabbable tabs daminɛ javascript fɛ:

$ ( '#n ka Tab' ). tab ( 'jira' ) .

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"

<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 `data-target` walima `href` ye min bɛ minɛn node dɔ laɲini dom kɔnɔ.

<ul kalasi = "nav nav-tabs" > 
  <li kalasi = "baarakɛ" ><a href = "#so" > So </a></li>  
  <li><a href = "#profil" > Ɲɛ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 () { .  
    $ ( '.tabs 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
})

Baarakɛminɛnw Ladilikanw ko la

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.

Misali la baara kɛli ni Baarakɛminɛnw ye

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

Baara kɛ ni bootstrap-tooltip.js ye

Baarakɛminɛnw ɲɛfɔli daminɛ javascript fɛ:

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

Sugandili minnu bɛ kɛ

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.

<a href = "#" rel = "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' ) .

Popovers ko la

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.

* A bɛ Tooltip wajibiya ka don a kɔnɔ

Misali la, hover popover

Aw bɛ aw bolo digi butɔni kan walasa ka popover daminɛ.

Baara kɛ ni bootstrap-popover.js ye

Popoverw daminɛna javascript fɛ:

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

Sugandili minnu bɛ kɛ

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 sugandi dɔrɔn jira.

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' ) .

Kɔlɔsiliw ko la

Kɔlɔsili-minɛn ye kalasi fitinin ye min bɛ Kɛ ka baarakɛcogo surun Fàra lasɔminiw kan.

Misali lasɔminiw

Kɔlɔsiliw plugin bɛ baara kɛ lasɔmini cikanw kan minnu bɛ kɛ tuma bɛɛ, ani cikanw bali.

Baara kɛ ni bootstrap-alert.js ye

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ɛ...
})

Kan

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.

Misaliw bɛ baara kɛ ni minnu ye

Baara kɛ ni butɔni plugin ye jamanaw ni toggles kama.

Baara kɛ ni bootstrap-button.js ye

Butɔnw daminɛ javascript fɛ:

$ ( '.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ɔ.

<!-- Data-toggle="button" fara a kan walasa ka toggling baara kɛ butɔni kelen kan -->
<butɔni kalasi = "btn" data-toggle = "button" > Toggle kelen </button>  
 
<!-- A' ye data-toggle="buttons-checkbox" fara a kan walasa ka sɛgɛsɛgɛli kɛcogo sɛgɛsɛgɛli kɛ btn-group kan -->
<div kalasi = "btn-kulu" data-toggle = "butɔni-sɛgɛsɛgɛli kɛsu" >  
  <butɔni kalasi = "btn" > Nɛgɛbere </button> 
  <butɔni kalasi = "btn" > Cɛmancɛ </button> 
  <butɔni kalasi = "btn" > Kiɲɛ </button> 
</div> ye
 
<!-- Data-toggle="buttons-radio" fara a kan arajo cogoya sɛgɛsɛgɛli kama btn-group kan -->
<div kalasi = "btn-kulu" data-toggle = "butɔni-arajo" >  
  <butɔni kalasi = "btn" > Nɛgɛbere </button> 
  <butɔni kalasi = "btn" > Cɛmancɛ </button> 
  <butɔni kalasi = "btn" > Kiɲɛ </button> 
</div> ye

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 kalasi = "btn" data-toggle = "butɔni" > ... </button>   

$().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 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.

<button class = "btn" kunnafoni-dafalen-sɛbɛn = "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.

Misali la, accordéon

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

Baara kɛ ni bootstrap-collapse.js ye

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

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

Sugandili minnu bɛ kɛ

Markup (Marka) ye

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.

<button class = "btn btn-danger" data-toggle = "dafalen" kunnafoni-laɲini = "#demo" >   
  nɔgɔman min bɛ se ka wuli
</button> ye
 
<div id = "demo" kalasi = "dafalen don" > ... </div>  

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ɛ...
})

Kan

Plugin général dɔ ye ka cycling kɛ elements fɛ. Nisɔndiya-taama-yɔrɔ dɔ.

Misali la, carousel

Aw ye slide jiracogo lajɛ min bɛ duguma.

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

Baara kɛ ni bootstrap-carousel.js ye

Aw ye wele kɛ javascript fɛ:

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

Sugandili minnu bɛ kɛ

Markup (Marka) ye

Donanw ka fɛnw bɛ Kɛ ka ɲɛsin conrol tɛmɛnenw ni nataw ma. Aw ye misali taamasiyɛn lajɛ min bɛ duguma.

<div id = "ne ka Karɔsi" kalasi = "karosel" >  
  <!-- 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

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.

Kan

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.

Misaliya

Aw bɛ sɛbɛnni daminɛ yɔrɔ la min bɛ duguma walasa ka sɛbɛnni ɲɛfɛ jaabiw jira.

Baara kɛ ni bootstrap-typeahead.js ye

Aw bɛ typeahead wele javascript fɛ:

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

Sugandili minnu bɛ kɛ

Markup (Marka) ye

Donanw ka fɛnw fara ɲɔgɔn kan walasa ka fɛn dɔ sɛbɛn ni typeahead baarakɛcogo ye.

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

Fɛɛrɛw

.typeahead(sugandiliw) .

A bɛ donnakow daminɛ ni typeahead ye.