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

A 'cleachdadh an JavaScript cruinnichte

An dà chuid bootstrap.jsagus bootstrap.min.jsbidh na plugins uile ann an aon fhaidhle. Cuir a-steach ach aon.

Neo-eisimeileachd plugan

Tha cuid de plugins agus co-phàirtean CSS an urra ri plugins eile. Ma bheir thu a-steach plugins leotha fhèin, dèan cinnteach gun dèan thu cinnteach airson na h-eisimeileachd sin anns na docaichean. Thoir an aire cuideachd gu bheil a h-uile plugan an urra ri jQuery (tha seo a’ ciallachadh gum feumar jQuery a thoirt a-steach ro na faidhlichean plugan). Bruidhinn ris an fheadhainn againnbower.json gus faicinn dè na dreachan de jQuery a tha a’ faighinn taic.

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

Dìreach aon plugan airson gach eileamaid tro bhuadhan dàta

Na cleachd buadhan dàta bho iomadh plugan air an aon eileamaid. Mar eisimpleir, chan urrainn putan inneal a bhith aig putan agus modal a thogail. Gus seo a dhèanamh, cleachd eileamaid còmhdaich.

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

À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.3.7"

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.

Leabharlannan treas-phàrtaidhean

Chan eil Bootstrap a’ toirt taic oifigeil do leabharlannan JavaScript treas-phàrtaidh leithid Prototype no jQuery UI. A dh'aindeoin .noConflictagus ainmean thachartasan, dh'fhaodadh gum bi duilgheadasan co-chòrdalachd ann a dh'fheumas tu a rèiteachadh leat 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.

Chan eil taic ri ioma-mhodalan fosgailte

Dèan cinnteach nach fosgail thu modal fhad ‘s a tha fear eile fhathast ri fhaicinn. Tha feum air còd gnàthaichte a bhith a’ sealltainn barrachd air aon mhodal aig an aon àm.

Suidheachadh comharrachaidh modal

Feuch an-còmhnaidh ri còd HTML modal a chuir ann an suidheachadh àrd-ìre anns an sgrìobhainn agad gus pàirtean eile a sheachnadh a bheir buaidh air coltas agus / no gnìomhachd a’ mhodail.

Draibhearan airson innealan-làimhe

Tha cuid de rabhaidhean ann mu bhith a’ cleachdadh mhodalan air innealan gluasadach. Faic na docaichean taic brabhsair againn airson mion-fhiosrachadh.

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>

Dèan modalan ruigsinneach

Dèan cinnteach gun cuir thu role="dialog"agus aria-labelledby="...", a 'toirt iomradh air an tiotal modal, gu .modal, agus role="document"ris .modal-dialogfhèin.

A bharrachd air an sin, faodaidh tu cunntas a thoirt air a’ chòmhradh modal agad le aria-describedbyon .modal.

Cuir a-steach bhideothan YouTube

Le bhith a’ stèidheachadh bhideothan YouTube ann am modalan feumaidh JavaScript a bharrachd nach eil ann am Bootstrap gus stad a chuir air ath-chluich gu fèin-ghluasadach agus barrachd. Faic am post cuideachail Stack Overflow seo airson tuilleadh fiosrachaidh.

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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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

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,

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

Ainm seòrsa bunaiteach tuairisgeul
cùl-raon boolean no an t-sreang'static' fìor A’ toirt a-steach eileamaid cùl-raon modal. Air neo, sònraich staticairson cùl-raon nach dùin am modal air cliogadh.
meur-chlàr boolean fìor Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh
seall boolean fìor A’ sealltainn am modal nuair a thèid a thòiseachadh.
iomallach slighe breugach

Chan eil an roghainn seo air a mholadh bho v3.3.0 agus chaidh a thoirt air falbh ann an v4. Tha sinn a’ moladh an àite sin a bhith a’ cleachdadh teamplaid taobh teachdaiche no frèam ceangail dàta, no a’ fònadh jQuery.load thu fhèin.

