Mahitungod sa modals

Ang usa ka streamlined, apan flexible, nagkuha sa tradisyonal nga javascript modal plugin nga adunay minimum nga gikinahanglan nga gamit ug mga smart default.

Static nga pananglitan

Sa ubos usa ka statically render nga modal.

Live nga demo

I-toggle ang usa ka modal pinaagi sa javascript pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.

Paggamit sa bootstrap-modal

Tawga ang modal pinaagi sa javascript:

$ ( '#myModal' ). modal ( mga kapilian )

Mga kapilian

Markup

Mahimo nimo nga ma-aktibo ang mga modals sa imong panid nga dali nga dili kinahanglan nga magsulat usa ka linya sa javascript. Ibutang lang data-toggle="modal"sa usa ka elemento sa controller nga adunay data-target="#foo"o href="#foo"nga katumbas sa usa ka modal element id, ug kung gi-klik, kini maglansad sa imong modal.

Usab, aron madugangan ang mga kapilian sa imong modal nga pananglitan, iapil lang sila isip dugang nga mga hiyas sa datos sa bisan hain sa kontrol nga elemento o sa modal markup mismo.

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

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </button>  
    <h3> Modal nga ulohan </h3>
  </div>
  <div class = "modal-body" > 
    <p> Usa ka maayong lawas... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Close </a>  
    <a href = "#" class = "btn btn-primary" > I-save ang mga kausaban </a>  
  </div>
</div>

Pamaagi

.modal(mga kapilian)

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

$ ( '#myModal' ). modal ({
  keyboard : bakak 
})

.modal('toggle')

Manwal nga mag-toggle sa usa ka modal.

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

.modal('show')

Manwal nga nagbukas sa usa ka modal.

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

.modal('tago')

Manwal nga nagtago sa usa ka modal.

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

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.

$ ( '#myModal' ). on ( 'gitago' , function () {   
  // pagbuhat ug butang...
})

Mahitungod sa mga dropdown

Idugang ang mga dropdown menu sa halos bisan unsang butang sa Bootstrap gamit kining yano nga plugin. Ang Bootstrap adunay bug-os nga suporta sa dropdown menu sa navbar, tab, ug mga pildoras.

Mga pananglitan

I-klik ang dropdown nav links sa navbar ug pills sa ubos aron sulayan ang dropdowns.

• Regular nga link
• Dropdown
  • 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

Gamit ang bootstrap-dropdown.js

Tawga ang mga dropdown pinaagi sa javascript:

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

Markup

Aron dali nga makadugang sa dropdown functionality sa bisan unsang elemento idugang lang data-toggle="dropdown"ug bisan unsang balido nga bootstrap dropdown awtomatik nga ma-activate.

<ul class = "nav nav-pills" > 
  <li class = "aktibo" ><a href = "#" > Regular nga link </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Aksyon </a></li> 
      <li><a href = "#" > Lain nga aksyon </a></li> 
      <li><a href = "#" > Lain pa dinhi </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Gibulag nga link </a></li> 
    </ul>
  </li>
  ...
</ul>

Aron magpabiling buo ang mga URL, gamita ang data-targetattribute imbes nga href="#".

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

Pamaagi

$().dropdown()

Usa ka programatic api alang sa pagpaaktibo sa mga menu alang sa gihatag nga navbar o tabbed navigation.

Ang ScrollSpy plugin kay para sa awtomatikong pag-update sa mga target sa nav base sa scroll position.

Pananglitan navbar nga adunay scrollspy

I-scroll ang lugar sa ubos ug tan-awa ang update sa nabigasyon. Ang dropdown sub nga mga butang i-highlight usab. Sulayi kini!

Gamit ang bootstrap-scrollspy.js

Tawga ang scrollspy pinaagi sa javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"lang sa elemento nga gusto nimong espiya (kasagaran kini ang lawas).

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

Pamaagi

.scrollspy('refresh')

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

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

Mga kapilian

Mga panghitabo

Kini nga plugin nagdugang dali, dinamikong tab ug pagpaandar sa tableta alang sa pagbalhin pinaagi sa lokal nga sulud.

Mga pananglitan sa tab

I-klik ang mga tab sa ubos aron mag-toggle sa mga tinago nga mga pane, bisan pinaagi sa mga dropdown menu.

• Balay
• Profile
• Dropdown
  • @fat
  • @mdo

Gamit ang bootstrap-tab.js

I-enable ang tabbable tabs pinaagi sa javascript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

$ ( '#myTab a' ). click ( function ( e ) {  
  e . preventDefault ();
  $ ( niini ). tab ( 'ipakita' );
})

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

