Trosolwg

Unigol neu wedi'i lunio

Gellir cynnwys ategion yn unigol (gan ddefnyddio *.jsffeiliau unigol Bootstrap), neu i gyd ar unwaith (gan ddefnyddio bootstrap.jsneu'r miniified bootstrap.min.js).

Gan ddefnyddio'r JavaScript a luniwyd

Mae'r ddau bootstrap.jsac bootstrap.min.jsyn cynnwys yr holl ategion mewn un ffeil. Cynhwyswch un yn unig.

Dibyniaethau ategyn

Mae rhai ategion a chydrannau CSS yn dibynnu ar ategion eraill. Os ydych chi'n cynnwys ategion yn unigol, gwnewch yn siŵr eich bod chi'n gwirio am y dibyniaethau hyn yn y dogfennau. Sylwch hefyd fod pob ategyn yn dibynnu ar jQuery (mae hyn yn golygu bod yn rhaid cynnwys jQuery cyn y ffeiliau ategyn). Ymgynghorwch â'nbower.json i weld pa fersiynau o jQuery sy'n cael eu cefnogi.

Priodoleddau data

Gallwch ddefnyddio holl ategion Bootstrap trwy'r API marcio yn unig heb ysgrifennu un llinell o JavaScript. Dyma API o'r radd flaenaf Bootstrap a dylai fod eich ystyriaeth gyntaf wrth ddefnyddio ategyn.

Wedi dweud hynny, mewn rhai sefyllfaoedd gall fod yn ddymunol i ddiffodd y swyddogaeth hon. Felly, rydym hefyd yn darparu'r gallu i analluogi'r API priodoledd data trwy ddadrwymo'r holl ddigwyddiadau ar y ddogfen sydd â gofod data-api. Mae hyn yn edrych fel hyn:

$(document).off('.data-api')

Fel arall, i dargedu ategyn penodol, dylech gynnwys enw'r ategyn fel gofod enw ynghyd â gofod enw data-api fel hyn:

$(document).off('.alert.data-api')

Dim ond un ategyn fesul elfen trwy briodoleddau data

Peidiwch â defnyddio priodoleddau data o ategion lluosog ar yr un elfen. Er enghraifft, ni all botwm gael cyngor a newid moddol. I gyflawni hyn, defnyddiwch elfen lapio.

API rhaglennol

Rydyn ni hefyd yn credu y dylech chi allu defnyddio'r holl ategion Bootstrap trwy'r API JavaScript yn unig. Mae pob API cyhoeddus yn ddulliau sengl, cadwynadwy, ac yn dychwelyd y casgliad y gweithredwyd arno.

$('.btn.danger').button('toggle').addClass('fat')

Dylai pob dull dderbyn gwrthrych opsiynau dewisol, llinyn sy'n targedu dull penodol, neu ddim byd (sy'n cychwyn ategyn ag ymddygiad diofyn):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Mae pob ategyn hefyd yn datgelu ei adeiladwr amrwd ar Constructorbriodwedd: $.fn.popover.Constructor. Os hoffech gael enghraifft ategyn penodol, adalw ef yn uniongyrchol o elfen: $('[rel="popover"]').data('popover').

Gosodiadau diofyn

Gallwch newid y gosodiadau diofyn ar gyfer ategyn trwy addasu Constructor.DEFAULTSgwrthrych yr ategyn:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Dim gwrthdaro

Weithiau mae angen defnyddio ategion Bootstrap gyda fframweithiau UI eraill. O dan yr amgylchiadau hyn, gall gwrthdrawiadau gofod enwau ddigwydd o bryd i'w gilydd. Os bydd hyn yn digwydd, gallwch chi alw .noConflictar yr ategyn yr ydych am ddychwelyd ei werth.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Digwyddiadau

Mae Bootstrap yn darparu digwyddiadau wedi'u teilwra ar gyfer gweithredoedd unigryw'r mwyafrif o ategion. Yn gyffredinol, daw’r rhain ar ffurf berfenw a chyfranogiad y gorffennol – lle mae’r berfenw (ex. show) yn cael ei sbarduno ar ddechrau digwyddiad, a’i ffurf cyfranogwr yn y gorffennol (ex. shown) yn cael ei sbarduno wrth gwblhau gweithred.

O 3.0.0 ymlaen, mae gofod enwau ar bob digwyddiad Bootstrap.

Mae pob digwyddiad berfenw yn darparu preventDefaultymarferoldeb. Mae hyn yn rhoi'r gallu i atal cyflawni gweithred cyn iddo ddechrau.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Rhifau fersiynau

Gellir cyrchu fersiwn pob un o ategion jQuery Bootstrap trwy VERSIONeiddo adeiladwr yr ategyn. Er enghraifft, ar gyfer yr ategyn cyngor offer:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Dim wrth gefn arbennig pan fydd JavaScript yn anabl

Nid yw ategion Bootstrap yn disgyn yn ôl yn arbennig o osgeiddig pan fydd JavaScript wedi'i analluogi. Os ydych chi'n poeni am brofiad y defnyddiwr yn yr achos hwn, defnyddiwch <noscript>i egluro'r sefyllfa (a sut i ail-alluogi JavaScript) i'ch defnyddwyr, a / neu ychwanegu eich wrth gefn personol eich hun.

Llyfrgelloedd trydydd parti

Nid yw Bootstrap yn cefnogi llyfrgelloedd JavaScript trydydd parti yn swyddogol fel Prototeip neu jQuery UI. Er gwaethaf .noConflictdigwyddiadau a bylchau enwau, efallai y bydd problemau cydnawsedd y bydd angen i chi eu trwsio ar eich pen eich hun.

Transitions transition.js

Ynglŷn â thrawsnewidiadau

Ar gyfer effeithiau pontio syml, cynhwyswch transition.jsunwaith ochr yn ochr â'r ffeiliau JS eraill. Os ydych chi'n defnyddio'r ysgrifbinedig (neu finified) bootstrap.js, nid oes angen cynnwys hyn - mae yno eisoes.

Beth sydd y tu mewn

Mae Transition.js yn gynorthwyydd sylfaenol ar gyfer transitionEnddigwyddiadau yn ogystal ag efelychydd pontio CSS. Fe'i defnyddir gan yr ategion eraill i wirio am gefnogaeth trawsnewid CSS ac i ddal trawsnewidiadau crog.

Analluogi trawsnewidiadau

Gellir analluogi trawsnewidiadau yn fyd-eang gan ddefnyddio'r pyt JavaScript canlynol, y mae'n rhaid iddo ddod ar ôl transition.js(neu bootstrap.js, bootstrap.min.jsyn ôl y digwydd) lwytho:

$.support.transition = false

moddau moddol.js

