JavaScript

Buhayin ang mga bahagi ng Bootstrap—ngayon ay may 13 custom na jQuery plugin.

Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (bagama't ang ilan ay nangangailangan ng mga dependency), o sabay-sabay. Parehong bootstrap.js at bootstrap.min.js ay naglalaman ng lahat ng mga plugin sa isang file.

Mga katangian ng data

Maaari mong gamitin ang lahat ng plugin ng Bootstrap sa pamamagitan lamang ng markup API nang hindi nagsusulat ng isang linya ng JavaScript. Ito ang unang klase ng API ng Bootstrap at dapat ang iyong unang pagsasaalang-alang kapag gumagamit ng isang plugin.

Iyon ay sinabi, sa ilang mga sitwasyon ay maaaring kanais-nais na i-off ang functionality na ito. Samakatuwid, nagbibigay din kami ng kakayahang i-disable ang data attribute API sa pamamagitan ng pag-unbinding ng lahat ng event sa body namespace na may `'data-api'`. Mukhang ganito:

  1. $ ( 'katawan' ). naka -off ( '.data-api' )

Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:

  1. $ ( 'katawan' ). naka -off ( '.alert.data-api' )

Programmatic API

Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.

  1. $ ( ".btn.danger" ). button ( "toggle" ). addClass ( "taba" )

Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):

  1. $ ( "#myModal" ). modal () // sinimulan na may mga default
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // sinimulan nang walang keyboard
  3. $ ( "#myModal" ). modal ( 'show' ) // nag-initialize at nag-invoke ng show kaagad

Inilalantad din ng bawat plugin ang raw constructor nito sa isang property na `Constructor`: $.fn.popover.Constructor. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel=popover]').data('popover').

Walang Salungatan

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

  1. var bootstrapButton = $ . fn . buton . noConflict () // ibalik ang $.fn.button sa dating itinalagang value
  2. $ . fn . bootstrapBtn = bootstrapButton // bigyan $().bootstrapBtn ang bootstrap functionality

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa karamihan ng mga natatanging pagkilos ng plugin. Sa pangkalahatan, ang mga ito ay nasa anyong infinitive at past participle - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay trigger sa pagkumpleto ng isang aksyon.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault na functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. kung (! data ) bumalik e . preventDefault () // hihinto ang modal mula sa pagpapakita
  3. })

Tungkol sa mga transition

Para sa mga simpleng transition effect, isama ang bootstrap-transition.js nang isang beses sa tabi ng iba pang mga JS file. Kung ginagamit mo ang pinagsama-sama (o pinaliit) na bootstrap.js , hindi na kailangang isama ito—nandiyan na ito.

Mga kaso ng paggamit

Ilang halimbawa ng transition plugin:

  • Dumudulas o kumukupas sa mga modal
  • Naglalaho ang mga tab
  • Pagkupas ng mga alerto
  • Mga sliding carousel pane

Mga halimbawa

Ang mga modal ay streamline, ngunit nababaluktot, ang mga dialog na prompt na may pinakamababang kinakailangang functionality at mga smart default.

Static na halimbawa

Isang nai-render na modal na may header, katawan, at hanay ng mga pagkilos sa footer.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modal na header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Isang magandang katawan... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Isara </a>
  11. <a href = "#" class = "btn btn-primary" > I- save ang mga pagbabago </a>
  12. </div>
  13. </div>

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.

  1. <!-- Button para ma-trigger ang modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Ilunsad ang demo modal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal header </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Isang magandang katawan... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Close </button>
  15. <button class = "btn btn-primary" > I- save ang mga pagbabago </button>
  16. </div>
  17. </div>

Paggamit

Sa pamamagitan ng mga katangian ng data

Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Ilunsad ang modal </button>

Sa pamamagitan ng JavaScript

Tumawag ng modal na may id myModalna may isang linya ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".

Pangalan uri default paglalarawan
backdrop boolean totoo May kasamang modal-backdrop na elemento. Bilang kahalili, tumukoy staticpara sa isang backdrop na hindi nagsasara ng modal sa pag-click.
keyboard boolean totoo Isinasara ang modal kapag pinindot ang escape key
palabas boolean totoo Ipinapakita ang modal kapag nasimulan.
remote landas mali

