Jaavascript kan Bootstrap jedhamuuf

Qaamolee Bootstrap jireenyatti fidi-amma 12 amala jQuery plugins waliin.

Moodaalee

Sirriitti, garuu jijjiiramaa, fudhadhu aadaa javascript moodaalii plugin dalagaa xiqqaa barbaachisu qofa qofaan fi durtii ismaartii.

Dropdowns kan jedhu

Bootstrap keessatti waan kamiyyuu jechuun ni danda'ama, plugin salphaa kanaan menuwwan gadi bu'an dabali. Bootstrap deeggarsa menu gadi bu'aa guutuu on navbar, tabs, fi kiniinii keessatti qaba.

Scrollspy jechuun kan beekamu

Hidhamtoota amma socho'aa jiru bakka tarree irratti hundaa'uun agarsiisuuf hidhannoowwan navbar kee keessa jiran ofumaan fooyyessuuf scrollspy fayyadami.

Caancaloota jijjiiramuu danda'an

Caancalaa fi kiniinii qabiyyee naannoo keessaa akka jijjiiran hayyamuudhaan caancalaa fi kiniinii caalaatti faayidaa akka qabaatan gochuuf ifteessaa kana fayyadami.

Gorsa Meeshaalee

Fudhata haaraa jQuery Tipsy plugin irratti, Tooltips fakkiiwwan irratti hin hirkatan-isaan sochiiwwaniif CSS3 fi kuusaa mata duree naannoodhaaf deetaa-amaloota fayyadamu.

Popovers * jedhamu.

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali.

* Tooltips akka hammatamu barbaada

Ergaawwan akeekkachiisaa

Ijaarsi akeekkachiisaa gita xiqqaa dalagaa dhiyoo akeekkachiisa irratti dabaluudha.

Qabduulee

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

Ijaarsi kufuu

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

Kaarooseelii

Qabiyyee kamiyyuu agarsiisa islaayidii walqunnamtii qabiyyee kennuu barbaaddu gammachuu uumuu.

Dura barreessi

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

Ce'umsaa * .

Bu'aa ce'umsaa salphaadhaaf, bootstrap-transition.js al tokko dabali moodaalota keessatti islaayidii gochuuf ykn akeekkachiisa fade out gochuuf.

* Animeeshinii pilaaginii keessatti barbaachisaadha

Mataa ol qaba! Ijaarsiin javascript hundi jQuery isa haaraa barbaadu.

Waa'ee moodaalee

Sirriitti, garuu jijjiiramaa, fudhadhu aadaa javascript moodaalii plugin dalagaa xiqqaa barbaachisu qofa qofaan fi durtii ismaartii.

Faayila buufadhaa

Fakkeenya istaatiksii

Armaan gaditti moodaalii statically rendered ta'ee jira.

Deemoo kallattiin

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

Moodaala demoo eegaluu

Bootstrap-modal fayyadamuun

Modal karaa javascript bilbilaa:

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

Filannoowwan

Maqaa akaakuu durtii ibsa
duubbee boolee dhugaa Qaama moodaalii-duubbee of keessaa qaba. staticAkka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi .
kiiboordii boolee dhugaa Yeroo furtuun miliquu dhiibamu moodaalii cufa
agarsiisuu boolee dhugaa Moodaalii yeroo jalqabamu agarsiisa.

Markup gochuu

Fuula keessan irratti moodaalota sarara javascript tokko osoo hin barreessiin salphaatti activate gochuu dandeessu. data-toggle="modal"Qabeentaa too'ataa a data-target="#foo"ykn kan id elementii moodaalii wajjin walsimu irratti qofa saagi href="#foo", yeroo cuqaafamu, moodaalii kee ni jalqaba.

