Ro-shealladh

Aonair no air a chur ri chèile

*.jsFaodar plugain a thoirt a-steach leotha fhèin (a’ cleachdadh faidhlichean fa leth Bootstrap ), no uile aig an aon àm (a’ cleachdadh bootstrap.jsno am mion-fhiosrachadh bootstrap.min.js).

Feartan dàta

Faodaidh tu na plugins Bootstrap gu lèir a chleachdadh dìreach tron ​​​​API markup gun a bhith a’ sgrìobhadh aon loidhne de JavaScript. Is e seo an API den chiad ìre aig Bootstrap agus bu chòir dha a bhith mar a’ chiad bheachdachadh agad nuair a bhios tu a’ cleachdadh plugan.

Thuirt sin, ann an cuid de shuidheachaidhean dh'fhaodadh gum biodh e ion-mhiannaichte an gnìomh seo a thionndadh dheth. Mar sin, bidh sinn cuideachd a’ toirt seachad an comas am feart dàta API a dhì-cheangal le bhith a’ dì-cheangal a h-uile tachartas air an sgrìobhainn leis an ainm data-api. Tha seo a’ coimhead mar seo:

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

Air neo, gus cuimseachadh air plugan sònraichte, dìreach cuir a-steach ainm a’ phlug mar àite-ainm còmhla ris an ainm-àite data-api mar seo:

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

Prògramachadh API

Tha sinn cuideachd den bheachd gum bu chòir dhut a bhith comasach air a h-uile plugan Bootstrap a chleachdadh dìreach tro JavaScript API. Tha a h-uile API poblach nan dòighean singilte, slabhraidh, agus tillidh iad an cruinneachadh air an deach gabhail.

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

Bu chòir do gach dòigh gabhail ri nì roghainnean roghnach, sreang a tha ag amas air dòigh sònraichte, no gun dad (a thòisicheas plugan le giùlan bunaiteach):

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

Bidh gach plugan cuideachd a’ nochdadh an neach-togail amh aige air Constructortogalach: $.fn.popover.Constructor. Ma tha thu airson eisimpleir plugan sònraichte fhaighinn, thoir air ais e gu dìreach bho eileamaid: $('[rel="popover"]').data('popover').

Roghainnean bunaiteach

'S urrainn dhut na roghainnean bunaiteach airson plugan atharrachadh le bhith ag atharrachadh Constructor.DEFAULTSnì a' phlugain:

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

Gun strì

Aig amannan feumar plugins Bootstrap a chleachdadh le frèaman UI eile. Anns na suidheachaidhean sin, faodaidh tubaistean ainmean-àite tachairt bho àm gu àm. Ma thachras seo, faodaidh tu fios a chuir chun .noConflictplugan a tha thu airson luach a thilleadh.

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

Tachartasan

Bidh Bootstrap a’ toirt seachad tachartasan àbhaisteach airson gnìomhan sònraichte a’ mhòr-chuid de plugins. San fharsaingeachd, thig iad sin ann an cruth com-pàirt infinitive agus san àm a dh’ fhalbh - far a bheil an infinitive (ex. show) air a phiobrachadh aig toiseach tachartais, agus an cruth com-pàirteachaidh san àm a dh’ fhalbh (ex. shown) air a phiobrachadh nuair a thèid gnìomh a chrìochnachadh.

Bho 3.0.0, tha ainmean air a h-uile tachartas Bootstrap.

Bidh a h-uile tachartas infinitive a’ toirt seachad preventDefaultcomas-gnìomh. Bheir seo an comas stad a chuir air gnìomh mus tòisich e.

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

Sanitizer

Bidh Tooltips agus Popovers a’ cleachdadh ar inneal-glanaidh togte gus roghainnean a tha a’ gabhail ri HTML a ghlanadh.

whiteListTha an luach bunaiteach mar a leanas:

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: []
}

Ma tha thu airson luachan ùra a chur ris a’ bhunait seo whiteList, faodaidh tu na leanas a dhèanamh:

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)