Kung ang isang malayuang url ay ibinigay, ang nilalaman ay mai-load sa pamamagitan ng paraan ng jQuery loadat i-inject sa .modal-body. Kung gumagamit ka ng data api, maaari mong gamitin ang hreftag upang tukuyin ang malayong pinagmulan. Ang isang halimbawa nito ay ipinapakita sa ibaba:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Paraan

.modal(options)

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

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

.modal('toggle')

Manu-manong i-toggle ang isang modal.

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

.modal('show')

Manu-manong nagbubukas ng modal.

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

.modal('itago')

Manu-manong nagtatago ng modal.

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

Mga kaganapan

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

Kaganapan Paglalarawan
palabas Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinakita Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga css transition).
tago Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
nakatago Ang kaganapang ito ay pinapagana kapag ang modal ay tapos nang itago mula sa user (maghihintay para sa mga transition ng css na makumpleto).
  1. $ ( '#myModal' ). on ( 'nakatago' , function () {
  2. // gumawa ng paraan…
  3. })

Halimbawa sa navbar

Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position. Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na sub item ay iha-highlight din.

@mataba

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi bago sila naubos qui. Tumblr farm-to-table na mga karapatan sa bisikleta kahit ano. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui malamang na hindi mo pa naririnig ang mga ito at ang cardigan trust fund ay culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa bigote skateboard, adipisicing fugiat velit pitchfork balbas. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat apat na loko nisi, ea helvetica nulla carles. Naka-tattoo na cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

isa

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ang Vero VHS ay adipisicing. Consectetur ilang DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

dalawa

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa kahit anong delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats malamang na hindi mo pa narinig ang tungkol sa kanila consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat bago sila maubos, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Paggamit

Sa pamamagitan ng mga katangian ng data

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 body) at data-target=".navbar"upang piliin kung aling nav ang gagamitin. Gusto mong gumamit ng scrollspy na may .navbahagi.

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

Sa pamamagitan ng JavaScript

Tawagan ang scrollspy sa pamamagitan ng JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Heads up! Ang mga link sa Navbar ay dapat may mga nareresolbang id target. Halimbawa, <a href="#home">home</a>dapat na tumutugma sa isang bagay sa dom tulad ng <div id="home"></div>.

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:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Pangalan uri default paglalarawan
offset numero 10 Mga pixel na i-offset mula sa itaas kapag kinakalkula ang posisyon ng scroll.

Mga kaganapan

Kaganapan Paglalarawan
buhayin Ang kaganapang ito ay gumagana sa tuwing may bagong item na na-activate ng scrollspy.

Mga halimbawang tab

Magdagdag ng mabilis, dynamic na paggana ng tab upang lumipat sa mga pane ng lokal na nilalaman, kahit na sa pamamagitan ng mga dropdown na menu.

Malamang na hilaw na maong ay hindi mo pa narinig ang mga ito na jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigote cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex pusit. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Paggamit

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'ipakita' ); // Pumili ng tab ayon sa pangalan
  2. $ ( '#myTab a:first' ). tab ( 'ipakita' ); // Piliin ang unang tab
  3. $ ( '#myTab a:last' ). tab ( 'ipakita' ); // Piliin ang huling tab
  4. $ ( '#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 sumusulat 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.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mga Mensahe </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Mga Setting </a></li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profile </a></li>
  4. <li><a href = "#messages" > Mga Mensahe </a></li>
  5. <li><a href = "#settings" > Mga Setting </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a:last' ). tab ( 'ipakita' );
  18. })
  19. </script>

Mga kaganapan

Kaganapan Paglalarawan
palabas Ang kaganapang ito ay gagana sa palabas sa tab, ngunit bago ipakita ang bagong tab. Gamitin event.targetat event.relatedTargeti-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
ipinakita Ang kaganapang ito ay gagana sa palabas sa tab pagkatapos maipakita ang isang tab. Gamitin event.targetat event.relatedTargeti-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'ipinakita' , function ( e ) {
  2. e . target // na-activate na tab
  3. e . relatedTarget // nakaraang tab
  4. })

Mga halimbawa

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.

