Tungkol sa modals

Ang isang streamline, ngunit nababaluktot, ay gumagamit ng tradisyunal na javascript modal plugin na may pinakamababang kinakailangang functionality at mga smart default.

Static na halimbawa

Nasa ibaba ang isang statically render na modal.

Live na demo

I-toggle ang isang modal sa pamamagitan ng javascript sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

Gamit ang bootstrap-modal

Tawagan ang modal sa pamamagitan ng javascript:

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

Mga pagpipilian

Markup

Madali mong maisaaktibo ang mga modal sa iyong pahina nang hindi kinakailangang sumulat ng isang linya ng javascript. Itakda lamang data-toggle="modal"sa isang elemento ng controller na may data-target="#foo"o href="#foo"na tumutugma sa isang modal element id, at kapag na-click, ilulunsad nito ang iyong modal.

Gayundin, upang magdagdag ng mga opsyon sa iyong modal instance, isama lang ang mga ito bilang mga karagdagang attribute ng data sa alinman sa control element o sa modal markup mismo.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modal na header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Isang magandang katawan... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Isara </a>   
    <a href = "#" class = "btn btn-primary" > I- save ang mga pagbabago </a>  
  </div>
</div>

Paraan

.modal(options)

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

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

.modal('toggle')

Manu-manong i-toggle ang isang modal.

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

.modal('show')

Manu-manong nagbubukas ng modal.

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

.modal('itago')

Manu-manong nagtatago ng modal.

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

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.

$ ( '#myModal' ). on ( 'nakatago' , function () {   
  // gumawa ng paraan…
})

Tungkol sa mga dropdown

Magdagdag ng mga dropdown na menu sa halos anumang bagay sa Bootstrap gamit ang simpleng plugin na ito. Nagtatampok ang Bootstrap ng buong suporta sa dropdown na menu sa navbar, mga tab, at mga tabletas.

Mga halimbawa

Mag-click sa mga dropdown nav link sa navbar at mga tabletas sa ibaba upang subukan ang mga dropdown.

• Regular na 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

Paggamit ng bootstrap-dropdown.js

Tawagan ang mga dropdown sa pamamagitan ng javascript:

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

Markup

Upang mabilis na magdagdag ng dropdown na functionality sa anumang elemento, idagdag lang data-toggle="dropdown"at anumang valid na bootstrap dropdown ay awtomatikong maa-activate.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Regular na 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 = "#" > Pagkilos </a></li> 
      <li><a href = "#" > Isa pang aksyon </a></li> 
      <li><a href = "#" > Iba dito </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Nakahiwalay na link </a></li> 
    </ul>
  </li>
  ...
</ul>

Upang panatilihing buo ang mga URL, gamitin ang data-targetkatangian sa halip na 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>

Paraan

$().dropdown()

Isang programatic api para sa pag-activate ng mga menu para sa isang naibigay na navbar o naka-tab na nabigasyon.

Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position.

Halimbawa navbar na may scrollspy

Mag-scroll sa lugar sa ibaba at panoorin ang navigation update. Ang mga dropdown na sub item ay iha-highlight din. Subukan mo!

Gamit ang bootstrap-scrollspy.js

Tawagan ang scrollspy sa pamamagitan ng javascript:

$ ( '#navbar' ). scrollspy ()

Markup

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag lang data-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang katawan).

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

Paraan

.scrollspy('refresh')

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

Mga pagpipilian

Mga kaganapan

Ang plugin na ito ay nagdaragdag ng mabilis, dynamic na tab at pagpapagana ng tableta para sa paglipat sa pamamagitan ng lokal na nilalaman.

Mga halimbawang tab

I-click ang mga tab sa ibaba upang magpalipat-lipat sa pagitan ng mga nakatagong pane, kahit na sa pamamagitan ng mga dropdown na menu.

• Bahay
• Profile
• Dropdown
  • @fat
  • @mdo

Paggamit ng bootstrap-tab.js

Paganahin ang mga tab na tab sa pamamagitan ng javascript (kailangang isaaktibo ang bawat tab):

$ ( '#myTab a' ). i- click ang ( function ( e ) {  
  e . preventDefault ();
  $ ( ito ). tab ( 'ipakita' );
})

Maaari mong i-activate ang mga indibidwal na tab sa maraming paraan:

