JavaScript

Mu awọn paati Bootstrap wa si igbesi aye — ni bayi pẹlu aṣa jQuery aṣa 13.

Olukuluku tabi akopọ

Awọn afikun le wa pẹlu ẹyọkan (botilẹjẹpe diẹ ninu awọn ti nilo awọn igbẹkẹle), tabi gbogbo ni ẹẹkan. Awọn mejeeji bootstrap.js ati bootstrap.min.js ni gbogbo awọn afikun ninu faili kan.

Awọn eroja data

O le lo gbogbo awọn afikun Bootstrap nikan nipasẹ API isamisi laisi kikọ laini kan ti JavaScript. Eyi jẹ API kilasi akọkọ Bootstrap ati pe o yẹ ki o jẹ akiyesi akọkọ rẹ nigbati o nlo ohun itanna kan.

Iyẹn ti sọ, ni awọn ipo miiran o le jẹ iwunilori lati pa iṣẹ ṣiṣe yii. Nitoribẹẹ, a tun pese agbara lati mu awọn abuda data API kuro nipa yiyọ gbogbo awọn iṣẹlẹ lori orukọ ara ti o ni aaye pẹlu `'data-api'`. Eyi dabi eyi:

  1. $ ( 'ara' ). pipa ( '.data-api' )

Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:

  1. $ ( 'ara' ). pipa ( '.alert.data-api' )

API ètò

A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.

  1. $ ( ".btn.danger" ). bọtini ( "bayi" ). addClass ( "ọra" )

Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

  1. $ ( "#myModal" ). modal () // ipilẹṣẹ pẹlu awọn aiyipada
  2. $ ( "#myModal" ). modal ({ bọọdù : irọ }) // ti a ṣe ipilẹṣẹ lai si keyboard
  3. $ ( "#myModal" ). modal ( 'fihan' ) // awọn ipilẹṣẹ ati awọn invokes fihan lẹsẹkẹsẹ

Ohun itanna kọọkan tun ṣe afihan olupilẹṣẹ aise rẹ lori ohun-ini `Constructor` $.fn.popover.Constructor:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel=popover]').data('popover').

Ko si Rogbodiyan

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

  1. var bootstrapButton = $ . fn . bọtini . noConflict () // pada $.fn.bọtini si iye ti a yàn tẹlẹ
  2. $ . fn . bootstrapBtn = bootstrapButton // fun $ () .bootstrapBtn iṣẹ-ṣiṣe bootstrap

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ ti ohun itanna. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ, ati fọọmu apakan ti o kọja (fun apẹẹrẹ shown) jẹ okunfa lori ipari iṣẹ kan.

Gbogbo awọn iṣẹlẹ ailopin pese idilọwọ iṣẹ ṣiṣe Aiyipada. Eyi n pese agbara lati da ipaniyan iṣe ṣaaju ki o to bẹrẹ.

  1. $ ( '#myModal' ). lori ( 'fihan' , iṣẹ ( e ) {
  2. ti (! data ) pada e . idilọwọDefault () // da modal duro lati han
  3. })

Nipa awọn iyipada

Fun awọn ipa iyipada ti o rọrun, pẹlu bootstrap-transition.js lẹẹkan lẹgbẹẹ awọn faili JS miiran. Ti o ba nlo bootstrap.js ti a ṣajọpọ (tabi miniified) , ko si ye lati ṣafikun eyi — o ti wa tẹlẹ.

Lo awọn igba

Awọn apẹẹrẹ diẹ ti ohun itanna iyipada:

  • Sisun tabi ipare ni modals
  • Ipare jade awọn taabu
  • Fading jade titaniji
  • Sisun carousel PAN

Awọn apẹẹrẹ

Modals ti wa ni ṣiṣan, ṣugbọn rọ, awọn itọsi ọrọ sisọ pẹlu iṣẹ ṣiṣe ti o kere julọ ti a beere ati awọn aṣiṣe ọlọgbọn.

Apẹẹrẹ aimi

