Momba ny modals

Mifanaraka amin'ny fomba tsotra nefa mora ampiasaina, maka ny plugin javascript modal nentim-paharazana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Ohatra static

Ity ambany ity ny modèle nadika statika.

Demo mivantana

Toggle modal amin'ny alalan'ny javascript amin'ny fipihana ny bokotra eto ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

Mampiasa bootstrap-modal

Antsoy ny modal amin'ny javascript:

$ ( '#myModal' ). modal ( safidy )

FANDIKANA

fanamarihana

Azonao atao ny manetsika ny modals amin'ny pejinao mora nefa tsy mila manoratra andalana iray amin'ny javascript. Apetraho fotsiny data-toggle="modal"amin'ny singa mpanara-maso misy a data-target="#foo"na href="#foo"mifanitsy amin'ny id singa modal, ary rehefa kitihina dia hanomboka ny modal-nao.

Ary koa, mba hanampiana safidy amin'ny ohatra modal anao, ampidiro fotsiny izy ireo ho toetra angon-drakitra fanampiny amin'ny singa fanaraha-maso na ny marika modal.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Mandehana Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    < karazana bokotra = "button" class = "akaiky" data-dismiss = "modal" > × </bt>   
    <h3> Lohatenin'ny modely </h3>
  </div>
  <div class = "modal-body" > 
    <p> Vatana tsara iray… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Akatona </a>   
    <a href = "#" class = "btn btn-primary" > Tehirizo ny fanovana </a>  
  </div>
</div>

fomba

.modal(safidy)

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

$ ( '#myModal' ). modal ({
  fitendry : diso 
})

.modal('toggle')

Manova fomba tanana iray.

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

.modal('show')

Manokatra modal amin'ny tanana.

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

.modal('afina')

Manafina modal iray amin'ny tanana.

$ ( '#myModal' ). modal ( 'manafina' )

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.

$ ( '#myModal' ). on ( 'miafina' , asa () {   
  // manao zavatra…
})

Momba ny dropdowns

Ampio ny menio midina amin'ny zavatra rehetra ao amin'ny Bootstrap miaraka amin'ity plugin tsotra ity. Ny Bootstrap dia manasongadina ny fanohanan'ny menio midina feno ao amin'ny navbar, tabilao ary pilina.

OHATRA

Kitiho ny rohy nav midina ao amin'ny navbar sy pills etsy ambany mba hizaha toetra ny dropdown.

• Rohy tsy tapaka
• Velarina
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Mampiasa bootstrap-dropdown.js

Antsoy amin'ny alàlan'ny javascript ny dropdowns:

$ ( '.dropdown-toggle' ). midina ()

fanamarihana

Mba hampidirana haingana ny fampiasa midina amin'ny singa rehetra dia ampio fotsiny data-toggle="dropdown"ary izay fanalana bootstrap manan-kery dia ho alefa ho azy.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Rohy mahazatra </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Velarina
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Hetsika </a></li> 
      <li><a href = "#" > Hetsika hafa </a></li> 
      <li><a href = "#" > Zavatra hafa eto </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Rohy misaraka </a></li> 
    </ul>
  </li>
  ...
</ul>

Mba hitazonana ny URL ho tsy misy dikany dia ampiasao ny data-targettoetra fa tsy href="#".

<ul class = "nav nav-pills" > 
  <li class = "midina" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Velarina
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

fomba

$().midina()

Programatika api ho an'ny fampahavitrihana menus ho an'ny navbar nomena na navigateur misy tabilao.

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky.

Ohatra navbar misy scrollspy

Tsindrio ny faritra etsy ambany ary jereo ny fanavaozam-baovao. Hasongadina ihany koa ireo singa ambany midina. Andramo io!

Mampiasa bootstrap-scrollspy.js

Antsoy ny scrollspy amin'ny alàlan'ny javascript:

$ ( '#navbar' ). scrollspy ()

fanamarihana

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar anao, ampio fotsiny data-spy="scroll"ny singa tianao hitsikilo (matetika dia ny vatana izany).

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

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

$ ( '[data-spy="scroll"]' ). tsirairay ( function () {  
  var $spy = $ ( ity ). scrollspy ( 'refresh' )
});

FANDIKANA

zava-mitranga

Ity plugin ity dia manampy tabilao haingana sy mavitrika ary takelaka ho an'ny fifindrana amin'ny atiny eo an-toerana.

Ohatra tabilao

Kitiho ny kiheba etsy ambany raha hivezivezy eo amin'ny tontonana miafina, na dia amin'ny alàlan'ny menio midina.

• an-trano
• TANTARANY
• Velarina
  • @fat
  • @mdo

Mampiasa bootstrap-tab.js