$ ( '#myTab a[href="#profile"]' ). tab ( 'ipakita' ); // Pumili ng tab ayon sa pangalan 
$ ( '#myTab a:first' ). tab ( 'ipakita' ); // Piliin ang unang tab 
$ ( '#myTab a:last' ). tab ( 'ipakita' ); // Piliin ang huling tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'ipakita' ); // Pumili ng ikatlong tab (0-indexed) 

Markup

Maaari mong i-activate ang isang tab o pill navigation nang hindi nagsusulat ng anumang javascript sa pamamagitan lamang ng pagtukoy data-toggle="tab"o data-toggle="pill"sa isang elemento. Ang pagdaragdag ng navat mga nav-tabsklase sa tab ulay maglalapat ng bootstrap tab styling.

<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" > Mga Mensahe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Mga Setting </a></li>  
</ul>

Paraan

$().tab

Ina-activate ang isang elemento ng tab at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-targeto isang pag- hreftarget ng isang container node sa 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" > Mga Mensahe </a></li> 
  <li><a href = "#settings" > Mga Setting </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 = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'ipakita' );
  })
</script>

Mga kaganapan

$ ( 'a[data-toggle="tab"]' ). on ( 'ipinakita' , function ( e ) {   
  e . target // na-activate na tab
  e . relatedTarget // nakaraang tab
})

Tungkol sa Tooltips

May inspirasyon ng mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang mga tooltip ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng css3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat.

Halimbawa ng paggamit ng Tooltips

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Paggamit ng bootstrap-tooltip.js

I-trigger ang tooltip sa pamamagitan ng javascript:

$ ( '#example' ). tooltip ( mga pagpipilian )

Mga pagpipilian

Markup

Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay naka-opt in. Kung gusto mong gamitin ang mga ito, tumukoy lang ng opsyon sa selector.

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

Paraan

$().tooltip(opsyon)

Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento.

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

.tooltip('itago')

Itinatago ang tooltip ng isang elemento.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento.

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

Tungkol sa mga popovers

Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon.

* Nangangailangan ng Tooltip upang maisama

Halimbawa hover popover

Mag-hover sa button para ma-trigger ang popover.

Gamit ang bootstrap-popover.js

Paganahin ang mga popovers sa pamamagitan ng javascript:

$ ( '#example' ). popover ( mga pagpipilian )

Mga pagpipilian

Markup

Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay naka-opt in. Kung gusto mong gamitin ang mga ito, tumukoy lang ng opsyon sa selector.

Paraan

$().popover(opsyon)

Sinisimulan ang mga popover para sa isang koleksyon ng elemento.

.popover('show')

Nagpapakita ng mga elementong popover.

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

.popover('itago')

Itinatago ang isang elemento ng popover.

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

.popover('toggle')

I-toggle ang isang elementong popover.

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

Tungkol sa mga alerto

Ang alerto plugin ay isang maliit na klase para sa pagdaragdag ng malapit na pag-andar sa mga alerto.

Mga halimbawang alerto

Gumagana ang plugin ng alerto sa mga regular na mensahe ng alerto, at harangan ang mga mensahe.

Paggamit ng bootstrap-alert.js

Paganahin ang pag-dismiss ng isang alerto sa pamamagitan ng javascript:

$ ( ".alerto" ). alerto ()

Markup

Idagdag lang data-dismiss="alert"sa iyong close button para awtomatikong magbigay ng alertong close functionality.

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

Paraan

$().alerto()

Binabalot ang lahat ng alerto na may malapit na paggana. Upang mai-animate ang iyong mga alerto kapag isinara, tiyaking nailapat na sa kanila ang .fadeat klase..in

.alert('close')

Nagsasara ng alerto.

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

Mga kaganapan

Ang klase ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapagana ng alerto.

$ ( '#my-alert' ). bind ( 'sarado' , function () {   
  // gumawa ng paraan…
})

Tungkol sa

Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.

Halimbawa ng mga gamit

Gamitin ang plugin ng mga button para sa mga estado at toggle.

Paggamit ng bootstrap-button.js

Paganahin ang mga pindutan sa pamamagitan ng javascript:

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

Markup

Ang mga katangian ng data ay mahalaga sa plugin ng button. Tingnan ang halimbawang code sa ibaba para sa iba't ibang uri ng markup.

