JavaScript

Ampiaina ny singa ao amin'ny Bootstrap — miaraka amin'ny plugins jQuery 13 mahazatra.

Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (na dia mitaky fiankinana aza ny sasany), na indray mandeha. Ny bootstrap.js sy bootstrap.min.js dia samy ahitana ny plugins rehetra ao anaty rakitra iray.

Data attributes

Azonao atao ny mampiasa ny plugins Bootstrap rehetra amin'ny alàlan'ny API markup nefa tsy manoratra andalana iray amin'ny JavaScript. Ity no API kilasy voalohany an'ny Bootstrap ary tokony ho fiheveranao voalohany rehefa mampiasa plugin.

Izany hoe, amin'ny toe-javatra sasany dia mety ilaina ny hamono ity fampiasa ity. Noho izany, izahay koa dia manome ny fahafahana manafoana ny data attribute API amin'ny alàlan'ny fanafoanana ny hetsika rehetra ao amin'ny vatana misy `'data-api'`. Toa izao ity:

  1. $ ( 'vatana' ). maty ( '.data-api ' )

Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:

  1. $ ( 'vatana' ). maty ( ' .alert.data -api' )

Programmatic API

Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina ary mamerina ny fanangonana natao.

  1. $ ( ".btn.danger" ). bokotra ( "toggle" ). addClass ( "matavy" )

Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):

  1. $ ( "#myModal" ). modal () // natomboka tamin'ny default
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // natomboka tsy misy fitendry
  3. $ ( "#myModal" ). modal ( 'show' ) // manomboka sy miantso avy hatrany ny fampisehoana

Ny plugin tsirairay ihany koa dia mampiseho ny mpanamboatra manta ao amin'ny fananana `Constructor`: $.fn.popover.Constructor. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel=popover]').data('popover').

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo, mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

  1. var bootstrapButton = $ . fn . bokotra . noConflict () // mamerina $.fn.button amin'ny sanda nomena teo aloha
  2. $ . fn . bootstrapBtn = bootstrapButton // manome $().bootstrapBtn ny fiasa bootstrap

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana an'ny plugin. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay misy ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra amin'ny fahavitan'ny hetsika iray.

Ny hetsika infinitive rehetra dia manome fiasa preventDefault. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. raha miverina (! data ) e . preventDefault () // manakana ny modal tsy aseho
  3. })

Momba ny tetezamita

Ho an'ny vokatry ny tetezamita tsotra dia ampidiro indray mandeha miaraka amin'ireo rakitra JS hafa ny bootstrap-transition.js . Raha mampiasa ny bootstrap.js natambatra (na nohavaozina) ianao, dia tsy ilaina ny mampiditra an'ity—efa eo izany.

Mampiasa tranga

Ohatra vitsivitsy amin'ny plugin transition:

  • Sliding na fading in modals
  • Manjavona ny tabilao
  • Fampandrenesana manjavona
  • Karazana sliding carousel

OHATRA

Modals dia mirindra, fa moramora, ny fifampiresahana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Ohatra static

Mody adika miaraka amin'ny lohapejy, vatana, ary andiana hetsika ao amin'ny tongo-tongony.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. < karazana bokotra = "button" class = "akaiky" data-dismiss = "modal" aria-hidden = "marina" > × </bokotra>
  4. <h3> Lohatenin'ny modely </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Vatana tsara iray… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Akatona </a>
  11. <a href = "#" class = "btn btn-primary" > Tehirizo ny fanovana </a>
  12. </div>
  13. </div>

Demo mivantana

Ampifamadiho ny modal amin'ny alàlan'ny JavaScript amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

  1. <!-- Bokotra hanosika ny modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Alefaso ny modal demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "marina" >
  6. <div class = "modal-header" >
  7. < karazana bokotra = "bokotra" class = "akaiky" data-dismiss = "modal" aria-hidden = "marina" > × </bt>
  8. <h3 id = "myModalLabel" > Lohahevitra modely </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Vatana tsara iray… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Akatona </button>
  15. <button class = "btn btn-primary" > Tehirizo ny fanovana </button>
  16. </div>
  17. </div>

Fampiasana

Amin'ny alàlan'ny data attributes

Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"na href="#foo"hikendry mody iray manokana hivezivezy.

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

Amin'ny JavaScript