Alefaso amin'ny alalan'ny javascript ny tabilao misy tabilao (mila ampihetsika tsirairay ny tabilao tsirairay):

$ ( '#myTab a' ). tsindrio ( function ( e ) {  
  e . preventDefault ();
  $ ( ity ). tabilao ( 'show' );
})

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

$ ( '#myTab a[href="#profile"]' ). tabilao ( 'show' ); // Mifidiana tabilao amin'ny anarana 
$ ( '#myTab a:voalohany' ). tabilao ( 'show' ); // Safidio ny tabilao voalohany 
$ ( '#myTab a:last' ). tabilao ( 'show' ); // Fidio ny tabilao farany 
$ ( '#myTab li:eq(2) a' ). tabilao ( 'show' ); // Mifidiana tabilao fahatelo (0-indexed) 

fanamarihana

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra javascript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ny fampidirana ny navsy ny nav-tabskilasy amin'ny tabilao uldia hampihatra ny styling kiheba bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Hafatra </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Fikirana </a></li>  
</ul>

fomba

$().tab

Manetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-targetkendrena hrefny node container ao amin'ny DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Hafatra </a></li> 
  <li><a href = "#settings" > Fikirana </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "message" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( asa () {  
    $ ( '#myTab a:last' ). tabilao ( 'show' );
  })
</script>

zava-mitranga

$ ( 'a[data-toggle="tab"]' ). on ( 'aseho' , asa ( e ) {   
  e . tanjona // vakizoro mavitrika
  e . relatedTarget // tabilao teo aloha
})

Momba ny Tooltips

Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa css3 ho an'ny sary mihetsika, ary data-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Ohatra amin'ny fampiasana Tooltips

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

Mampiasa bootstrap-tooltip.js

Alefaso amin'ny alàlan'ny javascript ny toro-hevitra:

$ ( '#ohatra' ). tooltip ( safidy )

FANDIKANA

fanamarihana

Noho ny antony fampandehanana, ny Tooltip sy Popover data-apis dia nifidy.

<a href = "#" rel = "tooltip" title = "voalohany fitaovana" > asio antsasany eo amboniny </a>   

fomba

$().tooltip(safidy)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray.

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

.tooltip('manafina')

Manafina ny tondro-fitaovan'ny singa iray.

$ ( '#element' ). tondro -fitaovana ( 'manafina' )

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray.

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

Momba ny popovers

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa.

* Mitaky Tooltip ampidirina

Ohatra hover popover

Atsofohy eo amin'ny bokotra mba hanesorana ny popover.

Mampiasa bootstrap-popover.js

Alefaso ny popovers amin'ny javascript:

$ ( '#ohatra' ). popover ( safidy )

FANDIKANA

fanamarihana

Noho ny antony fampandehanana, ny Tooltip sy Popover data-apis dia nifidy.

fomba

$().popover(safidy)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Manambara singa popover.

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

.popover('afeno')

Manafina singa popover.

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

.popover('toggle')

Manova singa popover.

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

Momba ny fanairana

Ny plugin fampandrenesana dia kilasy kely hanampiana fampiasa akaiky amin'ny fanairana.

Fampandrenesana ohatra

Ny plugin fampandrenesana dia miasa amin'ny hafatra fanairana mahazatra, ary manakana ny hafatra.

Mampiasa bootstrap-alert.js

Alefaso ny fandroahana fanairana amin'ny alàlan'ny javascript:

$ ( ".alert" ). mailo ()

fanamarihana

Ampio fotsiny data-dismiss="alert"amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy.

<a class = "akaiky" data-dismiss = "alert" href = "#" > × </a>   

fomba

$().alert()

Manarona ny fanairana rehetra miaraka amin'ny fiasa akaiky. Mba hampihetsi-po ny fanairanao rehefa mihidy dia ataovy azo antoka fa efa nampiharina tamin'izy ireo ny .fadesy kilasy..in

.alert('akaiky')

Manidy fanairana.

$ ( ".alert" ). fanairana ( 'akaiky' )

zava-mitranga

Ny kilasy fanairana ao amin'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa fanairana.

$ ( '#my-alert' ). mamatotra ( 'nakatona' , asa () {   
  // manao zavatra…
})

About

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Fampiasana ohatra

Ampiasao ny plugins bokotra ho an'ny fanjakana sy ny toggles.

Mampiasa bootstrap-button.js

Alefaso amin'ny alalan'ny javascript ny bokotra:

$ ( '.nav-tabs' ). bokotra ()

fanamarihana

Ny toetran'ny data dia tafiditra ao amin'ny plugin bokotra. Jereo ny kaody ohatra etsy ambany ho an'ny karazana marika isan-karazany.