Ma thèid URL iomallach a thoirt seachad, thèid susbaint a luchdachadh aon turas tro mhodh jQuery loadagus a chuir a-steach don .modal-contentdiv. Ma tha thu a’ cleachdadh an data-api, faodaidh tu am hreffeart a chleachdadh gus an stòr iomallach a shònrachadh. Tha eisimpleir de seo ri fhaicinn gu h-ìosal:

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

Dòighean-obrach

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

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

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

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

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

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

Seòrsa Tachartas Tuairisgeul
seall.bs.modal Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir. Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTargetsheilbh an tachartais.
air a thaisbeanadh.bs.modal Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTargetsheilbh an tachartais.
seiche.bs.modal Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.modal Thèid an tachartas seo a chuir às nuair a tha am modal deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
luchdaichte.bs.modal Thèid an tachartas seo a losgadh nuair a tha am modal air susbaint a luchdachadh leis an remoteroghainn.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

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

data-toggle="dropdown"fhathast a dhìth

Ge bith co-dhiù an cuir thu fios chun chlàr tuiteam-sìos agad tro JavaScript no an àite sin cleachd an data-api, data-toggle="dropdown"feumaidh tu an-còmhnaidh a bhith an làthair air eileamaid brosnachaidh an tuiteam-sìos.

Chan eil gin

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

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.