Miantso modal miaraka amin'ny id myModalmisy andalana tokana amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-backdrop="".

Anarana karazana toerana misy anao Description
resahana boolean marina Ahitana singa modal-backdrop. Raha tsy izany, manendry staticny backdrop izay tsy manidy ny modal amin'ny tsindry.
Ohatra boolean marina Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape
FAMPISEHOANA boolean marina Mampiseho ny modal rehefa natomboka.
mitokana LALANA DISO

Raha misy url lavitra omena, dia ho entina amin'ny alalan'ny loadfomba jQuery ny votoaty ary ampidirina ao amin'ny .modal-body. Raha mampiasa ny data api ianao dia azonao atao koa ny mampiasa ny hreftag mba hamaritana ny loharano lavitra. Ohatra iray amin'izany no aseho eto ambany:

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

fomba

.modal(safidy)

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

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

.modal('toggle')

Manova fomba tanana iray.

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

.modal('show')

Manokatra modal amin'ny tanana.

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

.modal('afina')

Manafina modal iray amin'ny tanana.

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

zava-mitranga

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

Event Description
FAMPISEHOANA Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
naseho Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana css).
afeno ny Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
Zavatra tsy Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny css transition).
  1. $ ( '#myModal' ). on ( 'miafina' , asa () {
  2. // manao zavatra…
  3. })

Ohatra amin'ny navbar

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky. Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa ambany midina.

@matavy

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi talohan'ny namidy azy ireo. Tumblr farm-to-table zon'ny bisikileta na inona na inona. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mety mbola tsy naheno azy ireo ianao ary ny cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoazy accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa volombava skateboard, adipisicing fugiat velit pitchfork volombava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat efatra loko nisi, ea helvetica nulla carles. Kamiao sakafo palitao cosby misy tatoazy, vinyl's quis non freegan an'i mcsweeney. Lo-fi wes anderson +1 sartorial. Carles tsy aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

iray

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-original coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS dia adipisicing. Consectetur misy DIY kely messenger kitapo. Cred ex in, maharitra delectus consectetur fanny pack iphone.

rOA

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 na inona na inona kamiao sakafo delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats angamba mbola tsy henonao momba azy ireo consequat hoodie tsy misy gluten lo-fi fap aliquip. Miasa elit placeat alohan'ny hamidy, 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.


Fampiasana

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar anao, ampio fotsiny data-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ny vatana izany) ary data-target=".navbar"mifidy izay nav hampiasaina. Te hampiasa scrollspy miaraka amina .navsinga iray ianao.

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

Amin'ny JavaScript

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

  1. $ ( '#navbar' ). scrollspy ()
Fampitandremana! Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny dom toy ny <div id="home"></div>.

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:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

Anarana karazana toerana misy anao Description
offset isa 10 Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky.

zava-mitranga

Event Description
hampavitrika Ity hetsika ity dia mirehitra isaky ny misy singa vaovao mampandeha ny scrollspy.

Ohatra tabilao

Manampia fampiasa kiheba haingana sy mavitrika amin'ny fifindrana amin'ny alàlan'ny tontonana amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina.

Denim manta angamba mbola tsy henonao ny momba azy ireo pataloha jeans Austin. Nesciunt tofu stumptown aliqua, fanadiovana retro synth master. Ny volombava cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Alefaso toerana amin'ny salvia cillum iphone. Seitan aliquip quis cardigan akanjo amerikana, mpivaro-kena 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.


Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

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

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

  1. $ ( '#myTab a[href="#profile"]' ). tabilao ( 'show' ); // Mifidiana tabilao amin'ny anarana
  2. $ ( '#myTab a:voalohany' ). tabilao ( 'show' ); // Safidio ny tabilao voalohany
  3. $ ( '#myTab a:last' ). tabilao ( 'show' ); // Fidio ny tabilao farany
  4. $ ( '#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 tab Bootstrap.

  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" > Hafatra </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Fikirana </a></li>
  6. </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.

  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" > Hafatra </a></li>
  5. <li><a href = "#settings" > Fikirana </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 = "message" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( asa () {
  17. $ ( '#myTab a:last' ). tabilao ( 'show' );
  18. })
  19. </script>

zava-mitranga

Event Description
FAMPISEHOANA Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
naseho Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'aseho' , asa ( e ) {
  2. e . tanjona // vakizoro mavitrika
  3. e . relatedTarget // tabilao teo aloha
  4. })