Para sa mga dahilan ng pagganap, ang tooltip at popover data-apis ay naka-opt in, ibig sabihin , dapat mong simulan ang mga ito mismo .

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

Tight pants next level keffiyeh malamang hindi mo pa narinig. Photo booth balbas raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, ang mcsweeney's fixie sustainable quinoa 8-bit american apparel ay may terry richardson vinyl chambray. Balbas stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, apat na loko mcsweeney's cleanse vegan chambray. Isang talagang ironic artisan kahit anong keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Apat na direksyon

Mga tooltip sa mga pangkat ng pag-input

Kapag gumagamit ng mga tooltip at popover sa mga grupo ng input ng Bootstrap, kakailanganin mong itakda ang containeropsyong (nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto.


Paggamit

I-trigger ang tooltip sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan uri default paglalarawan
animation boolean totoo maglapat ng css fade transition sa tooltip
html boolean mali Ipasok ang html sa tooltip. Kung mali, ang pamamaraan ng jquery textay gagamitin upang magpasok ng nilalaman sa dom. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay string | function 'itaas' paano iposisyon ang tooltip - itaas | ibaba | kaliwa | tama
tagapili string mali Kung may ibibigay na tagapili, ang mga bagay sa tooltip ay idelegado sa mga tinukoy na target.
pamagat string | function '' default na halaga ng pamagat kung wala ang tag na `title`
gatilyo string 'hover focus' kung paano na-trigger ang tooltip - i-click ang | mag-hover | focus | manwal. Tandaan na iyong case pass trigger mutliple, space seperated, trigger type.
pagkaantala numero | bagay 0

pagkaantala sa pagpapakita at pagtatago ng tooltip (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger

Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita

Ang istraktura ng bagay ay:delay: { show: 500, hide: 100 }

lalagyan string | mali mali

Idinaragdag ang tooltip sa isang partikular na elementocontainer: 'body'

Heads up! Ang mga opsyon para sa mga indibidwal na tooltip ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > hover over me </a>

Paraan

$().tooltip(mga opsyon)

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

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento.

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

.tooltip('itago')

Itinatago ang tooltip ng isang elemento.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento.

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

.tooltip('destroy')

Itinatago at sinisira ang tooltip ng isang elemento.

  1. $ ( '#elemento' ). tooltip ( 'sirain' )

Mga halimbawa

Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon. Mag-hover sa button para ma-trigger ang popover. Nangangailangan ng Tooltip na maisama.

Static popover

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

Popover tuktok

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Tama si Popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ibaba

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Umalis si Popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Walang markup na ipinapakita bilang mga popover na nabuo mula sa JavaScript at nilalaman sa loob ng isang datakatangian.

Live na demo

Apat na direksyon


Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan uri default paglalarawan
animation boolean totoo maglapat ng css fade transition sa tooltip
html boolean mali Ipasok ang html sa popover. Kung mali, ang pamamaraan ng jquery textay gagamitin upang magpasok ng nilalaman sa dom. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay string | function 'tama' kung paano iposisyon ang popover - tuktok | ibaba | kaliwa | tama
tagapili string mali kung may ibibigay na tagapili, ang mga bagay sa tooltip ay idelegado sa mga tinukoy na target
gatilyo string 'click' kung paano na-trigger ang popover - i-click ang | mag-hover | focus | manwal
pamagat string | function '' default na halaga ng pamagat kung wala ang attribute na `title`
nilalaman string | function '' default na halaga ng nilalaman kung wala ang attribute na `data-content`
pagkaantala numero | bagay 0

pagkaantala sa pagpapakita at pagtatago ng popover (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger

Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita

Ang istraktura ng bagay ay:delay: { show: 500, hide: 100 }

lalagyan string | mali mali

Idinaragdag ang popover sa isang partikular na elementocontainer: 'body'

Heads up! Maaaring tukuyin ang mga opsyon para sa mga indibidwal na popover sa pamamagitan ng paggamit ng mga katangian ng data.

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.

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

.popover('itago')

Itinatago ang isang elemento ng popover.

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

.popover('toggle')

I-toggle ang isang elementong popover.

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

.popover('sirain')

Itinatago at sinisira ang popover ng isang elemento.

  1. $ ( '#elemento' ). popover ( 'sirain' )

Mga halimbawang alerto

Magdagdag ng dismiss functionality sa lahat ng alertong mensahe gamit ang plugin na ito.

Banal na guacamole! Best check yo self, hindi ka masyadong maganda.

Ay snap! Nagkaroon ka ng error!

Baguhin ito at iyon at subukang muli. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Gawin ang pagkilos na ito O gawin mo ito


Paggamit

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

  1. $ ( ".alerto" ). alerto ()

Markup

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

  1. <a class = "close" data-dismiss = "alert" 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.

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

Kaganapan Paglalarawan
malapit na Agad na gagana ang kaganapang ito kapag closetinawag ang paraan ng instance.
sarado Ang kaganapang ito ay pinapagana kapag ang alerto ay sarado na (maghihintay para sa css transition upang makumpleto).
  1. $ ( '#my-alert' ). bind ( 'sarado' , function () {
  2. // gumawa ng paraan…
  3. })

Halimbawa ng mga gamit

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.

Stateful

Idagdag data-loading-text="Loading..."upang gumamit ng estado ng paglo-load sa isang button.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Naglo-load..." > Katayuan ng paglo- load </button>

Single toggle

Idagdag data-toggle="button"para i-activate ang toggling sa iisang button.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

Checkbox

Idagdag data-toggle="buttons-checkbox"para sa checkbox style toggling sa btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Kaliwa </button>
  3. <button type = "button" class = "btn btn-primary" > Gitna </button>
  4. <button type = "button" class = "btn btn-primary" > Kanan </button>
  5. </div>

Radyo

Idagdag data-toggle="buttons-radio"para sa radio style toggling sa btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Kaliwa </button>
  3. <button type = "button" class = "btn btn-primary" > Gitna </button>
  4. <button type = "button" class = "btn btn-primary" > Kanan </button>
  5. </div>

Paggamit

Paganahin ang mga button sa pamamagitan ng JavaScript:

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

Mga pagpipilian

wala

Paraan

$().button('toggle')

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

Heads up! Maaari mong paganahin ang auto toggling ng isang button sa pamamagitan ng paggamit ng data-toggleattribute.
  1. <button type = "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 attribute ng data data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Heads up! Ipinagpapatuloy ng Firefox ang hindi pinaganang estado sa mga pag-load ng pahina . Ang isang solusyon para dito ay ang paggamit autocomplete="off".

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

  1. < uri ng button = "button" class = "btn" data-complete-text = "tapos na!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). pindutan ( 'kumpleto' )
  4. </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:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua maglagay ng ibon dito pusit single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan maliban sa butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt malamang na hindi mo pa narinig ang mga ito accusamus labore sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Nako-collapsible na Group Item #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Collapsible Group Item #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Maaari mo ring gamitin ang plugin nang walang accordion markup. Gumawa ng isang pindutan na i-toggle ang pagpapalawak at pagbagsak ng isa pang elemento.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. simpleng collapsible
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Paggamit

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-toggle="collapse"at a data-targetto element para awtomatikong magtalaga ng kontrol sa isang collapsible na elemento. Tumatanggap ang data-targetattribute ng css selector para ilapat ang collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase in.

Upang magdagdag ng tulad-accordion na pamamahala ng pangkat sa isang collapsible na kontrol, idagdag ang attribute ng data data-parent="#selector". Sumangguni sa demo upang makita ito sa pagkilos.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

  1. $ ( ".collapse" ). gumuho ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-parent="".

Pangalan uri default paglalarawan
magulang tagapili mali Kung selector, isasara ang lahat ng collapsible na elemento sa ilalim ng tinukoy na parent kapag ipinakita ang collapsible na item na ito. (katulad ng tradisyonal na pag-uugali ng akurdyon)
magpalipat-lipat boolean totoo I-toggle ang collapsible na elemento sa invocation

Paraan

.collapse(options)

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

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

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

Kaganapan Paglalarawan
palabas Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinakita Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng css).
tago Ang kaganapang ito ay agad na pinapagana kapag ang hidepamamaraan ay tinawag na.
nakatago Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng css).
  1. $ ( '#myCollapsible' ). on ( 'nakatago' , function () {
  2. // gumawa ng paraan…
  3. })

Halimbawa

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

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

Gugustuhin mong itakda autocomplete="off"upang pigilan ang mga default na menu ng browser mula sa paglitaw sa dropdown ng typeahead ng Bootstrap.


Paggamit

Sa pamamagitan ng mga katangian ng data

Magdagdag ng mga katangian ng data upang magrehistro ng isang elemento na may pagpapagana ng typeahead gaya ng ipinapakita sa halimbawa sa itaas.

Sa pamamagitan ng JavaScript

Manu-manong tawagan ang typeahead gamit ang:

  1. $ ( '.typeahead' ). typeahead ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-source="".

Pangalan uri default paglalarawan
pinagmulan array, function [ ] Ang data source kung saan itatanong. Maaaring isang hanay ng mga string o isang function. Ang function ay pumasa sa dalawang argumento, ang queryhalaga sa input field at ang processcallback. Maaaring gamitin ang function nang sabay-sabay sa pamamagitan ng pagbabalik ng data source nang direkta o asynchronously sa pamamagitan ng processiisang argumento ng callback.
mga bagay numero 8 Ang max na bilang ng mga item na ipapakita sa dropdown.
minLength numero 1 Ang minimum na haba ng character na kailangan bago mag-trigger ng mga suhestyon sa autocomplete
matcher function kaso insensitive Ang paraan na ginamit upang matukoy kung ang isang query ay tumutugma sa isang item. Tumatanggap ng iisang argumento, ang itemlaban sa kung saan susubukan ang query. I-access ang kasalukuyang query gamit ang this.query. Magbalik ng boolean truekung ang query ay tugma.
tagapag-ayos function eksaktong tugma,
case sensitive,
case insensitive
Paraang ginamit upang pagbukud-bukurin ang mga resulta ng autocomplete. Tumatanggap ng isang argumento itemsat may saklaw ng halimbawa ng typeahead. I-refer ang kasalukuyang query gamit ang this.query.
updater function ibinabalik ang napiling item Ang paraan na ginamit upang ibalik ang napiling item. Tumatanggap ng isang argumento, ang itemat may saklaw ng instance ng typeahead.
highlighter function itina-highlight ang lahat ng default na tugma Paraang ginamit upang i-highlight ang mga resulta ng autocomplete. Tumatanggap ng isang argumento itemat may saklaw ng halimbawa ng typeahead. Dapat ibalik ang html.

Paraan

.typeahead(mga opsyon)

Nagsisimula ng input na may typeahead.

Halimbawa

Ang subnavigation sa kaliwa ay isang live na demo ng affix plugin.


Paggamit

Sa pamamagitan ng mga katangian ng data

Para madaling magdagdag ng gawi ng affix sa anumang elemento, idagdag lang data-spy="affix"sa elementong gusto mong tiktikan. Pagkatapos ay gumamit ng mga offset upang tukuyin kung kailan i-toggle ang pag-pin ng isang elemento sa on at off.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Heads up! Dapat mong pamahalaan ang posisyon ng isang naka-pin na elemento at ang pag-uugali ng kalapit na magulang nito. Ang posisyon ay kinokontrol ng affix, affix-top, at affix-bottom. Tandaang tingnan kung may potensyal na nag-collapse na magulang kapag nagsimula ang affix habang inaalis nito ang content mula sa normal na daloy ng page.

Sa pamamagitan ng JavaScript

Tawagan ang affix plugin sa pamamagitan ng JavaScript:

  1. $ ( '#navbar' ). panlapi ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset-top="200".

Pangalan uri default paglalarawan
offset numero | function | bagay 10 Mga pixel na i-offset mula sa screen kapag kinakalkula ang posisyon ng scroll. Kung iisang numero ang ibinigay, ang offset ay ilalapat sa itaas at kaliwang direksyon. Para makinig sa iisang direksyon, o maraming natatanging offset, magbigay lang ng object offset: { x: 10 }. Gumamit ng function kapag kailangan mong dynamic na magbigay ng offset (kapaki-pakinabang para sa ilang tumutugon na disenyo).