Modal ti a ṣe pẹlu akọsori, ara, ati ṣeto awọn iṣe ni ẹlẹsẹ.

  1. <div class = "modal hide ipare" >
  2. <div kilasi = "modal-akọsori" >
  3. <bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "modal" aria-hidden = "otitọ" > × </bọtini>
  4. <h3> Akọsori awoṣe </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ara kan ti o dara… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" kilasi = "btn"> Pade </a> _
  11. <a href = "#" kilasi = "btn btn-primary" > Fipamọ awọn ayipada </a>
  12. </div>
  13. </div>

Live demo

Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

  1. <!-- Bọtini lati ṣe okunfa modal -->
  2. <a href = "#myModal" ipa = "bọtini" kilasi = "btn" data-toggle = "modal" > Ifilọlẹ demo modal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" kilasi = "modal hide fade" tabindex = "-1" ipa = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "otitọ" >
  6. <div kilasi = "modal-akọsori" >
  7. <button type = "bọtini" kilasi = "sunmọ" data-dismiss = "modal" aria-hidden = "otitọ" > × </button>
  8. <h3 id = "myModalLabel" > Akọsori awoṣe </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Ara kan ti o dara… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "otitọ" > Pade </button>
  15. <bọtini kilasi = "btn btn-primary" > Fipamọ awọn ayipada </button>
  16. </div>
  17. </div>

Lilo

Nipasẹ awọn abuda data

Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.

  1. <button type = "bọtini" data-toggle = "modal" data-target = "#myModal" > Modal ifilọlẹ </button>

Nipasẹ JavaScript

Pe modal pẹlu id myModalpẹlu laini JavaScript kan:

  1. $ ( '#myModal' ). modal ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-backdrop="".

Oruko iru aiyipada apejuwe
sile boolian ooto Pẹlu a modal-backdrop ano. Ni omiiran, pato staticfun ẹhin ẹhin eyiti ko pa modal naa ni titẹ.
keyboard boolian ooto Tilekun modal nigbati o ba tẹ bọtini ona abayo
ifihan boolian ooto Ṣe afihan modal nigbati o bẹrẹ.
latọna jijin ona eke

Ti o ba pese url latọna jijin, akoonu yoo jẹ kojọpọ nipasẹ ọna jQuery loadati itasi sinu faili .modal-body. Ti o ba n lo api data, o le lo hrefafi aami si ni omiiran lati ṣe pato orisun isakoṣo latọna jijin. Apẹẹrẹ eyi ni a fihan ni isalẹ:

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

Awọn ọna

.modal(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

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

.modal('yí')

Pẹlu ọwọ yipada modal kan.

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

.modal('ifihan')

Pẹlu ọwọ ṣii modal kan.

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

.modal('tọju')

Pẹlu ọwọ hides a modal.

  1. $ ( '#myModal' ). modal ( 'tọju' )

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

Iṣẹlẹ Apejuwe
ifihan Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada css lati pari).
tọju Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada css lati pari).
  1. $ ( '#myModal' ). lori ( 'farasin' , iṣẹ () {
  2. // se nkan…
  3. })

Apeere ni navbar

Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav da lori ipo yi lọ. Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

@sanra

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi kí wọn tó ta qui. Tumblr oko-to-tabili awọn ẹtọ keke ohunkohun ti. Animu keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby siweta lomo Jean shorts, Williamsburg hoodie minim qui o jasi ko ti gbọ ti wọn et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihi tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork irungbọn. Freegan irungbọn aliqua cupidatat mcsweeney ká vero. Cupidatat mẹrin loko nisi, ea helvetica nulla carles. Tatuu cosby siweta ounje ikoledanu, mcsweeney ká quis ti kii freegan fainali. Lo-fi wes anderson +1 sartorial. Carles ti kii ṣe adaṣe darapupo quis gentrify. Brooklyn adipisicing ọnà ọti igbakeji keytar deserunt.

ọkan

Occaecat commodo aliqua delectus. Fap iṣẹ ọti deserunt skateboard ea. Lomo keke awọn ẹtọ adipisicing banh mi, velit ea sunt next level locavore nikan-origin kofi in magna veniam. Igbesi aye giga id fainali, iwoyi o duro si ibikan consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim ojiṣẹ apo. cred ex in, alagbero delectus consectetur fanny pack ipad.