Ma tha thu airson a dhol seachad air an inneal-glanaidh againn oir is fheàrr leat leabharlann sònraichte a chleachdadh, mar eisimpleir DOMPurify , bu chòir dhut na leanas a dhèanamh:

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

Àireamhan tionndaidh

Faodar faighinn chun dreach de gach plugan jQuery aig Bootstrap tro VERSIONsheilbh neach-togail a’ plugan. Mar eisimpleir, airson am plugan Tooltip:

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

Chan eil cùl-taic sònraichte ann nuair a tha JavaScript à comas

Cha bhith plugins Bootstrap a’ tuiteam air ais gu sònraichte gràsmhor nuair a tha JavaScript à comas. Ma tha dragh ort mu eòlas an neach-cleachdaidh sa chùis seo, cleachd <noscript>gus an suidheachadh a mhìneachadh (agus mar a nì thu ath-chomasachadh JavaScript) don luchd-cleachdaidh agad, agus / no cuir ris na fallbacks àbhaisteach agad fhèin.

Transitions transition.js

Mu dheidhinn eadar-ghluasadan

Airson buaidhean gluasaid sìmplidh, cuir a-steach transition.jsaon uair còmhla ris na faidhlichean JS eile. Ma tha thu a’ cleachdadh am faidhle cruinnichte (no mionaichte) bootstrap.js, cha leig thu leas seo a ghabhail a-steach - tha e ann mu thràth.

Dè tha a-staigh

Tha Transition.js na neach-cuideachaidh bunaiteach airson transitionEndtachartasan a bharrachd air emuladair gluasaid CSS. Tha e air a chleachdadh leis na plugins eile gus sgrùdadh a dhèanamh airson taic gluasaid CSS agus gus eadar-ghluasadan crochte a ghlacadh.

A 'cur casg air eadar-ghluasadan

Faodar eadar-ghluasadan a chiorramachadh air feadh na cruinne a’ cleachdadh a’ chriomag JavaScript a leanas, a dh’ fheumas tighinn às deidh transition.js(no bootstrap.js, bootstrap.min.jsmar a bhios) a bhith air a luchdachadh:

$.support.transition = false

Modalan modal.js

Tha modalan air an sgioblachadh, ach sùbailte, brosnachaidhean còmhraidh leis a’ ghnìomhachd as lugha a tha a dhìth agus uireasbhaidhean snasail.

Air sgàth mar a tha HTML5 a’ mìneachadh a semantics, autofocuschan eil buaidh sam bith aig feart HTML ann am modalan Bootstrap. Gus an aon bhuaidh a choileanadh, cleachd cuid de JavaScript àbhaisteach:

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

Eisimpleirean

Eisimpleir statach

Modal air a thoirt seachad le bann-cinn, bodhaig, agus seata ghnìomhan anns a’ bhun-coise.

<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 beò

Tog modal tro JavaScript le bhith a’ briogadh air a’ phutan gu h-ìosal. Bidh e a 'sleamhnachadh sìos agus a' seargadh a-steach bho mhullach na duilleige.

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

Meudan roghainneil

Tha dà mheud roghainneil aig modalan, rim faighinn tro chlasaichean mion-atharrachaidh airson an cur air faidhle .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>

Thoir air falbh beothachadh

Airson modalan a tha dìreach a’ nochdadh seach a bhith a’ seargadh a-steach ri fhaicinn, thoir air falbh an .fadeclas bhon chomharra modal agad.

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

A 'cleachdadh siostam clèithe

Gus brath a ghabhail air an t-siostam clèithe Bootstrap taobh a-staigh modal, dìreach neadachadh .rows taobh a-staigh an .modal-bodyagus an uairsin cleachd na clasaichean siostam clèithe àbhaisteach.

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

Ag atharrachadh susbaint modal stèidhichte air putan brosnachaidh