Mae moddau yn symlach, ond yn hyblyg, yn awgrymiadau deialog gyda'r ymarferoldeb gofynnol a'r rhagosodiadau smart.

Nid yw moddau agored lluosog yn cael eu cefnogi

Gwnewch yn siŵr nad ydych chi'n agor modd tra bod un arall yn dal i'w weld. Mae dangos mwy nag un moddol ar y tro yn gofyn am god personol.

Lleoliad marcio moddol

Ceisiwch osod cod HTML moddol bob amser mewn safle lefel uchaf yn eich dogfen er mwyn osgoi cydrannau eraill sy'n effeithio ar ymddangosiad a/neu ymarferoldeb y moddol.

Cafeatau dyfeisiau symudol

Mae rhai cafeatau ynghylch defnyddio moddau ar ddyfeisiau symudol. Gweler ein dogfennau cymorth porwr am fanylion.

Oherwydd sut mae HTML5 yn diffinio ei semanteg, nid yw'r autofocuspriodoledd HTML yn cael unrhyw effaith mewn moddau Bootstrap. I gyflawni'r un effaith, defnyddiwch JavaScript arferol:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Enghreifftiau

Enghraifft statig

Moddol wedi'i rendro gyda phennawd, corff, a set o gamau gweithredu yn y troedyn.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo byw

Toglo moddol trwy JavaScript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Gwneud moddau hygyrch

Byddwch yn siwr i ychwanegu role="dialog"a aria-labelledby="...", gan gyfeirio at y teitl moddol, i .modal, ac role="document"i'r .modal-dialogei hun.

Yn ogystal, gallwch roi disgrifiad o'ch deialog moddol gydag aria-describedbyon .modal.

Mewnosod fideos YouTube

Mae gwreiddio fideos YouTube mewn moddau yn gofyn am JavaScript ychwanegol nid yn Bootstrap i atal chwarae a mwy yn awtomatig. Gweler y post defnyddiol Stack Overflow hwn am ragor o wybodaeth.

Meintiau dewisol

Mae gan foddau ddau faint dewisol, sydd ar gael trwy ddosbarthiadau addasu i'w gosod ar .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Dileu animeiddiad

Ar gyfer modiwlau sy'n ymddangos yn syml yn hytrach na diflannu i'r golwg, tynnwch y .fadedosbarth o'ch marc moddol.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Defnyddio'r system grid

I fanteisio ar y system grid Bootstrap o fewn moddol, dim ond nyth .rows o fewn y .modal-bodyac yna defnyddio'r dosbarthiadau system grid arferol.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Oes gennych chi griw o fotymau sydd i gyd yn sbarduno'r un modd, gyda chynnwys ychydig yn wahanol? Defnyddio event.relatedTargeta phriodoleddau HTMLdata-* ( trwy jQuery o bosibl ) i amrywio cynnwys y moddol yn dibynnu ar ba fotwm y cliciwyd arno. Gweler y dogfennau Digwyddiadau Modal am fanylion ar relatedTarget,

...mwy o fotymau...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Defnydd

Mae'r ategyn moddol yn toglo'ch cynnwys cudd yn ôl y galw, trwy briodoleddau data neu JavaScript. Mae hefyd yn ychwanegu .modal-openat yr <body>ymddygiad sgrolio rhagosodedig i ddiystyru ac yn cynhyrchu a .modal-backdropi ddarparu ardal glicio ar gyfer diystyru moddau a ddangosir wrth glicio y tu allan i'r moddol.

Trwy briodoleddau data

Ysgogi moddol heb ysgrifennu JavaScript. Gosod data-toggle="modal"ar elfen rheolydd, fel botwm, ynghyd â data-target="#foo"neu href="#foo"i dargedu moddol penodol i toglo.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Trwy JavaScript

Ffoniwch foddol gydag id myModalgydag un llinell o JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-backdrop="".

Enw math rhagosodedig disgrifiad
cefndir boolean neu'r llinyn'static' gwir Yn cynnwys elfen foddol-cefndir. Fel arall, nodwch staticar gyfer cefndir nad yw'n cau'r modd wrth glicio.
bysellfwrdd boolaidd gwir Yn cau'r modd pan fydd allwedd dianc yn cael ei wasgu
dangos boolaidd gwir Yn dangos y moddol wrth gychwyn.
anghysbell llwybr ffug

Mae'r opsiwn hwn wedi'i anghymeradwyo ers v3.3.0 ac mae wedi'i ddileu yn v4. Yn lle hynny, rydym yn argymell defnyddio templedi ochr y cleient neu fframwaith rhwymo data, neu ffonio jQuery.load eich hun.

Os darperir URL o bell, bydd cynnwys yn cael ei lwytho un tro trwy loadddull jQuery a'i chwistrellu i'r .modal-contentdiv. Os ydych chi'n defnyddio'r data-api, gallwch chi ddefnyddio'r hrefpriodoledd i nodi'r ffynhonnell bell. Dangosir enghraifft o hyn isod:

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

Dulliau

Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object.

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