meji

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 bulọọgi, culpa ojiṣẹ apo marfa ohunkohun ti delectus ounje ikoledanu. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats o jasi ko tii gbọ ti wọn consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ṣaaju ki wọn to ta, Terry Richardson proident brunch nesciunt quis cosby siweta pariatur keffiyeh ut helvetica artisan. Cardigan iṣẹ ọti seitan readymade velit. VHS chambray laboris tempor veniam. Animu mollit minim commodo ullamco thundercats.


Lilo

Nipasẹ awọn abuda data

Lati fi awọn iṣọrọ scrollspy ihuwasi si rẹ topbar lilọ, o kan fi data-spy="scroll"si awọn ano ti o fẹ lati ṣe amí lori (julọ ojo melo yi yoo jẹ ara) ati data-target=".navbar"lati yan eyi ti nav lati lo. Iwọ yoo fẹ lati lo scrollspy pẹlu .navpaati kan.

  1. <body data-spy = "yi lọ" data-target = ".navbar" > ... </body>

Nipasẹ JavaScript

Pe scrollspy nipasẹ JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Efeti sile! Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, a <a href="#home">home</a>gbọdọ ba nkan ṣe ni dom bi <div id="home"></div>.

Awọn ọna

.scrollspy('itura')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

  1. $ ( '[data-spy="yilọ" ). kọọkan ( iṣẹ () {
  2. var $ amí = $ ( eyi ). scrollspy ( 'itura' )
  3. });

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Oruko iru aiyipada apejuwe
aiṣedeede nọmba 10 Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ.

Awọn iṣẹlẹ

Iṣẹlẹ Apejuwe
mu ṣiṣẹ Iṣẹlẹ yii n ṣiṣẹ nigbakugba ti ohun kan ba muu ṣiṣẹ nipasẹ scrollspy.

Awọn taabu apẹẹrẹ

Ṣafikun iyara, iṣẹ ṣiṣe taabu ti o ni agbara si iyipada nipasẹ awọn pane ti akoonu agbegbe, paapaa nipasẹ awọn akojọ aṣayan silẹ.

Aise Denimu o jasi ko ti gbọ ti wọn Jean shorts Austin. Nesciunt tofu stumptown aliqua, Retiro synth titunto si wẹ. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum ipad. Seitan aliquip quis cardigan American aso, 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.


Lilo

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

  1. $ ( '#myTab a' ). tẹ ( iṣẹ ( e ) {
  2. e . idilọwọ Aiyipada ();
  3. $ ( eyi ). taabu ( 'ifihan' );
  4. })

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

  1. $ ( '#myTab a[href="#profaili"]' ). taabu ( 'ifihan' ); // Yan taabu nipa orukọ
  2. $ ( '#myTab a: akọkọ' ). taabu ( 'ifihan' ); // Yan taabu akọkọ
  3. $ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' ); // Yan kẹhin taabu
  4. $ ( '#myTab li: eq(2) a' ). taabu ( 'ifihan' ); // Yan taabu kẹta (0-itọkasi)

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori nkan kan. Ṣafikun navati nav-tabsawọn kilasi si taabu ulyoo lo iselona taabu Bootstrap.

  1. <ul kilasi = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "taabu" > Ile </a></li>
  3. <li><a href = "#profile" data-toggle = "taabu" > Profaili </a></li>
  4. <li><a href = "#messages" data-toggle = "taabu" > Awọn ifiranṣẹ </a></li>
  5. <li><a href = "#settings" data-toggle = "taabu" > Eto </a></li>
  6. </ul>

Awọn ọna

$().taabu

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM.

  1. <ul kilasi = "nav nav-tabs" id = "myTab" >
  2. <li class = "lọwọ" ><a href = "#ile" > Ile </a></li>
  3. <li > <a href = "#profaili"> Profaili </a></li>
  4. <li><a href = "#messages" > Awọn ifiranṣẹ </a></li>
  5. <li><a href = "#eto" > Eto </a></li>
  6. </ul>
  7.  
  8. <div class = "akoonu-taabu" >
  9. <div class = "tab-pane active" id = "ile" > ... </div>
  10. <div class = "tab-pane" id = "profaili" > ... </div>
  11. <div class = "tab-pane" id = "awọn ifiranṣẹ" > ... </div>
  12. <div class = "tab-pane" id = "awọn eto" > ... </div>
  13. </div>
  14.  
  15. <akosile>
  16. $ ( iṣẹ () {
  17. $ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' );
  18. })
  19. </script>

