JavaScript

Etsa hore likarolo tsa Bootstrap li phele—hona joale ka li-plugins tse 13 tsa jQuery.

Motho ka mong kapa a kopantswe

Li-plugins li ka kenyelletsoa ka bonngoe (le hoja ba bang ba hloka ho itšetleha), kapa kaofela hang-hang. Ka bobeli bootstrap.js le bootstrap.min.js li na le li-plugins tsohle faeleng e le 'ngoe.

Litšobotsi tsa data

U ka sebelisa li-plugins tsohle tsa Bootstrap feela ka har'a markup API ntle le ho ngola mola o le mong oa JavaScript. Ena ke API ea sehlopha sa pele sa Bootstrap 'me e lokela ho ba maikutlo a hau a pele ha u sebelisa plugin.

Ho boletse joalo, maemong a mang ho ka ba molemo ho tima ts'ebetso ena. Ka hona, re boetse re fana ka bokhoni ba ho tima API ea tšobotsi ea data ka ho lokolla liketsahalo tsohle tsa 'mele tse nang le `'data-api'`. Sena se shebahala tjena:

  1. $ ( 'mele' ). tima ( '.data-api' )

Ntle le moo, ho lebisa plugin e itseng, kenyelletsa feela lebitso la plugin joalo ka sebaka sa mabitso hammoho le sebaka sa mabitso sa data-api joalo ka:

  1. $ ( 'mele' ). tima ( '.alert.data-api' )

Programmatic API

Hape re lumela hore o lokela ho sebelisa li-plugins tsohle tsa Bootstrap ka JavaScript API. Li-API tsohle tsa sechaba ke mekhoa e le 'ngoe, e ka tsamaisoang ka ketane, 'me e khutlisetsa pokello e sebelisitsoeng.

  1. $ ( ".btn.danger" ). konopo ( "toggle" ). addClass ( "mafura" )