Toglo moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei ddangos neu ei guddioshown.bs.modal ( hy cyn i'r hidden.bs.modaldigwyddiad ddigwydd).

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

Yn agor moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei ddangos (hy cyn i'r shown.bs.modaldigwyddiad ddigwydd).

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

Yn cuddio moddol â llaw. Yn dychwelyd i'r galwr cyn i'r moddol gael ei guddio (hy cyn i'r hidden.bs.modaldigwyddiad ddigwydd).

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

Yn ail-addasu lleoliad y modd i wrthweithio bar sgrolio rhag ofn y dylai un ymddangos, a fyddai'n gwneud y naid moddol i'r chwith.

Dim ond ei angen pan fydd uchder y modd newid tra ei fod ar agor.

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

Digwyddiadau

Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.

Mae pob digwyddiad moddol yn cael ei danio at y moddol ei hun (hy yn y <div class="modal">).

Math o Ddigwyddiad Disgrifiad
moddol.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft. Os caiff ei achosi gan glic, mae'r elfen a gliciwyd ar gael fel relatedTargeteiddo'r digwyddiad.
dangos.bs.modal Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). Os caiff ei achosi gan glic, mae'r elfen a gliciwyd ar gael fel relatedTargeteiddo'r digwyddiad.
cuddio.bs.modal Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cudd.bs.modal Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
llwythog.bs.modal Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi llwytho cynnwys gan ddefnyddio'r remoteopsiwn.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Ychwanegwch gwymplenni at bron unrhyw beth gyda'r ategyn syml hwn, gan gynnwys y bar llywio, y tabiau a'r tabledi.

O fewn navbar

O fewn tabledi

Trwy briodoleddau data neu JavaScript, mae'r ategyn cwymplen yn toglo cynnwys cudd (cwymplenni) trwy doglo'r .opendosbarth ar yr eitem rhestr rhieni.

Ar ddyfeisiau symudol, mae agor cwymplen yn ychwanegu .dropdown-backdropardal tap ar gyfer cau dewislenni wrth dapio y tu allan i'r ddewislen, gofyniad am gefnogaeth iOS iawn. Mae hyn yn golygu bod angen tap ychwanegol ar ffôn symudol i newid o gwymplen agored i gwymplen wahanol.

Nodyn: Dibynnir ar y data-toggle="dropdown"priodoledd ar gyfer cau dewislenni ar lefel cais, felly mae'n syniad da ei ddefnyddio bob amser.

Trwy briodoleddau data

Ychwanegu data-toggle="dropdown"at ddolen neu fotwm i doglo cwymplen.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

I gadw URLs yn gyfan gyda botymau cyswllt, defnyddiwch y data-targetpriodoledd yn lle href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Trwy JavaScript

Ffoniwch y cwymplenni trwy JavaScript:

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

data-toggle="dropdown"dal yn ofynnol

Ni waeth a ydych chi'n ffonio'ch cwymplen trwy JavaScript neu yn lle hynny'n defnyddio'r data-api, data-toggle="dropdown"mae'n ofynnol bob amser i fod yn bresennol ar elfen sbardun y gwymplen.

Dim

Toglo'r gwymplen o far llywio penodol neu dabl llywio.

Mae pob digwyddiad cwymplen yn cael ei danio at yr .dropdown-menuelfen rhiant.

Mae gan bob digwyddiad cwymplen relatedTargeteiddo, y mae ei werth yn elfen angor toggling.

Math o Ddigwyddiad Disgrifiad
cwymplen.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan elwir y dull enghraifft sioe.
dangosir.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio pan fydd y cwymplen wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau).
cuddio.bs.dropdown Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y dull cuddfan wedi'i alw.
cudd.bs.dropdown Mae'r digwyddiad hwn yn cael ei danio pan fydd y gwymplen wedi gorffen cael ei chuddio rhag y defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Enghraifft yn navbar

Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio. Sgroliwch yr ardal o dan y bar llywio a gwyliwch y newid dosbarth gweithredol. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd.

@braster

Ad leggings keytar, brunch id art parti dolor laboure. Pitchfork yr enim lo-fi cyn iddynt werthu allan qui. Hawliau beic fferm-i-bwrdd Tumblr beth bynnag. Anim keffiyeh carles cardigan. Bwth lluniau Velit seitan mcsweeney 3 wolf moon irure. Siwmper Cosby lomo jean siorts, hwdi williamsburg minim qui mae'n debyg nad ydych chi wedi clywed amdanyn nhw et cardigan trust fund culpa biodiesel wes anderson esthetig. Nihil tattooed accusamus, cred eironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Sgrialu mwstash Veniam marfa, adipisicing fugiat velit pitchfork barf. Freegan barf aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tryc bwyd siwmper Tattooed cosby, finyl quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles anesthetig ymarfer corff quis gentrify. Brooklyn adipisicing cwrw crefft vice keytar deserunt.

un

Occaecat comodo aliqua delectus. Map cwrw crefft deserunt sgrialu ea. Hawliau beic Lomo adipisicing banh mi, velit ea sunt lefel nesaf locavore un-darddiad coffi yn magna veniam. Uchel bywyd id finyl, adlais parc consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, cynaliadwy delectus consectetur fanny pack iphone.

dwy

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, bag neges culpa marfa beth bynnag delectus lori bwyd. Sapiente synth id assumenda. Locavore sed helvetica cliche eironi, cath daranau mae'n debyg nad ydych chi wedi clywed amdanyn nhw consequat hwdi di-glwten lo-fi fap aliquip. Labore elit placeat cyn iddynt werthu allan, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan crefft cwrw seitan velit readymade. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco taranau.

Defnydd

Angen Bootstrap nav

Ar hyn o bryd mae Scrollspy yn gofyn am ddefnyddio cydran llywio Bootstrap i amlygu cysylltiadau gweithredol yn iawn.

Angen targedau ID y gellir eu datrys

Rhaid i ddolenni Navbar gael targedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth yn y DOM fel <div id="home"></div>.

:visibleAnwybyddir elfennau nad ydynt yn darged

Bydd elfennau targed nad ydynt yn :visibleunol â jQuery yn cael eu hanwybyddu ac ni fydd eu heitemau llywio cyfatebol byth yn cael eu hamlygu.

Mae angen lleoliad cymharol

Ni waeth y dull gweithredu, scrollspy yn gofyn am y defnydd o position: relative;ar yr elfen rydych yn ysbïo ar. Yn y rhan fwyaf o achosion dyma'r <body>. Wrth sgrolio ar elfennau heblaw'r <body>, sicrhewch fod gennych heightset a'i overflow-y: scroll;gymhwyso.

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad ysbïo sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-spy="scroll"at yr elfen rydych chi am sbïo arno (yn fwyaf nodweddiadol dyma fyddai'r <body>). Yna ychwanegwch y data-targetpriodoledd gyda'r ID neu ddosbarth y rhiant elfen o unrhyw .navgydran Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Trwy JavaScript

Ar ôl ychwanegu position: relative;eich CSS i mewn, ffoniwch y scrollspy trwy JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Dulliau

.scrollspy('refresh')

Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset="".

Enw math rhagosodedig disgrifiad
gwrthbwyso rhif 10 Picseli i'w gwrthbwyso o'r brig wrth gyfrifo safle'r sgrôl.

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
activate.bs.scrollspy Mae'r digwyddiad hwn yn tanio pryd bynnag y bydd eitem newydd yn cael ei actifadu gan y sgroliwr.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabs togladwy tab.js

Tabiau enghreifftiol

Ychwanegu ymarferoldeb tab cyflym a deinamig i drosglwyddo trwy baneli o gynnwys lleol, hyd yn oed trwy gwymplenni. Ni chefnogir tabiau nythu.

Denim amrwd mae'n debyg nad ydych wedi clywed amdanynt jean siorts Austin. Nesciunt tofu stumptown aliqua, retro synth meistr glanhau. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit cigydd retro keffiyeh synth dreamcatcher. Siwmper Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, cigydd 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.

Yn ymestyn llywio tabiau

Mae'r ategyn hwn yn ymestyn y gydran llywio â thabiau i ychwanegu ardaloedd tabladwy.

Defnydd

Galluogi tabiau tabadwy trwy JavaScript (mae angen actifadu pob tab yn unigol):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Gallwch chi actifadu tabiau unigol mewn sawl ffordd:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Marcio

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw JavaScript trwy nodi data-toggle="tab"neu data-toggle="pill"ar elfen yn unig. Bydd ychwanegu'r nava nav-tabsdosbarthiadau i'r tab ulyn cymhwyso arddull tab Bootstrap , tra'n ychwanegu'r nava nav-pillsbydd dosbarthiadau yn defnyddio steilio bilsen .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Effaith pylu

I wneud i dabiau bylu i mewn, ychwanegwch .fadeat bob .tab-pane. Rhaid i'r cwarel tab cyntaf hefyd .inwneud y cynnwys cychwynnol yn weladwy.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Dulliau

$().tab

Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai nod cynhwysydd data-targetneu hrefnod targedu yn y DOM. Yn yr enghreifftiau uchod, y tabiau yw'r <a>s gyda data-toggle="tab"phriodoleddau.

.tab('show')

Yn dewis y tab a roddir ac yn dangos ei gynnwys cysylltiedig. Mae unrhyw dab arall a ddewiswyd yn flaenorol yn mynd heb ei ddewis ac mae ei gynnwys cysylltiedig wedi'i guddio. Yn dychwelyd i'r galwr cyn i'r cwarel tab gael ei ddangos (hy cyn i'r shown.bs.tabdigwyddiad ddigwydd).

$('#someTab').tab('show')

Digwyddiadau

Wrth ddangos tab newydd, mae'r digwyddiadau'n tanio yn y drefn ganlynol:

  1. hide.bs.tab(ar y tab gweithredol cyfredol)
  2. show.bs.tab(ar y tab i'w ddangos)
  3. hidden.bs.tab(ar y tab gweithredol blaenorol, yr un un ag ar gyfer y hide.bs.tabdigwyddiad)
  4. shown.bs.tab(ar y tab newydd-weithredol sydd newydd ei ddangos, yr un un ag ar gyfer y show.bs.tabdigwyddiad)

Os nad oedd unrhyw dab eisoes yn weithredol, yna ni fydd y hide.bs.taba hidden.bs.tabdigwyddiadau yn cael eu tanio.

Math o Ddigwyddiad Disgrifiad
dangos.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
dangos.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
cuddio.bs.tab Mae'r digwyddiad hwn yn tanio pan fydd tab newydd yn cael ei ddangos (ac felly mae'r tab gweithredol blaenorol i'w guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol cyfredol a'r tab newydd cyn bo hir, yn y drefn honno.
cudd.bs.tab Mae'r digwyddiad hwn yn tanio ar ôl i dab newydd gael ei ddangos (ac felly mae'r tab gweithredol blaenorol wedi'i guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol blaenorol a'r tab gweithredol newydd, yn y drefn honno.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Cynghorion offer tooltip.js

Wedi'i ysbrydoli gan yr ategyn jQuery.tipsy rhagorol a ysgrifennwyd gan Jason Frame; Mae Tooltips yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio CSS3 ar gyfer animeiddiadau, a phriodoleddau data ar gyfer storio teitlau lleol.

Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.

Enghreifftiau

Hofran dros y dolenni isod i weld awgrymiadau offer:

Pants dynn lefel nesaf keffiyeh mae'n debyg nad ydych wedi clywed amdanynt. Photo bwth barf llythrenwasg denim amrwd bag negeseuwr fegan stumptown. Mae gan seitan fferm-i-bwrdd, dillad quinoa cynaliadwy mcsweeney quinoa 8-bit Americanaidd siambr finyl terry richardson. Barf stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, pedwar loko mcsweeney's cleanse vegan chambray. Mae crefftwr eironig iawn beth bynnag keytar , scenester fferm-i-bwrdd Banky Austin twitter trin freegan cred amrwd denim un-tarddiad feirol coffi.

Cyngor statig

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

Pedwar cyfeiriad

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Swyddogaeth optio i mewn

Am resymau perfformiad, mae'r api data Tooltip a Popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .

Un ffordd o gychwyn pob cyngor offer ar dudalen fyddai eu dewis yn ôl eu data-togglepriodoledd:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Defnydd

Mae'r ategyn tooltip yn cynhyrchu cynnwys a marcio yn ôl y galw, ac yn ddiofyn yn gosod awgrymiadau offer ar ôl eu helfen sbarduno.

Sbardunwch y cyngor trwy JavaScript:

$('#example').tooltip(options)

Marcio

Priodoledd yn unig yw'r marcio gofynnol ar gyfer cyngor offer dataac titlear yr elfen HTML rydych chi'n dymuno cael cyngor. Mae'r marcio a gynhyrchir o gyngor offer braidd yn syml, er bod angen safle (yn ddiofyn, wedi'i osod topgan yr ategyn).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Dolenni aml-linell

Weithiau rydych chi eisiau ychwanegu cyngor cymorth i hyperddolen sy'n lapio llinellau lluosog. Ymddygiad rhagosodedig yr ategyn cyngor offer yw ei ganoli'n llorweddol ac yn fertigol. Ychwanegwch white-space: nowrap;at eich angorau i osgoi hyn.

Mae angen gosodiadau arbennig ar gyfer cynghorion offer mewn grwpiau botwm, grwpiau mewnbwn a thablau

Wrth ddefnyddio cynghorion offer ar elfennau o fewn a .btn-groupneu .input-group, neu ar elfennau sy'n gysylltiedig â thabl ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), bydd yn rhaid i chi nodi'r opsiwn container: 'body'(a ddogfennir isod) er mwyn osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a/ neu golli ei gorneli crwn pan fydd y cyngor yn cael ei sbarduno).