Awọn iṣẹlẹ

Iṣẹlẹ Apejuwe
ifihan Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
han Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
  1. $ ( 'a[data-toggle = "taabu"]' ). lori ( 'fi han' , iṣẹ ( e ) {
  2. e . afojusun // mu ṣiṣẹ taabu
  3. e . jẹmọTarget // ti tẹlẹ taabu
  4. })

Awọn apẹẹrẹ

Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo CSS3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Fun awọn idi iṣẹ ṣiṣe, ohun elo irinṣẹ ati popover data-apis ti wọle, afipamo pe o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Awọn sokoto to gun ni ipele keji keffiyeh o ṣee ṣe ko tii gbọ ti wọn. Photo agọ irungbọn aise Denimu letterpress ajewebe ojiṣẹ apo stumptown. Farm-to-tabili seitan, mcsweeney's fixie alagbero quinoa 8-bit American aṣọ ni Terry Richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mẹrin loko mcsweeney ká cleanse vegan chambray. A gan ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw Denimu nikan-Oti kofi gbogun ti.

Awọn itọnisọna mẹrin

Awọn imọran irinṣẹ ni awọn ẹgbẹ titẹ sii

Nigbati o ba nlo awọn itọsi irinṣẹ ati awọn agbejade pẹlu awọn ẹgbẹ titẹ sii Bootstrap, iwọ yoo ni lati ṣeto containeraṣayan (ti o ṣe iwe ni isalẹ) lati yago fun awọn ipa ẹgbẹ ti aifẹ.


Lilo

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

  1. $ ( '#apẹẹrẹ' ). ohun elo ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Oruko iru aiyipada apejuwe
iwara boolian ooto lo iyipada css ipare si ọpa irinṣẹ
html boolian eke Fi html sinu ọpa irinṣẹ. Ti o ba jẹ eke, ọna jquery textyoo ṣee lo lati fi akoonu sii sinu dom. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'oke' bi o si ipo awọn Tooltip - oke | isalẹ | osi | ọtun
yiyan okun eke Ti o ba pese yiyan, awọn ohun elo irinṣẹ yoo jẹ aṣoju si awọn ibi-afẹde pàtó.
akọle okun | iṣẹ '' iye akọle aiyipada ti tag `akọle` ko ba si
okunfa okun 'fojusi lori' bi o ti wa ni jeki ọpa ọpa - tẹ | rababa | idojukọ | Afowoyi. Ṣe akiyesi pe ọran kọja nfa mutliple, aaye sọtọ, awọn oriṣi okunfa.
idaduro nọmba | nkan 0