A bheil dòrlach de phutanan agad a bhrosnaicheas an aon mhodal, dìreach le susbaint beagan eadar-dhealaichte? Cleachd event.relatedTargetagus buadhan HTMLdata-* ('s dòcha tro jQuery ) gus susbaint a' mhodail atharrachadh a rèir dè am putan a chaidh a bhriogadh. Faic na docaichean Tachartasan Modal airson mion-fhiosrachadh air 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)
})

Cleachdadh

Bidh am plugan modal a’ togail do shusbaint falaichte a rèir iarrtas, tro bhuadhan dàta no JavaScript. Bidh e cuideachd a’ cur .modal-openris a’ <body>ghiùlan sgrolaidh àbhaisteach a chuir dheth agus a’ gineadh a .modal-backdropgus àite cliog a sholarachadh airson a bhith a’ cur às do mhodalan a tha air an sealltainn nuair a phutas tu taobh a-muigh a’ mhodail.

Tro fheartan dàta

Cuir modal an gnìomh gun a bhith a’ sgrìobhadh JavaScript. Suidhich data-toggle="modal"air eileamaid rianadair, mar phutan, còmhla ri a data-target="#foo"no href="#foo"gus amas air modal sònraichte airson gluasad.

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

Air sgàth javascript

Cuir fòn gu modal le id myModalle aon loidhne de JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-backdrop="".

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

Dòighean-obrach

.modal(options)

Cuir do shusbaint an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object.

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

.modal('toggle')

Tog modal le làimh. Tilleadh chun neach-fios mus deach am modal a shealltainn no fhalach (ie mus tachair an tachartas shown.bs.modalno an hidden.bs.modaltachartas).

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

.modal('show')

Le làimh a 'fosgladh modal. Tilleadh chun neach-fios mus deach am modal a shealltainn (ie mus tachair an shown.bs.modaltachartas).

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

.modal('hide')

Le làimh a 'falach modal. Tilleadh chun neach-fios mus deach am modal fhalach (ie mus tachair an hidden.bs.modaltachartas).

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

.modal('handleUpdate')

Leugh suidheachadh a’ mhodail gus a dhol an aghaidh bàr-scrollaidh gun fhios nach nochd fear, a bheireadh air a’ mhodal leum air an taobh chlì.

Chan eil feum air ach nuair a dh'atharraicheas àirde a 'mhodail fhad' sa tha e fosgailte.

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

Tachartasan

Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal.

Tha a h-uile tachartas modal air a losgadh aig a’ mhodal fhèin (ie aig an <div class="modal">).

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

Dropdowns dropdown.js

Eisimpleirean

Cuir clàran-bìdh sìos gu cha mhòr rud sam bith leis a ’phlug sìmplidh seo, a’ toirt a-steach am bàr seòlaidh, tabaichean agus pills.

Taobh a-staigh navbar

Taobh a-staigh pills

Cleachdadh

Tro bhuadhan dàta no JavaScript, bidh am plugan a tha a’ tuiteam sìos a’ togail susbaint falaichte (clàran-taice sìos) le bhith a’ togail a’ .openchlas air an liosta phàrant.

Air innealan gluasadach, bidh fosgladh tuiteam-sìos a’ cur ris .dropdown-backdropmar raon tap airson clàir tuiteam-sìos a dhùnadh nuair a tha thu a’ cnagadh air taobh a-muigh a’ chlàr, riatanas airson taic iOS ceart. Tha seo a’ ciallachadh gu bheil feum air tap a bharrachd air fòn-làimhe gus gluasad bho chlàr fosgailte a-nuas gu clàr tuiteam-sìos eile.

Nota: data-toggle="dropdown"Thathas an urra ris a’ fheart airson clàran-bìdh a dhùnadh sìos aig ìre tagraidh, agus mar sin is e deagh bheachd a th’ ann a chleachdadh an-còmhnaidh.

Tro fheartan dàta

Cuir data-toggle="dropdown"ri ceangal no putan gus tuiteam sìos a thogail.

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