OHATRA

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 angona-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Noho ny anton'ny fampandehanana, dia nisafidy ny tooltip sy popover data-apis, midika izany fa tsy maintsy ataonao voalohany izy ireo .

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

pataloha tery next level keffiyeh angamba mbola tsy naheno azy ireo ianao. Tranon-tsary volombava manta denim letterpress vegan messenger bag stumptown. Seitan Farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel dia manana terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, efatra loko mcsweeney's cleanse vegan chambray. Mpanao asa tanana tena mahatsikaiky na inona na inona keytar , scenester farm-to-table banksy Austin twitter mitantana freegan cred denim manta kafe tokana nipoitra.

Lalana efatra

Torohevitra amin'ny vondrona fampidirana

Rehefa mampiasa toro-hevitra sy popovers miaraka amin'ny vondrona fampidirana Bootstrap ianao dia tsy maintsy mametraka ny containersafidy (voarakitra eto ambany) mba hialana amin'ny voka-dratsy tsy ilaina.


Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana karazana toerana misy anao Description
fanentanana boolean marina ampiharo css fade transition amin'ny tooltip
html boolean DISO Ampidiro ao amin'ny tooltip ny html. Raha diso, ny fomba jquery textdia hampiasaina hampidirana votoaty ao amin'ny dom. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'top' ahoana ny fametrahana ny tondro-fitaovana - top | ambany | ankavia | TSARA
mpifidy tady DISO Raha misy mpifidy omena dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana.
lohateny string | asa '' sandan'ny lohateny default raha tsy misy ny tenifototra `title`
miteraka tady 'hover focus' ny fomba fampandehanana ny topy fitaovana - tsindrio | hover | mifantoka | manual. Mariho fa ny case pass trigger mutliple, avahana toerana, karazana trigger.
fahatarana laharana | zavatra 0