Seòrsa Tachartas Tuairisgeul
seall.bs. dropdown Bidh an tachartas seo a’ losgadh sa bhad nuair a chanar ris an dòigh eisimpleir taisbeanaidh.
air a nochdadh.bs.dropdown Thèid an tachartas seo a losgadh nuair a bhios an tuiteam-sìos ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).
seiche.bs.dropdown Thèid an tachartas seo a losgadh sa bhad nuair a thèid an dòigh seiche seiche a ghairm.
falaichte.bs.dropdown Thèid an tachartas seo a losgadh nuair a tha an tuiteam-sìos deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).
$('#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.

@saill

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi mus do reic iad a-mach qui. Còraichean baidhsagal tuathanas-gu-bòrd Tumblr ge bith dè. Anim keffiyeh carles cardigan. Bothan dhealbhan Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui is dòcha nach cuala tu iomradh orra et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, creideas ìoranas biodiesel keffiyeh artisan ullamco consequat.

@meadh

Bòrd spèilidh mustache Veniam marfa, feusag pitchfork fugiat velit. Freegan feusag aliqua cupidatat mcsweeney's vero. Cupidata aig ceithir loko nisi, agus helvetica nulla carles. Truc bìdh geansaidh tatù-cogaidh, vinyl quis non freegan aig mcsweeney. Lo-fi wes anderson +1 sartorial. Carles eacarsaich neo-ethetach quis gentrify. Bidh Brooklyn a ’moladh lionn ciùird vice keytar deserunt.

aon

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Còraichean baidhsagal Lomo a ’toirt taic do banh mi, velit ea sunt next level locavore cofaidh aon-tùs ann am Magna Veniam. Vinyl id beatha àrd, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi baga teachdaire minim DIY. Cred ex in, seasmhach delectus consectetur fanny pack iphone.

dhà

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Blog Keytar twee, baga teachdaire culpa marfa ge bith dè an truca bìdh delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche ìoranas, cait tàirneanaich is dòcha nach cuala tu mun deidhinn mar thoradh air hoodie gun ghluten lo-fi fap aliquip. Labore elit placeat mus do reic iad a-mach, terry richardson proident brunch nesciunt quiscosty sweater pariatur keffiyeh ut helvetica artisan. Cardigan ciùird seitan lionn deiseil velit. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco thundercats.

Cleachdadh

Feumaidh Bootstrap nav

Feumaidh Scrollspy an-dràsta co- phàirt Bootstrap nav a chleachdadh gus ceanglaichean gnìomhach a chomharrachadh gu ceart.

Tha feum air targaidean ID so-rèiteach

Feumaidh targaidean id fhuasgladh a bhith aig ceanglaichean Navbar. Mar eisimpleir, <a href="#home">home</a>feumaidh rudeigin a bhith a rèir rudeigin san DOM mar <div id="home"></div>.

Cha deach aire a thoirt do eileamaidean neo :visible-targaid

Cha tèid aire a thoirt do eileamaidean targaid nach eil a :visiblerèir jQuery agus cha tèid na nithean seòlaidh co-fhreagarrach aca a chomharrachadh gu bràth.

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

Ainm seòrsa bunaiteach tuairisgeul
dheth àireamh 10 Pixels ri chothromachadh bhon mhullach nuair a thathar a’ tomhas suidheachadh an scrollaidh.

Tachartasan

Seòrsa Tachartas Tuairisgeul
ghnìomhachadh.bs.scrollspy Bidh an tachartas seo a’ losgadh nuair a thèid rud ùr a chuir an gnìomh leis an scrollspy.
$('#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.

Raw denim is dòcha nach cuala tu mun deidhinn jean shorts Austin. Nesciunt tofu stumptown aliqua, maighstir glanaidh retro synth. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit bùidsear retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip àite aig salvia cillum iphone. Seitan aliquip quis cardigan american apparel, bùidsear voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

A’ leudachadh seòladh tabbed

Bidh am plugan seo a’ leudachadh a’ phàirt seòlaidh tabbed gus raointean clàr a chuir ris.

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

Seòrsa Tachartas Tuairisgeul
seall.bs.tab Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
air a shealltainn.bs.tab Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
seiche.bs.tab Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
falaichte.bs.tab Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.
$('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:

Pants teann an ath ìre keffiyeh is dòcha nach cuala tu iomradh orra. Bothan dhealbhan feusag amh denim letterpress baga teachdaire vegan stumptown. Tha seaman vinyl terry richardson aig seitan tuathanas-gu-bòrd, aodach seasmhach quinoa quinoa 8-bit Ameireaganach aig mcsweeney. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, ceithir loko mcsweeney's cleanse vegan chambray. Neach-ciùird fìor ìoranta ge bith dè an iuchair, sealladair farm-to-table banky Austin twitter a’ làimhseachadh freegan cred raw denim cofaidh viral aon-tùs.

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>

Gnìomhachd tarraing a-steach

Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover nan tarraing a-steach, a’ ciallachadh gum feum thu iad fhèin a thòiseachadh .

Is e aon dòigh air a h-uile comhairle inneal air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-togglefeart:

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

Ceanglaichean ioma-loidhne

Aig amannan bidh thu airson tip inneal a chuir ri hyperlink a bhios a ’cuairteachadh grunn loidhnichean. Is e giùlan bunaiteach am plugan Tooltip a mheadhanachadh gu còmhnard agus gu dìreach. Cuir white-space: nowrap;ris na h-acair agad gus seo a sheachnadh.

Feumaidh molaidhean innealan ann am buidhnean putan, buidhnean cuir a-steach, agus bùird suidheachadh sònraichte

Nuair a bhios tu a’ cleachdadh molaidhean innealan air eileamaidean taobh a-staigh a .btn-groupno an .input-group, no air eileamaidean co-cheangailte ri clàr ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), feumaidh tu an roghainn a shònrachadh container: 'body'(air a chlàradh gu h-ìosal) gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/ no a 'call a h-oiseanan cruinn nuair a thèid an inneal a phiobrachadh).

Na feuch ri molaidhean innealan a shealltainn air eileamaidean falaichte

Le bhith a’ toirt a-steach $(...).tooltip('show')nuair a bhios an eileamaid targaid ann, display: none;bidh am bàrr-inneal air a shuidheachadh gu ceàrr.

Molaidhean innealan ruigsinneach airson luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachail

Do luchd-cleachdaidh a bhios a’ seòladh le meur-chlàr, agus gu sònraichte luchd-cleachdaidh theicneòlasan cuideachaidh, cha bu chòir dhut ach molaidhean innealan a chuir ri eileamaidean le fòcas meur-chlàr leithid ceanglaichean, smachdan foirm, no eileamaid neo-riaghailteach sam bith le tabindex="0"feart.

Feumaidh molaidhean innealan mu eileamaidean ciorramach eileamaidean còmhdaich

Gus tip inneal a chur ri a disabledno .disabledeileamaid, cuir an eileamaid taobh a-staigh a <div>agus cuir an t-inneal air an sin na <div>àite.

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

Ainm Seòrsa Deònach Tuairisgeul
beothachadh boolean fìor Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal
soitheach sreang | breugach breugach

A’ ceangal an t-inneal ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut am bàrr inneil a shuidheachadh ann an sruth na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ bhileag inneal bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.

dàil àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an inneal (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }

html boolean breugach Cuir a-steach HTML a-steach don ghoireas. Ma tha e ceàrr, textthèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
suidheachadh sreang | gnìomh 'mullach'

Mar a shuidhicheas tu an t-inneal - gu h-àrd | bun | clì | deas | fèin.
Nuair a thèid “auto” a shònrachadh, ath-stiùiridhidh e am bàrr inneal gu dinamach. Mar eisimpleir, ma tha an suidheachadh “clì gu fèin-ghluasadach”, seallaidh an t-inneal air an taobh chlì nuair as urrainnear, air neo seallaidh e deas.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an inneal inneal DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don t-eisimpleir tooltip.

roghnaiche sreang breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach molaidhean innealan a chuir ris. Faic seo agus eisimpleir fiosrachail .
teamplaid sreang '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu an t-inneal.

Thèid na molaidhean innealan titlea thoirt a-steach don fhaidhle .tooltip-inner.

.tooltip-arrowbidh e na shaighead na h-inneal.

Bu chòir gum biodh an .tooltipclas aig an eileamaid còmhdaich as fhaide a-muigh.

tiotal sreang | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am bàrr-inneal ceangailte.

spreidh sreang 'fòcas hover' Mar a tha tooltip air a phiobrachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manualchan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile.
sealladh-seallaidh sreang | nì | gnìomh { roghnaichear: 'corp', pleadhag: 0 }

A’ cumail an t-inneal taobh a-staigh crìochan an eileamaid seo. Eisimpleir: viewport: '#viewport'no{ "selector": "#viewport", "padding": 0 }

Ma thèid gnìomh a thoirt seachad, canar ris an eileamaid brosnachaidh nód DOM mar an aon argamaid a th’ aige. Tha an co- thistheacsa air a shuidheachadh don t-eisimpleir tooltip.

Feartan dàta airson molaidhean innealan fa leth

Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

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 t-inneal-fiosrachaidh a shealltainn no fhalach (ie mus deach anshown.bs.tooltipTillidh e chun neach-fios mus deach an inneal a shealltainn nohidden.bs.tooltip tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.

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

.tooltip('destroy')

A 'falach agus a' sgrios inneal inneal eileamaid. Molaidhean innealan a chleachdas tiomnadh (a tha air an cruthachadh le bhith a’ cleachdadh an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

Tachartasan

Seòrsa Tachartas Tuairisgeul
taisbean.bs.toolt Bidh an tachartas seo a 'losgadh sa bhad nuair a bhios anshow a chanar ris an dòigh eisimpleir.
air a shealltainn.bs.tooltip Thèid an tachartas seo a chuir às nuair a bhios an inneal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.tooltip Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.tooltip Thèid an tachartas seo a losgadh nuair a tha an inneal deiseil air a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
cuir a-steach.bs.tooltip Thèid an tachartas seo a losgadh às deidh an show.bs.tooltiptachartais nuair a chaidh an teamplaid tooltip a chuir ris an DOM.
$('#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.

An urra ri plugan

Feumaidh Popovers am plugan Tooltip a bhith air a thoirt a-steach don dreach agad de Bootstrap.

Gnìomhachd tarraing a-steach

Airson adhbharan dèanadais, tha an data-apis Tooltip agus Popover nan tarraing a-steach, a’ ciallachadh gum feum thu iad fhèin a thòiseachadh .

Is e aon dòigh air a h-uile popovers air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-togglefeart:

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

Feumaidh popovers ann am buidhnean putan, buidhnean cuir a-steach, agus bùird suidheachadh sònraichte

Nuair a bhios tu a’ cleachdadh popovers air eileamaidean taobh a-staigh a .btn-groupno an .input-group, no air eileamaidean co-cheangailte ri clàr ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), feumaidh tu an roghainn a shònrachadh container: 'body'(air a chlàradh gu h-ìosal) gus frith-bhuaidhean nach eileas ag iarraidh a sheachnadh (leithid an eileamaid a’ fàs nas fharsainge agus/ no a 'call a h-oiseanan cruinn nuair a thèid am popover a bhrosnachadh).

Na feuch ri popovers a shealltainn air eileamaidean falaichte

Le bhith a’ toirt a-steach $(...).popover('show')nuair a bhios an eileamaid targaid ann, display: none;bidh an popover air a shuidheachadh gu ceàrr.

Feumaidh popovers air eileamaidean ciorramach eileamaidean còmhdaich

Gus popover a chur ri a disabledno .disabledeileamaid, cuir an eileamaid am broinn a <div>agus cuir am popover an <div>àite sin.

Ceanglaichean ioma-loidhne

Aig amannan bidh thu airson popover a chuir ri hyperlink a bhios a ’cuairteachadh grunn loidhnichean. Is e giùlan bunaiteach am plugan popover a mheadhanachadh gu còmhnard agus gu dìreach. Cuir white-space: nowrap;ris na h-acair agad gus seo a sheachnadh.

Eisimpleirean

Popover statach

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

Popover mullach

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

Popover ceart

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

Popover gu h-ìosal

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

Dh’fhalbh Popover

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

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.

Comharrachadh sònraichte a dhìth airson cuir às-air-an ath-bhriog

Airson giùlan ceart thar-bhrabhsair agus tar-àrd-ùrlar, feumaidh tu an <a>taga a chleachdadh, chan e an <button>taga, agus feumaidh tu cuideachd na feartan role="button"agus na tabindexfeartan a thoirt a-steach.

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

Ainm Seòrsa Deònach Tuairisgeul
beothachadh boolean fìor Cuir a-steach eadar-ghluasad caol CSS chun popover
soitheach sreang | breugach breugach

A’ ceangal an popover ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut an popover a shuidheachadh ann an sruthadh na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ popover bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.

susbaint sreang | gnìomh ''

Luach bunaiteach an t-susbaint mura h data-content-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.

dàil àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an popover (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }

html boolean breugach Cuir a-steach HTML a-steach don popover. Ma tha e ceàrr, textthèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM. Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
suidheachadh sreang | gnìomh 'deas'

Mar a shuidhicheas tu am popover - gu h-àrd | bun | clì | deas | fèin.
Nuair a thèid “auto” a shònrachadh, ath-stiùiridhidh e am popover gu dinamach. Mar eisimpleir, ma tha an suidheachadh "clì gu fèin-ghluasadach", nochdaidh am popover air an taobh chlì nuair a ghabhas e dèanamh, air neo seallaidh e deas.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an nód popover DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don eisimpleir popover.

roghnaiche sreang breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean popover a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach popovers a chuir ris. Faic seo agus eisimpleir fiosrachail .
teamplaid sreang '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu am popover.

Thèid na popovers titlea thoirt a-steach don fhaidhle .popover-title.

Thèid na popovers contenta thoirt a-steach don fhaidhle .popover-content.

.arrowbidh e na shaighead an popover.

Bu chòir gum biodh an .popoverclas aig an eileamaid còmhdaich as fhaide a-muigh.

tiotal sreang | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am popover ceangailte.

spreidh sreang 'cliog' Mar a thèid popover a bhrosnachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite. manualchan urrainnear a chur còmhla ri inneal brosnachaidh sam bith eile.
sealladh-seallaidh sreang | nì | gnìomh { roghnaichear: 'corp', pleadhag: 0 }

A’ cumail an popover taobh a-staigh crìochan an eileamaid seo. Eisimpleir: viewport: '#viewport'no{ "selector": "#viewport", "padding": 0 }

Ma thèid gnìomh a thoirt seachad, canar ris an eileamaid brosnachaidh nód DOM mar an aon argamaid a th’ aige. Tha an co- thistheacsa air a shuidheachadh don eisimpleir popover.

Feartan dàta airson popovers fa leth

Faodar roghainnean airson popovers fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

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

Seòrsa Tachartas Tuairisgeul
seall.bs.popover Bidh an tachartas seo a’ losgadh sa bhad nuairshow a chanar ris an dòigh eisimpleir.
air a shealltainn.bs.popover Thèid an tachartas seo a losgadh nuair a bhios an popover ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.popover Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.popover Thèid an tachartas seo a losgadh nuair a tha an popover deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
a-steach.bs.popover Thèid an tachartas seo a losgadh às deidh an show.bs.popovertachartais nuair a chaidh an teamplaid popover a chuir ris an DOM.
$('#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 dhùineas tu, dèan cinnteach gu bheil an .fadeagus.in na clasaichean 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.

Seòrsa Tachartas Tuairisgeul
dùin.bs.alert Bidh an tachartas seo a’ losgadh sa bhad nuairclose a chanar ris an dòigh eisimpleir.
dùinte.bs.alert Thèid an tachartas seo a losgadh nuair a tha an rabhadh dùinte (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
$('#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.

Co-fhreagarrachd tar-bhrabhsair

Bidh Firefox a’ cumail a’ dol le stàitean smachd (ciorramachd agus seic) thar luchdan dhuilleagan . Is e fuasgladh airson seo a chleachdadh autocomplete="off". Faic bug Mozilla #654072 .

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.

Cleachd ge bith dè an stàit as toil leat!

Air sgàth an taisbeanaidh seo, tha sinn a 'cleachdadh data-loading-textagus $().button('loading'), ach chan e sin an aon stàit as urrainn dhut a chleachdadh. Faic barrachd mu dheidhinn seo gu h-ìosal anns na $().button(string)sgrìobhainnean .

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

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

Toggle singilte

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

Feumaidh putanan ro-thogte.active agusaria-pressed="true"

Airson putanan a chaidh a thogail ro-làimh, feumaidh tu an .activeclas agus am aria-pressed="true"feart a chuir buttonriut fhèin.

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

Tha feum air roghainnean ro-shuidhichte.active

Airson roghainnean ro-roghnaichte, feumaidh tu an .activeclas a chur ris an cuir a-steach labelthu fhèin.

Staid sgrùdaichte lèirsinneach air ùrachadh a-mhàin le cliog

Ma thèid staid sgrùdaichte putan bogsa-seic ùrachadh gun a bhith a’ losgadh clicktachartas air a’ phutan (me tro <input type="reset">no tro bhith a’ suidheachadh checkedseilbh an cuir a-steach), feumaidh tu an .activeclas a thionndadh air do chuir a-steach labelthu fhèin.

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

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" autocomplete="off">
  ...
</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.

An urra ri plugan

Feumaidh Collapse am plugan gluasaid a bhith air a ghabhail a-steach don dreach agad de Bootstrap.

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.

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

Eisimpleir bogsa-ciùil

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
<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.

  • Bootply
  • Aon itmus agus facilin
  • Dàrna eros

Dèan smachdan leudachaidh / tuiteam ruigsinneach

Dèan cinnteach gun cuir thu ris aria-expandedan eileamaid smachd. Tha am feart seo gu soilleir a’ mìneachadh suidheachadh làithreach na h-eileamaid tuiteamach do leughadairean sgrion agus teicneòlasan taice coltach ris. Ma tha an eileamaid a ghabhas tuiteam dùinte gu bunaiteach, bu chòir luach aria-expanded="false". Ma tha thu air an eileamaid tuiteamach a shuidheachadh gus a bhith fosgailte gu bunaiteach a’ cleachdadh a’ inchlas, cuir aria-expanded="true"air an smachd an àite sin. Togaidh am plugan am feart seo gu fèin-ghluasadach a rèir an deach an eileamaid a ghabhas tuiteam fhosgladh no a dhùnadh.

A bharrachd air an sin, ma tha an eileamaid smachd agad ag amas air aon eileamaid a ghabhas tuiteam - ie tha am data-targetfeart a’ comharrachadh idroghnaiche - faodaidh tu feart a bharrachd aria-controlsa chuir ris an eileamaid smachd, anns a bheil an ideileamaid a ghabhas tuiteam. Bidh leughadairean sgrion ùr-nodha agus teicneòlasan taice coltach ris a’ cleachdadh a’ fheart seo gus geàrr-liostaichean a bharrachd a thoirt do luchd-cleachdaidh gus seòladh gu dìreach chun eileamaid tuiteamach fhèin.

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

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

Ainm seòrsa bunaiteach tuairisgeul
pàrant roghnaiche breugach Ma tha neach-taghaidh air a thoirt seachad, thèid a h-uile eileamaid tuiteamach fon phàrant ainmichte a dhùnadh nuair a thèid an rud tuiteamach seo a shealltainn. (coltach ri giùlan bogsa traidiseanta - tha seo an urra ris a ' panelchlas)
tog boolean fìor Toglaich an eileamaid a ghabhas tuiteam air ionnsaigh

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.

Seòrsa Tachartas Tuairisgeul
seall.bs.tuiteam Bidh an tachartas seo a’ losgadh sa bhad nuairshow a chanar ris an dòigh eisimpleir.
air a nochdadh.bs.collapse Thèid an tachartas seo a losgadh nuair a tha eileamaid tuiteamach air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.collapse Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hidemodh a ghairm.
falaichte.bs.collapse Thèid an tachartas seo a losgadh nuair a chaidh eileamaid tuiteamach fhalach bhon chleachdaiche (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
$('#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.

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

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

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

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

Ainm seòrsa bunaiteach tuairisgeul
eadar-ama àireamh 5000 An ùine airson dàil eadar rothaireachd gu fèin-ghluasadach air rud. Ma tha e ceàrr, cha bhith carousel a’ rothaireachd gu fèin-ghluasadach.
stad sreang | null "hover" Ma tha thu deiseil "hover", stad air rothaireachd an carousel air mouseenteragus tòisich air rothaireachd an carousel air adhart mouseleave. Ma thèid a shuidheachadh gu null, cha stad thu gluasad thairis air a’ charousel.
paisg boolean fìor Am bu chòir don charousel rothaireachd leantainneach no stadan cruaidh a bhith aige.
meur-chlàr boolean fìor Am bu chòir don carousel freagairt a thoirt do thachartasan meur-chlàr.

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

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

Rothaich tro na stuthan carousel bho chlì gu deas.

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

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

Cearcallan chun an rud roimhe.

Rothaich chun an ath rud.

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

Seòrsa Tachartas Tuairisgeul
sleamhnachadh.bs.carousel Bidh an tachartas seo a’ losgadh sa bhad nuair a thèid an slidedòigh eisimpleir a chleachdadh.
slid.bs.carousel Tha an tachartas seo air a losgadh nuair a tha an carousel air crìoch a chuir air a ghluasad sleamhnag.
$('#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, cuiridh am plugan ris.affix-top gus 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".

Ainm seòrsa bunaiteach tuairisgeul
dheth àireamh | gnìomh | nì 10 Pixels ri chothromachadh bhon sgrion nuair a thathar a’ tomhas suidheachadh an scrollaidh. Ma thèid aon àireamh a thoirt seachad, thèid an cothromachadh a chuir an sàs anns gach taobh gu h-àrd agus gu h-ìosal. Gus cothromachadh sònraichte, bun is mullach a thoirt seachad dìreach thoir seachad rud offset: { top: 10 }no offset: { top: 10, bottom: 5 }. Cleachd gnìomh nuair a dh’ fheumas tu obrachadh a-mach gu dinamach.
targaid roghnaiche | nead | eileamaid jQuery an window Sònraich an eileamaid targaid den affix.

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.

Seòrsa Tachartas Tuairisgeul
affix.bs.affix Bidh an tachartas seo a 'losgadh dìreach mus tèid an eileamaid a cheangal.
gèidh.bs.affix Thèid an tachartas seo a losgadh às deidh an eileamaid a bhith air a cheangal.
affix-top.bs.affix Bidh an tachartas seo a’ losgadh sa bhad mus tèid an eileamaid a ghleusadh-mullach.
affixed-top.bs.affix Thèid an tachartas seo a losgadh às deidh an eileamaid a bhith air a cheangal gu h-àrd.
affix-bun.bs.affix Bidh an tachartas seo a’ losgadh sa bhad mus tèid an eileamaid a ghleusadh-bun.
affixed-bun.bs.affix Thèid an tachartas seo a losgadh às deidh don eileamaid a bhith air a cheangal aig bonn.