Gus URLan a chumail slàn le putanan ceangail, cleachd am data-targetfeart an àite 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>

Air sgàth javascript

Cuir fòn gu na dropdowns tro JavaScript:

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

Roghainnean

Chan eil gin

Dòighean-obrach

$().dropdown('toggle')

Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.

Tachartasan

Tha a h-uile tachartas tuiteam sìos air a losgadh aig an .dropdown-menueileamaid phàrant.

Tha seilbh aig a h-uile tachartas relatedTargettuiteam-sìos, aig a bheil luach mar an eileamaid acair toglach.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Eisimpleir ann an navbar

Tha am plugan ScrollSpy airson targaidean nav ùrachadh gu fèin-ghluasadach stèidhichte air suidheachadh scrollaidh. Sgrolaich an raon gu h-ìosal fon bhàr-seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Thèid na fo-stuthan tuiteam-sìos a chomharrachadh cuideachd.

Cleachdadh

Tha feum air suidheachadh càirdeil

Ge bith dè an dòigh buileachaidh, feumaidh scrollspy position: relative;an eileamaid air a bheil thu a’ brath a chleachdadh. Anns a 'mhòr-chuid de chùisean, is e seo am faidhle <body>. Nuair a sgrìobhas tu air eileamaidean a bharrachd air an <body>, dèan cinnteach gu bheil heightseata agad agus gun cuir thu an overflow-y: scroll;sàs e.

Tro fheartan dàta

Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, cuir data-spy="scroll"ris an eileamaid a tha thu airson brath a ghabhail air (mar as trice b’ e seo am faidhle <body>). An uairsin cuir am data-targetfeart leis an ID no clas na h-eileamaid phàrant de phàirt Bootstrap sam bith .nav.

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>

Air sgàth javascript

Às deidh position: relative;dhut do CSS a chuir a-steach, cuir fios chun scrollspy tro JavaScript:

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

Dòighean-obrach

.scrollspy('refresh')

Nuair a bhios tu a’ cleachdadh scrollspy an co-bhonn ri cur ris no toirt air falbh eileamaidean bhon DOM, feumaidh tu an dòigh ùrachaidh a ghairm mar seo:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset="".

Tachartasan

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabaichean a ghabhas gluasad gu tab.js

Eisimpleirean tabaichean

Cuir gnìomh taba sgiobalta, fiùghantach ris gus gluasad tro lòsan de shusbaint ionadail, eadhon tro chlàran tuiteam-sìos. Chan eil taic ri tabaichean neadachaidh.

Cleachdadh

Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):

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

Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:

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

Marcaich

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-toggle="tab"no data-toggle="pill"air eileamaid. Ma chuireas tu na clasaichean navagus nav-tabsris an taba ulcuiridh sin stoidhle tab Bootstrap an sàs , fhad ‘s a chuireas tu ris navagus nav-pillscuiridh clasaichean stoidhle pill an sàs .

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

A 'bhuaidh a dh' fhalbh

Gus toirt air tabaichean a dhol a-steach, cuir .faderis gach .tab-pane. Feumaidh a’ chiad phana taba cuideachd .inan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

$().tab

Cuir an gnìomh eileamaid tab agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-targetno hrefnòta targaideach aig tab anns an DOM. Anns na h-eisimpleirean gu h-àrd, is e na tabaichean na <a>s le data-toggle="tab"buadhan.

.tab('show')

Tagh an taba a chaidh a thoirt seachad agus seallaidh e an t-susbaint co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha an susbaint co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an shown.bs.tabtachartas).

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

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

1. hide.bs.tab(air an taba gnìomhach làithreach)
2. show.bs.tab(air an taba a tha ri fhaicinn)
3. hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
4. shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

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

Molaidhean innealan tooltip.js

