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.

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.

Ho sebelisa bootstrap-modal

Letsetsa modal ka javascript:

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

Dikgetho

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.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Mokhoa oa ho qala </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    < sehlopha sa konopo = "koala" data-dismiss = "modal" > × </button>  
    <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>

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

Mabapi le li-dropdown

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.

Mehlala

Tobetsa ho lihokelo tsa nav tse ka tlase ho navbar le lipilisi tse ka tlase ho leka ho theoha.

• Sehokelo sa kamehla
• Theosa
  • Action
  • Another action
  • Something else here
  • Separated link
• Phatlalatso 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Phatlalatso 3
  • Action
  • Another action
  • Something else here
  • Separated link

Ho sebelisa bootstrap-dropdown.js

Letsetsa li-dropdown ka javascript:

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

Markup

Ho eketsa ts'ebetso ea ho theoha ka potlako nthong efe kapa efe, eketsa feela data-toggle="dropdown"'me ho theoha hofe kapa hofe ho nepahetseng ha bootstrap ho tla kengoa tšebetsong.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#"> Sehokelo sa kamehla </a></li >  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Theosa
      <b sehlopha = "tlhokomelo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#"> Ketso </a> </li> 
      <li><a href = "#"> Ketso e nngwe </a></li> 
      <li><a href = "#"> Ho hong hape mona </a></li> 
      <li class = "divider" > </li> 
      <li><a href = "#"> Sehokelo se arohaneng </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Theosa
      <b sehlopha = "tlhokomelo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mekhoa

$(). dropdown()

Lenaneo la api bakeng sa ho kenya dimenu bakeng sa navbar kapa navigation e nang le dithebe.

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

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!

Ho sebelisa bootstrap-scrollspy.js

Letsetsa scrollspy ka javascript:

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

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

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

Liketsahalo

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

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.

• Lehae
• Profile
• Theosa
  • @fat
  • @mdo

Ho sebelisa bootstrap-tab.js

Lumella li-tabbable 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 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".

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

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.

Mohlala oa tšebeliso ea Tooltips

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

Ho sebelisa bootstrap-tooltip.js

Qala sesebelisoa ka javascript:

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

Dikgetho

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.

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

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

.tooltip('hide')

E pata ntlha ea lisebelisoa.

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

.tooltip('toggle')

E fetola ntlha ea lisebelisoa.

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

Mohlala hover popover

Tsamaisa holim'a konopo ho qala popover.

Ho sebelisa bootstrap-popover.js

Lumella li-popover ka javascript:

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

Dikgetho

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

Mabapi le litlhokomeliso

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

Mehlala ea tlhokomeliso

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

Ho sebelisa bootstrap-alert.js

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

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.

Lisebelisoa tsa mohlala

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

Ho sebelisa bootstrap-button.js

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.

<!-- Eketsa data-toggle="konopo" ho kenya tshebetsong ho tobetsa konopo e le nngwe -->
<button class = "btn" data-toggle = "button" > Toggle e le Mong </button>  
 
<!-- Eketsa data-toggle="buttons-checkbox" bakeng sa ho fetola setaele sa lebokoso la diteke ho btn-group -->
<div class = "btn-group" data-toggle = "likonopo-checkbox" >  
  < sehlopha sa konopo = "btn" > Ka ho le letšehali </button> 
  < sehlopha sa konopo = "btn" > Bohareng </button> 
  < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo> 
</ div>
 
<!-- Kenya data-toggle="buttons-radio" bakeng sa ho fetolela setaele sa radio ho btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  < sehlopha sa konopo = "btn" > Ka ho le letšehali </button> 
  < sehlopha sa konopo = "btn" > Bohareng </button> 
  < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo> 
</ div>

Mekhoa

$().konopo('toggle')

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

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

< sehlopha sa konopo = "btn" data-loading-text = "ho kenya dintho..." > ... </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.

< sehlopha sa konopo = "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:

Ho sebelisa bootstrap-collapse.js

Dumella ka javascript:

$ ( ".collapse" ). putlama ()

Dikgetho

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  e phuthoang e bonolo
</ konopo>
 
<div id = "demo" class = "collapse in" > … </div>  

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

About

Plugin e akaretsang ea ho palama libaesekele ka har'a likarolo. Ho pota-pota.

Mohlala oa carousel

Shebella slideshow ka tlase.

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.

Leibole ea Thumbnail ea Bobeli

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.

Leibole ea Thumbnail ea Boraro

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.

‹ ›

Ho sebelisa bootstrap-carousel.js

Letsa ka javascript:

$ ( '.carousel' ). carousel ()

Dikgetho

Markup

Litšobotsi tsa data li sebelisoa bakeng sa litataiso tse fetileng le tse latelang. Sheba mohlala o ka tlase.

<div id = "myCarousel" sehlopha = "carousel" >  
  <!-- 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>

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.

About

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

Mohlala

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

Ho sebelisa bootstrap-typeahead.js

Letsetsa motlalehi ka javascript:

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

Dikgetho

Markup

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

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

Mekhoa

.typeahead(likhetho)

E qala ho kenya letsoho ka ho ngola pele.