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

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')

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
})

Glanweithydd

Mae Tooltips a Popovers yn defnyddio ein glanweithydd adeiledig i lanweithio opsiynau sy'n derbyn HTML.

Y gwerth diofyn whiteListyw'r canlynol:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Os ydych am ychwanegu gwerthoedd newydd at y rhagosodiad hwn whiteListgallwch wneud y canlynol:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Os ydych chi am osgoi ein glanweithydd oherwydd bod yn well gennych chi ddefnyddio llyfrgell bwrpasol, er enghraifft DOMPurify , dylech chi wneud y canlynol:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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.

Transitions transition.js

Ynglŷn â thrawsnewidiadau

Ar gyfer effeithiau trosglwyddo 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.

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>

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

Amrywio cynnwys moddol yn seiliedig ar y botwm sbardun

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,

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

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

Dulliau

.modal(options)

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

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

.modal('toggle')

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')

.modal('show')

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')

.modal('hide')

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')

.modal('handleUpdate')

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Enghreifftiau

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

Defnydd

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

Opsiynau

Dim

Dulliau

$().dropdown('toggle')

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

Digwyddiadau

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.

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

Defnydd

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'ch position: relative;CSS, ffoniwch y sgroliwr 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="".

Digwyddiadau

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

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.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Cynghorion offerCynghorion offer

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:

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>

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

Opsiynau

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

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 i'r galwr cyn i'r cyngor gael ei guddio (hy cyn yhidden.bs.tooltip digwyddiad 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

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

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

Enghreifftiau

Popover statig

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

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.

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

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 yhidden.bs.popover digwyddiad 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

$('#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 bydd yr .fadea.in dosbarthiadau 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.

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

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.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> 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">
  ...
</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.

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.

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

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

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

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.

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

Enghreifftiau

Blaenorol Nesaf

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

Label sleidiau cyntaf

Nulla vitae elit libero, interdum pharetra augue mollis.

Ail label sleid

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trydydd label sleid

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Blaenorol Nesaf

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

Defnydd

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 safle'r sleidiau i fynegai penodol gan ddechrau gyda0 .

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

Opsiynau

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

Dulliau

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

Yn atal y carwsél rhag beicio trwy eitemau.

.carousel(number)

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

.carousel('prev')

Cylchoedd i'r eitem flaenorol.

.carousel('next')

Beiciau i'r eitem nesaf.

Digwyddiadau

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

$('#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-top i 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".

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.