Javascript bakeng sa Bootstrap

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

Mekhoa e metle

Sesebelisoa se nolofalitsoeng, empa se feto-fetoha, se nka plugin ea setso ea javascript e nang le ts'ebetso e fokolang feela e hlokahalang le mefokolo e bohlale.

Litheohelang

Kenya li-menu tse theohang hoo e batlang e le eng kapa eng e Bootstrap ka plugin ena e bonolo. Bootstrap e na le ts'ehetso e felletseng ea li-menu tse theohang ho navbar, li-tab le lipilisi.

Scrollspy

Sebelisa scrollspy ho ntlafatsa lihokelo tse ho navbar ea hau ka bo eona ho bonts'a sehokelo sa hajoale se sebetsang se ipapisitseng le boemo ba moqolo.

Li-tab tse fetolehang

Sebelisa plugin ena ho etsa hore li-tabo le lipilisi li be le thuso haholoanyane ka ho li lumella hore li fete ka har'a liphasejene tse fumanehang tsa litaba tsa lehae.

Lisebelisoa

Mokhoa o mocha oa plugin ea jQuery Tipsy, Litlhahiso ha li itšetlehe ka litšoantšo-li sebelisa CSS3 bakeng sa lipopae le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.

Lipapali *

Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo.

* E hloka hore lithulusi li kenyeletsoe

Melaetsa ea tlhokomeliso

Plugin ea tlhokomeliso ke sehlopha se senyane sa ho eketsa ts'ebetso e haufi le litlhokomeliso.

Likonopo

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

Koaleha

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

Carousel

Etsa papali e monate ea litaba life kapa life tseo u lakatsang ho fana ka pontšo ea li-slideshow tsa litaba.

Typeahead

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

Liphetoho *

Bakeng sa liphetho tse bonolo tsa phetoho, kenyelletsa bootstrap-transition.js hang ho thella ka mokhoa o itseng kapa tlhokomeliso e nyamele.

* E ea hlokahala bakeng sa animation ho li-plugins

Hlokomela! Li-plugins tsohle tsa javascript li hloka mofuta oa morao-rao oa jQuery.

Mabapi le mekhoa

Sesebelisoa se nolofalitsoeng, empa se feto-fetoha, se nka plugin ea setso ea javascript e nang le ts'ebetso e fokolang feela e hlokahalang le mefokolo e bohlale.

Khoasolla faele

Mohlala o tsitsitseng

Ka tlase ho na le modal e entsoeng ka statically.

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.

Qala mokhoa oa demo

Ho sebelisa bootstrap-modal

Letsetsa modal ka javascript:

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

Dikgetho

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.

Markup

U ka kenya li-modals leqepheng la hau habonolo ntle le ho ngola mola o le mong oa javascript. Beha feela data-toggle="modal"ntho ea taolo e nang le data-target="#foo"kapa href="#foo"e tsamaellanang le id ea modal element, 'me ha e tobetse, e tla tsebisa modal ea hau.

Hape, ho kenyelletsa likhetho molemong oa hau oa modal, li kenyelle feela e le lintlha tse ling tsa data ho karolo ea taolo kapa modal markup ka boeona.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Mokhoa oa ho qala </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < mofuta oa konopo = "button" class = "close" data-dismiss = "modal" > × </button>
  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" data-dismiss = "modal"> Koala </a> _
  11. <a href = "#" class = "btn btn-primary"> Boloka liphetoho </a>
  12. </ div>
  13. </ div>
Hlokomela! Haeba u batla hore modal ea hau e phele le ho tsoa, ​​eketsa .fadesehlopha ho .modalelement (sheba demo ho bona sena se sebetsa) 'me u kenyelle bootstrap-transition.js.

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

The ScrollSpy plugin ke ea ho inchafatsa lipheo tsa nav ka bo eona ho ipapisitse le boemo ba moqolo.

Khoasolla faele

Mohlala navbar e nang le scrollspy

Tsamaisetsa sebaka se ka tlase 'me u shebelle ntlafatso ea ho tsamaea. Lintlha tse tlase li tla totobatsoa hape. E leke!

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


Ho sebelisa bootstrap-scrollspy.js

Letsetsa scrollspy ka javascript:

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