Air a bhrosnachadh leis a’ plugan sàr-mhath jQuery.tipsy sgrìobhte le Jason Frame; Is e dreach ùraichte a th’ ann an Tooltips, nach eil an urra ri ìomhaighean, a’ cleachdadh CSS3 airson beòthachaidhean, agus feartan dàta airson stòradh tiotal ionadail.

Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.

Eisimpleirean

Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:

Moladh inneal statach

Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.

Ceithir stiùiridhean

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

Cleachdadh

Bidh am plugan Tooltip a’ gineadh susbaint agus comharrachadh a rèir iarrtas, agus gu bunaiteach a’ cur molaidhean innealan às deidh an eileamaid brosnachaidh aca.

Cuir a-steach an inneal tro JavaScript:

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

Marcaich

Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach datafeart agus titleair an eileamaid HTML tha thu airson tip inneal a bhith agad. Tha an comharrachadh gineadh de inneal gu math sìmplidh, ged a tha feum air suidheachadh (gu gnàthach, air a shuidheachadh topleis a’ plugan).

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

Dòighean-obrach

$().tooltip(options)

A’ ceangal inneal-làimhseachaidh tip innealan ri cruinneachadh eileamaidean.

.tooltip('show')

A 'nochdadh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn (ie mus tachair an shown.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal. Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.

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

.tooltip('hide')

A 'falach comhairle inneal eileamaid. Tilleadh chun neach-fios mus deach an inneal fhalach (ie mus tachair an hidden.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.

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

.tooltip('toggle')

