Dhuunfaa ykn qindaa’ee

Ijaarsi dhuunfaan hammatamuu danda'u (tokko tokko hirkattummaa barbaadan ta'us), ykn hunda yeroo tokkotti. Bootstrap.js fi bootstrap.min.js lamaan isaanii faayilii tokko keessatti ifteessitoota hunda of keessaa qabu.

Amaloota deetaa

Sarara JaavaScript tokko osoo hin barreessiin pilaaginoota Bootstrap hunda karaa API mallattoo qulqulluu ta'een fayyadamuu dandeessa. Kun API sadarkaa jalqabaa Bootstrap yoo ta'u yeroo plugin fayyadamtu yaada kee isa jalqabaa ta'uu qaba.

Kana jechuun, haala tokko tokko keessatti dalagaa kana dhaamsuun barbaachisaa ta'uu danda'a. Kanaafuu, taateewwan hunda maqaa qaama irratti `'data-api'` waliin addaan baafaman irratti hiikuudhaan API amaloota deetaa hanqisuuf dandeettii ni kennina. Kunis akkana fakkaata:

$ ( 'qaama' ). off ( '.daataa-api' ) .

Akka filannootti, ifteessaa murtaa'e irratti xiyyeeffachuuf, maqaa ifteessaa akka iddoo maqaatti iddoo maqaa deetaa-api waliin akkasitti qofa hammachuu:

$ ( 'qaama' ). off ( '.akeekkachiisa.daataa-api' ) .

API sagantaa

Akkasumas, Bootstrap plugins hunda karaa JavaScript API qulqulluu ta'een fayyadamuu danda'uu qabdu jennee amanna. APIwwan uummataa hundi malawwan tokko, sansalata qaban, fi walitti qabama irratti tarkaanfii fudhatame deebisu.

$ ( ".btn.balaa" ). button ( "jijjiirraa" ). addClass ( "cophaa" ) .

Malleen hundi wanta filannoowwan filannoo, tarree mala murtaa'e irratti xiyyeeffatu, ykn homaa hin qabne (kan amala durtii waliin ifteessituu jalqabu) fudhachuu qabu:

$ ( "#Moodaalii koo" ). modal () // durtii waliin jalqabame                       
$ ( "#Moodaalii koo" ). modal ({ keyboard : soba }) // furtuu tokko malee jalqabame     
$ ( "#Moodaalii koo" ). modal ( 'show' ) // agarsiisa battalumatti jalqaba fi waama                

Tokkoon tokkoon ifteessaa akkasumas ijaarsa isaa raw qabeentaa `Ijaarsa` irratti saaxilaa: $.fn.popover.Constructor. Yoo fakkeenya ifteessaa murtaa'e argachuu barbaadde, kallattiin elementii irraa fudhadhu: $('[rel=popover]').data('popover').

Waldhabdee Hin Qabu

Yeroo tokko tokko Bootstrap plugins UI frameworks biroo wajjin fayyadamuun barbaachisaadha. Haalota kanneen keessatti, walitti bu'iinsi iddoo maqaa darbee darbee uumamuu danda'a. Yoo kun ta'e, .noConflictpilaaginii gatii isaa deebisuu barbaaddu bilbiluu dandeessa.

var Qabduu bootstrap = $ . fn jechuun . button . noConflict () // $.fn.button gara gatii duraan ramadameetti deebisa 
$ . fn jechuun . bootstrapBtn = bootstrapButton             // $().bootstrapBtn dalagaa bootstrap kennuu

Taateewwan

Bootstrap taateewwan amala gochoota addaa plugin irra caalaan isaaniif kenna. Walumaagalatti, kunniin bifa xumura hin qabnee fi gocha darbeen dhufu - bakka dhuma hin qabne (fkn show) jalqaba taatee tokkoo irratti kaka’u, fi bifa gocha isaa isa darbe (fkn shown) xumura gocha tokkoo irratti kaka’u.