Markup

Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea hau ea topbar, kenya feela nthong data-spy="scroll"eo u batlang ho e hloela (haholo e tla ba 'mele).

  1. <body data-spy = "scroll" > ... </body>
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

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.

Plugin ena e eketsa ts'ebetso ea tabo e potlakileng, e matla le lipilisi bakeng sa ho fetela ka har'a litaba tsa lehae.

Khoasolla faele

Li-tab tsa mohlala

Tobetsa li-tab tse ka tlase ho fetola lipakeng tsa li-panels tse patiloeng, 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.


Ho sebelisa bootstrap-tab.js

Lumella li-tabbable 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 leha e le 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 "bootstrap tab".

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

Mabapi le Tooltips

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.

Khoasolla faele

Mohlala oa tšebeliso ea Tooltips

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.


Ho sebelisa bootstrap-tooltip.js

Qala sesebelisoa ka javascript:

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

Dikgetho

Lebitso mofuta ya kamehla tlhaloso
animation boolean 'nete sebelisa phetoho ea css fade ho tooltip
ho beha khoele|mosebetsi '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' kamoo tooltip e hlahisoang kateng - hover | tsepamisa | tataiso
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 }

Hlokomela! Likhetho tsa lisebelisoa tsa motho ka mong li ka hlalosoa ka tšebeliso ea lintlha 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.

  1. <a href = "#" rel = "tooltip" title = "tooltip ea pele"> okamela 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' )

Mabapi le popovers

Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo.

* E hloka hore Tooltip e kenyeletsoe

Khoasolla faele

Mohlala hover popover

Tsamaisa holim'a konopo ho qala popover.


Ho sebelisa bootstrap-popover.js

Lumella li-popover ka javascript:

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

Dikgetho

Lebitso mofuta ya kamehla tlhaloso
animation boolean 'nete sebelisa phetoho ea css fade ho tooltip
ho beha khoele|mosebetsi '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 'hover' kamoo tooltip e hlahisoang kateng - hover | 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 }

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

Mabapi le litlhokomeliso

Plugin ea tlhokomeliso ke sehlopha se senyane sa ho eketsa ts'ebetso e haufi le litlhokomeliso.

Khoasolla

Mehlala ea tlhokomeliso

Plugin ea litlhokomeliso e sebetsa melaetsa ea kamehla ea tlhokomeliso, le ho thibela melaetsa.

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


Ho sebelisa bootstrap-alert.js

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

About

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

Khoasolla faele

Lisebelisoa tsa mohlala

Sebelisa li-button plugin bakeng sa linaha le li-toggles.

E bolelang
Phetoho e le 'ngoe
Lebokose la ho hlahloba
Radio

Ho sebelisa bootstrap-button.js

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.

  1. <!-- Eketsa data-toggle="konopo" ho kenya tshebetsong ho tobetsa konopo e le nngwe -->
  2. <button class = "btn" data-toggle = "button" > Toggle e le Mong </button>
  3.  
  4. <!-- Eketsa data-toggle="buttons-checkbox" bakeng sa ho fetola setaele sa lebokoso la diteke ho btn-group -->
  5. <div class = "btn-group" data-toggle = "likonopo-checkbox" >
  6. < sehlopha sa konopo = "btn" > Ka ho le letšehali </button>
  7. < sehlopha sa konopo = "btn" > Bohareng </button>
  8. < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo>
  9. </ div>
  10.  
  11. <!-- Kenya data-toggle="buttons-radio" bakeng sa ho fetolela setaele sa radio ho btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. < sehlopha sa konopo = "btn" > Ka ho le letšehali </button>
  14. < sehlopha sa konopo = "btn" > Bohareng </button>
  15. < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo>
  16. </ div>

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. < sehlopha sa konopo = "btn" data-toggle = "konopo" > </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. < sehlopha sa konopo = "btn" data-loading-text = "ho kenya dintho..." > ... </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. < sehlopha sa konopo = "btn" data-complete-text = "fedile!" > ... </ konopo>
  2. <script>
  3. $ ( '.btn' ). konopo ( 'feletseng' )
  4. </script>

About

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

Khoasolla faele

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

Ho sebelisa bootstrap-collapse.js

Dumella ka javascript:

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

Dikgetho

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

Markup

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.

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

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('ipata')

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

About

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

Khoasolla faele

Mohlala

Qala ho thaepa lebaleng le ka tlase ho bontša liphetho tsa sehlooho.


Ho sebelisa bootstrap-typeahead.js

Letsetsa motlalehi ka javascript:

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

Dikgetho

Lebitso mofuta ya kamehla tlhaloso
mohlodi array [ ] Mohloli oa data oa ho botsa khahlano le.
lintho palo 8 Nomoro e phahameng haholo ea lintho tse tla hlahisoa ho dropdown.
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.
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.

Markup

Kenya litšobotsi tsa data ho ngolisa ntho e nang le ts'ebetso ea typeahead.

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

Mekhoa

.typeahead(likhetho)

E qala ho kenya letsoho ka ho ngola pele.