fanemorana ny fampisehoana sy ny fanafenana ny tondro fitaovana (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { show: 500, hide: 100 }

fitoeran-javatra string | DISO DISO

Ampidiro amin'ny singa manokana ny tondro-fitaovanacontainer: 'body'

Fampitandremana! Ny safidy ho an'ny toro-làlana tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data.

fanamarihana

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > mitsingevaheva eo amboniny </a>

fomba

$().tooltip(safidy)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray.

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

.tooltip('manafina')

Manafina ny tondro-fitaovan'ny singa iray.

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

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray.

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

.tooltip('destroy')

Manafina sy manimba ny tondro-fitaovan'ny singa iray.

  1. $ ( '#element' ). tondro fitaovana ( 'manimba' )

OHATRA

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa. Atsofohy eo ambonin'ny bokotra hanetsika ny popover. Mitaky Tooltip ampidirina.

static popover

Misy safidy efatra: ambony, havanana, ambany ary havia.

Popover ambony

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

Popover havanana

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

Popover ambany

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

Popover sisa

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

Tsy misy marika aseho amin'ny hoe popover dia avy amin'ny JavaScript sy ny atiny ao anatin'ny datatoetra iray.

Demo mivantana

Lalana efatra


Fampiasana

Alefaso ny popovers amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana karazana toerana misy anao Description
fanentanana boolean marina ampiharo css fade transition amin'ny tooltip
html boolean DISO Ampidiro ao anaty popover ny html. Raha diso, ny fomba jquery textdia hampiasaina hampidirana votoaty ao amin'ny dom. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'marina' ahoana ny fametrahana ny popover - top | ambany | ankavia | TSARA
mpifidy tady DISO raha misy mpifidy omena, dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana
miteraka tady 'click' ny fomba nanombohan'ny popover - tsindrio | hover | mifantoka | boky fampianarana
lohateny string | asa '' sanda titre default raha tsy misy ny toetra `title`
votoaty string | asa '' sandan'ny atiny default raha tsy misy ny toetra `data-content`
fahatarana laharana | zavatra 0

fanemorana ny fampisehoana sy ny fanafenana ny popover (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { show: 500, hide: 100 }

fitoeran-javatra string | DISO DISO

Manampy ny popover amina singa iray manokanacontainer: 'body'

Fampitandremana! Ny safidy ho an'ny popovers tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data.

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.

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

.popover('afeno')

Manafina singa popover.

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

.popover('toggle')

Manova singa popover.

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

.popover('mandrava')

Manafina sy manimba ny popover singa iray.

  1. $ ( '#element' ). popover ( 'manimba' )

Fampandrenesana ohatra

Ampio ny fampiasa fandroahana amin'ny hafatra fanairana rehetra miaraka amin'ity plugin ity.

Guacamole masina! Jereo tsara ny tenanao, tsy dia tsara loatra ianao.

Oh snap! Nahazo fahadisoana ianao!

Ovay izao sy izao ary andramo indray. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Raiso ity hetsika ity Na ataovy izao


Fampiasana

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

  1. $ ( ".alert" ). mailo ()

fanamarihana

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

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

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

zava-mitranga

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

Event Description
AKAIKY Mirehitra avy hatrany ity hetsika ity rehefa closeantsoina ny fomba fiasa.
mihidy Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana css).
  1. $ ( '#my-alert' ). mamatotra ( 'nakatona' , asa () {
  2. // manao zavatra…
  3. })

Fampiasana ohatra

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.

Stateful

Ampio data-loading-text="Loading..."mba hampiasa ny toetry ny entana amin'ny bokotra iray.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Fametrahana fanjakana </button>

Toggle tokana

Ampio data-toggle="button"mba hampavitrika ny famadihana amin'ny bokotra tokana.

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

Checkbox

Ampio data-toggle="buttons-checkbox"ho an'ny fomba fanodikodinana amin'ny btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. < karazana bokotra = "bokotra" class = "btn btn-primary" > Ankavia </bt>
  3. < karazana bokotra = "bokotra" class = "btn btn-primary" > Afovoany </bt>
  4. < karazana bokotra = "bokotra" class = "btn btn-primary" > havanana </bt>
  5. </div>

fampielezam-peo

Ampio data-toggle="buttons-radio"amin'ny fomba fampidinana radio amin'ny vondrona btn.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. < karazana bokotra = "bokotra" class = "btn btn-primary" > Ankavia </bt>
  3. < karazana bokotra = "bokotra" class = "btn btn-primary" > Afovoany </bt>
  4. < karazana bokotra = "bokotra" class = "btn btn-primary" > havanana </bt>
  5. </div>

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny bokotra:

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

FANDIKANA

tsy misy

fomba

$().button('toggle')

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

Fampitandremana! Azonao atao ny manova ny bokotra automatique amin'ny fampiasana ny data-toggletoetra.
  1. < karazana bokotra = "button" class = "btn" data-toggle = "button" > </btn>

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

  1. <button type = "button" class = "btn" data-loading-text = "mametaka zavatra..." > ... </button>
Fampitandremana! Firefox dia manohy ny toetry ny kilema amin'ny famoahana pejy . Ny vahaolana amin'izany dia ny fampiasana autocomplete="off".

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

  1. < karazana bokotra = "button" class = "btn" data-complete-text = "vita!" > ... </bokotra>
  2. <script>
  3. $ ( '.btn' ). bokotra ( 'feno' )
  4. </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:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
  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. Vondrona azo harodana 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. Item #2 vondrona azo rava
  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. ...

Azonao atao koa ny mampiasa ny plugin tsy misy marika accordion. Manaova bokotra havitrika ny fanitarana sy ny firodanan'ny singa iray hafa.

  1. < karazana bokotra = "bokotra" class = "btn btn-danger" data-toggle = "mirodana" data-target = "#demo" >
  2. tsotra azo collapsible
  3. </bokotra>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Fampiasana

Amin'ny alàlan'ny data attributes

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.

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetran'ny data data-parent="#selector". Jereo ny demo raha te hahita an'ity hetsika ity.

Amin'ny JavaScript

Alefa tanana amin'ny:

  1. $ ( ".collapse" ). mirodana ()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-parent="".

Anarana karazana toerana misy anao Description
ray aman-dreny mpifidy DISO Raha mifidy dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho io singa azo rava io. (mitovy amin'ny fihetsika akordionina nentim-paharazana)
mifamadika boolean marina Manova ny singa azo harodana amin'ny fiantsoana

fomba

.collapse(safidy)

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

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

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

Event Description
FAMPISEHOANA Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
naseho Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny css transition ho vita).
afeno ny Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba.
Zavatra tsy Ity hetsika ity dia alefa rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny css ho vita).
  1. $ ( '#myCollapsible' ). on ( 'miafina' , asa () {
  2. // manao zavatra…
  3. })

