JavaScript
He Bootstrap ƒe akpawo va agbe me kple jQuery ƒe kpeɖeŋutɔ siwo wowɔ ɖe ɖoɖo nu siwo wu blaeve. De wo katã eme bɔbɔe, alo ɖekaɖeka.
He Bootstrap ƒe akpawo va agbe me kple jQuery ƒe kpeɖeŋutɔ siwo wowɔ ɖe ɖoɖo nu siwo wu blaeve. De wo katã eme bɔbɔe, alo ɖekaɖeka.
Woateŋu ade plugins ɖekaɖeka (azã Bootstrap ƒe *.js
faɛl ɖekaɖekawo), alo wo katã zi ɖeka (azã bootstrap.js
alo esiwo woɖe ɖe vovo bootstrap.min.js
).
Wo ame evea siaa bootstrap.js
kple bootstrap.min.js
plugins katã le faɛl ɖeka me. Ðeka koe nàde eme.
Plugin aɖewo kple CSS ƒe akpa aɖewo nɔa te ɖe plugin bubuwo dzi. Ne ède plugins ɖekaɖeka la, kpɔ egbɔ be yelé ŋku ɖe nusiwo dzi woanɔ te ɖo siawo ŋu le docs me. De dzesii hã be plugins katã nɔ te ɖe jQuery dzi (esia fia be ele be woatsɔ jQuery ade eme do ŋgɔ na plugin ƒe faɛlwo). Kpɔ mía ŋkumebower.json
be nàkpɔ jQuery ƒe tɔtrɔ siwo wodo alɔe.
Àteŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to dzeside API la dzi ko evɔ maŋlɔ JavaScript ƒe fli ɖeka pɛ hã o. Esia nye Bootstrap ƒe API gbãtɔ eye ele be wòanye wò gbãtɔ si ŋu nàbu ne èle plugin zãm.
Ne míegblɔe alea la, le nɔnɔme aɖewo me la, ate ŋu anyo be woatsi dɔwɔnu sia. Eyata míena ŋutete hã be míawɔ nyatakaka ƒe nɔnɔme API la nuwɔametɔe to nudzɔdzɔ siwo katã le nuŋlɔɖi si ƒe ŋkɔ dometsotso kple data-api
. Esia le abe alea ene:
Alo, be nàɖo taɖodzinu na plugin aɖe koŋ la, ɖeko nàde plugin la ƒe ŋkɔ abe ŋkɔteƒe ene kpe ɖe data-api ŋkɔteƒe ŋu abe esia ene:
Mègazã nyatakaka ƒe nɔnɔmewo tso plugin geɖewo me le element ɖeka dzi o. Le kpɔɖeŋu me, dɔwɔnu ƒe aɖaŋuɖoɖo kple toggle modal siaa mate ŋu anɔ abɔta aɖe si o. Be nàte ŋu awɔ esia la, zã nusi wotsɔ blaa nu.
Míexɔe se hã be ele be nàte ŋu azã Bootstrap ƒe kpeɖeŋutɔwo katã to JavaScript API dzi ko. Dutoƒo APIwo katã nye mɔnu ɖeka, siwo ŋu kɔsɔkɔsɔ le, eye wogbugbɔa nuƒoƒoƒu si dzi wowɔ dɔ ɖo la trɔna.
Ele be mɔnuwo katã naxɔ tiatiawɔblɔɖe ƒe nu, ka si woɖo taɖodzinu na mɔnu aɖe koŋ, alo naneke o (si dzea kpeɖeŋutɔ gɔme kple nuwɔna si woɖo ɖi):
Plugin ɖesiaɖe hã ɖea eƒe raw constructor ɖe go le Constructor
nunɔamesi aɖe dzi: $.fn.popover.Constructor
. Ne èdi be yeaxɔ plugin ƒe kpɔɖeŋu aɖe koŋ la, xɔe tẽ tso element aɖe me: $('[rel="popover"]').data('popover')
.
Àteŋu atrɔ ɖoɖo siwo woɖo ɖi na plugin to asitɔtrɔ le plugin ƒe Constructor.DEFAULTS
nu ŋu:
Ɣeaɖewoɣi la, ehiãna be woazã Bootstrap ƒe kpeɖeŋutɔwo kple UI ƒe ɖoɖo bubuwo. Le nɔnɔme siawo me la, ŋkɔteƒewo ƒe gododo ate ŋu adzɔ ɣeaɖewoɣi. Ne esia dzɔ la, àte ŋu ayɔ .noConflict
plugin si nèdi be yeatrɔ asi le eƒe asixɔxɔ ŋu.
Bootstrap naa nudzɔdzɔ tɔxɛwo na plugins akpa gãtɔ ƒe nuwɔna tɔxɛwo. Zi geɖe la, esiawo va le nyagbemanɔsitɔ kple akpaɖekedzimademade ƒe nɔnɔme si va yi me - afisi wodzea nyagbemanɔsitɔ (ex. show
) gɔme le nudzɔdzɔ aɖe ƒe gɔmedzedze, eye eƒe akpaɖekedzimademade ƒe nɔnɔme si va yi (ex. shown
) dzea egɔme le nuwɔna aɖe ƒe nuwuwu.
Tso 3.0.0 dzi la, Bootstrap nudzɔdzɔwo katã ƒe ŋkɔwo le dometsotso me.
Nudzɔdzɔ siwo katã me seɖoƒe meli na o naa preventDefault
dɔwɔwɔ. Esia naa ŋutete be woatɔ te nuwɔna aɖe wɔwɔ hafi wòadze egɔme.
Woateŋu akpɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔ ɖesiaɖe ƒe tɔtrɔ to VERSION
kpeɖeŋutɔ ƒe xɔtula ƒe nɔnɔme dzi. Le kpɔɖeŋu me, na dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ la:
Bootstrap ƒe plugins medzea anyi ɖe megbe etɔxɛe amenuveve ne JavaScript nye nuwɔametɔ o. Ne ètsɔ ɖe le zãla ƒe nuteƒekpɔkpɔ me le go sia me la, zã <noscript>
nàtsɔ aɖe nɔnɔmea me (kple alesi nàgbugbɔ JavaScript awɔ dɔe) me na wò zãlawo, kple/alo nàtsɔ wò ŋutɔ wò fallback siwo nèwɔ la akpe ɖe eŋu.
Bootstrap medoa alɔ ame etɔ̃lia ƒe JavaScript agbalẽdzraɖoƒewo abe Prototype alo jQuery UI ene le se nu o. Togbɔ be .noConflict
nudzɔdzɔwo li eye wotsɔ ŋkɔwo ɖo wo dome hã la, kuxi siwo sɔ kple wo nɔewo ate ŋu anɔ anyi siwo wòle be nàɖɔ ɖo le ɖokuiwò si.
Ne èdi tɔtrɔ ƒe ŋusẽkpɔɖeamedzi bɔbɔewo la, transition.js
tsɔ zi ɖeka kpe ɖe JS faɛl bubuawo ŋu. Ne èle compiled (alo minified) zãm la bootstrap.js
, mehiã be nàde esia eme o—ele afima xoxo.
Transition.js nye kpeɖeŋutɔ vevi aɖe na transitionEnd
nudzɔdzɔwo kpakple CSS tɔtrɔ ƒe kpɔɖeŋu. Wozãnɛ to plugin bubuawo dzi tsɔ léa ŋku ɖe CSS ƒe tɔtrɔ ƒe kpekpeɖeŋu ŋu eye wòléa tɔtrɔ siwo le xɔxlɔ̃m.
Woateŋu atɔ te tɔtrɔwo le xexeame katã to JavaScript ƒe akpa si gbɔna zazã me, si wòle be wòava le transition.js
(alo bootstrap.js
alo bootstrap.min.js
, abe alesi wòle ene) ƒe agba megbe:
Modals nye streamlined, gake woateŋu atrɔ asi le, dzeɖoɖo ƒe nyabiasewo kple dɔwɔwɔ suetɔ kekeake si hiã kple smart defaults.
Kpɔ egbɔ be yemeʋu modal aɖe esime bubu gakpɔtɔ le dzedzem o. Modal siwo wu ɖeka ɖeɖefia le ɣeyiɣi ɖeka me bia custom code.
Dze agbagba ɣesiaɣi be nàda modal ƒe HTML kɔda ɖe teƒe si le dziƒo le wò nuŋlɔɖia me be nàƒo asa na akpa bubu siwo akpɔ ŋusẽ ɖe modal la ƒe dzedzeme kple/alo dɔwɔwɔ dzi.
Nuxlɔ̃ame aɖewo li ku ɖe modals zazã le asitelefonwo dzi ŋu. Kpɔ míaƒe browser support docs hena numeɖeɖe bubuwo.
Le alesi HTML5 ɖea eƒe gɔmesese gɔmee ta la, autofocus
HTML nɔnɔmea mekpɔa ŋusẽ aɖeke ɖe Bootstrap modals dzi o. Be nàkpɔ ŋusẽ ma ke la, zã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu:
Modal si woɖe gɔme kple ta, ŋutilã, kple nuwɔna ƒe ƒuƒoƒo le afɔti me.
Trɔ modal aɖe to JavaScript dzi to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.
Kpɔ egbɔ be yetsɔ role="dialog"
kple aria-labelledby="..."
, kpe ɖe modal ƒe tanya ŋu, ɖe .modal
, kple role="document"
ɖe .modal-dialog
eya ŋutɔ ŋu.
Tsɔ kpe ɖe eŋu la, àte ŋu ana wò modal dialog ƒe numeɖeɖe kple aria-describedby
on .modal
.
YouTube videowo dede modals me bia JavaScript bubu siwo mele Bootstrap me o be woadzudzɔ ƒoƒo le eɖokui si kple bubuwo. Kpɔ Stack Overflow ƒe nyatakaka sia si kpena ɖe ame ŋu hena nyatakaka bubuwo.
Modals ƒe lolome eve le wo ɖokui si, siwo li to modifier classes dzi be woatsɔ wo ade .modal-dialog
.
Le modals siwo dzena ko tsɔ wu be woadzo le eme be woakpɔ la, ɖe .fade
klass la ɖa le wò modal markup la me.
Be nàwɔ Bootstrap grid system la ŋudɔ le modal aɖe me la, ɖeko nest .row
s le la me .modal-body
eye emegbe nàzã normal grid system classes.
Ðe abɔta gbogbo aɖewo le asiwò siwo katã ʋãa modal ɖeka, siwo me nyawo to vovo vie ko? Zã event.relatedTarget
kple HTML data-*
nɔnɔmewo (ɖewohĩ to jQuery dzi ) tsɔ trɔ asi le modal la me nyawo ŋu le abɔta si dzi wozi nu. Kpɔ Modal Events docs hena numeɖeɖe bubuwo le relatedTarget
, .
Modal plugin la trɔa wò nyatakaka ɣaɣlawo ne wobiae, to nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Egatsɔa kpe .modal-open
ɖe <body>
be woaɖe asi le ʋuʋudedi ƒe nuwɔna si woɖo ɖi ŋu eye wòwɔa a .modal-backdrop
be woana teƒe si woate ŋu aƒo nu le hena asiɖeɖe le modals siwo woɖe fia ŋu ne wole ʋuʋum le modal la godo.
Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"
ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"
alo href="#foo"
be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.
Yɔ modal si si id myModal
le kple JavaScript ƒe fli ɖeka:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-backdrop=""
.
Ŋkɔ | ƒomevi | gᴐmedzeƒe | nuɖᴐɖᴐ |
---|---|---|---|
megbenyawo | boolean alo kaƒoƒoa'static' |
nyateƒe | Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ static na megbenya si metua modal le ʋuʋu dzi o. |
keyboard dzi | boolean ƒe ƒuƒoƒo | nyateƒe | Doa modal la ne wozi escape key dzi |
ɖe fia | boolean ƒe ƒuƒoƒo | nyateƒe | Fia modal la ne wodze egɔme. |
si gbɔ dzi dzi | afᴐmᴐ | alakpa | Tiatia sia megale dɔ wɔm o tso v3.3.0 eye woɖee ɖa le v4 me. Míele aɖaŋu ɖom be nàzã client-side templating alo data binding framework boŋ, alo nàyɔ jQuery.load ɖokuiwò. Ne wotsɔ URL si le didiƒe na la, woatsɔ nyatakakawo ade eme zi ɖeka to jQuery ƒe |
.modal(options)
Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object
.
.modal('toggle')
Asitɔtrɔ le modal aɖe ŋu. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.modal
alo hidden.bs.modal
nudzɔdzɔa nadzɔ).
.modal('show')
Eʋua modal aɖe kple asi. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ (si nye hafi shown.bs.modal
nudzɔdzɔa nadzɔ).
.modal('hide')
Asi ɣlaa modal aɖe. Trɔ yi yɔla gbɔ hafi woɣla modal la ŋutɔŋutɔ (si nye hafi hidden.bs.modal
nudzɔdzɔa nadzɔ).
.modal('handleUpdate')
Trɔ asi le modal ƒe nɔƒe ŋu be wòatsi tre ɖe agbalẽxatsaxatsa aɖe ŋu nenye be ɖeka adze, si ana modal la nati kpo ayi miame.
Ne modal la ƒe kɔkɔme trɔ esime wòle ʋuʋu ko hafi wòhiã.
Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me.
Woda tu modal nudzɔdzɔwo katã ɖe modal la ŋutɔ dzi (si nye le <div class="modal">
).
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.modal | Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTarget nudzɔdzɔa ƒe nɔnɔme ene. |
woɖe fia.bs.modal | Woɖea nudzɔdzɔ sia ɖa ne wowɔ modal la be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTarget nudzɔdzɔa ƒe nɔnɔme ene. |
ɣla.bs.modal | Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
ɣaɣla.bs.modal | Woɖea nudzɔdzɔ sia ne wowu modal la ɣla ɖe zãla la nu (alala be CSS ƒe tɔtrɔwo nawu enu). |
wotsɔ agba ɖo.bs.modal | Woɖea nudzɔdzɔ sia ne modal la tsɔa nyatakakawo dea eme to remote tiatia la zazã me. |
Tsɔ nuɖuɖu siwo le tsia dzi kpe ɖe nusianu kloe ŋu kple kpeɖeŋutɔ bɔbɔe sia, siwo dometɔ aɖewoe nye navbar, tabs, kple pills.
To data attributes alo JavaScript dzi la, dropdown plugin la trɔa nya ɣaɣlawo (dropdown menus) to asitɔtrɔ le .open
klass la ŋu le dzila ƒe xexlẽdzesi ƒe nu la dzi.
Le asitelefonwo dzi la, ne èʋu nusi le tsia dzi la, etsɔa teƒe aɖe kpena ɖe eŋu .dropdown-backdrop
abe afisi nàte ŋu aƒo nu le ene hena nuɖuɖu siwo le tsia dzi la nu tsotso ne èle nu ƒom le nuɖuɖua godo, si nye nudidi na iOS ƒe kpekpeɖeŋu nyuitɔ. Esia fia be ne èdi be yeatrɔ tso nu siwo le ʋuʋu ɖi la dzi ayi nu siwo le fli me bubu dzi la, ahiã be nàzi asitelefon dzi geɖe wu.
De dzesii: Woɖoa data-toggle="dropdown"
ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.
Tsɔe kpe data-toggle="dropdown"
ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.
Be URL-wo nanɔ anyi nyuie kple kadodo ƒe abɔtawo la, zã data-target
nɔnɔmea ɖe href="#"
.
Yɔ nusiwo le fli dzi la to JavaScript dzi:
data-toggle="dropdown"
wogahiã kokokoEɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-toggle="dropdown"
ehiã ɣesiaɣi be nànɔ dropdown la ƒe trigger element la dzi.
Ɖeke o
$().dropdown('toggle')
Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu.
Wodaa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu
's dzila ƒe akpaa dzi.
Nudzɔdzɔ siwo katã le tsia dzi la ƒe relatedTarget
nɔnɔme le wo si, si ƒe asixɔxɔ nye toggling anchor element.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.dropdown | Nudzɔdzɔ sia doa dzo enumake ne woyɔ show instance mɔnu la. |
woɖee fia.bs.dropdown | Woɖea nudzɔdzɔ sia ne wowɔ dropdown la be wòadze na zãla (alala CSS ƒe tɔtrɔwo, be woawu enu). |
ɣla.bs.nu si wotsɔna ƒua gbe | Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
hidden.bs.wo ƒe ƒuƒoƒo | Woɖea nudzɔdzɔ sia ne wowu dropdown la ɣla ɖe zãla la nu (alala CSS ƒe tɔtrɔwo, be woawu enu). |
ScrollSpy ƒe kpeɖeŋutɔa nye na nav taɖodzinuwo ƒe asitɔtrɔ le eɖokui si le agbalẽxatsaxatsa ƒe nɔƒe nu. Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woade dzesi nu sue siwo le fli dzi la hã.
Ad leggings keytar, brunch id nutata kplɔ̃ɖoƒe dolor labore. Pitchfork yr enim lo-fi hafi wodzra qui. Tumblr agble-to-kplɔ̃ kekefɔkpa ƒe gomenɔamesiwo nusianu. Anim keffiyeh carles ƒe lãgbalẽ. Velit seitan mcsweeney ƒe fotoɖeƒe 3 amegãxi ɣleti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ɖewohĩ mèse wo ŋkɔ kpɔ o et cardigan kakaɖedzi ga culpa biodiesel wes anderson atsyɔ̃ɖoɖo. Nihil tattooed accusamus, cred nukokoedonamela biodiesel keffiyeh aɖaŋudɔwɔla ullamco consequat.
Veniam marfa ƒe ɖaƒoƒo ƒe ɖaƒoƒo, adipisicing fugiat velit pitchfork ɖa. Freegan ɖa aliqua cupidat mcsweeney ƒe vero. Cupidatat ene loko nisi, ea helvetica nulla carles. Tattooed cosby sweater nuɖuɖu agbatsɔʋu, mcsweeney ƒe quis non freegan vinyl. Lo-fi wes anderson +1 ƒe awudodo. Carles non atsyɔ̃ɖoɖo ƒe kamedede quis gentrify. Brooklyn adipisicing asinudɔwɔwɔ biya vice keytar deserunt.
Occaecat ƒe lãgbalẽ si woyɔna be aliqua delectus. Fap asinudɔwɔwɔ biya deserunt skateboard ea. Lomo keke ƒe gomenɔamesiwo adipisicing banh mi, velit ea sunt kplɔe ɖo dzidzenu locavore ɖeka-dzɔtsoƒe kɔfi le magna veniam. Agbe kɔkɔ id vinyl, echo tsaɖibɔ consequat quis aliquip banh mi pitchfork. Vero VHS est amiɖeɖe ɖe lãme na ame. Consectetur nisi DIY minim dɔla ƒe akplo. Cred ex le, nusiwo li tegbee delectus consectetur fanny pack iphone.
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.
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 dɔla kotoku marfa nusianu delectus nuɖuɖu agbatsɔʋu. Sapiente ƒe wɔwɔme id assumenda. Locavore sed helvetica cliche irony, dziɖegbewo ɖewohĩ mèse nu tso wo ŋu o consequat hoodie gluten-maɖemaɖe lo-fi fap aliquip. Labore elit placeat hafi wodzra vɔ, terry richardson proident brunch nesciunt quis cosby awudziwui pariatur keffiyeh ut helvetica aɖaŋudɔwɔla. Cardigan asinudɔwɔwɔ biya seitan dzadzraɖo velit. VHS chambray laboris nye ɣeyiɣi kpui aɖe ƒe veniam. Anim mollit minim commodo ullamco dziɖegbe ƒe avuwo.
Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>
nasɔ kple nane si le DOM la me abe <div id="home"></div>
.
:visible
aɖaba ƒu nusiwo menye taɖodzinu o dziWoaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo mele :visible
jQuery ƒe nya nu o dzi eye womaɖe woƒe nav nu siwo sɔ ɖe enu la afia gbeɖe o.
Eɖanye dɔwɔwɔ ƒe mɔnu ka kee o, scrollspy bia be woazã position: relative;
le element si dzi nèle ŋku lém ɖo la dzi. Zi geɖe la, esiae nye <body>
. Ne èle agbalẽ xatsaxatsa le nu bubu <body>
siwo height
menye overflow-y: scroll;
.
Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-spy="scroll"
ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>
). Emegbe nàtsɔ data-target
nɔnɔme si me Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass le akpe ɖe eŋu .nav
.
Ne ètsɔ position: relative;
wò CSS kpe ɖe eŋu vɔ la, yɔ agbalẽxatsaxatsa la to JavaScript dzi:
.scrollspy('refresh')
Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-offset=""
.
Ŋkɔ | ƒomevi | gᴐmedzeƒe | nuɖᴐɖᴐ |
---|---|---|---|
offset ƒe ƒuƒoƒo | xexlẽdzesi | 10 | Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu. |
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
wɔ.bs.agbalẽ xatsaxatsawo | Nudzɔdzɔ sia doa dzo ɣesiaɣi si agbalẽxatsaxatsa la va le nu yeye aɖe ŋu dɔ wɔm. |
Tsɔ tab ƒe dɔwɔwɔ kabakaba, si trɔna kpe ɖe eŋu be nàtrɔ to nutoa me nyatakakawo ƒe akpawo dzi, to menu siwo le tsia dzi gɔ̃ hã dzi. Womewɔa dɔ ɖe tab siwo wotsɔ ƒo ƒui dzi o.
Raw denim ɖewohĩ mèse wo ŋkɔ kpɔ o jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth aƒetɔ kɔklɔ. Aɖatsiwo ƒe nyagbɔgblɔ ɣeyiɣi kpui aɖe, williamsburg carles vegan helvetica. Reprehenderit lãwula retro keffiyeh drɔ̃ekukula synth. Cosby ƒe awudziwui eu banh mi, qui irure terry richardson ex squid. Aliquip placeat lãwo ƒe lãmesẽfefewɔlawo ƒe iphone. Seitan aliquip quis cardigan amerikatɔwo ƒe awudodo, lãwula 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Plugin sia keke tabbed navigation component la ɖe enu be wòatsɔ tabbable ƒe teƒewo akpe ɖe eŋu.
Na tabbable tabs nawɔ dɔ to JavaScript dzi (ele be woawɔ tab ɖesiaɖe ŋudɔ ɖekaɖeka):
Àte ŋu awɔ tab ɖekaɖekawo ŋudɔ le mɔ vovovowo nu:
Àte ŋu awɔ tab alo pill navigation ŋudɔ JavaScript aɖeke maŋlɔ to element aɖe gbɔgblɔ data-toggle="tab"
alo ɖe edzi ko me. data-toggle="pill"
Ne ètsɔ nav
kple nav-tabs
ƒe klasswo kpe ɖe tab ul
la ŋu la, àwɔ Bootstrap ƒe tab ƒe atsyã ŋudɔ , gake ne ètsɔ nav
kple nav-pills
ƒe klasswo kpe ɖe eŋu la, àwɔ dɔ le pill ƒe atsyã ŋu .
Be nàna tabwo naɖiɖi la, tsɔe kpe .fade
ɖe wo dometɔ ɖesiaɖe .tab-pane
ŋu . Ele be tab ƒe akpa gbãtɔ hã .in
nana nya siwo le gɔmedzedzea me la nadze.
$().tab
Ewɔa tab element kple emenyawo ƒe nugoe ŋudɔ. Ele be tab nanye a data-target
alo href
taɖodzinu si nye container node le DOM la me. Le kpɔɖeŋu siwo le etame me la, tabawo nye <a>
s siwo me data-toggle="tab"
nɔnɔmewo le.
.tab('show')
Tia tab si wona eye wòaɖe eƒe nya siwo do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe nyatakaka siwo do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tab
nudzɔdzɔa nadzɔ).
Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:
hide.bs.tab
(le tab si le dɔ wɔm fifia dzi)show.bs.tab
(le tab si woaɖe afia la dzi)hidden.bs.tab
(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tab
nudzɔdzɔa gome la ke)shown.bs.tab
(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tab
wɔnaa tɔ)Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tab
kple nudzɔdzɔawo ŋu o.hidden.bs.tab
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.tab | Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome. |
woɖe fia.bs.tab | Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome. |
ɣla.bs.tab la | Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome. |
ɣaɣla.bs.tab | Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.target kple event.relatedTarget nàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome. |
Wotsɔ jQuery.tipsy ƒe kpeɖeŋutɔ nyuitɔ kekeake si Jason Frame ŋlɔ la ʋãe; Dɔwɔnu ƒe aɖaŋuɖoɖowo nye tɔtrɔ yeye aɖe, si meɖoa ŋu ɖe nɔnɔmetatawo ŋu o, zãa CSS3 hena nɔnɔmetatawo, kple data-nɔnɔmewo hena teƒea ƒe tanyawo dzraɖoƒe.
Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.
Tsɔ asi ɖo kadodo siwo le ete la dzi be nàkpɔ dɔwɔnu ƒe aɖaŋuɖoɖowo:
Tight pants next level keffiyeh ɖewohĩ mèse wo ŋkɔ kpɔ o. Fotoɖeƒe ɖaɖa raw denim letterpress vegan dɔla kotoku stumptown. Agble-to-kplɔ̃ seitan, mcsweeney ƒe fixie si li tegbee quinoa 8-bit american awuwo le terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo dziɖegbe ƒe avuwo. Tofu biodiesel williamsburg marfa, ene loko mcsweeney ƒe kɔ vegan chambray. A really ironic artisan whatever keytar , scenester agble-ɖe-kplɔ̃ banksy Austin twitter asi freegan cred raw denim ɖeka-dzɔtsoƒe kɔfi viral.
Tiatia ene li: etame, ɖusime, ete, kple miame.
Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt-in, si fia be ele be wò ŋutɔ nàdze wo gɔme .
Mɔ ɖeka si dzi nàto adze dɔwɔnu ƒe aɖaŋuɖoɖowo katã gɔme le axa aɖe dzi enye be nàtia wo ɖe woƒe data-toggle
nɔnɔme nu:
Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔa wɔa nyatakakawo kple dzesidede ne wobiae, eye le gɔmedzedzea me la, etsɔa dɔwɔnu ƒe aɖaŋuɖoɖowo ɖoa woƒe nusi ʋãa ame la megbe.
Dze dɔwɔnu ƒe aɖaŋuɖoɖoa gɔme to JavaScript dzi:
Dzesi si hiã na dɔwɔnu ƒe aɖaŋuɖoɖo nye data
nɔnɔme aɖe ko eye title
le HTML ƒe akpaa dzi la, èdi be dɔwɔnu ƒe aɖaŋuɖoɖo nanɔ ye si. Dɔwɔnu ƒe dzesi ƒe dzesi si wowɔ la le bɔbɔe vie, togbɔ be ebia teƒe aɖe hã (le gɔmedzedzea me la, woɖoe ɖe top
to plugin la dzi).
Ɣeaɖewoɣi la, àdi be yeatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo aɖe akpe ɖe hyperlink si xatsa fli geɖe ŋu. Dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ ƒe nuwɔna gbãtɔ enye be wòatsɔe aɖo titina le tsia dzi kple le tsia dzi. Tsɔ kpe white-space: nowrap;
ɖe wò sekewo ŋu be nàƒo asa na esia.
Ne èle dɔwɔnu ƒe aɖaŋuɖoɖowo zãm le nusiwo le a .btn-group
alo an me ŋu .input-group
, alo le nusiwo do ƒome kple kplɔ̃ ŋu ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) la, ahiã be nàgblɔ tiatia la container: 'body'
(si woŋlɔ ɖe ete) be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o (abe element la ƒe tsitsi keke ta kple/ alo eƒe dzogoe siwo le goglo la ƒe bu ne woʋu dɔwɔnua ƒe nugbɔ).
Le ezãla siwo tsɔa keyboard le mɔ zɔm, eye vevietɔ kpekpeɖeŋunamɔ̃wo zãlawo gome la, ɖeko wòle be nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo akpe ɖe nusiwo ŋu woate ŋu alé ŋku ɖe keyboard ŋu le abe kadodowo, agbalẽvi dzi kpɔkpɔ, alo nu ɖesiaɖe si nèdi si me tabindex="0"
nɔnɔme aɖe le ŋu.
Be nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖo akpe ɖe a disabled
alo .disabled
element ŋu la, tsɔ element la de a me <div>
eye nàtsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa ade ema dzi <div>
boŋ.
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-animation=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
nɔnɔmetata si me woɖea nɔnɔmetatawo le | boolean ƒe ƒuƒoƒo | nyateƒe | Wɔ CSS fade ƒe tɔtrɔ ɖe dɔwɔnu ƒe aɖaŋuɖoɖoa dzi |
nugoe me nugoe | kaƒoƒo | alakpa | alakpa | Tsɔ dɔwɔnu ƒe aɖaŋuɖoɖoa kpe ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: |
hehe ɖe megbe | xexlẽdzesi | nu | 0. | Hehe ɖe megbe le dɔwɔnu ƒe aɖaŋuɖoɖo ɖeɖefia kple eɣla ɖe megbe (ms) - meku ɖe asi ƒe ʋuʋu ƒomevi ŋu o Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu Nu ƒe wɔwɔme enye: |
html | boolean ƒe ƒuƒoƒo | alakpa | De HTML dɔwɔnua ƒe aɖaŋuɖoɖoa me. Ne alakpae la, woazã jQuery ƒe text mɔnu atsɔ ade emenyawo DOM la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu. |
ɖoɖo ɖe teƒe aɖe | kaƒoƒo | wᴐ dᴐ | 'dzi' | Alesi woaɖo dɔwɔnu ƒe aɖaŋuɖoɖoa ɖe teƒe - ta | ete | miame | ɖusime | auto. Ne wozã dɔwɔwɔ aɖe tsɔ nya teƒe si woɖoe ɖo la, woyɔnɛ kple dɔwɔnu ƒe dzesi DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye nusi ʋãa nu DOM node abe eƒe evelia ene. Woɖo |
tiatiawɔla | ka | alakpa | Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ dɔwɔnu ƒe aɖaŋuɖoɖo nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ naa HTML me nyatakaka siwo trɔna la nate ŋu atsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo akpe ɖe eŋu. Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le . |
ƒe nɔnɔmetata | ka | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Gɔmeɖoanyi HTML si nàzã ne èle dɔwɔnu ƒe aɖaŋuɖoɖoa wɔm. Woado dɔwɔnu ƒe aɖaŋuɖoɖoa
Ele be |
tanya | kaƒoƒo | wᴐ dᴐ | '' . | Tanya ƒe asixɔxɔ gbãtɔ ne Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe |
daƒe | ka | 'hover focus'. | Alesi woadze dɔwɔnu ƒe aɖaŋuɖoɖo gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. Àte ŋu ato nu geɖe siwo aʋã wò la me; tsɔ dometsotso aɖe ma wo dome. manual womate ŋu atsɔe akpe ɖe nusi aʋã ame bubu aɖeke ŋu o. |
nukpɔkpɔ ƒe ʋɔtru | kaƒoƒo | nu | wᴐ dᴐ | { tiatiawɔla: 'ŋutilã', padding: 0 } | Enaa dɔwɔnu ƒe aɖaŋuɖoɖoa nɔa nu sia ƒe liƒowo me. Kpɔɖeŋu: Ne wotsɔ dɔwɔwɔ aɖe na la, woyɔnɛ kple triggering element DOM node abe eƒe nyaʋiʋli ɖeka kolia ene. Woɖo |
Woateŋu agblɔ tiatia siwo woawɔ na dɔwɔnu ɖekaɖekawo le mɔ bubu nu to nyatakakawo ƒe nɔnɔmewo zazã me, abe alesi míeɖe eme le etame ene.
$().tooltip(options)
Kpe dɔwɔnu ƒe aɖaŋuɖoɖo ƒe asiléƒe ɖe element ƒe nuƒoƒoƒu ŋu.
.tooltip('show')
Eɖea element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo fiana. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ (si nye hafi shown.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu. Womeɖea dɔwɔnu ƒe aɖaŋuɖoɖo siwo ƒe tanyawo ƒe didime nye zero la fiana gbeɖe o.
.tooltip('hide')
Ɣla element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɣla dɔwɔnu ƒe aɖaŋuɖoɖoa ŋutɔŋutɔ (si nye hafi hidden.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.
.tooltip('toggle')
Trɔa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo. Trɔ yi yɔla gbɔ hafi woɖe dɔwɔnu ƒe aɖaŋuɖoɖoa fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.tooltip
alo hidden.bs.tooltip
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe dɔwɔwɔ ƒe aɖaŋuɖoɖoa ƒe ʋuʋu.
.tooltip('destroy')
Eɣlaa element aɖe ƒe dɔwɔnu ƒe aɖaŋuɖoɖo eye wòtsrɔ̃nɛ. Dɔwɔnu ƒe aɖaŋuɖoɖo siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector
mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
show.bs.dɔwɔnu ƒe aɖaŋuɖoɖo | Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
woɖee fia.bs.dɔwɔnu ƒe aɖaŋuɖoɖo | Woɖea nudzɔdzɔ sia ɖa ne wowɔ dɔwɔnu ƒe aɖaŋuɖoɖoa be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). |
hide.bs.dɔwɔnu ƒe aɖaŋuɖoɖo | Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
hidden.bs.dɔwɔnu ƒe aɖaŋuɖoɖo | Woɖea nudzɔdzɔ sia ɖa ne dɔwɔnu ƒe aɖaŋuɖoɖoa ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu). |
inserted.bs.dɔwɔnu ƒe aɖaŋuɖoɖo | Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.tooltip ne wotsɔ dɔwɔnu ƒe aɖaŋuɖoɖo ƒe nɔnɔmetata kpe ɖe DOM ŋu. |
Tsɔ nyatakaka suesuesue siwo wotsɔ ƒo xlãe, abe esiwo le iPad la dzi ene, kpe ɖe nu ɖesiaɖe ŋu hena nyatakaka evelia ƒe aƒe.
Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.
Popovers bia be dɔwɔnu ƒe aɖaŋuɖoɖo ƒe kpeɖeŋutɔ nade wò Bootstrap ƒe tɔtrɔ yeyea me.
Le dɔwɔwɔ ta la, Tooltip kple Popover data-apis nye opt-in, si fia be ele be wò ŋutɔ nàdze wo gɔme .
Mɔ ɖeka si dzi woato adze popovers katã gɔme le axa aɖe dzi enye be woatia wo to woƒe data-toggle
nɔnɔme nu:
Ne èle popovers zãm ɖe nusiwo le a .btn-group
alo an me dzi .input-group
, alo le nusiwo do ƒome kple kplɔ̃ dzi ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), ahiã be nàgblɔ tiatia la container: 'body'
(si woŋlɔ ɖe ete) be nàƒo asa na nugbegblẽ le ame ŋu siwo mèdi o (abe element la ƒe tsitsi keke ta kple/ alo eƒe dzogoe siwo le goglo la ƒe bu ne wodze popover la gɔme).
Be nàtsɔ popover akpe ɖe a disabled
alo .disabled
element ŋu la, tsɔ element la de a me <div>
eye nàtsɔ popover la aɖo ema dzi <div>
boŋ.
Ɣeaɖewoɣi la, àdi be yeatsɔ popover akpe ɖe hyperlink si xatsa fli geɖe ŋu. Popover ƒe kpeɖeŋutɔ ƒe nuwɔna gbãtɔ enye be wòatsɔe aɖo titina le tsia dzi kple le tsia dzi. Tsɔ kpe white-space: nowrap;
ɖe wò sekewo ŋu be nàƒo asa na esia.
Tiatia ene li: etame, ɖusime, ete, kple miame.
Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.
Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.
Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.
Sed posuere consectetur ƒe ɣeyiɣi si woɖo ɖi le lobortis. Aenean ƒe eu leo quam. Atsyɔ̃ɖoɖo si le abe ƒuƒuiƒe ene la nye lacinia quam venenatis vestibulum.
Zã focus
trigger la nàtsɔ aɖe popovers ɖa le click si kplɔe ɖo si zãla la awɔ me.
Be nàkpɔ cross-browser kple cross-platform ƒe nuwɔna nyuie la, ele be nàzã <a>
tag la, ke menye tag la o <button>
, eye ele be nàde role="button"
kple tabindex
nɔnɔmewo hã eme.
Na popovers nawɔ dɔ to JavaScript dzi:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-animation=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
nɔnɔmetata si me woɖea nɔnɔmetatawo le | boolean ƒe ƒuƒoƒo | nyateƒe | Wɔ CSS fade ƒe tɔtrɔ ɖe popover la ŋu |
nugoe me nugoe | kaƒoƒo | alakpa | alakpa | Etsɔa popover la kpena ɖe nu aɖe koŋ ŋu. Kpɔɖeŋu: |
eme nuwo | kaƒoƒo | wᴐ dᴐ | '' . | Default content value ne Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe |
hehe ɖe megbe | xexlẽdzesi | nu | 0. | Hehe ɖe megbe le popover (ms) ɖeɖefia kple eɣla ɖe megbe - meku ɖe asi trigger ƒomevi ŋu o Ne wotsɔ xexlẽdzesi aɖe na la, wozãa megbedede ɖe ɣla/ɖee fia siaa ŋu Nu ƒe wɔwɔme enye: |
html | boolean ƒe ƒuƒoƒo | alakpa | De HTML popover la me. Ne alakpae la, woazã jQuery ƒe text mɔnu atsɔ ade emenyawo DOM la me. Zã nuŋɔŋlɔ ne ètsi dzi ɖe XSS ƒe amedzidzedzewo ŋu. |
ɖoɖo ɖe teƒe aɖe | kaƒoƒo | wᴐ dᴐ | 'nyui' | Ale si woaɖo popover la ɖe ɖoɖo nu - ta | ete | miame | ɖusime | auto. Ne wozã dɔwɔwɔ aɖe tsɔ nya teƒe si woɖoe ɖo la, woyɔnɛ kple popover DOM node abe eƒe nyaʋiʋli gbãtɔ ene eye triggering element DOM node abe eƒe evelia ene. Woɖo |
tiatiawɔla | ka | alakpa | Ne wotsɔ tiatiawɔnu aɖe na la, woatsɔ popover nuawo ade asi na taɖodzinu siwo woɖo. Le nuwɔna me la, wozãa esia tsɔ naa HTML me nyatakaka siwo trɔna la nate ŋu atsɔ popovers akpe ɖe eŋu. Kpɔ esia kple kpɔɖeŋu si me nyatakaka geɖe le . |
ƒe nɔnɔmetata | ka | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Gɔmeɖoanyi HTML be nàzã ne èle popover la wɔm. Woado popover Woado popover
Ele be |
tanya | kaƒoƒo | wᴐ dᴐ | '' . | Tanya ƒe asixɔxɔ gbãtɔ ne Ne wotsɔ dɔwɔwɔ aɖe na la, woayɔe kple eƒe |
daƒe | ka | 'zi edzi'. | Alesi wodzea popover gɔmee - zi | hover | susu tsɔtsɔ ɖo nu ŋu | asi nu. Àte ŋu ato nu geɖe siwo aʋã wò la me; tsɔ dometsotso aɖe ma wo dome. manual womate ŋu atsɔe akpe ɖe nusi aʋã ame bubu aɖeke ŋu o. |
nukpɔkpɔ ƒe ʋɔtru | kaƒoƒo | nu | wᴐ dᴐ | { tiatiawɔla: 'ŋutilã', padding: 0 } | Enaa popover la nɔa nu sia ƒe liƒo me. Kpɔɖeŋu: Ne wotsɔ dɔwɔwɔ aɖe na la, woyɔnɛ kple triggering element DOM node abe eƒe nyaʋiʋli ɖeka kolia ene. Woɖo |
Woateŋu agblɔ tiatia siwo woawɔ na popover ɖekaɖekawo le mɔ bubu nu to nyatakaka ƒe nɔnɔmewo zazã me, abe alesi woɖe eme le etame ene.
$().popover(options)
Edzea popovers gɔme na element nuƒoƒoƒu.
.popover('show')
Eɖea element aɖe ƒe popover fiana. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ (si nye hafi shown.bs.popover
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu. Womeɖea Popovers siwo ƒe tanya kple emenyawo siaa nye zero-didime fiana gbeɖe o.
.popover('hide')
Eɣlaa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɣla popover la ŋutɔŋutɔ (si nye hafi hidden.bs.popover
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.
.popover('toggle')
Trɔa element aɖe ƒe popover. Trɔ yi amesi yɔe gbɔ hafi woɖe popover la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.popover
alo hidden.bs.popover
nudzɔdzɔa nadzɔ). Wobua esia be enye "asi" ƒe popover ƒe ʋuʋu.
.popover('destroy')
Eɣlaa element aɖe ƒe popover eye wòtsrɔ̃nɛ. Popovers siwo zãa delegation (si wowɔ to tiatia ) zazã me laselector
mateŋu atsrɔ̃ ɖekaɖeka le dzidzime ƒe trigger elements dzi o.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.popover | Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
woɖee fia.bs.popover | Woɖea nudzɔdzɔ sia ɖa ne wowɔ popover la be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu). |
ɣla.bs.ahedada | Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la. |
ɣaɣla.bs.ahedada | Woɖea nudzɔdzɔ sia ɖa ne popover la ɣla ɖe zãla la vɔ (alala be CSS ƒe tɔtrɔwo nawu enu). |
wotsɔ de eme.bs.popover | Woɖea nudzɔdzɔ sia ɖa le nudzɔdzɔa megbe show.bs.popover ne wotsɔ popover ƒe nɔnɔmetata kpe ɖe DOM ŋu. |
Tsɔ dismiss dɔwɔwɔ kpe ɖe nuxlɔ̃ame gbedasiwo katã ŋu kple plugin sia.
Ne èle .close
abɔta zãm la, ele be wòanye vi gbãtɔ na .alert-dismissible
eye nuŋɔŋlɔ aɖeke mate ŋu ava do ŋgɔ nɛ le dzesidea me o.
Trɔ esia kple ema eye nàgadze agbagba ake. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit. Cras mattis consectetur purus nɔa anyi ɖe lãmi me.
Ðeko nàtsɔe akpe data-dismiss="alert"
ɖe wò nutrenu ƒe dzesi ŋu be wòana nuxlɔ̃ame ƒe nutrenu ƒe dɔwɔwɔ le eɖokui si. Ne ètu nuxlɔ̃ame aɖe la, eɖenɛ ɖa le DOM la me.
Be wò nuxlɔ̃amewo nazã animation ne wole nuwuwu la, kpɔ egbɔ be wozã .fade
kple .in
klassawo le wo ŋu xoxo.
$().alert()
Ewɔa nuxlɔ̃ame ɖoa to na ʋuʋu nudzɔdzɔwo le dzidzimeviwo ƒe akpa siwo si data-dismiss="alert"
nɔnɔmea le. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)
$().alert('close')
Etua nuxlɔ̃ame aɖe to eɖeɖe le DOM la me. Ne .fade
kple .in
klasswo le element la dzi la, nuxlɔ̃amea nu ayi hafi woaɖee ɖa.
Bootstrap ƒe nuxlɔ̃ame plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame dɔwɔwɔ me.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
close.bs.nuxlɔ̃ame | Nudzɔdzɔ sia doa dzo enumake ne woyɔ close kpɔɖeŋu mɔnu la. |
wotu.bs.nuxlɔ̃ame | Woɖea nudzɔdzɔ sia ne wotu nuxlɔ̃amea (alala be CSS ƒe tɔtrɔwo nawu enu). |
Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.
Firefox nɔa anyi tso nɔnɔmewo dzi kpɔkpɔ me (nuwɔametɔnyenye kple ŋkuléle ɖe nu ŋu) le axawo ƒe agbawo katã me . Esia gbɔ kpɔnu aɖee nye be woazã autocomplete="off"
. Kpɔ Mozilla ƒe nugbagbevi #654072 .
Tsɔ kpe ɖe eŋu data-loading-text="Loading..."
be nàzã agbatsɔtsɔ ƒe nɔnɔme le abɔta aɖe dzi.
Wodzudzɔ nɔnɔme sia tso v3.3.5 eye woɖee ɖa le v4 me.
Le wɔwɔfia sia ta la, míele data-loading-text
kple zãm $().button('loading')
, gake menye nɔnɔme ma koe nàte ŋu azã o. Kpɔ nu geɖe tso esia ŋu le ete le $().button(string)
nuŋlɔɖiawo me .
Tsɔ kpe ɖe eŋu data-toggle="button"
be nàwɔ tɔtrɔ le abɔta ɖeka dzi ŋudɔ.
.active
kplearia-pressed="true"
Le abɔta siwo wotrɔ do ŋgɔ gome la, ele be nàtsɔ .active
klass la kple aria-pressed="true"
nɔnɔmea akpe ɖe button
ɖokuiwò ŋu.
Tsɔe kpe data-toggle="buttons"
ɖe .btn-group
aɖaka si me woŋlɔ nu ɖo alo radio dzi nyawo ŋu be wòana tɔtrɔ le woƒe atsyãwo me nawɔ dɔ.
.active
Le tiatia siwo nètia do ŋgɔ gome la, ele be wò ŋutɔ nàtsɔ .active
klass la akpe ɖe input la label
ŋu.
Ne wowɔ dzesideɖaka ƒe abɔta ƒe nɔnɔme si woɖo la yeyee evɔ womada click
nudzɔdzɔ aɖeke ɖe abɔta la dzi o (le kpɔɖeŋu me to <input type="reset">
alo to ɖoɖowɔwɔ ɖe checked
nyawo tsɔtsɔ de eme ƒe nɔnɔme ŋu dzi), ahiã be wò ŋutɔ nàtrɔ .active
klass la ɖe nyawo tsɔtsɔ de eme la tɔ label
dzi.
$().button('toggle')
Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.
$().button('reset')
Trɔ asi le abɔta ƒe nɔnɔme ŋu - trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ gbãtɔ ŋu. Mɔnu sia nye asynchronous eye wòtrɔna hafi gbugbɔgaɖoɖoa wu enu ŋutɔŋutɔ.
$().button(string)
Trɔa nuŋɔŋlɔ ɖe nuŋɔŋlɔ ƒe nɔnɔme ɖesiaɖe si woɖe fia le nyatakaka me.
Plugin si te ŋu trɔna ɖe nɔnɔmewo ŋu si zãa klass ʋɛ aɖewo hena tɔtrɔ bɔbɔe ƒe nuwɔna.
Collapse bia be woatsɔ transitions plugin la ade wò Bootstrap ƒe tɔtrɔ yeyea me.
Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:
.collapse
ɣlaa nyatakaka siwo le eme.collapsing
wozãnɛ le tɔtrɔwo me.collapse.in
ɖea emenyawo fianaÀte ŋu azã kadodo si me href
nɔnɔmea le, alo abɔta si me data-target
nɔnɔmea le. Le go eveawo siaa me la, data-toggle="collapse"
wobia tso ame si.
Keke collapse behavior si woɖo ɖi la ɖe enu be nàwɔ accordion kple panel ƒe akpaa.
Ateŋu adzɔ hã be woaɖɔli .panel-body
s kple .list-group
s.
Kpɔ egbɔ be yetsɔe kpe aria-expanded
ɖe nusi dzi wokpɔna ŋu. Nɔnɔme sia ɖea nɔnɔme si me nusi woate ŋu agbã la le fifia me tẽe be woatsɔ axe mɔ ɖe nuxlẽlawo kple kpekpeɖeŋunamɔnu mawo tɔgbe nu. Ne wotu nusi woateŋu agbã la le gɔmedzedzea me la, ele be eƒe asixɔxɔ nanye aria-expanded="false"
. Ne èɖo collapsible element la be wòaʋu le gɔmedzedzea me to in
klass la zazã me la, ɖoe aria-expanded="true"
ɖe control la dzi boŋ. Plugin la atrɔ nɔnɔme sia le eɖokui si le esi woʋu alo wotu nusi woate ŋu agbã la alo womeʋui o nu.
Gakpe ɖe eŋu la, ne wò dziɖuɖu ƒe akpa aɖe le taɖodzinu ɖom ɖe nu ɖeka si woate ŋu agbã ŋu – i.e. data-target
nɔnɔme la le asi fiam id
tiatiawɔla aɖe – àte ŋu atsɔ nɔnɔme bubu akpe aria-controls
ɖe dziɖuɖu ƒe akpaa ŋu, si me akpa id
si woate ŋu agbã la ƒe la le. Egbegbe screen readerwo kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu wɔa nɔnɔme sia ŋudɔ tsɔ naa mɔ kpui bubuwo ezãlawo be woazɔ mɔ ayi nusi woate ŋu agbã la ŋutɔ gbɔ tẽ.
Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:
.collapse
ɣlaa emenyawo.collapse.in
ɖea emenyawo fiana.collapsing
wotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enuWoate ŋu akpɔ klass siawo le component-animations.less
.
Ðeko nàtsɔ data-toggle="collapse"
kple a akpe data-target
ɖe element la ŋu be wòade dɔ asi na element si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-target
xɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapse
ɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee in
.
Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe dziɖuɖu si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector"
. Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.
Na wòawɔ dɔ kple asi kple:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-parent=""
.
Ŋkɔ | ƒomevi | gᴐmedzeƒe | nuɖᴐɖᴐ |
---|---|---|---|
dzila | tiatiawɔla | alakpa | Ne wotsɔ tiatiawɔnu aɖe na la, ekema woatu nusiwo katã woate ŋu agbã le dzila si woɖo la te ne woɖe nu sia si woate ŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna deŋgɔ - esia nɔ te ɖe panel klass la dzi) |
trɔ asi le eŋu | boolean ƒe ƒuƒoƒo | nyateƒe | Trɔa nusi woate ŋu agbã la le yɔyɔ dzi |
.collapse(options)
Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object
.
.collapse('toggle')
Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla ɖe eme. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ alo aɣlae (si nye hafi shown.bs.collapse
alo hidden.bs.collapse
nudzɔdzɔa nadzɔ).
.collapse('show')
Fia nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ (si nye hafi shown.bs.collapse
nudzɔdzɔa nadzɔ).
.collapse('hide')
Eɣlaa nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɣla nusi woateŋu agbã la ŋutɔŋutɔ (si nye hafi hidden.bs.collapse
nudzɔdzɔa nadzɔ).
Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
ɖee fia.bs.collapse | Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
woɖee fia.bs.collapse | Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu). |
ɣla.bs.kollapse | Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hide mɔnua vɔ. |
hidden.bs.wo ƒe ƒuƒoƒo | Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu). |
Slideshow ƒe akpa aɖe si wotsɔna ƒua du toa nu veviwo me, abe carousel ene. Womedoa alɔ nested carousels o.
Zi geɖe la, carousel ƒe akpaa mewɔ ɖeka kple dzidzenu siwo ku ɖe alesi woate ŋu akpɔe ŋu o. Ne ehiã be nàwɔ ɖe sea dzi la, taflatse bu tiatia bubu siwo nàwɔ atsɔ aɖe wò nyatakakawo afia ŋu.
Bootstrap zãa CSS3 ɖeɖeko na eƒe nɔnɔmetatawo, gake Internet Explorer 8 & 9 mewɔa dɔ le CSS ƒe nɔnɔme siwo hiã la ŋu o. Eyata slide ƒe tɔtrɔ ƒe nɔnɔmetata aɖeke meli ne èle web-browser siawo zãm o. Míeɖoe koŋ tso nya me be míagade jQuery-dzi fallbacks eme na tɔtrɔawo o.
Ele .active
be woatsɔ klass la akpe ɖe slideawo dometɔ ɖeka ŋu. Ne menye nenema o la, carousel la madze o.
Womehiã kokoko be .glyphicon .glyphicon-chevron-left
kple .glyphicon .glyphicon-chevron-right
klassawo na dziɖuɖuawo o. Bootstrap naa .icon-prev
kple .icon-next
abe gbadzaa unicode mɔnu bubuwo ene.
Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-caption
element si le ɖesiaɖe me .item
. Da HTML ɖesiaɖe kloe si nàte ŋu atia la ɖe afima eye wòaɖo eɖokui ɖe ɖoɖo nu ahawɔ ɖoɖo ɖe eŋu.
Carousels bia be woazã an id
le nugoe si le gota wu (the .carousel
) dzi be carousel dziɖunuwo nate ŋu awɔ dɔ nyuie. Ne èle carousel geɖe kpem ɖe eŋu, alo ne èle carousel ƒe id
, trɔm la, kpɔ egbɔ be yewɔ asitɔtrɔ le mɔ̃ siwo sɔ ŋu.
Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-slide
xɔa nya veviawo prev
alo next
, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-slide-to
nàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-slide-to="2"
la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0
.
Wozãa data-ride="carousel"
nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.
Yɔ carousel kple asi kple:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-interval=""
.
Ŋkɔ | ƒomevi | gᴐmedzeƒe | nuɖᴐɖᴐ |
---|---|---|---|
dometsotso | xexlẽdzesi | 5000 ƒe xexlẽme | Ɣeyiɣi agbɔsɔsɔme si woatsɔ ahe ɖe megbe le nu aɖe ƒe gasɔdodo le eɖokui si dome. Ne alakpae la, carousel mazɔ le eɖokui si o. |
tɔ vie | kaƒoƒo | ƒuƒlu | "hover" . | Ne woɖoe ɖe "hover" , tɔ te ʋufɔti la ƒe gasɔdodo ɖe edzi mouseenter eye wògadze ʋufɔti la ƒe kekefɔfɔ gɔme le mouseleave . Ne èɖoe ɖe null , la, ne ètsɔe ɖo carousel la dzi la, madzudzɔe o. |
bla | boolean ƒe ƒuƒoƒo | nyateƒe | Nenye be ele be carousel la nanɔ gasɔ tsam atraɖii alo be wòatɔ sesĩe. |
keyboard dzi | boolean ƒe ƒuƒoƒo | nyateƒe | Nenye be ele be carousel la nawɔ nu ɖe keyboard ƒe nudzɔdzɔwo ŋu. |
.carousel(options)
Edzea carousel la gɔme kple tiatia siwo woate ŋu atia object
eye wòdzea gasɔdodo gɔme to nuawo me.
.carousel('cycle')
Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.
.carousel('pause')
Exea mɔ na carousel la be wòagazɔ to nuwo me o.
.carousel(number)
Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array).
.carousel('prev')
Tsitre ɖe nusi do ŋgɔ ŋu.
.carousel('next')
Tsitre ɖe nu si kplɔe ɖo ŋu.
Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me.
Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:
direction
: Mɔ si dzi carousel la le ʋuʋum ɖo ( "left"
alo alo "right"
).relatedTarget
: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nu si le dɔ wɔm ene.Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">
).
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
slide.bs.ʋuʋudedi ƒe ʋuʋudedi | Nudzɔdzɔ sia dzona enumake ne woyɔ slide kpɔɖeŋu mɔnu la. |
slid.bs.ʋuʋudedi ƒe ʋuʋudedi | Wodaa tu nudzɔdzɔ sia ne carousel la wu eƒe slide ƒe tɔtrɔ nu. |
Affix plugin la trɔa asi position: fixed;
le eŋu hetsia enu, eye wòsrɔ̃a ŋusẽkpɔɖeamedzi si wokpɔ kple position: sticky;
. Subnavigation si le ɖusime la nye affix plugin la ƒe live demo.
Zã affix plugin la to data attributes dzi alo nàtsɔ asi awɔ wò ŋutɔ wò JavaScript. Le nɔnɔme eveawo siaa me la, ele be nàna CSS na wò nyatakaka siwo wotsɔ kpe ɖe eŋu ƒe nɔƒe kple kekeme.
De dzesii: Mègazã affix plugin ɖe element si le element si woɖo ɖe teƒe si sɔ me, abe sɔti si wohe alo wotu ene dzi o, le Safari gɔmeɖeɖe ƒe vodada ta .
Affix plugin la trɔa asi le hatsotso etɔ̃ dome, eye wo dometɔ ɖesiaɖe tsi tre ɖi na nɔnɔme aɖe koŋ: .affix
, .affix-top
, kple .affix-bottom
. Ele be nàna atsyãawo, negbe position: fixed;
on koe mele eme o .affix
, na klass siawo wò ŋutɔ (si le eɖokui si tso plugin sia gbɔ) be nàkpɔ nɔƒe ŋutɔŋutɔwo gbɔ.
Alesi affix plugin la wɔa dɔe enye si:
.affix-top
be wòafia be element la le eƒe nɔƒe si le etame wu. Le afisia la, mehiã be woaɖo CSS ƒe nɔƒe aɖeke o..affix
woɖɔlia .affix-top
kple ɖoa position: fixed;
(si Bootstrap ƒe CSS na)..affix
nàtsɔ .affix-bottom
. Esi wònye be offsets nye tiatia ta la, ɖoɖo ɖeka bia be nàɖo CSS si sɔ. Le go sia me la, tsɔe kpee position: absolute;
ne ehiã. Plugin la zãa data attribute alo JavaScript tiatia tsɔ nyaa afisi woaɖo element la tso afima.Wɔ ɖe afɔɖeɖe siwo le etame dzi nàtsɔ aɖo wò CSS na zazã ƒe tiatia siwo le ete la dometɔ ɖesiaɖe.
Be nàtsɔ affix behavior akpe ɖe element ɖesiaɖe ŋu bɔbɔe la, ɖeko nàtsɔe akpe data-spy="affix"
ɖe element si nèdi be yeatsa ŋku ŋu. Zã offsets tsɔ ɖe ɣeyiɣi si nàtrɔ element ƒe pinning la gɔme.
Yɔ affix plugin la to JavaScript dzi:
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-
, abe alesi wòle le data-offset-top="200"
.
Ŋkɔ | ƒomevi | gᴐmedzeƒe | nuɖᴐɖᴐ |
---|---|---|---|
offset ƒe ƒuƒoƒo | xexlẽdzesi | dɔwɔwɔ | nu | 10 | Pixels siwo woaɖe tso screen dzi ne wole akɔnta bum afisi agbalẽxatsaxatsa le. Ne wotsɔ xexlẽdzesi ɖeka na la, woawɔ offset la ŋudɔ le etame kple ete siaa. Be nàna vovototo tɔxɛ aɖe si le ete kple etame la, ɖeko nàna nu aɖe offset: { top: 10 } alo offset: { top: 10, bottom: 5 } . Zã dɔwɔwɔ ne ehiã be nàbu akɔnta le offset ŋu le mɔ si trɔna nu. |
taɖodzinu | tiatiawɔla | node | jQuery ƒe akpa aɖe | nusi window wotsɔ wɔe |
Tsɔ taɖodzinu ƒe akpa si le affix la me la fia. |
.affix(options)
Ewɔa wò nyatakakawo ŋudɔ abe nyatakaka siwo wotsɔ kpe ɖe eŋu ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object
.
.affix('checkPosition')
Gbugbɔ bu akɔnta le nya si wotsɔ kpe ɖe eŋu la ƒe nɔnɔme ŋu le nusiwo sɔ ƒe didime, teƒe si wole, kple agbalẽxatsaxatsa ƒe nɔƒe nu. Wotsɔa .affix
, .affix-top
, kple .affix-bottom
klassawo kpena ɖe nya siwo wotsɔ kpe ɖe eŋu la ŋu alo ɖea wo ɖa le nɔnɔme yeyea nu. Ele be woayɔ mɔnu sia ɣesiaɣi si woatrɔ nya siwo wotsɔ kpe ɖe eŋu alo nusi woɖo taɖodzinu na ƒe didimewo, be woakpɔ egbɔ be nya siwo wotsɔ kpe ɖe eŋu la le teƒe nyuitɔ.
Bootstrap ƒe affix plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe affix dɔwɔwɔ me.
Nudzɔdzɔ Ƒomevi | Nuɖᴐɖᴐ |
---|---|
affix.bs.nyagbɔgblɔ | Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la kpena ɖe eŋu. |
wotsɔ kpe ɖe eŋu.bs.affix | Wodaa nudzɔdzɔ sia ne wotsɔ element la kpe ɖe eŋu vɔ. |
affix-ta.bs.nyagbɔgblɔ | Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la blaa-top. |
affixed-top.bs.affix si wotsɔ kpe ɖe eŋu | Woɖea nudzɔdzɔ sia ne wotsɔ element la de affixed-top vɔ megbe. |
affix-anyigba.bs.affix | Nudzɔdzɔ sia doa dzo enumake hafi wotsɔa element la blaa nu-ete. |
affixed-bottom.bs.nyagbɔgblɔ si wotsɔ kpe ɖe eŋu | Wodoa nudzɔdzɔ sia ne wotsɔ element la de affixed-bottom vɔ megbe. |