Akkasumas, filannoowwan fakkeenya moodaalii kee irratti dabaluuf, akka amaloota deetaa dabalataatti qaama too'annoo ykn mallattoo moodaalii mataa isaa irratti qofa hammachiisi.

  1. <a class = "btn" data-toggle = "moodaalii" href = "#Moodaalii koo" > Moodaala Eegaluu </a>
  1. <div class = "dhoksaa moodaalii" id = "Moodaalii koo" >
  2. <div class = "mataduree-moodaalii" >
  3. < gosa qaree = "qaree" gita = "cufi" data-dismiss = "moodaalii" > × </button>
  4. <h3> Mata duree moodaalii </h3>
  5. </div> jechuun ni danda’ama
  6. <div class = "qaama-moodaalii" >
  7. <p> Qaama gaarii tokko... </p>
  8. </div> jechuun ni danda’ama
  9. <div class = "moodaalii-miila" >
  10. <a href = "#" gita = "btn" deetaa-dismiss = "moodaalii" > Cufi </a>
  11. <a href = "#" class = "btn btn-primary" > Jijjiiramoota saagi </a>
  12. </div> jechuun ni danda’ama
  13. </div> jechuun ni danda’ama
Mataa ol qaba! Yoo moodaaliin kee akka keessaa fi alaa socho'u barbaadde , elementicha .fadeirratti gita tokko qofa dabaluu .modal(kana gochaan ilaaluuf demoo ilaali) fi bootstrap-transition.js dabali.

Malawwan

.modal(filannoowwan) .

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

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

.modal('jijjiirraa') .

Harkaan moodaalii tokko jijjiira.

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

.modal('agarsiisi') .

Harkaan moodaalii tokko bana.

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

.modal('dhoksuu') .

Harkaan moodaalii tokko dhoksa.

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

Taateewwan

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