Peidiwch â cheisio dangos awgrymiadau offer ar elfennau cudd

Bydd galw $(...).tooltip('show')pan fydd yr elfen darged display: none;yn achosi i'r cyngor gael ei leoli'n anghywir.

Cynghorion cymorth hygyrch ar gyfer defnyddwyr bysellfwrdd a thechnoleg gynorthwyol

Ar gyfer defnyddwyr sy'n llywio gyda bysellfwrdd, ac yn enwedig defnyddwyr technolegau cynorthwyol, dim ond at elfennau sy'n canolbwyntio ar y bysellfwrdd fel dolenni, rheolyddion ffurf, neu unrhyw elfen fympwyol â phriodoledd y dylech ychwanegu awgrymiadau tabindex="0".

Mae awgrymiadau offer ar elfennau anabl yn gofyn am elfennau lapio

I ychwanegu cyngor offer at a disabledneu .disabledelfen, rhowch yr elfen y tu mewn i a <div>a chymhwyso'r cyngor i hwnnw <div>yn lle.

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw Math Diofyn Disgrifiad
animeiddiad boolaidd gwir Cymhwyso trawsnewidiad pylu CSS i'r cyngor
cynhwysydd llinyn | ffug ffug

Yn atodi'r cyngor i elfen benodol. Enghraifft: container: 'body'. Mae'r opsiwn hwn yn arbennig o ddefnyddiol gan ei fod yn caniatáu ichi osod y domen offer yn llif y ddogfen ger yr elfen sbarduno - a fydd yn atal y cyngor rhag arnofio i ffwrdd o'r elfen sbarduno yn ystod newid maint ffenestr.