Taateewwan dhuma hin qabne hundi dalagaa preventDefault ni kennu. Kunis dandeettii raawwii gocha tokkoo osoo hin jalqabin dhaabuu kenna.

$ ( '#Moodaalii koo' ). on ( 'agarsiisi' , faankishinii ( e ) { .   
    yoo ( ! deetaa ) e . preventDefault () // moodaalii akka hin agarsiifamne dhaaba   
}) .

Waa'ee ce'umsaa

Bu'aa ce'umsaa salphaadhaaf, bootstrap-transition.js al tokko faayilii JS kanneen biroo cinatti dabali. Yoo qindaa'e (ykn xiqqaate) bootstrap.js fayyadamaa jirta ta'e , kana hammachuun hin barbaachisu—dursee jira.

Fayyadama keesii

Fakkeenyota muraasni pilaaginii ce'umsaa:

• Moodaalota keessatti islaayidii ykn fading
• Caancalawwan fading out ta'an
• Fading out akeekkachiisa
• Qaaqa kaarooseelii kan lilmoo'u

Fakkeenyaaf

Moodaalonni qajeeloo, garuu jijjiiramaa, qaaqa gaaffiiwwan dalagaa xiqqaa barbaadamu fi durtii ismaartii qaban.

Fakkeenya istaatiksii

Moodaalii agarsiifame mataduree, qaama, fi tuuta gochoota jalaqaba keessatti.

<div class = "moodaalii dhoksaa fade" > 
  <div class = "mataduree-moodaalii" > 
    < gosa qaree = "qaree" gita = "cufi" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > &yeroo; </button> jedhu    
    <h3> Mata duree moodaalii </h3>
  </div> jechuun ni danda’ama
  <div class = "qaama-moodaalii" > 
    <p> Qaama gaarii tokko... </p>
  </div> jechuun ni danda’ama
  <div class = "moodaalii-miila" > 
    <a href = "#" gita = "btn" > Cufi </a>  
    <a href = "#" class = "btn btn-primary" > Jijjiiramoota saagi </a>  
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Deemoo kallattiin

Qabduu armaan gadii cuqaasuun moodaalii karaa JaavaScript jijjiiri. Innis gadi siqee gubbaa fuula irraa ni fade in ta'a.

<!-- Qabduu moodaalii kakaasuuf -->
<a href = "#myModal" gahee = "button" class = "btn" data-toggle = "moodaalii" > Moodaala demoo jalqabi </a>    
 
<!-- Moodaalii -->
<div id = "myModal" class = "moodaalii dhoksuu fade" tabindex = "-1" gahee = "qaaqa" aria-labelledby = "myModalLabel" aria-dhokfame = "dhugaa" >      
  <div class = "mataduree-moodaalii" > 
    < gosa qaree = "qaree" gita = "cufi" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > × </button>    
    <h3 id = "myModalLabel" > Mata duree moodaalii </h3> 
  </div> jechuun ni danda’ama
  <div class = "qaama-moodaalii" > 
    <p> Qaama gaarii tokko... </p>
  </div> jechuun ni danda’ama
  <div class = "moodaalii-miila" > 
    <button class = "btn" data-dismiss = "moodaalii" aria-dhoksaa = "dhugaa" > Cufi </button>   
    <button class = "btn btn-primary" > Jijjiiramoota saagi </button> 
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Fayyadama

Karaa amaloota deetaa

JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-toggle="modal", akka qaree, waliin data-target="#foo"ykn href="#foo"moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.

<button type = "button" data-toggle = "moodaalii" deetaa-galma = "#myModal" > Moodaalii </button> jalqabi   

Karaa JaavaScript

Moodaalii id myModalqabu sarara JaavaScript tokkoon waami:

$ ( '#Moodaalii koo' ). moodaalii ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-backdrop="".

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

Malawwan

.modal(filannoowwan) .

Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