Toglaidh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn no fhalach (ie mus tachair an tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

A 'falach agus a' sgrios inneal inneal eileamaid. Chan urrainnear molaidhean innealan a chleachdas tiomnadh (a thèid a chruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

Tachartasan

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Cuir ath-chòmhdach beaga de shusbaint, mar an fheadhainn air an iPad, ri eileamaid sam bith airson fiosrachadh àrd-sgoile a chumail.

Chan eil popovers aig a bheil an dà chuid tiotal agus susbaint fad neoni air an taisbeanadh gu bràth.

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

Eisimpleirean

Popover statach

Tha ceithir roghainnean rim faighinn: gu h-àrd, deas, gu h-ìosal agus air an taobh chlì.

Demo beò

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

Ceithir stiùiridhean

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

Cuir às don ath bhriogadh

Cleachd an focusinneal brosnachaidh gus popovers a chuir às air an ath bhriogadh a nì an neach-cleachdaidh.

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

Cleachdadh

Dèan comas air popovers tro JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

Dòighean-obrach

$().popover(options)

A’ tòiseachadh popovers airson cruinneachadh eileamaidean.

.popover('show')

A’ nochdadh popover eileamaid. Tilleadh chun neach-fios mus deach an popover a nochdadh (ie mus tachair an shown.bs.popovertachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover. Chan eil popovers aig a bheil an dà chuid tiotal agus susbaint fad neoni air an taisbeanadh gu bràth.

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

.popover('hide')

A 'falach popover eileamaid. Tillidh e chun neach-fios mus bi an popover falaichte (ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover.

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

.popover('toggle')

Toglaidh popover eileamaid. Tillidh e chun neach-fios mus deach an popover a shealltainn no fhalachshown.bs.popover ( ie mus tachair an hidden.bs.popovertachartas). Thathas den bheachd gur e “leabhar-làimhe” a tha seo a’ brosnachadh an popover.

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

.popover('destroy')

A 'falach agus a' sgrios popover eileamaid. Chan urrainnear popovers a chleachdas tiomnadh (a tha air an cruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

Tachartasan

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Teachdaireachdan rabhaidh alert.js

Eisimpleirean de rabhaidhean

Cuir gnìomh cuir às do gach teachdaireachd rabhaidh leis a’ plugan seo.

Nuair a bhios tu a’ cleachdadh .closeputan, feumaidh gur e seo a’ chiad leanabh den t-sreath .alert-dismissibleagus chan fhaod susbaint teacsa sam bith a thighinn air thoiseach air sa chomharra.

Cleachdadh

Dìreach cuir ris data-dismiss="alert"a’ phutan dùnaidh agad gus gnìomh dùnadh rabhaidh a thoirt seachad gu fèin-ghluasadach. Le bhith a’ dùnadh rabhadh bheir sin air falbh e bhon DOM.

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

Gus am bi na rabhaidhean agad a’ cleachdadh beòthalachd nuair a bhios tu a’ dùnadh, dèan cinnteach gu bheil na clasaichean .fadeagus na .inclasaichean air an cur a-steach mu thràth.

Dòighean-obrach

$().alert()

A’ toirt rabhadh ag èisteachd airson tachartasan cliog air eileamaidean sliochd aig a bheil am data-dismiss="alert"feart. (Chan eil sin riatanach nuair a thathar a’ cleachdadh fèin-thòiseachadh data-api.)

$().alert('close')

A’ dùnadh rabhadh le bhith ga thoirt air falbh bhon DOM. Ma tha na clasaichean .fadeagus .inan làthair air an eileamaid, falbhaidh an rabhadh mus tèid a thoirt air falbh.

Tachartasan

Bidh plugan rabhaidh Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd rabhaidh.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Putanan putan.js

Dèan barrachd le putanan. Stèidhich putan smachd no cruthaich buidhnean de phutanan airson barrachd phàirtean leithid bàraichean inneal.

Stàiteil

Cuir ris data-loading-text="Loading..."gus staid luchdaidh a chleachdadh air putan.

Chan eil am feart seo air a mholadh bho v3.3.5 agus chaidh a thoirt air falbh ann an 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>

Toggle singilte

Cuir ris data-toggle="button"gus toggling a ghnìomhachadh air aon phutan.

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

Checkbox / Rèidio

Cuir data-toggle="buttons"ri .btn-groupbogsa-seic no cuir a-steach rèidio gus leigeil le toggling anns na stoidhlichean aca fhèin.

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

Dòighean-obrach

$().button('toggle')

Toggle staid putadh. A’ toirt coltas air a’ phutan gun deach a ghnìomhachadh.

$().button('reset')

Ath-shuidheachadh staid putan - ag atharrachadh teacsa gu teacsa tùsail. Tha an dòigh seo asyncronach agus a 'tilleadh mus tèid an ath-shuidheachadh a chrìochnachadh.

$().button(string)

Ag atharrachadh teacsa gu staid teacsa sam bith a tha air a mhìneachadh le dàta.

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

Thuit collapse.js

Plug sùbailte a bhios a’ cleachdadh dòrlach de chlasaichean airson giùlan furasta a thogail.

eisimpleir

Cliog air na putanan gu h-ìosal gus eileamaid eile a shealltainn agus fhalach tro atharrachaidhean clas:

• .collapsea’ falach susbaint
• .collapsingair a chur an sàs rè eadar-ghluasadan
• .collapse.ina’ nochdadh susbaint

Faodaidh tu ceangal a chleachdadh leis a’ hrefbhuadh, no putan leis a’ data-targetbhuadh. Anns an dà chùis, tha data-toggle="collapse"e riatanach.

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

Eisimpleir bogsa-ciùil

Leudaich an giùlan tuiteamach bunaiteach gus bogsa a chruthachadh leis a 'phannal.

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

Tha e comasach cuideachd atharrachadh a-mach .panel-bodyle .list-groups.

Cleachdadh

Bidh am plugan tuiteam a’ cleachdadh beagan chlasaichean gus an togail trom a làimhseachadh:

• .collapsea’ falach an t-susbaint
• .collapse.ina’ nochdadh an t-susbaint
• .collapsingair a chur ris nuair a thòisicheas an gluasad, agus air a thoirt air falbh nuair a bhios e deiseil

Gheibhear na clasaichean seo ann an component-animations.less.

Tro fheartan dàta

Dìreach cuir ris data-toggle="collapse"agus a data-targetris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air eileamaid a ghabhas tuiteam. Gabhaidh am data-targetfeart ri roghnaichear CSS gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapseris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas in.

Gus riaghladh buidhne coltach ri bogsa a chuir ri smachd a ghabhas tuiteam, cuir am feart dàta data-parent="#selector". Thoir sùil air an demo gus seo fhaicinn ann an gnìomh.

Air sgàth javascript

Dèan comas le làimh le:

$('.collapse').collapse()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-parent="".

Dòighean-obrach

.collapse(options)

Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object.

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

.collapse('toggle')

Togail eileamaid a ghabhas tuiteam ri fhaicinn no falaichte. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn no fhalachshown.bs.collapse ( ie mus tachair an hidden.bs.collapsetachartas).

.collapse('show')

A’ sealltainn eileamaid a ghabhas tuiteam. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn (ie mus tachair an shown.bs.collapsetachartas).

.collapse('hide')

A 'falach eileamaid collapsible. Tilleadh chun neach-fios mus deach an eileamaid a ghabhas tuiteam a chuir am falach (ie mus tachair an hidden.bs.collapsetachartas).

Tachartasan

Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Pàirt taisbeanadh-shleamhnagan airson rothaireachd tro eileamaidean, mar carousel. Chan eil taic ri carousels neadachaidh.

Eisimpleirean

Roimhe Air adhart

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

Fo-thiotalan roghainneil

Cuir fo-thiotalan ris na sleamhnagan agad gu furasta leis an .carousel-captioneileamaid taobh a-staigh faidhle .item. Cuir dìreach timcheall air HTML roghainneil sam bith a-staigh an sin agus bidh e air a cho-thaobhadh gu fèin-ghluasadach agus air a chruth.

A 'chiad suaicheantas sleamhnag

Nulla vitae elit libero, pharetra augue mollis interdum.

An dàrna leubail sleamhnag

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

An treas leubail sleamhnag

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Roimhe Air adhart

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

Cleachdadh

Ioma carousels

Feumaidh carousels cleachdadh idair a’ ghobhar as fhaide a-muigh (an .carousel) airson smachdan carousel gus obrachadh gu ceart. Nuair a chuireas tu ioma carousels ris, no nuair a dh’ atharraicheas tu carousel id, bi cinnteach gun ùraich thu na smachdan iomchaidh.

Tro fheartan dàta

Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-slidea’ gabhail ris na prìomh fhaclan prevno next, a dh’ atharraicheas suidheachadh an t-sleamhnachaidh an coimeas ris an t-suidheachadh làithreach aige. Air an làimh eile, cleachd data-slide-togus clàr-amais sleamhnag amh a thoirt don charousel data-slide-to="2", a ghluaiseas suidheachadh an t-sleamhnag gu clàr-amais sònraichte a’ tòiseachadh le 0.

Tha am data-ride="carousel"feart air a chleachdadh gus carousel a chomharrachadh mar bheothachadh a’ tòiseachadh aig luchdachadh duilleag. Chan urrainnear a chleachdadh còmhla ri (gun fheum agus neo-riatanach) a’ tòiseachadh le JavaScript soilleir den aon charousel.

Air sgàth javascript

Cuir fòn gu carousel le làimh le:

$('.carousel').carousel()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-interval="".

Dòighean-obrach

.carousel(options)

A 'tòiseachadh an carousel le roghainn roghnach objectagus a' tòiseachadh a 'rothaireachd tro nithean.

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

.carousel('cycle')

Rothaich tro na stuthan carousel bho chlì gu deas.

.carousel('pause')

A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean.

.carousel(number)

Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath).

.carousel('prev')

Cearcallan chun an rud roimhe.

.carousel('next')

Rothaich chun an ath rud.

Tachartasan

Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a bhith ceangailte ri gnìomhachd carousel.

Tha na feartan a bharrachd a leanas aig an dà thachartas:

• direction: An taobh anns a bheil an carousel a’ sleamhnachadh (an dàrna cuid "left"no "right").
• relatedTarget: An eileamaid DOM a thathas a’ sleamhnachadh na àite mar an nì gnìomhach.

Tha a h-uile tachartas carousel air a losgadh aig a’ charousel fhèin (ie aig an <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

eisimpleir

Bidh am plugan affix a’ gluasad position: fixed;air agus dheth, a’ dèanamh atharrais air a’ bhuaidh a chaidh a lorg le position: sticky;. Tha an subnavigation air an làimh dheis na thaisbeanadh beò den plugan affix.

Cleachdadh

Cleachd am plugan affix tro bhuadhan dàta no le làimh leis an JavaScript agad fhèin. Anns an dà shuidheachadh, feumaidh tu CSS a thoirt seachad airson suidheachadh agus leud an t-susbaint ceangailte agad.

Nota: Na cleachd am plugan affix air eileamaid a tha ann an eileamaid a tha gu ìre mhath suidhichte, leithid colbh air a tharraing no air a phutadh, air sgàth buga tairgse Safari .

A shuidheachadh tro CSS

Bidh am plugan affix a’ gluasad eadar trì clasaichean, gach fear a’ riochdachadh stàite sònraichte: .affix, .affix-top, agus .affix-bottom. Feumaidh tu na stoidhlichean a thoirt seachad, ach a-mhàin position: fixed;air .affix, airson na clasaichean sin thu fhèin (neo-eisimeileach bhon plugan seo) gus na fìor shuidheachadh a làimhseachadh.

Seo mar a tha am plugan affix ag obair:

1. Gus tòiseachadh, tha am plugan a’ cur ris .affix-topgus sealltainn gu bheil an eileamaid aig an ìre as àirde. Aig an ìre seo chan eil feum air suidheachadh CSS.
2. Ma thèid thu seachad air an eileamaid a tha thu ag iarraidh a cheangal bu chòir dha an fhìor cheangal a bhrosnachadh. Seo far a bheilear a' cur an .affixàite .affix-topagus a' suidheachadh position: fixed;(air a sholarachadh le CSS aig Bootstrap).
3. Ma tha co-chothromachadh bun air a mhìneachadh, bu chòir .affixdhut .affix-bottom. Leis gu bheil cuir dheth roghainneil, le bhith a’ suidheachadh fear feumaidh tu an CSS iomchaidh a shuidheachadh. Anns a 'chùis seo, cuir ris position: absolute;nuair a bhios feum air. Bidh am plugan a’ cleachdadh feart dàta no roghainn JavaScript gus faighinn a-mach càite an cuir thu an eileamaid às an sin.

Lean na ceumannan gu h-àrd gus do CSS a shuidheachadh airson gin de na roghainnean cleachdaidh gu h-ìosal.

Tro fheartan dàta

Gus giùlan ceangail a chuir ri eileamaid sam bith gu furasta, dìreach cuir data-spy="affix"ris an eileamaid a tha thu airson brath a ghabhail. Cleachd offsets gus mìneachadh cuin a thogas tu pinadh eileamaid.

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

Air sgàth javascript

Cuir fòn gu plugan affix tro JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset-top="200".

Dòighean-obrach

.affix(options)

Cuir an gnìomh do shusbaint mar shusbaint ceangailte. A 'gabhail ri roghainnean roghnach object.

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

.affix('checkPosition')

Ag ath-àireamhachadh staid an affix stèidhichte air tomhasan, suidheachadh, agus suidheachadh scrollaidh nan eileamaidean buntainneach. Tha na .affix, .affix-top, agus .affix-bottomna clasaichean air an cur ris no air an toirt air falbh bhon t-susbaint a tha ceangailte ris a rèir na stàite ùr. Feumar an dòigh seo a ghairm nuair a thèid meud an t-susbaint a tha ceangailte no an eileamaid targaid atharrachadh, gus dèanamh cinnteach gu bheil an t-susbaint ceangailte gu ceart.

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

Tachartasan

Bidh plugan affix Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd ceangail.