<!-- Ampio data-toggle="button" mba hampavitrika ny famadihana amin'ny bokotra tokana -->
<button class = "btn" data-toggle = "button" > Toggle Toggle </button>  
 
<!-- Ampio data-toggle="buttons-checkbox" ho an'ny fomba fanodikodinana amin'ny btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Ankavia </bt> 
  <button class = "btn" > Afovoany </button> 
  <button class = "btn" > Right </button> 
</div>
 
<!-- Ampio data-toggle="buttons-radio" ho an'ny fomba fampielezam-peo amin'ny btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Ankavia </bt> 
  <button class = "btn" > Afovoany </button> 
  <button class = "btn" > Right </button> 
</div>

fomba

$().button('toggle')

Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.

<button class = "btn" data-toggle = "button" > … </button>   

$().button('loading')

Mametraka ny toetry ny bokotra amin'ny fametahana - manafoana ny bokotra ary manova lahatsoratra amin'ny fandefasana lahatsoratra. Ny fametahana lahatsoratra dia tokony hofaritana amin'ny singa bokotra amin'ny fampiasana ny toetra angona data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany.

$().button(string)

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny toetry ny lahatsoratra voafaritra.

<button class = "btn" data-complete-text = "vita!" > ... </bokotra>   
<script>
  $ ( '.btn' ). bokotra ( 'feno' )
</script>

About

Mahazoa fomba fototra sy fanohanana mora azo ho an'ny singa azo harodana toy ny akorandriaka sy ny fitetezana.

* Mila ampidirina ny plugin Transitions.

Ohatra accordion

Amin'ny fampiasana ny plugin collapse, dia nanamboatra widget fomba accordion tsotra izahay:

Mampiasa bootstrap-collapse.js

Alefa amin'ny javascript:

$ ( ".collapse" ). mirodana ()

FANDIKANA

fanamarihana

Ampio fotsiny data-toggle="collapse"ary a data-targetho singa hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-targettoetra dia manaiky mpifidy css hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  tsotra azo collapsible
</bokotra>
 
<div id = "demo" class = "collapse in" > … </div>  

fomba

.collapse(safidy)

Mampihetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

$ ( '#myCollapsible' ). mirodana ({
  toggle : diso 
})

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina.

.collapse('show')

Mampiseho singa azo harodana.

.collapse('afina')

Manafina singa azo harodana.

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

$ ( '#myCollapsible' ). on ( 'miafina' , asa () {   
  // manao zavatra…
})

About

Plugin generic ho an'ny bisikileta amin'ny singa. Fifaliana.

Ohatra carousel

Jereo ny sary mihetsika eto ambany.

Etikety Thumbnail voalohany

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

Etikety Thumbnail faharoa

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

Etikety Thumbnail fahatelo

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

‹ ›

Mampiasa bootstrap-carousel.js

Antso amin'ny javascript:

$ ( '.carousel' ). carousel ()

FANDIKANA

fanamarihana

Ny toetra angona dia ampiasaina amin'ny fanaraha-maso teo aloha sy manaraka. Jereo ny ohatra marika eto ambany.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Zavatra carousel -->
  <div class = "carousel-inner" > 
    <div class = "zavatra mavitrika" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "manaraka" > › </a>   
</div>

fomba

.carousel(safidy)

Manomboka ny carousel miaraka amin'ny safidy azo atao objectary manomboka mandehandeha amin'ny entana.

$ ( '.carousel' ). carousel ({
  elanelam-potoana : 2000 
})

.carousel('cycle')

Mihodikodina amin'ireo singa carousel miankavia miankavanana.

.carousel('pause')

Manakana ny carousel tsy hivezivezy amin'ny entana.

.carousel(isa)

Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array).

.carousel('prev')

Mihodina mankany amin'ilay singa teo aloha.

.carousel('manaraka')

Mihodina mankany amin'ny singa manaraka.

zava-mitranga

Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel.

About

Plugin fototra sy mora miitatra ho an'ny famoronana haingana karazana lohan-dahatsoratra kanto miaraka amin'ny endri-tsoratra rehetra.

OHATRA

Manomboha mitendry eo amin'ny saha etsy ambany mba hampisehoana ny valin'ny lohan-tsoratra.

Mampiasa bootstrap-typeahead.js

Antsoy amin'ny alàlan'ny javascript ny loha-tendry:

$ ( '.typeahead' ). litera ()

FANDIKANA

fanamarihana

Manampia toetra angon-drakitra hanoratana singa iray misy fampiasa amin'ny typeahead.

< karazana fampidirana = "text" data-provide = "typeahead" >  

fomba

.typeahead(safidy)

Manomboha fampidirana miaraka amin'ny lohamilina.