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:

$ ( '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:

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

Programmatic API

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

$ ( ".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):

$ ( "#myModal" ). modal () // E qadilwe ka tse sa fetoheng                       
$ ( "#myModal" ). modal ({ keyboard : false }) // e qalisoa ntle le keyboard     
$ ( "#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.

var bootstrapButton = $ . fn . konopo . noConflict () // khutlisetsa $.fn.button ho boleng bo fanoeng pele 
$ . 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.

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

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-e se e ntse e 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.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "nete" > × </ konopo>    
    <h3> Sehlooho sa Modal </h3>
  </ div>
  <div class = "modal-body" > 
    <p> 'Mele o le mong o motle… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Koala </a> _  
    <a href = "#" class = "btn btn-primary"> Boloka liphetoho </a>  
  </ div>
</ 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.

<!-- Konope ya ho qala modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Hlakola mofuta wa demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria- hidden = "nete" >      
  <div class = "modal-header" > 
    < mofuta oa konopo = "button" class = "close" data-dismiss = "modal" aria-hidden = "nete" > × </button>    
    <h3 id = "myModalLabel" > Hlooho ya Modal </h3> 
  </ div>
  <div class = "modal-body" > 
    <p> 'Mele o le mong o motle… </p>
  </ div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "nete" > Kwala </button>   
    <button class = "btn btn-primary" > Boloka liphetoho </button> 
  </ div>
</ 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.

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

Ka JavaScript

Letsetsa modal ka id myModalka mola o le mong oa JavaScript:

$ ( '#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="".

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

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

.modal('toggle')

E fetola modal ka letsoho.

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

.modal('show')

E bula modal ka letsoho.

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

.modal('ipata')

E pata modal ka letsoho.

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

Liketsahalo

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

$ ( '#MyModal' ). ho ( 'e patiloeng' , mosebetsi () {   
  // etsa ntho e itseng...
})

Mehlala

Kenya menyetla ea ho theoha hoo e batlang e le eng kapa eng ka plugin ena e bonolo, ho kenyeletsoa navbar, li-tab le lipilisi.

Ka har'a navbar

Ka har'a li-tab

Tšebeliso

Ka litšobotsi tsa data

Kenya data-toggle="dropdown"sehokelong kapa konopong ho totobetsa ho theoha.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

Ho boloka li-URL li sa fetohe, sebelisa data-targettšobotsi ho e-na le href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Theosa
    <b sehlopha = "tlhokomelo" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</ div>

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

$ ( '. dropdown-toggle' ). ho theoha ()

Dikgetho

Ha ho letho

Mekhoa

$(). dropdown('toggle')

Lenaneo la api bakeng sa ho totoba menu bakeng sa navbar e fanoeng kapa navigation e nang le li-tabbed.

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.

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.

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

Ka JavaScript

Letsetsa scrollspy ka JavaScript:

$ ( '#navbar' ). scrollspy ()

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:

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

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

Liketsahalo

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.

Tšebeliso

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

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

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

$ ( '#MyTab a[href="#profile"]' ). tab ( 'show' ); // Khetha tab ka mabitso 
$ ( '#myTab a:first' ). tab ( 'show' ); // Khetha tab ya pele 
$ ( '#myTab a:last' ). tab ( 'show' ); // Khetha tab ya ho qetela 
$ ( '#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.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Lehae </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Boemo </a> </li>  
  <li><a href = "#messages" data-toggle = "tab"> Melaetsa </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Litlhophiso </a></li >  
</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.

<ul class = "nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home"> Lehae </a></li >  
  <li><a href = "#profile"> Profile </a> </li> 
  <li><a href = "#melaetsa"> Melaetsa </a> </li> 
  <li><a href = "#settings"> Litlhophiso </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane e sebetsang" id = "hae" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "melaetsa" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</ div>
 
<script>
  $ ( mosebetsi () {  
    $ ( '#myTab a:last' ). tab ( 'show' );
  })
</script>

Liketsahalo

$ ( 'a[data-toggle="tab"]' ). ho ( 'e bontšitsoeng' , mosebetsi ( e ) {   
  e . target // Letlapa le butsoeng
  e . amanangTarget // tab e fetileng
})

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:

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:

$ ( '#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="".

Markup

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

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

.tooltip('hide')

E pata ntlha ea lisebelisoa.

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

.tooltip('toggle')

E fetola ntlha ea lisebelisoa.

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

.tooltip('destroy')

E pata le ho senya ntlha ea lisebelisoa.

$ ( '#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.

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:

$ ( '#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="".

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.

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

.popover('pata')

E pata li-element popover.

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

.popover('toggle')

E fetola popo ea lintho.

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

.popover('destroy')

E pata le ho senya popover ea element.

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

Mehlala ea tlhokomeliso

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

Tšebeliso

Lumella ho tlosoa ha tlhokomeliso ka JavaScript:

$ ( ".alert" ). hlokomelisa ()

Markup

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

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

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

Liketsahalo

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

$ ( '#temoso eaka' ). tlama ( 'koetsoe' , mosebetsi () {   
  // etsa ntho e itseng...
})

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.

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

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

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

Radio

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

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

Tšebeliso

Lumella likonopo ka JavaScript:

$ ( '.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.

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

< mofuta oa konopo = "button" class = "btn" data-loading-text = "ho kenya lintho..." > ... </button>    

$().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.

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

About

Fumana mekhoa ea motheo 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:

<div class = "accordion" id = "accordion2" >  
  <div sehlopha = "sehlopha sa accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Ntho e Kopantsoeng ea Sehlopha #1
      </a>
    </ div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
  <div sehlopha = "sehlopha sa accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Ntho ea #2 e Kolohang ea Sehlopha
      </a>
    </ div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </ div>
    </ div>
  </ div>
</ div>
...

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

< mofuta oa konopo = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  e phuthoang e bonolo
</ konopo>
 
<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:

$ ( ".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="".

Mekhoa

. putlama(dikgetho)

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

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

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

$ ( '#myCollapsible' ). ho ( 'e patiloeng' , mosebetsi () {   
  // etsa ntho e itseng...
})

Mohlala oa carousel

Setšoantšo sa li-slide se ka tlase se bontša plugin e akaretsang le karolo ea ho palama libaesekele ho pholletsa le likarolo tse kang carousel.

Leibole ea Thumbnail ea pele

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" sehlopha = "carousel slide" >  
  <ol sehlopha = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Lintho tsa Carousel -->
  <div sehlopha = "carousel-inner" > 
    <div class = "ntho e sebetsang" > ... </div> 
    <div class = "ntho" > ... </div> 
    <div class = "ntho" > ... </div> 
  </ div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "e latelang" > › </a>   
</ div>

Tšebeliso

Ka litšobotsi tsa data

Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slidee amohela mantsoe a sehlooho prevkapa next, e fetolang boemo ba slide ho ipapisitsoe le boemo ba hona joale. Ntle le moo, sebelisa data-slide-toho fetisa index ea li-slide tse tala ho carousel data-slide-to="2", e leng boemo ba li-slide ho index e itseng e qalang ka 0.

Ka JavaScript

Letsetsa carousel ka letsoho ka:

$ ( '.carousel' ). carousel ()

Dikgetho

Likhetho li ka fetisoa ka likarolo tsa data kapa JavaScriptz. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-interval="".

Mekhoa

.carousel(likhetho)

E qala carousel ka khetho ea boikhethelo objectebe e qala ho palama lintho.

$ ( '.carousel' ). carousel ({
  nako : 2000 
})

.carousel('cycle')

E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.

.carousel('pause')

E emisa carousel ho palama baesekele ka har'a lintho.

.carousel(nomoro)

E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo).

.carousel('prev')

Lipotoloho ho ea nthong e fetileng.

.carousel('e latelang')

Lipotoloho ho ea nthong e latelang.

Liketsahalo

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

Mohlala

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

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

$ ( '.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="".

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.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Ka JavaScript

Letsetsa plugin ea affix ka JavaScript:

$ ( '#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".