<!-- Magdagdag ng data-toggle="button" upang i-activate ang toggling sa iisang button -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Magdagdag ng data-toggle="buttons-checkbox" para sa checkbox style toggling sa btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Kaliwa </button> 
  <button class = "btn" > Gitna </button> 
  <button class = "btn" > Tama  </button>
</div>
 
<!-- Magdagdag ng data-toggle="buttons-radio" para sa radio style toggling sa btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Kaliwa </button> 
  <button class = "btn" > Gitna </button> 
  <button class = "btn" > Tama  </button>
</div>

Paraan

$().button('toggle')

I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.

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

$().button('loading')

Itinatakda ang estado ng button sa paglo-load - dini-disable ang button at pagpapalit ng text sa paglo-load ng text. Ang paglo-load ng text ay dapat tukuyin sa elemento ng button gamit ang katangian ng data data-loading-text.

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

$().button('reset')

Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text.

$().button(string)

Nire-reset ang estado ng button - pinapalitan ang teksto sa anumang tinukoy na estado ng teksto ng data.

<button class = "btn" data-complete-text = "tapos na!" > ... </button>   
<script>
  $ ( '.btn' ). pindutan ( 'kumpleto' )
</script>

Tungkol sa

Kumuha ng mga base na istilo at flexible na suporta para sa mga collapsible na bahagi tulad ng mga accordion at navigation.

* Nangangailangan ng plugin ng Transitions upang maisama.

Halimbawa ng akurdyon

Gamit ang collapse plugin, gumawa kami ng simpleng widget ng estilo ng accordion:

Paggamit ng bootstrap-collapse.js

Paganahin sa pamamagitan ng javascript:

$ ( ".collapse" ). gumuho ()

Mga pagpipilian

Markup

Magdagdag lang data-toggle="collapse"at isang data-targetsa elemento upang awtomatikong magtalaga ng kontrol ng isang collapsible na elemento. Tumatanggap ang data-targetattribute ng css selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong default na bukas, idagdag ang karagdagang klase in.

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

Paraan

.collapse(options)

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

$ ( '#myCollapsible' ). gumuho ({
  toggle : mali 
})

.collapse('toggle')

I-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago.

.collapse('show')

Nagpapakita ng nati-collapse na elemento.

.collapse('itago')

Itinatago ang isang collapsible na elemento.

Mga kaganapan

Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.

$ ( '#myCollapsible' ). on ( 'nakatago' , function () {   
  // gumawa ng paraan…
})

Tungkol sa

Isang generic na plugin para sa pagbibisikleta sa mga elemento. Isang merry-go-round.

Halimbawa ng carousel

Panoorin ang slideshow sa ibaba.

Unang label ng Thumbnail

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.

Pangalawang Thumbnail na 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.

Pangatlong Thumbnail na 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

Tumawag sa pamamagitan ng javascript:

$ ( '.carousel' ). carousel ()

Mga pagpipilian

Markup

Ginagamit ang mga attribute ng data para sa nakaraan at susunod na mga kontrol. Tingnan ang halimbawang markup sa ibaba.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Carousel item -->
  <div class = "carousel-inner" > 
    <div class = "aktibong item" > … </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 = "next" > › </a>   
</div>

Paraan

.carousel(mga opsyon)

Sinisimulan ang carousel gamit ang isang opsyonal na opsyon objectat magsisimulang umikot sa mga item.

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

.carousel('cycle')

Umiikot sa mga carousel item mula kaliwa hanggang kanan.

.carousel('pause')

Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.

.carousel(number)

Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array).

.carousel('prev')

Ikot sa nakaraang item.

.carousel('susunod')

Ikot sa susunod na item.

Mga kaganapan

Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel.

Tungkol sa

Isang basic, madaling pinalawak na plugin para sa mabilis na paggawa ng mga eleganteng typeahead na may anumang form na text input.

Halimbawa

Simulan ang pag-type sa field sa ibaba upang ipakita ang mga resulta ng typeahead.

Paggamit ng bootstrap-typeahead.js

Tawagan ang typeahead sa pamamagitan ng javascript:

$ ( '.typeahead' ). typeahead ()

Mga pagpipilian

Markup

Magdagdag ng mga attribute ng data upang magrehistro ng isang elemento na may functionality ng typeahead.

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

Paraan

.typeahead(mga opsyon)

Nagsisimula ng input na may typeahead.