$ ( '#myTab a[href="#profile"]' ). tab ( 'ipakita' ); // Pilia ang tab pinaagi sa ngalan 
$ ( '#myTab a:first' ). tab ( 'ipakita' ); // Pilia ang una nga tab 
$ ( '#myTab a:last' ). tab ( 'ipakita' ); // Pilia ang katapusang tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'ipakita' ); // Pilia ang ikatulo nga tab (0-indexed) 

Markup

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang javascript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Ang pagdugang sa navug nav-tabsmga klase sa tab ulmagamit ang bootstrap tab styling.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Panimalay </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mga Mensahe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
</ul>

Pamaagi

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktibo" ><a href = "#home" > Balay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mga Mensahe </a></li> 
  <li><a href = "#settings" > Settings </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 = "mensahe" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'ipakita' );
  })
</script>

Mga panghitabo

$ ( 'usa ka[data-toggle="tab"]' ). on ( 'gipakita' , function ( e ) {   
  e . target // gi-aktibo nga tab
  e . relatedTarget // miaging tab
})

Mahitungod sa Tooltips

Nadasig sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang mga tooltip kay usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit ug css3 para sa mga animation, ug data-attributes para sa lokal nga pagtipig sa titulo.

Pananglitan sa paggamit sa Tooltips

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Gamit ang bootstrap-tooltip.js

I-trigger ang tooltip pinaagi sa javascript:

$ ( '#pananglitan' ). tooltip ( mga kapilian )

Mga kapilian

Markup

Alang sa mga hinungdan sa pasundayag, ang Tooltip ug Popover data-apis gipili.

<a href = "#" rel = "tooltip" title = "first tooltip" > hover over me </a>   

Pamaagi

$().tooltip(mga opsyon)

Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.

.tooltip('ipakita')

Nagpadayag sa tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'ipakita' )

.tooltip('tago')

Nagtago sa tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'tago' )

.tooltip('toggle')

I-toggle ang tooltip sa usa ka elemento.

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

Mahitungod sa mga popovers

Idugang ang gagmay nga mga overlay sa sulud, sama sa naa sa iPad, sa bisan unsang elemento alang sa pagbutang sa sekundaryong impormasyon.

* Nagkinahanglan nga iapil ang Tooltip

Pananglitan sa hover popover

I-hover ang buton aron ma-trigger ang popover.

Gamit ang bootstrap-popover.js

I-enable ang mga popovers pinaagi sa javascript:

$ ( '#pananglitan' ). popover ( mga kapilian )

Mga kapilian

Markup

Alang sa mga hinungdan sa pasundayag, ang Tooltip ug Popover data-apis gipili.

Pamaagi

$().popover(mga opsyon)

Nagsugod sa mga popover para sa koleksyon sa elemento.

.popover('pakita')

Nagpadayag sa usa ka elemento nga popover.

$ ( '#elemento' ). popover ( 'ipakita' )

.popover('tago')

Nagtago sa usa ka elemento nga popover.

$ ( '#elemento' ). popover ( 'tago' )

.popover('toggle')

I-toggle ang usa ka elemento nga popover.

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

Mahitungod sa mga alerto

Ang alert plugin usa ka gamay nga klase alang sa pagdugang suod nga pagpaandar sa mga alerto.

Pananglitan nga mga alerto

Ang plugin sa alerto nagtrabaho sa regular nga mga mensahe sa alerto, ug pag-block sa mga mensahe.

Gamit ang bootstrap-alert.js

I-enable ang pagtangtang sa usa ka alerto pinaagi sa javascript:

$ ( ".alerto" ). alerto ()

Markup

Idugang lang data-dismiss="alert"sa imong close button aron awtomatik nga makahatag ug alert close functionality.

<a class = "close" data-dismiss = "alerto" href = "#" > × </a>   

Pamaagi

$().alerto()

Giputos ang tanan nga mga alerto nga adunay suod nga pagpaandar. Aron ma-animate ang imong mga alerto kung sirado, siguruha nga naa na nila ang .fadeug .inklase nga na-apply sa kanila.

.alerto('close')

Pagsira sa usa ka alerto.

$ ( ".alerto" ). alerto ( 'close' )

Mga panghitabo

Ang klase sa alerto sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa alerto.

$ ( '#akong-alerto' ). bind ( 'sirado' , function () {   
  // pagbuhat ug butang...
})

Mahitungod sa

Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.

Mga pananglitan sa paggamit

Gamita ang mga buton nga plugin para sa mga estado ug mga toggle.

Gamit ang bootstrap-button.js

I-enable ang mga buton pinaagi sa javascript:

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

Markup