oedi rhif | gwrthrych 0

Oedi wrth ddangos a chuddio'r cyngor (ms) - nid yw'n berthnasol i'r math o sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { "show": 500, "hide": 100 }

html boolaidd ffug Mewnosod HTML yn y cyngor. Os yw'n ffug, textbydd dull jQuery yn cael ei ddefnyddio i fewnosod cynnwys yn y DOM. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'top'

Sut i leoli'r cyngor - top | gwaelod | chwith | dde | auto.
Pan nodir "auto", bydd yn ailgyfeirio'r cyngor yn ddeinamig. Er enghraifft, os yw'r lleoliad yn "chwith yn awtomatig", bydd y cyngor yn dangos i'r chwith pan fo modd, fel arall bydd yn arddangos i'r dde.

Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM cyngor offer fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r thiscyd-destun wedi'i osod i enghraifft y cyngor.

detholwr llinyn ffug Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i gael awgrymiadau offer wedi'u hychwanegu. Gweler hyn ac enghraifft llawn gwybodaeth .
templed llinyn '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Sylfaen HTML i'w ddefnyddio wrth greu'r cyngor.

Bydd y cynghorion offer yn titlecael eu chwistrellu i mewn i'r .tooltip-inner.

.tooltip-arrowbydd yn dod yn saeth y cyngor.

Dylai'r elfen lapio allanol fod â'r .tooltipdosbarth.

teitl llinyn | swyddogaeth ''

Gwerth teitl diofyn os titlenad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r tip offer ynghlwm wrthi.

sbardun llinyn 'ffocws hofran' Sut mae cyngor yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manualni ellir ei gyfuno ag unrhyw sbardun arall.
gwylfa llinyn | gwrthrych | swyddogaeth { detholwr: 'corff', padin: 0 }

Yn cadw'r cyngor o fewn ffiniau'r elfen hon. Enghraifft: viewport: '#viewport'neu{ "selector": "#viewport", "padding": 0 }

Os rhoddir ffwythiant, fe'i gelwir gyda'r elfen sbarduno nod DOM fel ei unig ddadl. Mae'r thiscyd-destun wedi'i osod i enghraifft y cyngor.

Priodoleddau data ar gyfer cynghorion offer unigol

Fel arall, gellir nodi opsiynau ar gyfer cynghorion offer unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.

Dulliau

$().tooltip(options)

Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.

.tooltip('show')