$ ( '#Moodaalii koo' ). moodaalii ({
  keyboard : soba 
}) .

.modal('jijjiirraa') .

Harkaan moodaalii tokko jijjiira.

$ ( '#Moodaalii koo' ). modal ( 'jijjiirraa' ) .

.modal('agarsiisi') .

Harkaan moodaalii tokko bana.

$ ( '#Moodaalii koo' ). modal ( 'agarsiisi' ) .

.modal('dhoksuu') .

Harkaan moodaalii tokko dhoksa.

$ ( '#Moodaalii koo' ). modal ( 'dhoksuu' ) .

Taateewwan

Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila.

$ ( '#Moodaalii koo' ). on ( 'dhokataa' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Fakkeenyaaf

Navbar, caancalaa fi kiniinii dabalatee, plugin salphaa kanaan menuwwan gadi bu'an gara waan kamiyyuu jechuun ni danda'amatti dabali.

Navbar tokko keessa

Caancala keessaa

Fayyadama

Karaa amaloota deetaa

data-toggle="dropdown"Tarree tokko jijjiiruuf hidhaa ykn qaree irratti dabali .

<div class = "gadi bu'aa" > 
  <a class = "dropdown-toggle" data-toggle = "gadi bu'aa" href = "#" > Kakaasu gadi bu'aa </a>   
  <ul gita = "sajoo-gadi-bu'aa" gahee = "sajoo" aria-labelledby = "dLabel" >   
    ...
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

URL'n akka hin mancaane gochuuf, data-targetbakka href="#".

<div class = "gadi bu'aa" > 
  <a class = "gadi-bu'aa-jijjiirraa" id = "dLabel" gahee = "button" deetaa-jijjiirraa = "gadi-bu'aa" deetaa-galma = "#" href = "/fuula.html" >      
    Gadi bu'aa
    <b gita = "kaartaa" ></b> 
  </a> jechuun ni danda’ama
  <ul gita = "sajoo-gadi-bu'aa" gahee = "sajoo" aria-labelledby = "dLabel" >   
    ...
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Karaa JaavaScript

Karaa JaavaScript kanneen gadi bu'an bilbili:

$ ( '.gadi-bu'aa-jijjiirraa' ). gadi bu'aa () .

Filannoowwan

Homaa

Malawwan

$().dropdown('jijjiirraa') .

Api sagantaa kan menu navbar kennameef ykn navigeeshinii caancalaaf jijjiiruuf.

Fakkeenya navbar keessatti

Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun galmoota nav ofumaan fooyyessuuf. Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Wantoonni xiqqaan gadi bu'an akkasumas ni calaqqisu.

Fayyadama

Karaa amaloota deetaa

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-spy="scroll"elementii irratti basaasuu barbaaddutti dabaluu qofa (baay'inaan kun qaama ta'a) fi data-target=".navbar"nav kam akka fayyadamtu filachuuf. Qaama waliin scrollspy fayyadamuu barbaadda .nav.

<qaama deetaa-basaasaa = " tarree" deetaa-galma = ".navbar" > ... </body>  

Karaa JaavaScript

Karaa JaavaScript gara scrollspy bilbili:

$ ( '#navbar' ). barruulee () .

Malawwan

.scrollspy('haaraa') .

Yeroo scrollspy fayyadamtu elementoota DOM irraa dabaluu ykn haquu wajjin walqabatee, mala haaromsaa akkasitti waamuun si barbaachisa:

$ ( '[daataa-basaasaa="tarree"]' ). tokkoon tokkoon ( faankishinii () { .  
  var $ basaasaa = $ ( kana ). scrollspy ( 'haaromsaa' ) .
});

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset="".

Taateewwan

Fakkeenya caancalaa

Dalagaa caancala saffisaa, daayinamikii gara foddaa qabiyyee naannootti ce'uuf dabali, karaa qaaqa tarree illee.

Fayyadama

Caancalawwan caancala qaban karaa JaavaScript dandeessisi (tokkoon tokkoon caancalaa dhuunfaan hojii irra oolchuu qaba):

$ ( '#Tab koo a' ). cuqaasaa ( faankishinii ( e ) { .  
  e . ittisuuDurtii ();
  $ ( kana ). tab ( 'agarsiisi' );
}) .

Caancaloota dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

$ ( '#Tab koo a[href="#profaayilii"]' ). tab ( 'agarsiisi' ); // Caancala maqaadhaan filadhu 
$ ( '#Tab koo a:jalqaba' ). tab ( 'agarsiisi' ); // Caancala jalqabaa filadhu 
$ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' ); // Caancala dhumaa filadhu 
$ ( '#Tab koo li:eq(2) a' ). tab ( 'agarsiisi' ); // Caancala sadaffaa filadhu (0-indexed) . 

Markup gochuu

data-toggle="tab"JaavaScript kamiyyuu osoo hin barreessiin salphaatti ifteessuudhaan ykn data-toggle="pill"elementii tokko irratti navigeeshinii caancala ykn kiniinii hojii irra oolchuu dandeessa . Gitoota navfi gara caancalaatti dabaluudhaan akkaataa caancala Bootstrap hojii irra oolcha.nav-tabsul

<ul gita = "nav nav-tabs" > 
  <li><a href = "#mana" deetaa-jijjiirraa = "caancala" > Mana </a></li>  
  <li><a href = "#profaayilii" deetaa-jijjiirraa = "caancala" > Profaayilii </a></li>  
  <li><a href = "#ergaawwan" data-toggle = "caancala" > Ergaawwan </a></li>  
  <li><a href = "#sajoo" data-toggle = "caancala" > Sajoo </a></li>  
</ul> jechuun ni danda’ama

Malawwan

$().caancala

Qabduu caancalaa fi qabduu qabiyyee hojii irra oolcha. Caancalli DOM keessatti noodiin qabduu a data-targetykn kan xiyyeeffatu qabaachuu qaba.href

<ul class = "nav nav-tabs" id = "Tab koo" >  
  <li class = "socho'aa" ><a href = "#mana" > Mana </a></li>  
  <li><a href = "#profaayilii" > Profaayilii </a></li> 
  <li><a href = "#ergaawwan" > Ergaawwan </a></li> 
  <li><a href = "#sajoo" > Sajoo </a></li> 
</ul> jechuun ni danda’ama
 
<div class = "qabiyyee-caancala" > 
  <div class = "caancala-qaree socho'aa" id = "mana" > ... </div>  
  <div class = "caancala-qaaqa" id = "profaayilii" > ... </div>  
  <div class = "caancala-qaaqa" id = "ergaawwan" > ... </div>  
  <div class = "caancala-qaaqa" id = "qindaa'inoota" > ... </div>  
</div> jechuun ni danda’ama
 
<iskiriiptii>
  $ ( faankishinii () { .  
    $ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' );
  }) .
</script> jedhu

Taateewwan

$ ( 'a[deetaa-jijjiirraa="caancala"]' ). on ( 'agarsiifame' , faankishinii ( e ) { .   
  e . target // caancala hojiirra oole
  e . relatedTarget // caancala duraanii
}) .

Fakkeenyaaf

JQuery.tipsy plugin gaarii Jason Frame barreesse irraa kaka'umsa argate; Gorsi meeshaa gosa fooyya'eedha, kan fakkiiwwan irratti hin hirkanne, sochiiwwaniif CSS3 fayyadamu, fi kuusaa mata duree naannootiif deetaa-amaloota.

Sababa raawwii hojiif, tooltip fi popover data-apis opt in ta'u, jechuunis ofii keetii jalqabuu qabda .

Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:

Kallattii afur

Gorsa meeshaalee gareewwan galtee keessatti

Yeroo gorsa meeshaalee fi popovers gareewwan galtee Bootstrap waliin fayyadamtu, containermiidhaa hin barbaachifne irraa of eeguuf filannoo (armaan gaditti galmaa'e) saaguu qabda.

Fayyadama

Gorsa meeshaa karaa JaavaScript kakaasi:

$ ( '#fakkeenya' ). gorsa meeshaa ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Markup gochuu

<a href = "#" data-toggle = "gorsa meeshaa" title = "gorsa meeshaa jalqabaa" > narra kaa'i </a>   

Malawwan

$().gorsa meeshaa(filannoo) .

Qabduu gorsa meeshaa walitti qabama elementii irratti maxxansi.

.tooltip('agarsiisi') .

Gorsa meeshaa elementii tokkoo mul'isa.

$ ( '#elementii' ). tooltip ( 'agarsiisi' ) .

.tooltip('dhoksi') .

Gorsa meeshaa elementii dhoksa.

$ ( '#elementii' ). tooltip ( 'dhoksuu' ) .

.tooltip('jijjiirraa') .

Gorsa meeshaa qaama tokkoo jijjiira.

$ ( '#elementii' ). gorsa meeshaa ( 'toggle' ) .

.tooltip('balleessuu') .

Gorsa meeshaa elementii tokkoo dhoksuu fi balleessa.

$ ( '#elementii' ). tooltip ( 'balleessuu' ) .

Fakkeenyaaf

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti argaman, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali. Poopover kakaasuuf button irratti harka kaa'i. Tooltip akka hammatamu barbaada .

Poopover kan hin jijjiiramne

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e.

Mallattoon akka popovers agarsiifamu hin jiru JaavaScript fi qabiyyee dataamaloota keessaa irraa hin uumamu.

Deemoo kallattiin

Kallattii afur

Fayyadama

Popovers karaa JavaScript dandeessisi:

$ ( '#fakkeenya' ). popover ( filannoowwan ) .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Markup gochuu

Sababa raawwii hojiif, Tooltip fi Popover data-apis opt in. Yoo isaan fayyadamuu barbaadde filannoo filannoo qofa ifteessi.

Malawwan

$().popover(filannoowwan) .

Kuusaa elementii tokkoof popovers jalqaba.

.popover('agarsiisi') .

Elementiiwwan popover tokko mul'isa.

$ ( '#elementii' ). popover ( 'agarsiisi' ) .

.popover('dhoksuu') .

Elementii popover tokko dhoksa.

$ ( '#elementii' ). popover ( 'dhoksuu' ) .

.popover('jijjiirraa') .

Toggles an elementoota popover.

$ ( '#elementii' ). popover ( 'jijjiirraa' ) .

.popover('balleessuu') .

Poopover elementii tokkoo dhoksee balleessa.

$ ( '#elementii' ). popover ( 'balleessuu' ) .

Fakkeenya akeekkachiisa

Ergaawwan akeekkachiisaa hunda irratti dalagaa ari'uu ifteessaa kanaan dabali.

Fayyadama

Karaa JaavaScript akeekkachiisa kuffisuu dandeessisi:

$ ( ".akeekkachiisa" ). akeekkachiisa () .

Markup gochuu

data-dismiss="alert"Ofumaan dalagaa cufiinsa akeekkachiisaa kennuudhaaf button cufuu kee irratti dabaluu qofa .

<a class = "cufi" data-dismiss = "akeekkachiisa" href = "#" > &yeroo; </a> jechuun ni danda’ama   

Malawwan

$().akeekkachiisa() .

Akeekkachiisa hunda dalagaa dhiyeenyaatiin marsa. Akeekkachiisni kee yeroo cufamu akka socho'u gochuuf, isaan duraan gita .fadefi isaan irratti hojiirra oole qabaachuu isaanii mirkaneessi..in

.alert('cufi') .

Akeekkachiisa tokko cufa.

$ ( ".akeekkachiisa" ). akeekkachiisa ( 'cufi' ) .

Taateewwan

Gitni akeekkachiisaa Bootstrap taateewwan muraasa gara dalagaa akeekkachiisaatti hooking gochuuf saaxila.

$ ( '#akeekkachiisa-koo' ). bind ( 'cufame' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Fakkeenya fayyadama

Buttons waliin caalaatti hojjedhu. Qabduu too'annoo haalata ykn gareewwan qaree qaamolee dabalataa akka barruulee uumi.

Stateful

data-loading-text="Loading..."Haalata fe'iinsaa qaree irratti fayyadamuuf dabali .

<button type = "button" class = "btn btn-primary" data-loading-text = "Fa'aa jira..." > Haala fe'amaa jira </button>   

Tokkicha toggle

data-toggle="button"Qabduu tokko irratti toggling activate gochuuf dabali .

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

Sanduuqa filannoo

data-toggle="buttons-checkbox"Jijjiirraa akkaataa sanduuqa filannoo btn-group irratti dabali .

<div class = "btn-garee" deetaa-jijjiirraa = "buttooni-sanduuqa filannoo" >  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Bitaa </button>  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Giddugaleessa </button>  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Mirgaa </button>  
</div> jechuun ni danda’ama

Raadiyoo

data-toggle="buttons-radio"Jijjiirraa akkaataa raadiyoo btn-group irratti dabali .

<div class = "btn-garee" deetaa-jijjiirraa = "buttons-radio" >  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Bitaa </button>  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Giddugaleessa </button>  
  < gosa qaree = "qaree" gita = "btn btn-primary" > Mirgaa </button>  
</div> jechuun ni danda’ama

Fayyadama

Qabduu karaa JaavaScript dandeessisi:

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

Markup gochuu

Amaloonni deetaa ifteessaa qareedhaaf murteessaadha. Gosoota mallattoo adda addaatiif koodii fakkeenyaa armaan gadii ilaali.

Filannoowwan

Homaa

Malawwan

$().button('jijjiirraa') .

Haala dhiibaa jijjiira. Qabduu bifa akka inni hojiirra oole kenna.

< gosa qaree = "button" class = "btn" data-toggle = "button" > ... </button>    

$().button('fe'amaa jira') .

Haalata qaree gara fe'amuutti saaga - qaree hanqisa fi barruu gara barruu fe'uutti jijjiira. Barruu fe'uun qaama qaree irratti amaloota deetaa fayyadamuun ibsamuu qaba data-loading-text.

<button type = "button" class = "btn" data-loading-text = "wantoota fe'uu..." > ... </button>    

$().button('deebisaa') .

Haalata qaree deebisa - barruu gara barruu jalqabaatti jijjiira.

$().button(tarree) .

Haalata qaree deebisa - barruu gara haalata barruu deetaa ibsame kamiyyuutti jijjiira.

< gosa qaree = "qaree" gita = "btn" deetaa-guutuu-barruu = "xumurame!" > ... </button> jedhu    
<iskiriiptii>
  $ ( '.btn' jedhamuun kan beekamu ). button ( 'guutuu' ) .
</script> jedhu

Waa'ee

Akkaataa bu'uuraa fi deeggarsa jijjiiramaa qaamolee kuffamuu danda'an kan akka akkoordiyoonii fi navigeeshinii argadhu.

* Pluginiin Ce'umsaa akka hammatamu barbaada.

Fakkeenyaaf akkoordiyoon

Ijaarsa kuffisuu fayyadamuun, wiijetii akkaataa akkoordiyoon salphaa ijaarre:

<div class = "akkoordiyoonii" id = "akkoordiyoonii2" >  
  <div class = "garee-akkoordiyoonii" > 
    <div class = "mata duree-akkoordiyoonii" > 
      <a class = "accordion-toggle" data-toggle = "kufaatii" deetaa-warra = "#akkoordiyoonii2" href = "#collapseTokko" >    
        Qabxii Garee Cufamuu Danda'u #1
      </a> jechuun ni danda’ama
    </div> jechuun ni danda’ama
    <div id = "collapseOne" class = "kufaatii-qaama-akkoordiyoonii keessa" >  
      <div class = "akkoordiyoonii-keessaa" > 
        Anim pariatur jechuun kan beekamu...
      </div> jechuun ni danda’ama
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
  <div class = "garee-akkoordiyoonii" > 
    <div class = "mata duree-akkoordiyoonii" > 
      <a class = "accordion-toggle" data-toggle = "kufaatii" deetaa-warra = "#akkoordiyoonii2" href = "#collapseLama" >    
        Qabxii Garee Cufamuu Danda'u #2
      </a> jechuun ni danda’ama
    </div> jechuun ni danda’ama
    <div id = "collapseTwo" class = "kufaatii-qaama-akkoordiyoonii" >  
      <div class = "akkoordiyoonii-keessaa" > 
        Anim pariatur jechuun kan beekamu...
      </div> jechuun ni danda’ama
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama
...

Akkasumas mallattoo accordion malee plugin fayyadamuu dandeessa. Qabduu babal'isuu fi kuffisuu elementii biraa akka jijjiiru godhi.

< gosa qaree = "qaree" gita = "btn btn-balaa" deetaa-jijjiirraa = "kufaatii" deetaa-galma = "#demo" >    
  salphaa kan cufamuu danda’u
</button> jedhu
 
<div id = "demo" class = "kufaatii keessa" > ... </div>  

Fayyadama

Karaa amaloota deetaa

To'annoo elementii cufamuu danda'u ofumaan ramaduuf elementii data-toggle="collapse"fi a qofa dabaluu qofa . data-targetAmalli data-targetfilannoo css kufaatii itti hojii irra oolchuuf fudhata. collapseGitaa gara qaama cufamuu danda'utti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali in.

Bulchiinsa garee akkoordiyoon fakkaatu gara too'annoo kuffamuu danda'utti dabaluuf, amalli deetaa dabali data-parent="#selector". Kana hojiidhaan ilaaluuf demoo ilaalaa.

Karaa JaavaScript

Harkaan dandeessisi:

$ ( ".kufaatii" ). kufaatii () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-parent="".

Malawwan

.collapse(filannoowwan) .

Qabiyyee kee akka qaama cufamuu danda'utti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

$ ( '#koocufamuu danda'a' ). kufaatii ({
  toggle : soba 
}) .

.collapse('jijjiirraa') .

Qaama kuffamuu danda'u gara agarsiifame ykn dhokfameetti jijjiira.

.collapse('agarsiisi') .

Qabeentaa kuffamuu danda'u agarsiisa.

.collapse('dhoksuu') .

Qabeentaa kuffamuu danda'u dhoksa.

Taateewwan

Gitni kufaatii Bootstrap taateewwan muraasa gara dalagaa kufaatiitti hooking gochuuf saaxila.

$ ( '#koocufamuu danda'a' ). on ( 'dhokataa' , faankishinii () { .   
  // waan tokko hojjedhu...
}) .

Fakkeenyaaf karooseelii

Agarsiisni islaayidii armaan gadii pilaaginii waliigalaa fi qaama elementoota akka karooseelii keessaa marsaa agarsiisa.

Asxaa Suuraa Xiqqaa Jalqabaa

Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Donec id elit non mi porta gravida yeroo eget metus jedhamutti. Nullam id dolor id nibh ultricies konkolaataa 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 = "Kaarooseelii koo" gita = "islaayidii karooseelii" >  
  <ol class = "agarsiistota-karooseelii" > 
    <li data-target = "#myCarousel" deetaa-islaayidii-gara = "0" gita = "socho'aa" ></li>   
    <li deetaa-galma = "#myCarousel" deetaa-islaayidii-gara = "1" ></li>  
    <li deetaa-galma = "#myCarousel" deetaa-islaayidii-gara = "2" ></li>  
  </ol>dha
  <!-- Meeshaalee kaarooseelii -->
  <div class = "kaarooseelii-keessaa" > 
    <div class = "wanta socho'aa" > ... </div> 
    <div gita = "wanta" > ... </div> 
    <div gita = "wanta" > ... </div> 
  </div> jechuun ni danda’ama
  <!-- Kaarooseelii nav -->
  <a class = "to'annoo-kaarooseelii bitaa" href = "#Kaarooseelii koo" data-slide = "duraa" > ‹ </a> jechuun ni danda’ama   
  <a class = "mirga to'annoo-karooseelii" href = "#Kaarooseelii koo" data-slide = "itti aanu" > › </a> jechuun ni danda’ama   
</div> jechuun ni danda’ama

Fayyadama

Karaa amaloota deetaa

Bakka kaarooseelii salphaatti to'achuuf amaloota deetaa fayyadami. jechoota furtuu ykn , kan iddoo islaayidii bakka ammaa isaa wajjin walqabatee jijjiira data-slidefudhata . Akka filannootti, indeeksii islaayidii raw gara karooseeliitti dabarsuudhaaf fayyadami , kunis utaalcha's iddoo islaayidii gara indeeksii murtaa'aa dhaan jalqabu .prevnextdata-slide-todata-slide-to="2"0

Karaa JaavaScript

Carousel harkaan bilbili:

$ ( '.kaarooseelii' ). kaarooseelii () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JavaScriptz darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-interval="".

Malawwan

.karooseelii(filannoo) .

Filannoo filannoo ta'een kaarooseelii jalqabsiisee objectmeeshaalee keessaa biskileetii jalqaba.

$ ( '.kaarooseelii' ). kaarooseelii ({
  gidduugaleessa : 2000 
}) .

.karooseelii('marsaa') .

Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.

.carousel('dhaabbachuu') .

Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.

.karooseelii(lakkoofsa) .

Kaarooseelii gara furtuu murtaa'etti marsaa (0 irratti hundaa'e, tarree wajjin wal fakkaata).

.karooseelii('duraa') .

Gara wanta duraatti marsaa.

.karooseelii('itti aanu')

Gara wanta itti aanutti marsaa.

Taateewwan

Bootstrap's carousel class taateewwan lama hooking gara dalagaa carousel saaxila.

Fakkeenya

Galtee barruu unkaa kamiinuu saffisaan typeaheads bareedaa uumuuf plugin bu'uuraa, salphaatti dheerate.

< gosa galtee = "barruu" data-provide = "barruu dursaa" >  

autocomplete="off"Sajoo biraawzari durtii akka hin mul'anne tarree Bootstrap typeahead irratti saaguu barbaadda .

Fayyadama

Karaa amaloota deetaa

Qabeentaa dalagaa typeahead qabu galmeessisuuf amaloota deetaa dabali akka fakkeenya armaan olii irratti mul'atutti.

Karaa JaavaScript

Typeahead harkaan waami:

$ ( '.dursa barreessaa' ). dursaa barreessi () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-source="".

Malawwan

.typeahead(filannoowwan) .

Galtee dursaa barruu waliin jalqaba.

Fakkeenya

Subnavigation bitaa irratti argamu live demo kan affix plugin ti.

Fayyadama

Karaa amaloota deetaa

Amala affix salphaatti elementii kamiyyuu irratti dabaluuf, data-spy="affix"elementii basaasuu barbaaddu qofatti dabaluu qofa. Sana booda yoom akka pinning elementii tokkoo ibsuu fi cufuu ibsuuf ofseetota fayyadami.

<div data-spy = "maxxansi" deetaa-ofseeti-gubbaa = "200" > ... </div>  

Karaa JaavaScript

Karaa JavaScript tiin affix plugin waami:

$ ( '#navbar' ). maxxansi () .

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset-top="200".