idaduro fifihan ati fifipamọ awọn ọpa irinṣẹ (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { show: 500, hide: 100 }

eiyan okun | eke eke

Fi ohun elo irinṣẹ si eroja kan patocontainer: 'body'

Efeti sile! Awọn aṣayan fun awọn itọnisọna irinṣẹ kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data.

Siṣamisi

  1. <a href = "#" data-toggle = "tooltip" akọle = "Tooltip akọkọ" > rababa lori mi </a>

Awọn ọna

$() ohun elo (awọn aṣayan)

So olutọpa ohun elo kan si ikojọpọ eroja.

.tooltip('ifihan')

Ṣe afihan ohun elo irinṣẹ eroja kan.

  1. $ ( '# ano' ). ọpa irinṣẹ ( 'ifihan' )

.tooltip('tọju')

Ìbòmọlẹ ohun ano ká irinṣẹ.

  1. $ ( '# ano' ). ọpa irinṣẹ ( 'tọju' )

.tooltip('yí')

Yipada ohun elo itọsi irinṣẹ.

  1. $ ( '# ano' ). ọpa irinṣẹ ( 'bayi' )

.tooltip('run')

Hides ati ki o run ohun ano ká irinṣẹ.

  1. $ ( '# ano' ). ọpa irinṣẹ ( 'run' )

Awọn apẹẹrẹ

Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile. Raba lori bọtini lati ma nfa popover naa. Nilo Italolobo Irinṣẹ lati wa pẹlu.

Agbejade aimi

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Popover oke

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

Popover ọtun

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

Popover isalẹ

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

Popover osi

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

Ko si isamisi ti o han bi awọn agbejade ti wa ni ipilẹṣẹ lati JavaScript ati akoonu laarin dataabuda kan.

Live demo

Awọn itọnisọna mẹrin


Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

  1. $ ( '#apẹẹrẹ' ). popover ( awọn aṣayan )

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Oruko iru aiyipada apejuwe
iwara boolian ooto lo iyipada css ipare si ọpa irinṣẹ
html boolian eke Fi html sinu popover. Ti o ba jẹ eke, ọna jquery textyoo ṣee lo lati fi akoonu sii sinu dom. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS.
ipo okun | iṣẹ 'ọtun' bi o si ipo awọn popover - oke | isalẹ | osi | ọtun
yiyan okun eke ti o ba ti pese oluyanju, awọn ohun elo irinṣẹ yoo jẹ aṣoju si awọn ibi-afẹde ti a pato
okunfa okun 'tẹ' bi popover wa ni jeki - tẹ | rababa | idojukọ | Afowoyi
akọle okun | iṣẹ '' iye akọle aiyipada ti o ba jẹ pe ẹya 'akọle' ko si
akoonu okun | iṣẹ '' iye akoonu aiyipada ti ‘akoonu-data’ abuda ko ba si
idaduro nọmba | nkan 0

idaduro ifihan ati fifipamo popover (ms) - ko kan si iru okunfa afọwọṣe

Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji

Eto nkan jẹ:delay: { show: 500, hide: 100 }

eiyan okun | eke eke

Ṣafikun popover si nkan kan patocontainer: 'body'

Efeti sile! Awọn aṣayan fun awọn agbejade kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data.

Siṣamisi

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati Agbejade data-apis n wọle. Ti o ba fẹ lati lo wọn kan pato aṣayan yiyan.

Awọn ọna

$().popover(awọn aṣayan)

Initializes popovers fun ohun akojọpọ eroja.

.popover('ifihan')

Ṣe afihan awọn eroja popover.

  1. $ ( '# ano' ). popover ( 'ifihan' )

.popover('tọju')

Ìbòmọlẹ ohun eroja popover.

  1. $ ( '# ano' ). popover ( 'tọju' )

.popover('toggle')

Yipada awọn eroja agbejade.

  1. $ ( '# ano' ). popover ( 'yii' )

.popover('run')

Hides ati ki o run ohun ano ká popover.

  1. $ ( '# ano' ). popover ( 'run' )

Awọn itaniji apẹẹrẹ

Ṣafikun iṣẹ idasile si gbogbo awọn ifiranṣẹ itaniji pẹlu ohun itanna yii.

Guacamole mimọ! Ṣayẹwo ararẹ ti o dara julọ, iwọ ko dara ju.

Oh imolara! O ni aṣiṣe!

Yi eyi ati iyẹn pada ki o tun gbiyanju lẹẹkansi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Gbe igbese yii Tabi ṣe eyi


Lilo

Jeki yiyọ kuro ti itaniji nipasẹ JavaScript:

  1. $ ( "titaniji" ). gbigbọn ()

Siṣamisi

Kan ṣafikun data-dismiss="alert"si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi.

  1. <a class = "sunmọ" data-dismiss = "titaniji" href = "#" > & igba; </a>

Awọn ọna

$() titaniji()

Murasilẹ gbogbo awọn titaniji pẹlu iṣẹ ṣiṣe to sunmọ. Lati jẹ ki awọn titaniji rẹ gbe jade nigba pipade, rii daju pe wọn ni .fadeati .inkilasi ti lo tẹlẹ si wọn.

.titaniji('sunmọ')

Tilekun itaniji.

  1. $ ( "titaniji" ). gbigbọn ( 'sunmọ' )

Awọn iṣẹlẹ

Kilasi gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

Iṣẹlẹ Apejuwe
sunmo Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn closeapẹẹrẹ ọna ti a npe ni.
ni pipade Iṣẹlẹ yii jẹ ina nigbati itaniji ti wa ni pipade (yoo duro fun awọn iyipada css lati pari).
  1. $ ( '#mi-ititaniji' ). ( 'ni pipade' , iṣẹ () {
  2. // se nkan…
  3. })

Awọn lilo apẹẹrẹ

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Stateful

Fikun -un data-loading-text="Loading..."lati lo ipo ikojọpọ lori bọtini kan.

  1. <button type = "bọtini" kilasi = "btn btn-primary" data-loading-text = "Ṣiṣe ikojọpọ..." > Ipo ikojọpọ </button>

Yiyi ẹyọkan

Fikun -un data-toggle="button"lati mu yiyi ṣiṣẹ lori bọtini ẹyọkan.

  1. <button type = "bọtini" kilasi = "btn btn-primary" data-toggle = "bọtini" > Yiyi ẹyọkan </button>

Apoti ayẹwo

Ṣafikun data-toggle="buttons-checkbox"fun aṣa aṣayẹwo toggling lori ẹgbẹ btn.

  1. <div class = "btn-group" data-toggle = "bọtini-checkbox" >
  2. <button type = "bọtini" kilasi = "btn btn-primary" > Osi </button>
  3. <button type = "bọtini" kilasi = "btn btn-primary" > Aarin </button>
  4. <button type = "bọtini" kilasi = "btn btn-primary" > Ọtun </button>
  5. </div>

Redio

Fikun -un data-toggle="buttons-radio"fun yiyi ara redio lori ẹgbẹ btn.

  1. <div class = "btn-group" data-toggle = "awọn bọtini-redio" >
  2. <button type = "bọtini" kilasi = "btn btn-primary" > Osi </button>
  3. <button type = "bọtini" kilasi = "btn btn-primary" > Aarin </button>
  4. <button type = "bọtini" kilasi = "btn btn-primary" > Ọtun </button>
  5. </div>

Lilo

Mu awọn bọtini ṣiṣẹ nipasẹ JavaScript:

  1. $ ( '.nav-tabs' ). bọtini ()

Siṣamisi

Awọn abuda data jẹ pataki si ohun itanna bọtini. Ṣayẹwo koodu apẹẹrẹ ni isalẹ fun awọn oriṣi isamisi oriṣiriṣi.

Awọn aṣayan

Ko si

Awọn ọna

$()bọtini ('yipo')

Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

Efeti sile! O le mu yiyi pada laifọwọyi ti bọtini kan nipa lilo data-toggleabuda naa.
  1. <bọtini iru = "bọtini" kilasi = "btn" data-toggle = "bọtini" > </button>

$().bọtini('ikojọpọ')

Ṣeto ipo bọtini si ikojọpọ - mu bọtini ṣiṣẹ ati yi ọrọ pada si ọrọ ikojọpọ. Ọrọ ikojọpọ yẹ ki o ṣalaye lori bọtini bọtini ni lilo abuda data data-loading-text.

  1. <button type = "bọtini" kilasi = "btn" data-loading-text = "ikojọpọ nkan..." > ... </button>
Efeti sile! Firefox n tẹsiwaju ni ipo alaabo kọja awọn ẹru oju-iwe . Ilana fun eyi ni lati lo autocomplete="off".

$().bọtini('tunto')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba.

$().bọtini (okun)

Tun ipo bọtini atunto - yi ọrọ pada si eyikeyi ipo ọrọ asọye data.

  1. <button type = "bọtini" kilasi = "btn" data-complete-text = "pari!" > ... </bọtini>
  2. <akosile>
  3. $ ( '.btn' ). bọtini ( 'pari' )
  4. </script>

Nipa

Gba awọn aza ipilẹ ati atilẹyin to rọ fun awọn paati ikojọpọ bi accordions ati lilọ kiri.

* Nilo ohun itanna Awọn iyipada lati wa pẹlu.

Accordion apẹẹrẹ

Lilo ohun itanna idapọ, a kọ ẹrọ ailorukọ ara accordion ti o rọrun:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 Ikooko oṣupa officia aute, ti kii cupidatat skateboard dolor brunch. Ounjẹ ikoledanu quinoa nesciunt laborum eiusmod. Brunch 3 Ikooko oṣupa tempor, sunt aliqua fi kan eye lori o squid nikan-Oti kofi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft ọti labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher igbakeji lomo. Leggings occaecat iṣẹ ọti oko-to-tabili, aise Denimu darapupo synth nesciunt o jasi ti ko ba ti gbọ ti wọn accusamus laala alagbero 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. Collapsible Ẹgbẹ Nkan # 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" kilasi = "accordion-body Collapse ni" >
  9. <div class = "accordion-inner" >
  10. Animu 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 Ẹgbẹ Nkan #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" kilasi = "accordion-body Collapse" >
  21. <div class = "accordion-inner" >
  22. Animu pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

O tun le lo ohun itanna laisi ami ami accordion. Ṣe bọtini kan yi iyipada ti o pọ si ati fifọ ti nkan miiran.

  1. <button type = "bọtini" kilasi = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. o rọrun collapsible
  3. </bọtini>
  4.  
  5. <div id = "demo" kilasi = "kolula sinu" > </div>

Lilo

Nipasẹ awọn abuda data

Kan ṣafikun data-toggle="collapse"ati ipin data-targetkan lati fi iṣakoso laifọwọyi ti nkan kan ti o le kọlu. Ẹya naa data-targetgba oluyan css kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in.

Lati ṣafikun iṣakoso ẹgbẹ bi accordion si iṣakoso ikojọpọ, ṣafikun abuda data naa data-parent="#selector". Tọkasi demo lati wo eyi ni iṣe.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

  1. $ ( ".collapse" ). ṣubu ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-parent="".

Oruko iru aiyipada apejuwe
obi yiyan eke Ti o ba yan lẹhinna gbogbo awọn eroja ti o le kojọpọ labẹ obi ti a ti sọ ni yoo wa ni pipade nigbati ohun kan ti o le kọlu ba han. (bii iru iwa accordion ibile)
yipada boolian ooto Yipada eroja ti o le kolu lori ẹbẹ

Awọn ọna

.collapse(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

  1. $ ( '#myCollapsible' ). ṣubu ({
  2. toggle : iro
  3. })

.kolapse('yii')

Yi eroja ti o le kolu pada si ifihan tabi pamọ.

.kolapse('ifihan')

Ṣe afihan eroja ti o le ṣubu.

.kolapse('tọju')

Ìbòmọlẹ ohun kan collapsible.

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

Iṣẹlẹ Apejuwe
ifihan Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han Iṣẹlẹ yii jẹ ina nigba ti a ti jẹ ki nkan idaruku kan han si olumulo (yoo duro fun awọn iyipada css lati pari).
tọju Yi iṣẹlẹ ti wa ni kuro lenu ise lẹsẹkẹsẹ nigbati awọn hideọna ti a ti a npe ni.
farasin Iṣẹlẹ yii jẹ ina nigba ti ohun elo iṣubu kan ti farapamọ lati ọdọ olumulo (yoo duro fun awọn iyipada css lati pari).
  1. $ ( '#myCollapsible' ). lori ( 'farasin' , iṣẹ () {
  2. // se nkan…
  3. })

Apeere

Ipilẹ kan, ohun itanna ti o gbooro ni irọrun fun ṣiṣẹda ni iyara awọn oriṣi ti o wuyi pẹlu titẹ ọrọ fọọmu eyikeyi.

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

Iwọ yoo fẹ lati ṣeto autocomplete="off"lati yago fun awọn akojọ aṣayan aṣawakiri aiyipada lati han lori sisọ silẹ iru-ori Bootstrap.


Lilo

Nipasẹ awọn abuda data

Ṣafikun awọn abuda data lati forukọsilẹ nkan kan pẹlu iṣẹ ṣiṣe oriṣi bi o ṣe han ninu apẹẹrẹ loke.

Nipasẹ JavaScript

Pe typehead pẹlu ọwọ pẹlu:

  1. $ ( '.typehead' ). oriṣi ori ()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-source="".

Oruko iru aiyipada apejuwe
orisun orun, iṣẹ [] Orisun data lati beere lodi si. O le jẹ akojọpọ awọn okun tabi iṣẹ kan. Iṣẹ naa ti kọja awọn ariyanjiyan meji, queryiye ninu aaye titẹ sii ati processipe pada. Iṣẹ naa le ṣee lo ni irẹpọ nipa mimu-pada sipo orisun data taara tabi asynchronously nipasẹ processariyanjiyan nikan ti ipe pada.
awọn ohun kan nọmba 8 Nọmba ti o pọju awọn ohun kan lati ṣafihan ninu sisọ silẹ.
Ipari min nọmba 1 Gigun ohun kikọ to kere julọ nilo ṣaaju ṣiṣe awọn didaba adaṣe pipe
baramu iṣẹ irú insensitive Ọna ti a lo lati pinnu boya ibeere kan ba nkan kan mu. Gba ariyanjiyan ẹyọkan, itemlodi si eyiti lati ṣe idanwo ibeere naa. Wọle si ibeere lọwọlọwọ pẹlu this.query. Da boolean pada trueti ibeere ba jẹ baramu.
lẹsẹsẹ iṣẹ baramu gangan,
ọran ifarabalẹ,
ọran aibikita
Ọna ti a lo lati to awọn abajade pipe laifọwọyi. Gba ariyanjiyan ẹyọkan itemsati pe o ni aaye ti apẹẹrẹ iruhead. Tọkasi ibeere lọwọlọwọ pẹlu this.query.
imudojuiwọn iṣẹ pada ti a ti yan ohun kan Ọna ti a lo lati da ohun ti o yan pada. Gba kan nikan ariyanjiyan, awọn itemati ki o ni awọn dopin ti iruhead apeere.
afihan iṣẹ ṣe afihan gbogbo awọn ibaamu aiyipada Ọna ti a lo lati ṣe afihan awọn abajade adaṣe. Gba ariyanjiyan ẹyọkan itemati pe o ni aaye ti apẹẹrẹ iruhead. O yẹ ki o pada html.

Awọn ọna

.typehead(awọn aṣayan)

Ti bẹrẹ titẹ sii pẹlu ori oriṣi.

Apeere

Subnavigation ti o wa ni apa osi jẹ demo ifiwe ti ohun itanna affix.


Lilo

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi affix si eyikeyi eroja, kan ṣafikun data-spy="affix"si ipin ti o fẹ ṣe amí lori. Lẹhinna lo awọn aiṣedeede lati ṣalaye nigbati o ba yipada pinning ti nkan kan tan ati pipa.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Efeti sile! O gbọdọ ṣakoso awọn ipo ti a pinned ano ati awọn ihuwasi ti awọn oniwe-pato obi. Ipo jẹ iṣakoso nipasẹ affix, affix-top, ati affix-bottom . Ranti lati ṣayẹwo fun obi ti o le ṣubu nigbati ifisi ba bẹrẹ bi o ṣe n yọ akoonu kuro lati ṣiṣan deede ti oju-iwe naa.

Nipasẹ JavaScript

Pe ohun itanna affix nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset-top="200".

Oruko iru aiyipada apejuwe
aiṣedeede nọmba | iṣẹ | nkan 10 Awọn piksẹli lati aiṣedeede lati iboju nigbati o ṣe iṣiro ipo ti yi lọ. Ti nọmba kan ba pese, aiṣedeede naa yoo lo ni oke ati awọn itọnisọna osi. Lati tẹtisi itọsọna kan, tabi awọn aiṣedeede alailẹgbẹ pupọ, kan pese ohun kan offset: { x: 10 }. Lo iṣẹ kan nigbati o nilo lati pese aiṣedeede ni agbara (wulo fun diẹ ninu awọn aṣa idahun).