Yn datgelu cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei ddangos (hy cyn i'r shown.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor. Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.

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

.tooltip('hide')

Yn cuddio cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei guddio (hy cyn i'r hidden.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor.

$('#element').tooltip('hide')

.tooltip('toggle')

Toglo cyngor offer elfen. Yn dychwelyd i'r galwr cyn i'r cyngor gael ei ddangos neu ei guddioshown.bs.tooltip ( hy cyn i'r hidden.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun "â llaw" o'r cyngor.

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

.tooltip('destroy')

Yn cuddio ac yn dinistrio cyngor offer elfen. Ni all awgrymiadau offer sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynnydd .

$('#element').tooltip('destroy')

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
cyngor.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
cyngor.bs Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cyngor.cuddio.bs Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cyngor.bs.cudd Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
mewnosod.bs.tooltip Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.tooltipdigwyddiad pan fydd y templed cyngor wedi'i ychwanegu at y DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.

Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.

Dibyniaeth ategyn

Mae Popovers yn ei gwneud yn ofynnol i'r ategyn cyngor gael ei gynnwys yn eich fersiwn chi o Bootstrap.

Swyddogaeth optio i mewn

Am resymau perfformiad, mae'r api data Tooltip a Popover yn optio i mewn, sy'n golygu bod yn rhaid i chi eu cychwyn eich hun .

Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-togglepriodoledd:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Mae popovers mewn grwpiau botwm, grwpiau mewnbwn, a thablau angen gosodiad arbennig

Wrth ddefnyddio popovers ar elfennau o fewn a .btn-groupneu .input-group, neu ar elfennau sy'n gysylltiedig â thabl ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), bydd yn rhaid i chi nodi'r opsiwn container: 'body'(wedi'i ddogfennu isod) i osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a/ neu golli ei gorneli crwn pan fydd y popover yn cael ei sbarduno).

Peidiwch â cheisio dangos popovers ar elfennau cudd

Bydd galw $(...).popover('show')pan fydd yr elfen darged display: none;yn achosi i'r popover gael ei leoli'n anghywir.

Mae popovers ar elfennau anabl angen elfennau lapio

I ychwanegu popover at a disabledneu .disabledelfen, rhowch yr elfen y tu mewn i a <div>a chymhwyso'r popover i hwnnw <div>yn lle.

Dolenni aml-linell

Weithiau rydych chi eisiau ychwanegu popover at hyperddolen sy'n lapio llinellau lluosog. Ymddygiad rhagosodedig yr ategyn popover yw ei ganoli'n llorweddol ac yn fertigol. Ychwanegwch white-space: nowrap;at eich angorau i osgoi hyn.

Enghreifftiau

Popover statig

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith.

Popover top

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

Popover iawn

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

Popover gwaelod

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

Gadawodd Popover

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

Demo byw

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Pedwar cyfeiriad

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Diystyru ar y clic nesaf

Defnyddiwch y focussbardun i ddiystyru popovers ar y clic nesaf y mae'r defnyddiwr yn ei wneud.

Mae angen marcio penodol ar gyfer diswyddo-ar-glic nesaf

Ar gyfer ymddygiad traws-borwr a thraws-lwyfan priodol, rhaid i chi ddefnyddio'r <a>tag, nid y <button>tag, a rhaid i chi hefyd gynnwys y role="button"a'r tabindexpriodoleddau.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Defnydd

Galluogi popovers trwy JavaScript:

$('#example').popover(options)

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw Math Diofyn Disgrifiad
animeiddiad boolaidd gwir Cymhwyso trawsnewidiad pylu CSS i'r popover
cynhwysydd llinyn | ffug ffug

Yn atodi'r popover i elfen benodol. Enghraifft: container: 'body'. Mae'r opsiwn hwn yn arbennig o ddefnyddiol gan ei fod yn caniatáu ichi osod y popover yn llif y ddogfen ger yr elfen sbarduno - a fydd yn atal y popover rhag arnofio i ffwrdd o'r elfen sbarduno yn ystod newid maint ffenestr.

cynnwys llinyn | swyddogaeth ''

Gwerth cynnwys diofyn os data-contentnad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r popover ynghlwm wrthi.

oedi rhif | gwrthrych 0

Oedi wrth ddangos a chuddio'r popover (ms) - nid yw'n berthnasol i'r math sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { "show": 500, "hide": 100 }

html boolaidd ffug Mewnosod HTML yn y popover. Os yw'n ffug, textbydd dull jQuery yn cael ei ddefnyddio i fewnosod cynnwys yn y DOM. Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'iawn'

Sut i leoli'r popover - top | gwaelod | chwith | dde | auto.
Pan nodir "auto", bydd yn ailgyfeirio'r popover yn ddeinamig. Er enghraifft, os yw lleoliad yn "auto chwith", bydd y popover yn arddangos i'r chwith pan fo modd, fel arall bydd yn arddangos i'r dde.

Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM popover fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r thiscyd-destun wedi'i osod i'r enghraifft popover.

detholwr llinyn ffug Os darperir dewisydd, bydd gwrthrychau popover yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn i alluogi cynnwys HTML deinamig i ychwanegu popovers. Gweler hyn ac enghraifft llawn gwybodaeth .
templed llinyn '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Sylfaen HTML i'w ddefnyddio wrth greu'r popover.

Bydd y popover's titleyn cael ei chwistrellu i mewn i'r .popover-title.

Bydd y popover's contentyn cael ei chwistrellu i mewn i'r .popover-content.

.arrowbydd yn dod yn saeth y popover yn.

Dylai'r elfen lapio allanol fod â'r .popoverdosbarth.

teitl llinyn | swyddogaeth ''

Gwerth teitl diofyn os titlenad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r popover ynghlwm wrthi.

sbardun llinyn 'cliciwch' Sut mae popover yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod. manualni ellir ei gyfuno ag unrhyw sbardun arall.
gwylfa llinyn | gwrthrych | swyddogaeth { detholwr: 'corff', padin: 0 }

Yn cadw'r popover o fewn ffiniau'r elfen hon. Enghraifft: viewport: '#viewport'neu{ "selector": "#viewport", "padding": 0 }

Os rhoddir ffwythiant, fe'i gelwir gyda'r elfen sbarduno nod DOM fel ei unig ddadl. Mae'r thiscyd-destun wedi'i osod i'r enghraifft popover.

Priodoleddau data ar gyfer popovers unigol

Fel arall, gellir pennu opsiynau ar gyfer popovers unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.

Dulliau

$().popover(options)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover('show')

Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popoverdigwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.

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

.popover('hide')

Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover.

$('#element').popover('hide')

.popover('toggle')

Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popoverneu'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hyn yn cael ei ystyried yn sbardun "â llaw" o'r popover.

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

.popover('destroy')

Yn cuddio ac yn dinistrio popover elfen. Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .

$('#element').popover('destroy')

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
sioe.bs.popover Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangos.bs.popover Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cuddio.bs.popover Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cudd.bs.popover Mae'r digwyddiad hwn yn cael ei danio pan fydd y popover wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
mewnosod.bs.popover Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.popoverdigwyddiad pan fydd y templed popover wedi'i ychwanegu at y DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Negeseuon effro alert.js

Rhybuddion enghreifftiol

Ychwanegu swyddogaeth diswyddo i bob neges rhybudd gyda'r ategyn hwn.

Wrth ddefnyddio .closebotwm, rhaid iddo fod yn blentyn cyntaf y .alert-dismissibleac ni all unrhyw gynnwys testun ddod o'i flaen yn y marcio.

Defnydd

Ychwanegwch data-dismiss="alert"at eich botwm cau i roi swyddogaeth cau rhybudd yn awtomatig. Mae cau rhybudd yn ei dynnu o'r DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Er mwyn i'ch rhybuddion ddefnyddio animeiddiad wrth gau, gwnewch yn siŵr bod y dosbarthiadau .fadea'r .indosbarthiadau eisoes wedi'u cymhwyso iddynt.

Dulliau

$().alert()

Yn gwneud rhybudd yn gwrando am ddigwyddiadau clicio ar elfennau disgynnol sydd â'r data-dismiss="alert"priodoledd. (Ddim yn angenrheidiol wrth ddefnyddio awto-gychwyn y data-api.)

$().alert('close')

Yn cau rhybudd trwy ei dynnu o'r DOM. Os yw'r .fadea .indosbarthiadau yn bresennol ar yr elfen, bydd y rhybudd yn diflannu cyn iddo gael ei dynnu.

Digwyddiadau

Mae ategyn rhybuddio Bootstrap yn datgelu rhai digwyddiadau i'w cysylltu â swyddogaethau rhybuddio.

Math o Ddigwyddiad Disgrifiad
agos.bs.rhybudd Mae'r digwyddiad hwn yn tanio ar unwaith pan closeelwir y dull enghraifft.
cau.bs.rhybudd Mae'r digwyddiad hwn yn cael ei danio pan fydd y rhybudd wedi'i gau (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botymau button.js

Gwnewch fwy gyda botymau. Rheoli cyflwr botymau neu greu grwpiau o fotymau ar gyfer mwy o gydrannau fel bariau offer.

Cydweddoldeb traws-borwr

Mae Firefox yn parhau ar ffurf cyflyrau rheoli (anabledd a gwiriad) ar draws llwythi tudalennau . Ateb ar gyfer hyn yw ei ddefnyddio autocomplete="off". Gweler byg Mozilla #654072 .

Datganol

Ychwanegu data-loading-text="Loading..."i ddefnyddio cyflwr llwytho ar fotwm.

Mae'r nodwedd hon yn anghymeradwy ers v3.3.5 ac mae wedi'i dileu yn v4.

Defnyddiwch pa bynnag gyflwr rydych chi'n ei hoffi!

Er mwyn yr arddangosiad hwn, rydym yn defnyddio data-loading-texta $().button('loading'), ond nid dyna'r unig gyflwr y gallwch ei ddefnyddio. Gweler mwy am hyn isod yn y $().button(string)ddogfennaeth .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Togl sengl

Ychwanegu data-toggle="button"at actifadu toggling ar un botwm.

Mae angen botymau wedi'u toglo ymlaen llaw .activeaaria-pressed="true"

Ar gyfer botymau sydd wedi'u toglo ymlaen llaw, rhaid i chi ychwanegu'r .activedosbarth a'r aria-pressed="true"priodoledd i buttonchi'ch hun.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Blwch siec / Radio

Ychwanegu data-toggle="buttons"at .btn-groupflwch ticio sy'n cynnwys mewnbynnau radio i alluogi toggling yn eu harddulliau priodol.

Mae angen opsiynau a ddewiswyd.active

Ar gyfer opsiynau a ddewiswyd ymlaen llaw, rhaid i chi ychwanegu'r .activedosbarth at y mewnbwn labeleich hun.

Cyflwr wedi'i wirio'n weledol yn unig wedi'i ddiweddaru ar glicio

Os yw cyflwr gwirio botwm blwch ticio yn cael ei ddiweddaru heb danio clickdigwyddiad ar y botwm (ee trwy <input type="reset">neu drwy osod checkedpriodwedd y mewnbwn), bydd angen i chi doglo'r .activedosbarth ar y mewnbwn labeleich hun.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Dulliau

$().button('toggle')

Toglo cyflwr gwthio. Yn rhoi'r ymddangosiad i'r botwm ei fod wedi'i actifadu.

$().button('reset')

Yn ailosod cyflwr botwm - yn cyfnewid testun i destun gwreiddiol. Mae'r dull hwn yn asyncronig ac yn dychwelyd cyn i'r ailosod gael ei gwblhau mewn gwirionedd.

$().button(string)

Yn cyfnewid testun i unrhyw gyflwr testun a ddiffinnir gan ddata.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Crebachu cwymp.js

Ategyn hyblyg sy'n defnyddio llond llaw o ddosbarthiadau ar gyfer ymddygiad toglo hawdd.

Dibyniaeth ategyn

Mae Collapse yn ei gwneud yn ofynnol i'r ategyn trawsnewid gael ei gynnwys yn eich fersiwn chi o Bootstrap.

Enghraifft

Cliciwch y botymau isod i ddangos a chuddio elfen arall trwy newidiadau dosbarth:

  • .collapseyn cuddio cynnwys
  • .collapsingyn cael ei gymhwyso yn ystod trawsnewidiadau
  • .collapse.inyn dangos cynnwys

Gallwch ddefnyddio dolen gyda'r hrefpriodoledd, neu botwm gyda'r data-targetpriodoledd. Yn y ddau achos, data-toggle="collapse"mae'n ofynnol.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Enghraifft acordion

Ymestyn yr ymddygiad cwympo rhagosodedig i greu acordion gyda chydran y panel.

Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        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 put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        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 put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        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 put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Mae hefyd yn bosibl cyfnewid .panel-bodys ag .list-groups.

  • Bootply
  • Un eitem a hwylus
  • Ail eros

Gwneud rheolyddion ehangu/llewygu yn hygyrch

Byddwch yn siwr i ychwanegu aria-expandedat yr elfen reoli. Mae'r nodwedd hon yn diffinio'n benodol gyflwr presennol yr elfen sy'n cwympo i ddarllenwyr sgrin a thechnolegau cynorthwyol tebyg. Os yw'r elfen cwympadwy yn cael ei chau yn ddiofyn, dylai fod â gwerth o aria-expanded="false". Os ydych chi wedi gosod yr elfen cwympadwy i fod yn agored yn ddiofyn gan ddefnyddio'r indosbarth, gosodwch aria-expanded="true"y rheolydd yn lle hynny. Bydd yr ategyn yn toglo'r nodwedd hon yn awtomatig yn seiliedig ar p'un a yw'r elfen cwympadwy wedi'i hagor neu ei chau ai peidio.

Yn ogystal, os yw'ch elfen reoli yn targedu un elfen gwympadwy - hy mae'r data-targetbriodwedd yn pwyntio at idddetholwr - gallwch ychwanegu aria-controlspriodoledd ychwanegol at yr elfen reoli, sy'n cynnwys yr elfen sy'n idcwympo. Mae darllenwyr sgrin modern a thechnolegau cynorthwyol tebyg yn defnyddio'r nodwedd hon i ddarparu llwybrau byr ychwanegol i ddefnyddwyr lywio'n uniongyrchol i'r elfen gwympadwy ei hun.

Defnydd

Mae'r ategyn cwympo yn defnyddio ychydig o ddosbarthiadau i drin y codi trwm:

  • .collapseyn cuddio'r cynnwys
  • .collapse.inyn dangos y cynnwys
  • .collapsingyn cael ei ychwanegu pan fydd y trawsnewid yn dechrau, a'i ddileu pan fydd yn gorffen

Gellir dod o hyd i'r dosbarthiadau hyn yn component-animations.less.

Trwy briodoleddau data

Ychwanegu data-toggle="collapse"ac a data-targetat yr elfen i neilltuo rheolaeth yn awtomatig ar elfen cwympadwy. Mae'r data-targetpriodoledd yn derbyn dewisydd CSS i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapseat yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol in.

I ychwanegu rheolaeth grŵp tebyg i acordion at reolydd cwympadwy, ychwanegwch y priodoledd data data-parent="#selector". Cyfeiriwch at y demo i weld hyn ar waith.

Trwy JavaScript

Galluogi â llaw gyda:

$('.collapse').collapse()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-parent="".

Enw math rhagosodedig disgrifiad
rhiant detholwr ffug Os darperir dewisydd, yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem hon y gellir ei dymchwel. (yn debyg i ymddygiad acordion traddodiadol - mae hyn yn dibynnu ar y paneldosbarth)
togl boolaidd gwir Toglo'r elfen cwympadwy ar alw

Dulliau

.collapse(options)

Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toglo elfen sy'n cwympo i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.collapseneu'r hidden.bs.collapsedigwyddiad ddigwydd).

.collapse('show')

Yn dangos elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos (hy cyn i'r shown.bs.collapsedigwyddiad ddigwydd).

.collapse('hide')

Yn cuddio elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei chuddio (hy cyn i'r hidden.bs.collapsedigwyddiad ddigwydd).

Digwyddiadau

Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.

Math o Ddigwyddiad Disgrifiad
llewyg.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangos.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwympo wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cuddio.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull wedi'i alw.
cudd.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwymp wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carwsél carwsél.js

Elfen sioe sleidiau ar gyfer beicio trwy elfennau, fel carwsél. Ni chefnogir carwsél nythu.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Capsiynau dewisol

Ychwanegwch gapsiynau i'ch sleidiau yn hawdd gyda'r .carousel-captionelfen o fewn unrhyw .item. Gosodwch bron unrhyw HTML opsiynol yno a bydd yn cael ei alinio a'i fformatio'n awtomatig.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Carwsél lluosog

Mae angen defnyddio carwsél idar y cynhwysydd mwyaf allanol (y .carousel) er mwyn i reolyddion carwsél weithio'n iawn. Wrth ychwanegu carwsél lluosog, neu wrth newid carwsél, gofalwch ideich bod yn diweddaru'r rheolaethau perthnasol.

Trwy briodoleddau data

Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-slideyn derbyn yr allweddeiriau prevneu next, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-slide-toi basio mynegai sleidiau crai i'r carwsél data-slide-to="2", sy'n symud lleoliad y sleidiau i fynegai penodol gan ddechrau gyda 0.

Defnyddir y data-ride="carousel"briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. Ni ellir ei ddefnyddio ar y cyd â chychwyniad JavaScript penodol (diangen a diangen) o'r un carwsél.

Trwy JavaScript

Ffoniwch y carwsél â llaw gyda:

$('.carousel').carousel()

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-interval="".

Enw math rhagosodedig disgrifiad
cyfwng rhif 5000 Faint o amser i oedi rhwng beicio eitem yn awtomatig. Os yw'n ffug, ni fydd carwsél yn beicio'n awtomatig.
saib llinyn | null "hofran" Os caiff ei osod "hover", mae'n oedi seiclo'r carwsél ymlaen mouseenterac yn ailddechrau seiclo'r carwsél ymlaen mouseleave. Os caiff ei osod i null, ni fydd hofran dros y carwsél yn ei oedi.
lapio boolaidd gwir A ddylai'r carwsél feicio'n barhaus neu gael stopiau caled.
bysellfwrdd boolaidd gwir A ddylai'r carwsél ymateb i ddigwyddiadau bysellfwrdd.

Yn cychwyn y carwsél gydag opsiynau dewisol objectac yn dechrau beicio trwy eitemau.

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

Beicio drwy'r eitemau carwsél o'r chwith i'r dde.

Yn atal y carwsél rhag beicio trwy eitemau.

Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae).

Cylchoedd i'r eitem flaenorol.

Beiciau i'r eitem nesaf.

Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél.

Mae gan y ddau ddigwyddiad yr eiddo ychwanegol a ganlyn:

  • direction: Y cyfeiriad y mae'r carwsél yn llithro iddo (naill ai "left"neu "right").
  • relatedTarget: Yr elfen DOM sy'n cael ei llithro i'w lle fel yr eitem weithredol.

Mae pob digwyddiad carwsél yn cael ei danio at y carwsél ei hun (hy yn y <div class="carousel">).

Math o Ddigwyddiad Disgrifiad
sleid.bs.carwsél Mae'r digwyddiad hwn yn tanio ar unwaith pan fydd y slidedull enghraifft yn cael ei ddefnyddio.
sleid.bs.carousel Mae'r digwyddiad hwn yn cael ei danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Enghraifft

Mae'r ategyn affix yn toglo position: fixed;ymlaen ac i ffwrdd, gan efelychu'r effaith a ddarganfuwyd gyda position: sticky;. Mae'r is-llywio ar y dde yn arddangosiad byw o'r ategyn affix.


Defnydd

Defnyddiwch yr ategyn affix trwy briodoleddau data neu â llaw gyda'ch JavaScript eich hun. Yn y ddwy sefyllfa, rhaid i chi ddarparu CSS ar gyfer lleoliad a lled eich cynnwys gosodedig.

Nodyn: Peidiwch â defnyddio'r ategyn affix ar elfen sydd wedi'i chynnwys mewn elfen sydd wedi'i lleoli'n gymharol, fel colofn wedi'i thynnu neu ei gwthio, oherwydd byg rendro Safari .

Lleoli drwy CSS

Mae'r ategyn affix yn toglo rhwng tri dosbarth, pob un yn cynrychioli cyflwr penodol: .affix, .affix-top, a .affix-bottom. Rhaid i chi ddarparu'r arddulliau, ac eithrio position: fixed;ar .affix, ar gyfer y dosbarthiadau hyn eich hun (yn annibynnol ar yr ategyn hwn) i drin y safleoedd gwirioneddol.

Dyma sut mae'r ategyn affix yn gweithio:

  1. I ddechrau, mae'r ategyn yn ychwanegu .affix-topi ddangos bod yr elfen yn ei safle uchaf. Ar hyn o bryd nid oes angen lleoli CSS.
  2. Dylai sgrolio heibio'r elfen rydych chi am ei gosod ysgogi'r gosodiad gwirioneddol. Dyma lle mae .affixailosod .affix-topa gosod position: fixed;(a ddarperir gan CSS Bootstrap).
  3. Os caiff gwrthbwyso gwaelod ei ddiffinio, dylai sgrolio heibio ei ddisodli .affixâ .affix-bottom. Gan fod gwrthbwyso yn ddewisol, mae gosod un yn gofyn ichi osod y CSS priodol. Yn yr achos hwn, ychwanegwch position: absolute;pan fo angen. Mae'r ategyn yn defnyddio'r nodwedd data neu'r opsiwn JavaScript i benderfynu ble i leoli'r elfen oddi yno.

Dilynwch y camau uchod i osod eich CSS ar gyfer y naill neu'r llall o'r opsiynau defnydd isod.

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad affix i unrhyw elfen yn hawdd, ychwanegwch data-spy="affix"at yr elfen rydych chi am sbïo arni. Defnyddiwch wrthbwyso i ddiffinio pryd i newid pinio elfen.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Trwy JavaScript

Ffoniwch yr ategyn affix trwy JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset-top="200".

Enw math rhagosodedig disgrifiad
gwrthbwyso rhif | swyddogaeth | gwrthrych 10 Picseli i'w gwrthbwyso o'r sgrin wrth gyfrifo lleoliad y sgrôl. Os darperir un rhif, bydd y gwrthbwyso yn cael ei gymhwyso i'r cyfarwyddiadau uchaf a gwaelod. Er mwyn darparu gwrthbwyso unigryw, gwaelod a brig, rhowch wrthrych offset: { top: 10 }neu offset: { top: 10, bottom: 5 }. Defnyddiwch ffwythiant pan fydd angen i chi gyfrifo gwrthbwyso yn ddeinamig.
targed dewiswr | nôd | jQuery elfen y windowgwrthrych Yn pennu elfen darged yr affix.

Dulliau

.affix(options)

Yn actifadu'ch cynnwys fel cynnwys wedi'i osod. Yn derbyn opsiwn dewisol object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Yn ailgyfrifo cyflwr yr affix yn seiliedig ar ddimensiynau, safle a safle sgrolio'r elfennau perthnasol. Mae'r .affix, .affix-top, a .affix-bottomdosbarthiadau yn cael eu hychwanegu at y cynnwys gosodedig neu ei dynnu ohono yn ôl y cyflwr newydd. Mae angen galw'r dull hwn pryd bynnag y bydd dimensiynau'r cynnwys wedi'i osod neu'r elfen darged yn cael ei newid, er mwyn sicrhau lleoliad cywir y cynnwys sydd wedi'i osod.

$('#myAffix').affix('checkPosition')

Digwyddiadau

Mae ategyn gosod Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth affix.

Math o Ddigwyddiad Disgrifiad
affix.bs.affix Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod.
affix.bs Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod.
affix-top.bs.affix Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod ar ben.
affixed-top.bs Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod ar ben.
affix-gwaelod.bs.affix Mae'r digwyddiad hwn yn tanio yn union cyn i'r elfen gael ei gosod ar y gwaelod.
affixed-gwaelod.bs Mae'r digwyddiad hwn yn cael ei danio ar ôl i'r elfen gael ei gosod ar y gwaelod.