Ang mga hiyas sa datos kay importante sa button nga plugin. Tan-awa ang pananglitan nga code sa ubos alang sa lain-laing mga tipo sa markup.

<!-- Add data-toggle="button" para ma-activate ang toggling sa usa ka buton -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Add data-toggle="buttons-checkbox" para sa checkbox style toggling sa btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Wala </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Tuo </button> 
</div>
 
<!-- Add data-toggle="buttons-radio" para sa radio style toggling sa btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Wala </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Tuo </button> 
</div>

Pamaagi

$().button('toggle')

I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.

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

$().button('loading')

Gibutang ang kahimtang sa buton sa pagkarga - gipugngan ang buton ug gibaylo ang teksto sa pagkarga sa teksto. Ang pagkarga sa teksto kinahanglang ipasabot sa elemento sa buton gamit ang data attribute data-loading-text.

<button class = "btn" data-loading-text = "nagkarga sa mga butang..." > ... </button>   

$().button('reset')

I-reset ang kahimtang sa buton - ibaylo ang teksto sa orihinal nga teksto.

$().button(kuwerdas)

I-reset ang kahimtang sa buton - ibaylo ang teksto sa bisan unsang datos nga gipiho nga kahimtang sa teksto.

<button class = "btn" data-complete-text = "nahuman na!" > ... </button>   
<script>
  $ ( '.btn' ). buton ( 'kompleto' )
</script>

Mahitungod sa

Pagkuha ug base nga mga estilo ug flexible nga suporta para sa collapsible nga mga component sama sa accordion ug navigation.

* Nagkinahanglan nga ang Transitions plugin iapil.

Pananglitan sa akordyon

Gamit ang collapse plugin, naghimo kami usa ka yano nga widget sa istilo sa akordyon:

Gamit ang bootstrap-collapse.js

I-enable pinaagi sa javascript:

$ ( ".collapse" ). nahugno ()

Mga kapilian

Markup

Idugang lang data-toggle="collapse"ug usa ka data-targetelemento aron awtomatiko nga ma-assign ang kontrol sa usa ka ma-collapsible nga elemento. Gidawat sa data-targetattribute ang usa ka css selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase in.

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

Pamaagi

.collapse(mga kapilian)

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

$ ( '#myCollapsible' ). nahugno ({
  toggle : bakak 
})

.collapse('toggle')

I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago.

.collapse('show')

Nagpakita sa usa ka ma-collapsible nga elemento.

.collapse('tago')

Nagtago sa usa ka ma-collapsible nga elemento.

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

$ ( '#myCollapsible' ). on ( 'gitago' , function () {   
  // pagbuhat ug butang...
})

Mahitungod sa

Usa ka generic nga plugin alang sa pagbisikleta pinaagi sa mga elemento. Usa ka merry-go-round.

Pananglitan nga carousel

Tan-awa ang slideshow sa ubos.

Unang Thumbnail nga label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug 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.

‹ ›

Gamit ang bootstrap-carousel.js

Tawag pinaagi sa javascript:

$ ( '.carousel' ). carousel ()

Mga kapilian

Markup

Ang mga hiyas sa datos gigamit alang sa nangagi ug sunod nga mga kontrol. Tan-awa ang pananglitan nga markup sa ubos.

<div id = "myCarousel" class = "carousel" >  
  <!-- Carousel items -->
  <div class = "carousel-inner" > 
    <div class = "aktibo nga butang" > … </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 = "sunod" > › </a>   
</div>

Pamaagi

.carousel(mga kapilian)

Nagsugod sa carousel nga adunay opsyonal nga mga kapilian objectug nagsugod sa pagbisikleta sa mga butang.

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

.carousel('siklo')

Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.

.carousel('pause')

Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.

.carousel(numero)

I-cycle ang carousel ngadto sa usa ka partikular nga frame (0 base, susama sa array).

.carousel('prev')

Mga siklo sa miaging aytem.

.carousel('sunod')

Siklo ngadto sa sunod nga butang.

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel.

Mahitungod sa

Usa ka sukaranan, dali nga gipalapdan nga plugin alang sa dali nga paghimo og mga elegante nga typeahead nga adunay bisan unsang porma nga input sa teksto.

Pananglitan

Sugdi ang pag-type sa natad sa ubos aron ipakita ang mga resulta sa typeahead.

Gamit ang bootstrap-typeahead.js

Tawga ang typeahead pinaagi sa javascript:

$ ( '.typeahead' ). typeahead ()

Mga kapilian

Markup

Idugang ang mga hiyas sa datos aron marehistro ang usa ka elemento nga adunay pagpaandar sa typeahead.

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

Pamaagi

.typeahead(mga kapilian)

Nagsugod ug input gamit ang typeahead.