Mekhoa eohle e lokela ho amohela ntho ea boikhethelo, khoele e lebisitseng mokhoa o itseng, kapa letho (e qalang plugin ka boits'oaro ba kamehla):

  1. $ ( "#myModal" ). modal () // E qadilwe ka tse sa fetoheng
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // e qalisoa ntle le keyboard
  3. $ ( "#myModal" ). modal ( 'show' ) // E qala le ho kopa pontsho hanghang

Plugin e 'ngoe le e' ngoe e boetse e pepesa sehahi sa eona se tala thepa ea `Constructor`: $.fn.popover.Constructor. Haeba u batla ho fumana mohlala o itseng oa plugin, e fumane ka kotloloho ho tsoa ho element: $('[rel=popover]').data('popover').

Ha ho Khohlano

Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflictplugin u lakatsa ho khutlisetsa boleng ba.

  1. var bootstrapButton = $ . fn . konopo . noConflict () // khutlisetsa $.fn.button ho boleng bo fanoeng pele
  2. $ . fn . bootstrapBtn = bootstrapButton // fana ka $().bootstrapBtn tšebetso ea bootstrap

Liketsahalo

Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ngata tse ikhethang tsa plugin. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng (mohlala shown.

Liketsahalo tsohle tse sa feleng li fana ka ts'ebetso ea preventDefault. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala.

  1. $ ( '#MyModal' ). ho ( 'show' , mosebetsi ( e ) {
  2. haeba (! data ) khutlisetsa e . thibelaDefault () // Ho emisa modal ho bontshwa
  3. })

Mabapi le liphetoho

Bakeng sa liphello tse bonolo tsa phetoho, kenyelletsa bootstrap-transition.js hang hammoho le lifaele tse ling tsa JS. Haeba u sebelisa compiled (kapa minified) bootstrap.js , ha ho hlokahale hore u kenyelle sena-se se se ntse se le teng.

Sebelisa linyeoe

Mehlala e seng mekae ea transition plugin:

  • Ho thella kapa ho nyamela ka methopo
  • Ho fokotseha ha li-tab
  • Litlhokomeliso tse nyamelang
  • Likarolo tse thellang

Mehlala

Li-modal li hlophisitsoe hantle, empa lia tenyetseha, likeletso tsa lipuisano tse nang le ts'ebetso e nyane e hlokahalang le mefokolo e bohlale.

Mohlala o tsitsitseng

Mokhoa o hlophisitsoeng o nang le hlooho, 'mele, le sete sa liketso botlaseng.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "nete" > × </ konopo>
  4. <h3> Sehlooho sa Modal </h3>
  5. </ div>
  6. <div class = "modal-body" >
  7. <p> 'Mele o le mong o motle… </p>
  8. </ div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn"> Koala </a> _
  11. <a href = "#" class = "btn btn-primary"> Boloka liphetoho </a>
  12. </ div>
  13. </ div>

Pontšo e phelang

Fetolela modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.

  1. <!-- Konope ya ho qala modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Hlakola mofuta wa demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria- hidden = "nete" >
  6. <div class = "modal-header" >
  7. < mofuta oa konopo = "button" class = "close" data-dismiss = "modal" aria-hidden = "nete" > × </button>
  8. <h3 id = "myModalLabel" > Hlooho ya Modal </h3>
  9. </ div>
  10. <div class = "modal-body" >
  11. <p> 'Mele o le mong o motle… </p>
  12. </ div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "nete" > Kwala </button>
  15. <button class = "btn btn-primary" > Boloka liphetoho </button>
  16. </ div>
  17. </ div>

Tšebeliso

Ka litšobotsi tsa data

Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.

  1. < mofuta oa konopo = "konopo" data-toggle = "modal" data-target = "#myModal" > Mokhoa oa ho qala </button>

Ka JavaScript

Letsetsa modal ka id myModale nang le mola o le mong oa JavaScript:

  1. $ ( '#MyModal' ). modal ( likhetho )

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-backdrop="".

Lebitso mofuta ya kamehla tlhaloso
bokamorao boolean 'nete E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa staticboemo ba morao-rao bo sa koaheleng mokhoa oa ho tobetsa.
keyboard boolean 'nete E koala modal ha konopo ea escape e tobetsoa
bontsha boolean 'nete E bonts'a modal ha e qala.
hole tsela bohata

Haeba url e hole e fanoe, litaba li tla kengoa ka loadmokhoa oa jQuery ebe li kenngoa ho .modal-body. Haeba u sebelisa data api, u ka sebelisa hreftag ho hlalosa mohloli o hole. Mohlala oa sena o bontšitsoe ka tlase:

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

Mekhoa

.modal(likhetho)

E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.

  1. $ ( '#MyModal' ). mokhoa ({
  2. keyboard : bohata
  3. })

.modal('toggle')

E fetola modal ka letsoho.

  1. $ ( '#MyModal' ). modal ( 'toggle' )

.modal('show')

E bula modal ka letsoho.

  1. $ ( '#MyModal' ). modal ( 'show' )

.modal('ipata')

E pata modal ka letsoho.

  1. $ ( '#MyModal' ). modal ( 'hide' )

Liketsahalo

Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal.

Ketsahalo Tlhaloso
bontsha Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
bontshitswe Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa css li phethehe).
pata Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng Ketsahalo ena e ts'oaroa ha modal e qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa css li phethehe).
  1. $ ( '#MyModal' ). ho ( 'e patiloeng' , mosebetsi () {
  2. // etsa ntho e itseng...
  3. })

Mohlala ho navbar

The ScrollSpy plugin ke ea ho inchafatsa lipheo tsa nav ka bo eona ho ipapisitse le boemo ba moqolo. Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintlha tse tlase li tla totobatsoa hape.

@mafura

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Litokelo tsa libaesekele tsa polasi-to-tafola tsa Tumblr eng kapa eng. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mohlomong ha u e-s'o utloe ka tsona et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork litelu. Litelu tsa Freegan aliqua cupidatat mcsweeney's vero. Cupidatat tse nne loko nisi, ea helvetica nulla carles. Lori ea lijo e nang le tattoo ea cosby sweater, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft biri motlatsi oa keytar deserunt.

ngoe

Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS e ntlafalitse. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

tse pedi

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 messenger bag marfa whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mohlomong ha u so utloe ka tsona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft biri seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Tšebeliso

Ka litšobotsi tsa data

Ho eketsa habonolo boitšoaro ba scrollspy ho navigation ea topbar ea hau, kenya feela nthong data-spy="scroll"eo u batlang ho e hloela (haholo e tla ba 'mele) le data-target=".navbar"ho khetha nav eo u ka e sebelisang. U tla batla ho sebelisa scrollspy e nang le .navkarolo.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Ka JavaScript

Letsetsa scrollspy ka JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Hlokomela! Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, ntho e <a href="#home">home</a>tlameha ho lumellana le ntho e ka dom e kang <div id="home"></div>.

Mekhoa

.scrollpy('refresh')

Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:

  1. $ ( '[data-spy="scroll"]' ). e 'ngoe le e' ngoe ( mosebetsi () {
  2. var $ hloela = $ ( sena ). scrollspy ( 'refresh' )
  3. });

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Lebitso mofuta ya kamehla tlhaloso
offset palo 10 Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa.

Liketsahalo

Ketsahalo Tlhaloso
kenya tshebetsong Ketsahalo ena e tuka neng kapa neng ha ntho e ncha e kentsoe tšebetsong ke scrollspy.

Li-tab tsa mohlala

Eketsa ts'ebetso ea li-tab e potlakileng, e matla ho fetela ka har'a liphasejene tsa litaba tsa lehae, esita le ka li-menu tse theohang.

Raw denim mohlomong ha u e-s'o utloe ka bona li-jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.


Tšebeliso

Lumella li-tab tse ka khonehang ka JavaScript (tabo e 'ngoe le e' ngoe e hloka ho etsoa ka bonngoe):

  1. $ ( '#myTab a' ). tobetsa ( mosebetsi ( e ) {
  2. e . preventDefault ();
  3. $ ( sena ). tab ( 'show' );
  4. })

O ka kenya li-tab tsa motho ka mong ka litsela tse 'maloa:

  1. $ ( '#MyTab a[href="#profile"]' ). tab ( 'show' ); // Khetha tab ka mabitso
  2. $ ( '#myTab a:first' ). tab ( 'show' ); // Khetha tab ya pele
  3. $ ( '#myTab a:last' ). tab ( 'show' ); // Khetha tab ya ho qetela
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Khetha tabo ea boraro (0-indexed)

Markup

O ka kenya ts'ebetso ea "tabo" kapa "pilisi" ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-toggle="tab"kapa data-toggle="pill"ka ntho e itseng. Ho kenyelletsa navle nav-tabslitlelase ho tab ho ultla sebelisa setaele sa tab ea Bootstrap.

  1. <ul class = "nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> Lehae </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> Boemo </a> </li>
  4. <li><a href = "#messages" data-toggle = "tab"> Melaetsa </a></li >
  5. <li><a href = "#settings" data-toggle = "tab"> Litlhophiso </a></li >
  6. </ul>

Mekhoa

$().tab

E kenya tshebetsong karolo ya tab le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-targetkapa e hreflebisitsoeng ho DOM.

  1. <ul class = "nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home"> Lehae </a></li >
  3. <li><a href = "#profile"> Profile </a> </li>
  4. <li><a href = "#melaetsa"> Melaetsa </a> </li>
  5. <li><a href = "#settings"> Litlhophiso </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane e sebetsang" id = "hae" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "melaetsa" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </ div>
  14.  
  15. <script>
  16. $ ( mosebetsi () {
  17. $ ( '#myTab a:last' ). tab ( 'show' );
  18. })
  19. </script>

Liketsahalo

Ketsahalo Tlhaloso
bontsha Ketsahalo ena e qala ho bonts'a li-tab, empa pele tab e ncha e bontšoa. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
bontshitswe Ketsahalo ena e tla hlaha ka mor'a hore tab e hlahisoe. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
  1. $ ( 'a[data-toggle="tab"]' ). ho ( 'e bontšitsoeng' , mosebetsi ( e ) {
  2. e . target // Letlapa le butsoeng
  3. e . amanangTarget // tab e fetileng
  4. })

Mehlala

E bululetsoe ke plugin e ntle haholo ea jQuery.tipsy e ngotsoeng ke Jason Frame; Litlhahiso ke mofuta o ntlafalitsoeng, o sa itšetleheng ka litšoantšo, sebelisa CSS3 bakeng sa lipopae, le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.

Ka mabaka a ts'ebetso, lisebelisoa le popover data-apis li khetha ho kena, ho bolelang hore u tlameha ho li qala ka bouena .

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

Borikhoe bo thata bo latelang keffiyeh mohlomong ha u so utloe ka bona. Photo booth litelu tse tala tsa denim letterpress vegan messenger bag stumptown. Seaparo sa polasi-to-tafola seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparse e na le terry richardson vinyl chambray. Litelu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Litsela tse 'ne

Lithulusi ka lihlopha tsa ho kenya letsoho

Ha u sebelisa lithulusi le li-popovers ka lihlopha tsa ho kenya Bootstrap, u tla tlameha ho beha khetho container(e ngotsoeng ka tlase) ho qoba litla-morao tse sa batleheng.


Tšebeliso

Qala sesebelisoa ka JavaScript:

  1. $ ( '#mohlala' ). tooltip ( likgetho )

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Lebitso mofuta ya kamehla tlhaloso
animation boolean 'nete sebelisa phetoho ea css fade ho tooltip
html boolean bohata Kenya html ntlheng ea lisebelisoa. Haeba e le leshano, mokhoa oa jquery texto tla sebelisoa ho kenya litaba ka har'a dom. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha khoele | tshebetso 'holimo' mokhoa oa ho beha tooltip - top | tlase | le letšehali | hantle
mokhethi khoele bohata Haeba ho fanoe ka sekhetho, lintlha tsa lisebelisoa li tla abeloa lipehelo tse boletsoeng.
sehlooho khoele | tshebetso '' boleng ba sehlooho sa kamehla haeba tag ea `sehlooho` e le sieo
qhoqhoa khoele 'hover focus' hore na tooltip e qala joang - tobetsa | hloella | tsepamisa | tataiso. Ela hloko mohlala oa hau oa "case pass trigger" mutliple, sebaka se arohaneng, mefuta ea trigger.
lieha nomoro | ntho 0

tieho ho bonts'a le ho pata ntlha ea lisebelisoa (ms) - ha e sebetse mofuteng oa ho qala ka letsoho

Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli

Sebopeho sa ntho ke:delay: { show: 500, hide: 100 }

setshelo khoele | bohata bohata

E kopanya ntlha ea lisebelisoa ho ntho e itsengcontainer: 'body'

Hlokomela! Likhetho tsa lisebelisoa tsa motho ka mong li ka hlalosoa ka tšebeliso ea lintlha tsa data.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "tooltip ea pele"> fetelletsa holim'a ka </a>

Mekhoa

$().thulusi(likgetho)

E hokela sebatli sa lithulusi pokellong ea lintho.

.tooltip('show')

E senola karolo ea lisebelisoa.

  1. $ ( '#element' ). tooltip ( 'show' )

.tooltip('hide')

E pata ntlha ea lisebelisoa.

  1. $ ( '#element' ). tooltip ( 'hide' )

.tooltip('toggle')

E fetola ntlha ea lisebelisoa.

  1. $ ( '#element' ). tooltip ( 'toggle' )

.tooltip('destroy')

E pata le ho senya ntlha ea lisebelisoa.

  1. $ ( '#element' ). tooltip ( 'destroy' )

Mehlala

Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo. Tsamaisa holim'a konopo ho qala popover. E hloka hore Tooltip e kenyeletsoe.

Popover e tsitsitseng

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ka ho le letona

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover tlase

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover o ile a tloha

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ha ho lipapatso tse bonts'itsoeng joalo ka popover tse hlahisoang ho tsoa ho JavaScript le litaba tse ka har'a datatšobotsi.

Pontšo e phelang

Litsela tse 'ne


Tšebeliso

Lumella li-popover ka JavaScript:

  1. $ ( '#mohlala' ).popover ( likhetho )

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Lebitso mofuta ya kamehla tlhaloso
animation boolean 'nete sebelisa phetoho ea css fade ho tooltip
html boolean bohata Kenya html ho popover. Haeba e le leshano, mokhoa oa jquery texto tla sebelisoa ho kenya litaba ka har'a dom. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha khoele | tshebetso 'ho lokile' mokhoa oa ho beha popover - holimo | tlase | le letšehali | hantle
mokhethi khoele bohata haeba ho fanoe ka khetho, lisebelisoa tsa lisebelisoa li tla abeloa lipehelo tse boletsoeng
qhoqhoa khoele 'tobetsa' hore na popover e qala joang - tobetsa | hloella | tsepamisa | tataiso
sehlooho khoele | tshebetso '' boleng ba sehlooho sa kamehla ha semelo sa `sehlooho` se le sieo
dikahare khoele | tshebetso '' boleng ba dikahare tsa kamehla haeba semelo sa `seteng sa data` se le sieo
lieha nomoro | ntho 0

tieho ho bonts'a le ho pata popover (ms) - ha e sebetse ho mofuta oa mochini oa ho qala

Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli

Sebopeho sa ntho ke:delay: { show: 500, hide: 100 }

setshelo khoele | bohata bohata

E eketsa popover ho element e itsengcontainer: 'body'

Hlokomela!Likhetho bakeng sa li-popovers ka bomong li ka hlalosoa ka tšebeliso ea litšoaneleho tsa data.

Markup

Bakeng sa mabaka a ts'ebetso, Tooltip le Popover data-apis li khetha ho kena. Haeba u batla ho li sebelisa, bolela feela khetho ea khetho.

Mekhoa

$().popover(dikgetho)

E qala popovers bakeng sa pokello ea lintho.

.popover('show')

E senola sebopeho sa element.

  1. $ ( '#element' ). popover ( 'show' )

.popover('pata')

E pata li-element popover.

  1. $ ( '#element' ). popover ( 'hide' )

.popover('toggle')

E fetola popo ea lintho.

  1. $ ( '#element' ). popover ( 'toggle' )

.popover('destroy')

E pata le ho senya popover ea element.

  1. $ ( '#element' ). popover ( 'senya' )

Mehlala ea tlhokomeliso

Kenya ts'ebetso ea ho tlosa melaetsa eohle ea tlhokomeliso ka plugin ena.

guacamole e halalelang! Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo.

Oho hang! O na le phoso!

Fetola sena le sane ebe o leka hape. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Etsa ketso ena Kapa etsa sena


Tšebeliso

Lumella ho tlosoa ha tlhokomeliso ka JavaScript:

  1. $ ( ".alert" ). hlokomelisa ()

Markup

Kenya feela data-dismiss="alert"konopo ea hau ea ho koala ho fana ka ts'ebetso e haufi ea tlhokomeliso.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Mekhoa

$(). tlhokomeliso()

E phuthela litlhokomeliso tsohle ka ts'ebetso e haufi. Ho etsa hore litemoso tsa hau li phele ha u koetsoe, etsa bonnete ba hore li se li ntse li sebelisoa .fadele sehlopha..in

.tlhokomeliso('koala')

E koala tlhokomeliso.

  1. $ ( ".alert" ). tlhokomeliso ( 'close' )

Liketsahalo

Sehlopha sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.

Ketsahalo Tlhaloso
koala Ketsahalo ena e tuka hang hang ha closemokhoa oa mohlala o bitsoa.
koaloa Ketsahalo ena e etsoa ha tlhokomeliso e koetsoe (e tla emela hore liphetoho tsa css li phethehe).
  1. $ ( '#temoso eaka' ). tlama ( 'koetsoe' , mosebetsi () {
  2. // etsa ntho e itseng...
  3. })

Lisebelisoa tsa mohlala

Etsa ho eketsehileng ka likonopo. Konopo ea ho laola e bolela kapa etsa lihlopha tsa likonopo bakeng sa likarolo tse ling tse kang lithulusi.

E bolelang

Eketsa data-loading-text="Loading..."ho sebelisa boemo ba ho kenya konopo.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Ea kenya..." > Boemo ba ho kenya </button>

Phetoho e le 'ngoe

Eketsa data-toggle="button"ho kenya tshebetsong toggling ho konopo e le 'ngoe.

  1. < mofuta oa konopo = "button" class = "btn btn-primary" data-toggle = "button" > Toggle e le 'ngoe </button>

Lebokose la ho hlahloba

Eketsa data-toggle="buttons-checkbox"bakeng sa ho fetola mokhoa oa lebokose la ho hlahloba ho btn-group.

  1. <div class = "btn-group" data-toggle = "likonopo-checkbox" >
  2. < mofuta oa konopo = "button" class = "btn btn-primary" > Ka ho le letšehali </button>
  3. < mofuta oa konopo = "button" class = "btn btn-primary" > Hare </button>
  4. < mofuta oa konopo = "button" class = "btn btn-primary" > Ka ho le letona </button>
  5. </ div>

Radio

Eketsa data-toggle="buttons-radio"bakeng sa mokhoa oa seea-le-moea ho fetola btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. < mofuta oa konopo = "button" class = "btn btn-primary" > Ka ho le letšehali </button>
  3. < mofuta oa konopo = "button" class = "btn btn-primary" > Hare </button>
  4. < mofuta oa konopo = "button" class = "btn btn-primary" > Ka ho le letona </button>
  5. </ div>

Tšebeliso

Lumella likonopo ka JavaScript:

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

Markup

Litšobotsi tsa data li bohlokoa ho plugin ea konopo. Sheba mohlala oa khoutu e ka tlase bakeng sa mefuta e fapaneng ea li-markup.

Dikgetho

Ha ho letho

Mekhoa

$().konopo('toggle')

E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.

Hlokomela! U ka etsa hore konopo ea auto toggling ka ho sebelisa data-toggletšobotsi.
  1. < mofuta wa konopo = "button" class = "btn" data-toggle = "button" > </button>

$().konopo('ho kenya')

E beha boemo ba konopo hore e kene - e tima konopo 'me e fapanyetsana mongolo ho kenya mongolo. Ho kenya mongolo ho tlameha ho hlalosoa karolong ea konopo ho sebelisoa tšobotsi ea data data-loading-text.

  1. < mofuta oa konopo = "button" class = "btn" data-loading-text = "ho kenya lintho..." > ... </button>
Hlokomela! Firefox e phehella boemo ba ho holofala ho pholletsa le maqephe a mangata . Tharollo ea sena ke ho e sebelisa autocomplete="off".

$().konopo('seta bocha')

Seta bocha boemo ba konopo - fetola mongolo ho ea ho mongolo oa mantlha.

$().konopo(khoele)

Seta botjha boemo ba konopo - swaps mongolo ho boemo bofe kapa bofe ba data bo hlalositsoeng.

  1. < mofuta wa konopo = "button" class = "btn" data-complete-text = "fedile!" > ... </ konopo>
  2. <script>
  3. $ ( '.btn' ). konopo ( 'feletseng' )
  4. </script>

About

Fumana mekhoa ea mantlha le tšehetso e feto-fetohang bakeng sa likarolo tse putlamang joalo ka li-accordion le navigation.

* E hloka hore plugin ea Transitions e kenyeletsoe.

Mohlala oa accordion

Re sebelisa plugin ea ho putlama, re thehile widget e bonolo ea setaele sa accordion:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Lori ea lijo quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beha nonyana holim'a eona squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft biri labour wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bucher vice lomo. Leggings occaecat craft craft biri-to-table, raw denim aesthetic synth nesciunt mohlomong ha u so utloe ka bona accusamus labour sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Lori ea lijo quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beha nonyana holim'a eona squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft biri labour wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bucher vice lomo. Leggings occaecat craft craft biri-to-table, raw denim aesthetic synth nesciunt mohlomong ha u so utloe ka bona accusamus labour sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Lori ea lijo quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beha nonyana holim'a eona squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft biri labour wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bucher vice lomo. Leggings occaecat craft craft biri-to-table, raw denim aesthetic synth nesciunt mohlomong ha u so utloe ka bona accusamus labour sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div sehlopha = "sehlopha sa accordion" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
  5. Ntho e Kopantsoeng ea Sehlopha #1
  6. </a>
  7. </ div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </ div>
  12. </ div>
  13. </ div>
  14. <div sehlopha = "sehlopha sa accordion" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
  17. Ntho ea #2 e Kolohang ea Sehlopha
  18. </a>
  19. </ div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </ div>
  24. </ div>
  25. </ div>
  26. </ div>
  27. ...

U ka sebelisa plugin ntle le letšoao la accordion. Etsa konopo ho fetola ho hola le ho putlama ha elemente e 'ngoe.

  1. < mofuta oa konopo = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. e phuthoang e bonolo
  3. </ konopo>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Tšebeliso

Ka litšobotsi tsa data

Kenya feela data-toggle="collapse"le data-targetho element ho abela taolo ea ntho e putlahang. Tšobotsi e amohela khetho ea data-targetcss eo u ka sebelisang ho putlama ho eona. Etsa bonnete ba hore o kenyelletsa sehlopha collapseho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso in.

Ho kenya taolo ea sehlopha se kang accordion taolong e putlang, eketsa tšobotsi ea data data-parent="#selector". Sheba demo ho bona sena se sebetsa.

Ka JavaScript

Lumella ka letsoho ka:

  1. $ ( ".collapse" ). putlama ()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-parent="".

Lebitso mofuta ya kamehla tlhaloso
motsoadi mokhethi bohata Haeba sekhethi se tla koaleha, likarolo tsohle tse ka putlamang tlas'a motsoali ea boletsoeng li tla koaloa ha ntho ena e bonohang e bontšoa. (e ts'oanang le boitšoaro ba moetlo oa accordion)
toggle boolean 'nete E fetola ntho e ka putlamang kopong

Mekhoa

. putlama(dikgetho)

E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object.

  1. $ ( '#myCollapsible' ). ho putlama ({
  2. toggle : bohata
  3. })

.collapse('toggle')

E fetolela ntho e putlahang hore e bontšoe kapa e patiloe.

.collapse('show')

E bonts'a ntho e putlahang.

.collapse('hide')

E pata ntho e putlang.

Liketsahalo

Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.

Ketsahalo Tlhaloso
bontsha Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
bontshitswe Ketsahalo ena e ts'oaroa ha karolo e putlamang e bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa css li phethehe).
pata Ketsahalo ena e lelekoa hang-hang ha hidemokhoa o bitsoa.
patiloeng Ketsahalo ena e ts'oaroa ha karolo ea ho putlama e patetsoe mosebelisi (e tla emela hore liphetoho tsa css li phethehe).
  1. $ ( '#myCollapsible' ). ho ( 'e patiloeng' , mosebetsi () {
  2. // etsa ntho e itseng...
  3. })

Mohlala

Plugin ea mantlha, e atolositsoeng habonolo bakeng sa ho theha kapele li-typeheads tse ntle ka mokhoa ofe kapa ofe oa mongolo.

  1. <input type = "text" data- provide = "typeahead" >

U tla batla ho seta autocomplete="off"ho thibela li-menu tsa sebatli tsa kamehla hore li se ke tsa hlaha holim'a ho theoha ha sehlooho sa Bootstrap.


Tšebeliso

Ka litšobotsi tsa data

Eketsa litšobotsi tsa data ho ngolisa ntho e nang le ts'ebetso ea typeahead joalokaha ho bontšitsoe mohlaleng o ka holimo.

Ka JavaScript

Letsetsa mochine oa khatiso ka letsoho ka:

  1. $ ( '.typeahead' ). mofuta oa pele ()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-source="".

Lebitso mofuta ya kamehla tlhaloso
mohlodi array, tshebetso [ ] Mohloli oa data oa ho botsa khahlano le. E ka ba letoto la likhoele kapa tšebetso. Ts'ebetso e fetisitsoe likhang tse peli, queryboleng sebakeng sa ho kenya le processcallback. Ts'ebetso e ka sebelisoa ka mokhoa o ts'oanang ka ho khutlisa mohloli oa data ka kotloloho kapa ka mokhoa processo lumellanang ka khang e le 'ngoe ea callback.
lintho palo 8 Nomoro e phahameng haholo ea lintho tse tla hlahisoa ho dropdown.
minLength palo 1 Bonyane bolelele ba litlhaku tse hlokahalang pele o kenya litlhahiso tsa ho qetela
matcher tshebetso ho hloka kutlo Mokhoa o sebelisoang ho fumana hore na potso e lumellana le ntho e itseng. E amohela khang e le 'ngoe, itemeo ho eona ho lekang potso. Fumana seo u se batlang ka this.query. Khutlisetsa boolean truehaeba potso e lumellana.
hlopha tshebetso ntho e nyallanang hantle,
e nyenyefatsang taba,
ha e na kutlo
Mokhoa o sebelisitsoeng ho hlophisa liphetho tsa ho qetela. E amohela khang e le 'ngoe' itemsme e na le boholo ba mohlala oa typeahead. Sheba potso ea hajoale ka this.query.
montlafatsi tshebetso e khutlisetsa ntho e khethiloeng Mokhoa o sebelisoang ho khutlisa ntho e khethiloeng. E amohela khang e le 'ngoe, ' itemme e na le boholo ba mohlala oa typeahead.
e totobatsang tshebetso e totobatsa litšoaneleho tsohle tsa kamehla Mokhoa o sebelisitsoeng ho totobatsa liphetho tsa ho qetela. E amohela khang e le 'ngoe' itemme e na le boholo ba mohlala oa typeahead. E lokela ho khutlisa html.

Mekhoa

.typeahead(likhetho)

E qala ho kenya letsoho ka ho ngola pele.

Mohlala

Subnavigation e ka letsohong le letšehali ke demo e phelang ea plugin ea affix.


Tšebeliso

Ka litšobotsi tsa data

Ho eketsa habonolo boitšoaro ba affix ho ntho efe kapa efe, eketsa feela data-spy="affix"ntho eo u batlang ho e hloela. Ebe u sebelisa li-offsets ho hlalosa nako ea ho kenya le ho tima ho penya ha element.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Hlokomela! U tlameha ho laola boemo ba ntho e khokhothetsoeng le boitšoaro ba motsoali oa eona ea haufi. Boemo bo laoloa ke affix, affix-top, le affix-bottom. Hopola ho shebana le motsoali ea nang le monyetla oa ho putlama ha affix e kenella ha e ntse e tlosa litaba ho tsoa ho phallo e tloaelehileng ea leqephe.

Ka JavaScript

Letsetsa plugin ea affix ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset-top="200".

Lebitso mofuta ya kamehla tlhaloso
offset nomoro | tshebetso | ntho 10 Lipikselse tsa ho theola skrineng ha ho baloa hore na sebaka sa moqolo ke sefe. Haeba ho fanoe ka nomoro e le 'ngoe, offset e tla sebelisoa ka litsela tse peli tse holimo le tse ka ho le letšehali. Ho mamela tataiso e le 'ngoe, kapa li-offsets tse ngata tse ikhethang, fana ka ntho feela offset: { x: 10 }. Sebelisa ts'ebetso ha o hloka ho fana ka offset (e molemo bakeng sa meralo e meng e arabelang).