Taatee Ibsa
agarsiisuu Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifameera Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaaf akka mul'atu godhame (ce'umsa css xumuramuu eega).
dhoksuu Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokfamuu xumuredha (ce'umsa css xumuramuu eega).
  1. $ ( '#Moodaalii koo' ). on ( 'dhokataa' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun galmoota nav ofumaan fooyyessuuf.

Faayila buufadhaa

Fakkeenya navbar kan scrollspy qabu

Naannoo armaan gadii kana garagalchiiti fooyya'iinsa navigeeshinii ilaalaa. Wantoonni xiqqaan gadi bu'an akkasumas ni calaqqisu. Yaali!

@furdaa

Beeksisa leggings keytar, brunch id dhaaba aartii dolor labore. Pitchfork yr enim lo-fi osoo isaan hin gurguratin qui. Tumblr qonnaa irraa gara minjaalaatti mirga biskileetii waanuma fedhe. Anim keffiyeh kaarlees kaardii. Velit seitan mcsweeney's suuraa booth 3 lukkuu ji'a irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui tarii waa'ee isaanii hin dhageenye et cardigan fandii imaanaa culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony baayoodiizeelii keffiyeh artiisan ullamco bu'aa.

@mdo jedhaa

Veniam marfa mustache iskeetiiboordii, adipisicing fugiat velit qeensa pitchfork. Freegan qeensa aliqua cupidat mcsweeney's vero jedhamuun beekama. Kuupidaat afur loko nisi, ea helvetica nulla carles. Tattooed cosby sweater konkolaataa nyaataa fe'umsaa, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial jedhamuun beekama. Carles sochii qaamaa miidhaginaa hin taane quis gentrify. Biruukiliin adipisicing hojii harkaa biiraa itti aanaa keytar deserunt.

tokko

Occaecat commodo aliqua delectus jedhamuun beekama. Fap hojii harkaa biiraa deserunt skateboard ea. Lomo mirga biskileetii adipisicing banh mi, velit ea sunt sadarkaa itti aanu locavore buna ka'umsa tokkoo magna veniam keessatti. Jireenya ol'aanaa id vaayinaayilii, echo paarkii consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing jedhamuun beekama. Consectetur nisi DIY boorsaa ergamaa xiqqaa. Cred ex in, itti fufiinsa kan qabu delectus consectetur fanny pack iphone.

lama

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa ergamaa boorsaa marfa waanuma fedhe delectus nyaata fe'umsaa. Sapiente synth id akka tilmaamaatti. Locavore sed helvetica cliche irony, thundercats tarii waa'ee isaanii hin dhageenye consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat osoo isaan hin gurguramin dura, terry richardson proident brunch nesciunt quis cosby iswiiterii pariatur keffiyeh ut helvetica artisan. Cardigan biiraa hojii harkaa seitan qophaa'aa velit. VHS chambray laboris yeroodhaaf veniam. Anim mollit minim commodo ullamco qilleensaa.


Bootstrap-scrollspy.js fayyadamuudhaan

Karaa javascript scrollspy bilbilaa:

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

Markup gochuu

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-spy="scroll"elementii basaasuu barbaaddu qofatti dabali (baay'inaan kun qaama ta'a).

  1. <body data-spy = "tarree" > ... </body>
Mataa ol qaba! Hidhamtoonni Navbar galmoota id furmaata argachuu danda'an qabaachuu qabu. Fakkeenyaaf, a <a href="#home">home</a>waan dom keessa jiru akka <div id="home"></div>.

Malawwan

.scrollspy('haaraa') .

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

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

Filannoowwan

Maqaa akaakuu durtii ibsa
ofseeti jechuun ni danda’ama lakkoofsa 10. Piikseelota yeroo iddoo tarree shallagdu gubbaa irraa ofseeti.

Taateewwan

Taatee Ibsa
activate gochuu Taatee kun yeroo wanti haaraan scrollspy'n hojiirra oolu hundatti dhukaasa.

Ijaarsi kun qabiyyee naannoo keessaa ce'uuf dalagaa caancala fi kiniinii saffisaa, daayinamikii dabalata.

Faayila buufadhaa

Fakkeenya caancalaa

Qaaqa dhokataa gidduutti jijjiiruuf caancalaa armaan gadii cuqaasi, karaa sajoo tarree illee.

Raw denim tarii waa'ee isaanii hin dhageenye jean shorts Austin. Nesciunt tofu stumptown aliqua, qulqulleessuu gooftaa retro synth. Mustache cliche yeroodhaaf, wiiliyamsbarg kaarles veegaan helvetica. Reprehenderit foon qalaa retro keffiyeh abjuu qabatu synth. Koosbii iswiiterii eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum afaan oromoo afaan oromoo. Seitan aliquip quis cardigan uffata ameerikaa, foon qalaa voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Bootstrap-tab.js fayyadamuudhaan

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

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

Caancaloota dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

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

Markup gochuu

Salphaatti ifteessuudhaan data-toggle="tab"ykn data-toggle="pill"elementii tokko irratti osoo javascript tokkollee hin barreessiin tab ykn pill navigation activate gochuu dandeessa. Gitoota navfi gara caancalaatti dabaluudhaan akkaataa caancala bootstrap hojii irra oolcha.nav-tabsul

  1. <ul gita = "nav nav-tabs" >
  2. <li><a href = "#mana" deetaa-jijjiirraa = "caancala" > Mana </a></li>
  3. <li><a href = "#profaayilii" deetaa-jijjiirraa = "caancala" > Profaayilii </a></li>
  4. <li><a href = "#ergaawwan" data-toggle = "caancala" > Ergaawwan </a></li>
  5. <li><a href = "#sajoo" data-toggle = "caancala" > Sajoo </a></li>
  6. </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

  1. <ul class = "nav nav-tabs" id = "Tab koo" >
  2. <li class = "socho'aa" ><a href = "#mana" > Mana </a></li>
  3. <li><a href = "#profaayilii" > Profaayilii </a></li>
  4. <li><a href = "#ergaawwan" > Ergaawwan </a></li>
  5. <li><a href = "#sajoo" > Sajoo </a></li>
  6. </ul> jechuun ni danda’ama
  7.  
  8. <div class = "qabiyyee-caancala" >
  9. <div class = "caancala-qaree socho'aa" id = "mana" > ... </div>
  10. <div class = "caancala-qaaqa" id = "profaayilii" > ... </div>
  11. <div class = "caancala-qaaqa" id = "ergaawwan" > ... </div>
  12. <div class = "caancala-qaaqa" id = "qindaa'inoota" > ... </div>
  13. </div> jechuun ni danda’ama
  14.  
  15. <iskiriiptii>
  16. $ ( faankishinii () { .
  17. $ ( '#Tab koo a:dhuma' ). tab ( 'agarsiisi' );
  18. }) .
  19. </script> jedhu

Taateewwan

Taatee Ibsa
agarsiisuu Taatee kun agarsiisa caancalaa irratti dhukaasa, garuu osoo caancala haaraan hin agarsiifamiin dura. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
agarsiifameera Taatee kun agarsiisa caancala irratti erga caancala agarsiifamee booda dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
  1. $ ( 'a[deetaa-jijjiirraa="caancala"]' ). on ( 'agarsiifame' , faankishinii ( e ) { .
  2. e . target // caancala hojiirra oole
  3. e . relatedTarget // caancala duraanii
  4. }) .

Waa'ee Gorsa Meeshaalee

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.

Faayila buufadhaa

Fakkeenya fayyadama Tooltips

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

Paantii cimaa sadarkaa itti aanu keffiyeh tarii waa'ee isaanii hin dhageenye. Booth suuraa qeensa raw denim letterpress vegan ergamaa boorsaa stumptown. Qonnaa irraa gara minjaalaatti seitan, mcsweeney's fixie itti fufiinsa qabu quinoa 8-bit uffata ameerikaa terry richardson vinyl chambray qabu . Qeensa stumptown, kaardii banh mi lomo qilleensaa. Tofu biodiesel williamsburg marfa, afur loko mcsweeney's qulqulleessuu vegan chambray. A really ironic artisan whatever keytar , scenester qonnaa irraa gara minjaala banksy Austin twitter qabachuu freegan cred raw denim buna ka'umsa tokkoo vaayirasii.


Bootstrap-tooltip.js fayyadamuudhaan

Gorsa meeshaa karaa javascript kakaasi:

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

Filannoowwan

Maqaa akaakuu durtii ibsa
sochii qaamaa (animation). boolee dhugaa ce'umsa css fade gara tooltip irratti hojii irra oolchi
ramaddii tarree|faankishinii 'gubbaa' akkaataa itti tooltip itti dhaabdan - gubbaa | jalaa | bitaa | sirrii
filannoodha hidhaa soba Yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu.
mata-duree tarree | faayidaa '' . gatii mata duree durtii yoo mallattoon `mata duree` hin jirre
dammaqsuu hidhaa 'hover' jedhu. akkaataa tooltip itti kakaafamu - hover | xiyyeeffannoo | kan harkaanii
boodatti hafuu lakkoofsa | meeshaa 0.

harkifannaa gorsa meeshaa agarsiisuu fi dhoksuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { show: 500, hide: 100 }

Mataa ol qaba! Filannoowwan gorsa meeshaalee dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama.

Markup gochuu

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

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

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

.tooltip('dhoksi') .

Gorsa meeshaa elementii dhoksa.

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

.tooltip('jijjiirraa') .

Gorsa meeshaa qaama tokkoo jijjiira.

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

Waa'ee popovers

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali.

* Tooltip akka hammatamu barbaada

Faayila buufadhaa

Fakkeenya hover popover

Poopover kakaasuuf button irratti harka kaa'i.


Bootstrap-popover.js fayyadamuudhaan

Popovers karaa javascript dandeessisi:

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

Filannoowwan

Maqaa akaakuu durtii ibsa
sochii qaamaa (animation). boolee dhugaa ce'umsa css fade gara tooltip irratti hojii irra oolchi
ramaddii tarree|faankishinii 'sirrii' akkaataa popover itti dhaabdan - gubbaa | jalaa | bitaa | sirrii
filannoodha hidhaa soba yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu
dammaqsuu hidhaa 'hover' jedhu. akkaataa tooltip itti kakaafamu - hover | xiyyeeffannoo | kan harkaanii
mata-duree tarree | faayidaa '' . gatii mata duree durtii yoo amalli `mata duree` hin jirre
qabiyyee tarree | faayidaa '' . gatii qabiyyee durtii yoo amalli `data-content` hin jirre
boodatti hafuu lakkoofsa | meeshaa 0.

popover agarsiisuu fi dhoksuu harkifachuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { show: 500, hide: 100 }

Mataa ol qaba! Filannoon popovers dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama.

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.

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

.popover('dhoksuu') .

Elementii popover tokko dhoksa.

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

.popover('jijjiirraa') .

Toggles an elementoota popover.

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

Waa'ee akeekkachiisaa

Ijaarsi akeekkachiisaa gita xiqqaa dalagaa dhiyoo akeekkachiisa irratti dabaluudha.

Buusuu

Fakkeenya akeekkachiisa

Ijaarsi akeekkachiisaa ergaawwan akeekkachiisaa idilee irratti hojjeta, fi ergaawwan ugguru.

Qulqulluu guacamole! Best check yo self, ati baayyee gaarii hin fakkaattu.

Yaa snap! Dogoggora argatte!

Kanaa fi sana jijjiirii irra deebi'ii yaali. Duis mollis, est non commodo luctus, nisi erat ligulaa porttitor, eget lacinia odio sem nec elit. Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama.

Tarkaanfii kana fudhadhu Yookiin kana godhi


Bootstrap-alert.js fayyadamuun

Akeekkachiisa karaa javascript kuffisuu dandeessisi:

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

Markup gochuu

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

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

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

Taateewwan

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

Taatee Ibsa
cufuu Taatee kun yeroo closemala fakkeenyaa waamamu battalumatti dhukaasa.
cufamee jira Taatee kun yeroo akeekkachiisni cufame ni dhukaafama (ce'umsa css xumuramuu eega).
  1. $ ( '#akeekkachiisa-koo' ). bind ( 'cufame' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Waa'ee

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

Faayila buufadhaa

Fakkeenya fayyadama

Haalawwanii fi jijjiirraadhaaf ifteessituuwwan qaree fayyadami.

Stateful
Tokkicha toggle
Sanduuqa filannoo
Raadiyoo

Bootstrap-button.js fayyadamuun

Qabduu karaa javascript dandeessisi:

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

Markup gochuu

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

  1. <!-- Qabduu tokko irratti jijjiirraa kakaasuuf data-toggle="button" dabali -->
  2. <button class = "btn" data-toggle = "button" > Jijjiirraa Tokko </button>
  3.  
  4. <!-- Jijjiirraa akkaataa sanduuqa filannoo btn-group irratti --> irratti data-toggle="buttons-checkbox" dabali
  5. <div class = "btn-garee" deetaa-jijjiirraa = "buttooni-sanduuqa filannoo" >
  6. <button class = "btn" > Bitaa </button>
  7. <button class = "btn" > Giddugaleessa </button>
  8. <button class = "btn" > Mirgaa </button>
  9. </div> jechuun ni danda’ama
  10.  
  11. <!-- Jijjiirraa akkaataa raadiyoo btn-group irratti data-toggle="buttons-radio" dabali -->
  12. <div class = "btn-garee" deetaa-jijjiirraa = "buttons-radio" >
  13. <button class = "btn" > Bitaa </button>
  14. <button class = "btn" > Giddugaleessa </button>
  15. <button class = "btn" > Mirgaa </button>
  16. </div> jechuun ni danda’ama

Malawwan

$().button('jijjiirraa') .

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

Mataa ol qaba! data-toggleAmala fayyadamuun ofumaan jijjiiruu qaree dandeessisuun dandeessa .
  1. <button class = "btn" deetaa-jijjiirraa = "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.

  1. <button class = "btn" data-loading-text = "wantoota fe'uu..." > ... </button>
Mataa ol qaba! Firefox haala hanqifame fe'iinsa fuula hunda keessatti itti fufa . Kanaaf furmaanni autocomplete="off".

$().button('deebisaa') .

Haalata qaree deebisa - barruu gara barruu jalqabaatti jijjiira.

$().button(tarree) .

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

  1. <button class = "btn" deetaa-guutuu-barruu = "xumurame!" > ... </button> jedhu
  2. <iskiriiptii>
  3. $ ( '.btn' jedhamuun kan beekamu ). button ( 'guutuu' ) .
  4. </script> jedhu

Waa'ee

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

Faayila buufadhaa

* Pluginiin Ce'umsaa akka hammatamu barbaada.

Fakkeenyaaf akkoordiyoon

Ijaarsa kuffisuu fayyadamuun, wiijetii akkaataa akkoordiyoon salphaa ijaarre:

Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.

Bootstrap-collapse.js fayyadamuudhaan

Karaa javascript dandeessisi:

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

Filannoowwan

Maqaa akaakuu durtii ibsa
warra filannoodha soba Yoo filannoo ta'e sana booda qaamolee cufamu hunduu warra ifteessame jalatti yeroo wanti cufamu kun agarsiifamu ni cufamu. (amala aadaa akkoordiyoonii wajjin wal fakkaata)
toggle jechuun ni danda'ama boolee dhugaa Waamicha irratti qaama kuffamuu danda'u jijjiira

Markup gochuu

To'annoo elementii kuffamuu 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.

  1. <button class = "btn btn-balaa" deetaa-jijjiirraa = "kufaatii" deetaa-galma = "#demo" >
  2. salphaa kan cufamuu danda’u
  3. </button> jedhu
  4.  
  5. <div id = "demo" class = "kufaatii keessa" > ... </div>
Mataa ol qaba! Bulchiinsa garee akkoordiyoon fakkaatu gara too'annoo kuffamuu danda'utti dabaluuf, amalli deetaa dabali data-parent="#selector". Kana hojiidhaan ilaaluuf demoo ilaalaa.

Malawwan

.collapse(filannoowwan) .

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

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

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

Taatee Ibsa
agarsiisuu Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifameera Taatee kun kan dhukaafamu yeroo qaamni kufaatii fayyadamaaf akka mul'atu godhame (ce'umsa css xumuramuu eega).
dhoksuu Taatee kun yeroo hidemala waamame battalumatti dhukaafama.
dhokataa Taatee kun yeroo qaamni kufaatii fayyadamaa irraa dhokate ni dhukaafama (ce'umsa css xumuramuu eega).
  1. $ ( '#koocufamuu danda'a' ). on ( 'dhokataa' , faankishinii () { .
  2. // waan tokko hojjedhu...
  3. }) .

Waa'ee

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

Faayila buufadhaa

Fakkeenya

Bu'aa barreessuu agarsiisuuf dirree armaan gadii keessatti barreessuu jalqabi.


Bootstrap-typeahead.js fayyadamuudhaan

Karaa javascript typeahead bilbili:

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

Filannoowwan

Maqaa akaakuu durtii ibsa
madda tarree [ ] . Madda deetaa irratti gaafatamuu qabu.
wantoota lakkoofsa 8. Lakkoofsa wantaalee tarree keessaa agarsiisuuf ol'aanaa.
walsimsiisaa faayidaa qubee guddaa irratti miira hin qabne Mala gaaffiin wanta tokko waliin walsimuu isaa murteessuuf fayyadamu. Falmii tokko fudhata, itemkan gaaffii irratti qoramu. Gaaffii ammaa this.query. trueYoo gaaffiin walsimsiisa ta'e boolii deebisi .
sassaabuu faayidaa sirriitti walsimsiisuun,
qubee guddaa irratti kan xiyyeeffatu,
qubee guddaa kan hin ilaalle
Mala bu'aa ofumaan xumuruuf itti fayyadamnu. Murtii tokko fudhata itemsfi bal'ina fakkeenya typeahead qaba. Gaaffii ammaa this.query.
calaqqisiisaa faayidaa walsimsiisa durtii hunda calaqqisiisa Mala bu'aa ofumaan xumuruu calaqqisiisuuf itti fayyadamnu. Murtii tokko fudhata itemfi bal'ina fakkeenya typeahead qaba. html deebisuu qaba.

Markup gochuu

Qabeentaa dalagaa typeahead waliin galmeessisuuf amaloota deetaa dabali.

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

Malawwan

.typeahead(filannoowwan) .

Galtee dursaa barruu waliin jalqaba.