OHATRA

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

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

Te-hametraka ianao autocomplete="off"mba hisakanana ny menio navigateur default tsy hiseho eo amin'ny fidinan'ny karazana bootstrap.


Fampiasana

Amin'ny alàlan'ny data attributes

Manampia toetra angon-drakitra hanoratana singa iray misy fampiasa amin'ny typeahead araka ny aseho amin'ny ohatra etsy ambony.

Amin'ny JavaScript

Antsoy amin'ny tanana amin'ny:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-source="".

Anarana karazana toerana misy anao Description
Source array, asa [ ] Ny loharanom-baovao hanontaniana. Mety ho andian-tady na asa iray. Mandalo hevitra roa ny asa, ny querysanda ao amin'ny saha fampidirana sy ny processantso miverina. Ny fiasa dia azo ampiasaina miaraka amin'ny famerenana mivantana ny loharano angon-drakitra na asynchronous amin'ny alàlan'ny processtohan-kevitra tokana an'ny callback.
zavatra isa 8 Ny isan'ny zavatra ambony indrindra haseho ao amin'ny fidina.
minLength isa 1 Ny halavan'ny endri-tsoratra kely indrindra ilaina alohan'ny hamoahana ny soso-kevitra autocomplete
matcher asa case insensitive Ny fomba ampiasaina hamaritana raha mifanaraka amin'ny singa ny fanontaniana iray. Manaiky hevitra tokana, itemizay hanoherana ny fanontaniana. Midira amin'ny fangatahana ankehitriny miaraka amin'ny this.query. Avereno boolean trueraha mifanaraka ny fangatahana.
sorter asa mifanandrify marina,
saro-pady, saro-
pady
Fomba ampiasaina handaminana ny valin'ny autocomplete. Manaiky tohan-kevitra tokana itemsary manana ny sahan'ny ohatra eo amin'ny fanoratana. Tondroy amin'ny this.query.
updater asa mamerina singa voafantina Ny fomba ampiasaina hamerenana singa voafantina. Manaiky tohan-kevitra tokana, itemary manana ny sahan'ny ohatra typeahead.
miloko asa manasongadina ny lalao default rehetra Fomba ampiasaina hanasongadinana ny valin'ny autocomplete. Manaiky tohan-kevitra tokana itemary manana ny sahan'ny ohatra eo amin'ny fanoratana. Tokony hamerina html.

fomba

.typeahead(safidy)

Manomboha fampidirana miaraka amin'ny lohamilina.

OHATRA

Ny subnavigation eo ankavia dia demo mivantana amin'ny plugin affix.


Fampiasana

Amin'ny alàlan'ny data attributes

Mba hanampiana mora foana ny fitondran-tena affix amin'ny singa rehetra, ampio fotsiny data-spy="affix"amin'ny singa tianao hitsikilo. Ampiasao avy eo ny offset mba hamaritana ny fotoana hamehezana sy hamonoana ny fametahana singa iray.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Fampitandremana! Tsy maintsy mitantana ny toeran'ny singa voatsindrona sy ny fihetsiky ny ray aman-dreny akaiky azy ianao. Ny toerana dia fehezin'ny affix, affix-top, ary affix-bottom. Tsarovy ny manamarina raha misy ray aman-dreny mety ho lavo rehefa manomboka ny affix satria manala votoaty amin'ny fikorianan'ny pejy mahazatra.

Amin'ny JavaScript

Antsoy ny plugin affix amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset-top="200".

Anarana karazana toerana misy anao Description
offset laharana | asa | zavatra 10 Pikaola hosoloina amin'ny efijery rehefa manao kajy ny toeran'ny horonana. Raha misy isa tokana omena, ny offset dia ampiharina amin'ny lalana ambony sy ankavia. Raha te hihaino tari-dalana tokana, na offset tokana maromaro, dia omeo zavatra fotsiny offset: { x: 10 }. Mampiasà fiasa rehefa mila manome offset amin'ny fomba mavitrika ianao (ilaina ho an'ny endrika mandray andraikitra sasany).