Forbhreathnú

Aonair nó tiomsaithe

*.jsIs féidir forlíontáin a áireamh ina n-aonar (ag baint úsáide as comhaid aonair Bootstrap ), nó iad go léir ag an am céanna (ag baint úsáide as bootstrap.jsnó as an mionghearrtha bootstrap.min.js).

Ag baint úsáide as an JavaScript tiomsaithe

An dá bootstrap.jsagus bootstrap.min.jsgo bhfuil gach breiseán i gcomhad amháin. Cuir san áireamh ach ceann amháin.

Spleáchais breiseán

Braitheann roinnt breiseán agus comhpháirteanna CSS ar fhorlíontáin eile. Má chuireann tú forlíontáin san áireamh ina n-aonar, déan cinnte seiceáil le haghaidh na spleáchais seo sna doiciméid. Tabhair faoi deara freisin go mbraitheann gach breiseán ar jQuery (ciallaíonn sé seo nach mór jQuery a chur san áireamh roimh na comhaid breiseán). Téigh i gcomhairle lenár n-bower.json aghaidh le fáil amach cé na leaganacha de jQuery a fhaigheann tacaíocht.

Tréithe sonraí

Is féidir leat gach breiseán Bootstrap a úsáid tríd an API marcála amháin gan aon líne amháin de JavaScript a scríobh. Is é seo an API den chéad scoth de chuid Bootstrap agus ba chóir go mbeadh sé mar an gcéad bhreithniú agat agus breiseán á úsáid agat.

É sin ráite, i gcásanna áirithe d’fhéadfadh sé a bheith inmhianaithe an fheidhmiúlacht seo a mhúchadh. Dá bhrí sin, cuirimid ar fáil freisin an cumas an API aitreabúide sonraí a dhíchumasú trí gach imeacht ar an doiciméad a bhfuil spás air a bhfuil spás air a dhícheangal data-api. Breathnaíonn sé seo mar seo:

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

Nó, chun díriú ar bhreiseán ar leith, níl le déanamh ach ainm an bhreiseáin a chur san áireamh mar ainmspás in éineacht leis an ainmspás data-api mar seo:

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

Breiseán amháin in aghaidh na heiliminte trí bhíthin tréithe sonraí

Ná húsáid tréithe sonraí ó fhorlíontáin iolracha ar an eilimint chéanna. Mar shampla, ní féidir leid uirlisí a bheith ag cnaipe agus modh a scoránaigh. Chun é seo a bhaint amach, bain úsáid as eilimint timfhilleadh.

Clár API

Creidimid freisin gur cheart go mbeifeá in ann gach breiseán Bootstrap a úsáid tríd an API JavaScript amháin. Is modhanna aonair inslabhra iad gach API poiblí, agus seolann siad an bailiúchán ar gníomhaíodh ina leith.

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

Ba cheart do gach modh glacadh le réad roghanna roghnach, teaghrán a dhíríonn ar mhodh áirithe, nó rud ar bith (a thionscnaíonn breiseán a bhfuil iompraíocht réamhshocraithe aige):

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

Nochtann gach breiseán a chruthaitheoir amh ar Constructorairí freisin: $.fn.popover.Constructor. Más mian leat mar shampla breiseán ar leith a fháil, é a aisghabháil go díreach ó eilimint: $('[rel="popover"]').data('popover').

Socruithe réamhshocraithe

Is féidir leat na socruithe réamhshocraithe le haghaidh breiseán a athrú trí Constructor.DEFAULTSréad an bhreiseáin a mhodhnú:

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

Gan choimhlint

Uaireanta is gá forlíontáin Bootstrap a úsáid le creataí Chomhéadain eile. Sna cúinsí seo, féadann imbhuailtí ainmspáis tarlú ó am go chéile. Má tharlaíonn sé seo, is féidir leat glaoch .noConflictar an mbreiseán is mian leat a luach a chur ar ais.

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

Imeachtaí

Soláthraíonn Bootstrap imeachtaí saincheaptha le haghaidh gníomhartha uathúla fhormhór na mbreiseán. Go ginearálta, tagann siad seo i bhfoirm infinideach agus i bhfoirm rannpháirtí san am a chuaigh thart - áit a spreagtar an infinideach (ex. show) ag tús imeachta, agus ina shownspreagtar foirm an rannpháirtí san am atá thart (ex. ) ar chríochnú gníomhaíochta.

Ó 3.0.0, tá spásanna ainmneacha ar gach imeacht Bootstrap.

Soláthraíonn gach imeacht infinitive preventDefaultfeidhmiúlacht. Soláthraíonn sé seo an cumas chun stop a chur le gníomh a chur i gcrích sula dtosaíonn sé.

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

Uimhreacha leagan

Is féidir teacht ar an leagan de gach breiseán jQuery de chuid Bootstrap trí VERSIONmhaoin chruthaitheoir an bhreiseáin. Mar shampla, don bhreiseán leid uirlisí:

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

Gan aon chúluithe speisialta nuair atá JavaScript díchumasaithe

Ní thiteann forlíontáin Bootstrap siar go háirithe go galánta nuair a bhíonn JavaScript díchumasaithe. Más spéis leat eispéireas an úsáideora sa chás seo, bain úsáid as <noscript>chun an cás a mhíniú (agus conas JavaScript a athchumasú) do d’úsáideoirí, agus/nó cuir do chuid fallbacks saincheaptha féin leis.

Leabharlanna tríú páirtí

Ní thacaíonn Bootstrap go hoifigiúil le leabharlanna tríú páirtí JavaScript ar nós Fréamhshamhail nó Chomhéadain jQuery. In ainneoin .noConflictimeachtaí agus ainmspás orthu, d’fhéadfadh fadhbanna comhoiriúnachta a bheith ann nach mór duit a réiteach i d’aonar.

Aistrithe transition.js

Maidir le haistrithe

Le haghaidh éifeachtaí aistrithe simplí, cuir san áireamh transition.jsuair amháin in éineacht leis na comhaid JS eile. Má tá tú ag baint úsáide as an tiomsaithe (nó mionghearrtha) bootstrap.js, ní gá é seo a chur san áireamh - tá sé ann cheana féin.

Cad atá istigh

Is cúntóir bunúsach é Transition.js le haghaidh transitionEndimeachtaí chomh maith le aithriseoir trasdula CSS. Úsáideann na forlíontáin eile é chun tacaíocht trasdula CSS a sheiceáil agus chun trasdulta crochta a ghabháil.

Aistrithe a dhíchumasú

Is féidir aistrithe a dhíchumasú ar fud an domhain ag baint úsáide as an mblúire JavaScript seo a leanas, a chaithfidh teacht tar éis transition.js( bootstrap.jsbootstrap.min.js, de réir mar a bheidh) a lódáil:

$.support.transition = false

Modail modal.js

Tá modhanna dialóige sruthlínithe, ach solúbtha, leideanna dialóige leis an fheidhmiúlacht íosta is gá agus mainneachtainí cliste.

Ní thacaítear le modhanna iomadúla oscailte

Bí cinnte nach n-osclóidh tú modúl agus ceann eile fós le feiceáil. Teastaíonn cód saincheaptha chun níos mó ná modha amháin a thaispeáint ag an am.

Socrúchán marcála módúil

Déan iarracht i gcónaí cód HTML módúil a chur in áit ardleibhéil i do dhoiciméad chun comhpháirteanna eile a sheachaint a chuireann isteach ar chuma agus/nó ar fheidhmiúlacht an mhódúil.

Fógra maidir le gléasanna soghluaiste

Tá roinnt caveat ann maidir le módúil a úsáid ar ghléasanna soghluaiste. Féach ar ár ndoiciméid tacaíochta brabhsálaí le haghaidh sonraí.

Mar gheall ar an gcaoi a sainmhíníonn HTML5 a shéimeantaic, autofocusníl aon éifeacht ag an tréith HTML i módúil Bootstrap. Chun an éifeacht chéanna a bhaint amach, bain úsáid as roinnt JavaScript saincheaptha:

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

Samplaí

Sampla statach

Módúil rindreáilte le ceanntásc, corp, agus tacar gníomhartha sa bhuntásc.

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

Taispeántas beo

Scoránaigh modúl trí JavaScript trí chliceáil ar an gcnaipe thíos. Sleamhnóidh sé síos agus céimnithe isteach ó bharr an leathanaigh.

<!-- 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 módúil inrochtana

Bí cinnte suimiú role="dialog"agus aria-labelledby="...", ag tagairt don teideal módúil, le .modal, agus role="document"leis an teideal .modal-dialogféin.

Ina theannta sin, is féidir leat cur síos a dhéanamh ar do dialóg mhodhúil agus aria-describedbyar .modal.

Físeáin YouTube a neadú

Chun físeáin YouTube a leabú i módúil tá gá le JavaScript breise nach bhfuil i Bootstrap chun athsheinm agus níos mó a stopadh go huathoibríoch. Féach ar an bpostáil cabhrach Stack Overflow seo le haghaidh tuilleadh eolais.

Méideanna roghnacha

Tá dhá mhéid roghnacha ag na modúil, ar fáil trí ranganna mionathraithe le cur ar .modal-dialog.

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

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

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

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

Bain beochan

Le haghaidh módúil atá le feiceáil go simplí seachas céimnithe isteach chun amharc, bain an .faderang de do mharcáil módúil.

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

Ag baint úsáide as an gcóras greille

Chun leas a bhaint as córas eangaí Bootstrap laistigh de mhodh, ní gá ach nead .rows laistigh den .modal-bodychóras greille a úsáid agus ansin bain úsáid as na gnáth-aicmí córais eangaí.

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

An bhfuil braon cnaipí agat a spreagann an modh céanna, agus a bhfuil beagán difriúil acu? Úsáid event.relatedTargetagus tréithe HTML ( data-*trí jQuery b'fhéidir ) chun inneachar an mhódúil a athrú ag brath ar an gcnaipe ar a ndearnadh cliceáil. Féach na doiciméid Imeachtaí Módúla le haghaidh sonraí ar relatedTarget,

...níos mó cnaipí...
<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)
})

Úsáid

Scoránaigh an breiseán modha d’inneachar folaithe ar éileamh, trí tréithe sonraí nó JavaScript. Cuireann sé freisin .modal-openleis an <body>iompar scrollaithe réamhshocraithe a shárú agus gineann sé .modal-backdropa chun limistéar cliceáil a sholáthar chun módúil a thaispeántar a dhíbhe nuair a chliceálann tú lasmuigh den mhodh.

Trí tréithe sonraí

Modúl a ghníomhachtú gan JavaScript a scríobh. Socraigh data-toggle="modal"ar eilimint rialtóra, cosúil le cnaipe, mar aon le data-target="#foo"href="#foo"chun díriú ar mhodh sonrach chun scoránaigh.

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

Trí JavaScript

Glaoigh ar mhódúil le id myModalle líne amháin JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-backdrop="".

Ainm cineál réamhshocraithe tuairisc
chúlra Boole nó an téad'static' fíor Áirítear eilimint mhodúil chúlra. Mar mhalairt air sin, sonraigh staticle haghaidh cúlra nach ndúnann an modúl ar chliceáil.
méarchlár Boole fíor Dúnann sé an modúl nuair a bhrúitear eochair éalaithe
seó Boole fíor Taispeánann sé an modúl nuair a thosaigh sé.
iargúlta cosán bréagach

Tá an rogha seo imithe i léig ó v3.3.0 agus baineadh é in v4. Molaimid ina ionad sin úsáid a bhaint as templáil ar thaobh an chliaint nó as creat ceangailteach sonraí, nó ag glaoch ar jQuery.load tú féin.

Má chuirtear cian-UR ar fáil, déanfar ábhar a luchtú uair amháin trí mhodh jQuery loadagus a instealladh isteach sa .modal-contentdiv. Má tá an data-api in úsáid agat, is féidir leat an hrefaitreabúid a úsáid chun an chianfhoinse a shonrú. Tá sampla de seo léirithe thíos:

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

Modhanna

Gníomhachtaíonn d'ábhar mar mhodh modúl. Glacann rogha roghnach object.

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

Scoránaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an modúl (.i. sula dtarlaíonn an shown.bs.modalnó an teagmhas).hidden.bs.modal

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

Osclaíonn modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar an modúl iarbhír (.i. sula shown.bs.modaldtarlaíonn an teagmhas).

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

Folaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula gcuirtear an modh i bhfolach (ie sula hidden.bs.modaldtarlaíonn an teagmhas).

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

Athdhearbhaíonn suíomh an mhódúil chun dul i ngleic le scrollbharra ar eagla go mbeadh ceann le feiceáil, rud a chuirfeadh an léim mhódúil ar chlé.

Ní gá ach amháin nuair a athraíonn airde an mhódúil agus é oscailte.

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

Imeachtaí

Nochtann rang modha Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht mhódúil.

Cuirtear na himeachtaí módúla go léir chun cinn ag an modúl féin (.i. ag an <div class="modal">).

Cineál Imeachta Cur síos
taispeáin.bs.módúil Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc. Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTargetairí an imeachta.
léirithe.bs.módúil Cuirtear an teagmhas seo ar ceal nuair a bheidh an modúl infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTargetairí an imeachta.
folaigh.bs.módúil Cuirtear an teagmhas seo ar ceal láithreach nuair hidea ghlaoitear an modh ásc.
i bhfolach.bs.modal Tá an teagmhas seo bréan nuair a bhíonn an módúil curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích).
lódáilte.bs.modal Cuirtear an teagmhas seo ar ceal nuair a bhíonn ábhar luchtaithe ag an modúl ag baint úsáide as an remoterogha.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

dropdowns dropdown.js

Cuir biachláir anuas le beagnach rud ar bith leis an mbreiseán simplí seo, lena n-áirítear an barra nascleanúna, na cluaisíní agus na piollaí.

Laistigh de navbar

Laistigh de pills

Trí shaintréithe sonraí nó JavaScript, scorálann an breiseán anuas ábhar i bhfolach (roghchláir anuas) tríd an .openrang a scoránaigh ar mhír liosta na dtuismitheoirí.

Ar ghléasanna soghluaiste, cuireann oscailt anuas limistéar .dropdown-backdropmar sconna chun biachláir anuas a dhúnadh nuair a bhíonn tú ag cnagadh lasmuigh den roghchlár, ceanglas le haghaidh tacaíocht chuí iOS. Ciallaíonn sé seo go dteastaíonn sconna breise ar fhóin phóca chun athrú ó roghchlár anuas oscailte go roghchlár anuas eile.

Nóta: data-toggle="dropdown"Bítear ag brath ar an tréith chun roghchláir anuas a dhúnadh ag leibhéal feidhmchláir, mar sin is smaoineamh maith é a úsáid i gcónaí.

Trí tréithe sonraí

Cuir data-toggle="dropdown"le nasc nó cnaipe chun anuas a scoránaigh.

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

Chun URLanna a choinneáil slán le cnaipí naisc, úsáid an data-targetaitreabúid in ionad 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>

Trí JavaScript

Cuir glaoch ar na anuas trí JavaScript:

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

data-toggle="dropdown"fós ag teastáil

Is cuma cé acu a ghlaonn tú ar do anuas trí JavaScript nó ina ionad sin go n-úsáideann tú an data-api, ní mór duit data-toggle="dropdown"a bheith i láthair i gcónaí ar eilimint truicir an anuas.

Dada

Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúna cluaisíní tugtha.

Cuirtear tús le gach imeacht anuas ag an .dropdown-menueilimint tuismitheora.

Tá maoin ag gach imeacht anuas relatedTarget, arb é a luach an eilimint ancaire scoránaithe.

Cineál Imeachta Cur síos
taispeáin.bs.anuas Teann an teagmhas seo láithreach nuair a ghlaoitear an modh ásc taispeána.
anuas.bs Tá an teagmhas seo bréan nuair a bheidh an anuas infheicthe ag an úsáideoir (fanacht le haghaidh aistrithe CSS, le cur i gcrích).
folaigh.bs.anuas Cuirtear an teagmhas seo ar ceal láithreach nuair a ghlaoitear an modh um shampla seithí.
bhfolach.bs.anuas Tá an teagmhas seo bréan nuair a bheidh an anuas críochnaithe a bheith i bhfolach ar an úsáideoir (fanacht le haghaidh aistrithe CSS, a chur i gcrích).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Sampla i navbar

Is é an breiseán ScrollSpy ná spriocanna nascleanúna a nuashonrú go huathoibríoch bunaithe ar an suíomh scrollbharra. Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Cuirfear béim ar na fo-mhíreanna anuas freisin.

@saille

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi sular dhíol siad amach qui. Cearta rothar feirme-go-tábla Tumblr is cuma cad é. Anim keffiyeh carles cardigan. Velit seitan mcsweeney both grianghraf 3 mac tíre moon irure. Geansaí Cosby lomo jean shorts, williamsburg hoodie minim qui is dócha nár chuala tú trácht orthu et cardigan trust fund culpa bithdhíosal wes anderson aeistéitiúil. Nihil tattooed accusamus, creid íoróin bithdhíosal keffiyeh artisan ullamco consequat.

@mdo

Clár scátála mustache Veniam marfa, féasóg adipisicing fugiat velit pitchfork. Freegan féasóg aliqua cupidatat mcsweeney's vero. Cupid ceithre cinn de na ceithre cinn, agus helvetica nulla carles. Trucail bia geansaí tatú-choscáin, vinil quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles aclaíocht neamh aeistéitiúil quis gentrify. Beoir ceardaíochta adipiscing Brooklyn leas-eochair deserunt.

aon

Occaecat commodo aliqua delectus. Fap ceardaíochta beoir scátála deserunt ea. Cearta rothar Lomo adipisicing banh mi, velit ea sunt next level locavore caife aon bhunadh i Magna veniam. Ard-shaol aitheantais vinil, macalla pháirc dá bhrí sin aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim Messenger bag. Creid ex in, inbhuanaithe 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.

Keytar twee blog, culpa messenger bag marfa cibé trucail bia delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche íoróin, cait toirneach is dócha nár chuala tú trácht orthu as hoodie lo-fi fap aliquip saor ó ghlútan. Labore elit placeat sular dhíol siad amach, terry richardson proident brunch nesciunt quis costy sweater pariatur keffiyeh ut helvetica artisan. Cardigan ceardaíochta beoir seitan readymade velit. VHS chambray laboris am veniam. Anim mollit minim comodo ullamco thundercats.

Úsáid

Teastaíonn Bootstrap nav

Éilíonn Scrollspy faoi láthair go n-úsáidfear comhpháirt nascleanúna Bootstrap chun béim chuí a chur ar naisc ghníomhacha.

Spriocanna aitheantais inréite ag teastáil

Caithfidh spriocanna aitheantais inréite a bheith ag naisc Navbar. Mar shampla, <a href="#home">home</a>ní mór a fhreagraíonn do rud éigin sa DOM cosúil le <div id="home"></div>.

Neamhaird :visibledéanta ar eilimintí neamhsprice

Ní thabharfar aird ar sprioc-eilimintí nach bhfuil :visiblede réir jQuery agus ní thaispeánfar a n-ítimí nascleanúna comhfhreagracha choíche.

Éilíonn suíomh coibhneasta

Is cuma an modh cur chun feidhme, éilíonn scrollspy úsáid a bhaint as position: relative;ar an eilimint a bhfuil tú ag spying air. I bhformhór na gcásanna is é seo an <body>. Nuair a scrollspying ar eilimintí eile seachas an <body>, a bheith cinnte go bhfuil heightsraith agus overflow-y: scroll;curtha i bhfeidhm.

Trí tréithe sonraí

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, cuir data-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spiaireacht a dhéanamh air (go hiondúil is é seo an <body>). Ansin cuir an data-targettréith leis an ID nó le haicme na máthaireiliminte d'aon .navchomhpháirt Bootstrap.

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

Trí JavaScript

Tar éis position: relative;duit do CSS a chur isteach, cuir glaoch ar an scrollspy trí JavaScript:

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

Modhanna

.scrollspy('refresh')

Agus scrollspy in úsáid in éineacht le heilimintí a chur leis nó a bhaint den DOM, beidh ort an modh athnuachana a ghlaoch mar seo:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset="".

Ainm cineál réamhshocraithe tuairisc
fhritháireamh uimhir 10 Picteilíní le fritháireamh ón mbarr agus suíomh an scrolla á ríomh.

Imeachtaí

Cineál Imeachta Cur síos
ghníomhachtú.bs.scrollspy Cuirtear an teagmhas seo chun cinn nuair a ghníomhaíonn an scrollspy mír nua.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Cluaisíní inghlactha tab.js

Cluaisíní samplacha

Cuir feidhmiúlacht cluaisíní tapa, dinimiciúil leis chun aistriú trí phána d’ábhar áitiúil, fiú trí roghchláir anuas. Ní thacaítear le cluaisíní neadaithe.

Denim amh is dócha nár chuala tú trácht orthu jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth máistir cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit búistéir retro keffiyeh dreamcatcher synth. Geansaí Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan apparel Meiriceánach, búistéir 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.

Síneann an nascleanúint tabáilte

Síneann an breiseán seo an chomhpháirt nascleanúna cluaisíní chun limistéir cluaisíní a chur leis.

Úsáid

Cumasaigh cluaisíní inchurtha trí JavaScript (ní mór gach cluaisín a ghníomhachtú ina n-aonar):

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

Is féidir leat cluaisíní aonair a ghníomhachtú ar go leor bealaí:

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

Marcáil

Is féidir leat nascleanúint cluaisín nó pillín a ghníomhachtú gan JavaScript a scríobh ach trí eilimint a shonrú data-toggle="tab"data-toggle="pill"ar eilimint. Má chuirtear na ranganna navagus na nav-tabsranganna leis an gcluaisín cuirfear stíliú cluaisínul Bootstrap i bhfeidhm , agus cuirfear an stíliú piolla i bhfeidhm ag na ranganna .navnav-pills

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

Éifeacht céimnithe

Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fadele gach .tab-pane. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .inan t-ábhar tosaigh a dhéanamh le feiceáil.

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

Modhanna

$().tab

Gníomhachtaíonn eilimint tab agus coimeádán ábhar. Ba cheart go mbeadh nód coimeádán data-targethrefnód dírithe ar an gcluaisín sa DOM. Sna samplaí thuas, is iad na cluaisíní na <a>s le data-toggle="tab"tréithe.

.tab('show')

Roghnaíonn sé an cluaisín tugtha agus taispeánann sé an t-ábhar a bhaineann leis. Éiríonn aon chluaisín eile a roghnaíodh roimhe seo díroghnaithe agus tá an t-ábhar a bhaineann leis i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar an phána cluaisín (ie sula shown.bs.tabdtarlaíonn an teagmhas).

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

Imeachtaí

Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:

  1. hide.bs.tab(ar an gcluaisín gníomhach reatha)
  2. show.bs.tab(ar an gcluaisín le taispeáint)
  3. hidden.bs.tab(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tabimeacht)
  4. shown.bs.tab(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis an show.bs.tabimeacht)

Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tabagus na hidden.bs.tabhimeachtaí a bhácáil.

Cineál Imeachta Cur síos
taispeáin.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
taispeántar.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
folaigh.bs.cluaisín Tineann an teagmhas seo nuair atá cluaisín nua le taispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo le cur i bhfolach). Bain úsáid as event.targetagus event.relatedTargetchun an cluaisín gníomhach reatha agus an cluaisín nua go luath le bheith gníomhach a dhíriú, faoi seach.
i bhfolach.bs.cluaisín Lasann an teagmhas seo tar éis cluaisín nua a thaispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo i bhfolach). Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Leideanna uirlisí tooltip.js

Spreagtha ag an mbreiseán jQuery.tipsy den scoth scríofa ag Jason Frame; Is leagan nuashonraithe é Leideanna Uirlisí, nach bhfuil ag brath ar íomhánna, a úsáideann CSS3 le haghaidh beochana, agus tréithe sonraí le haghaidh stórála teidil áitiúil.

Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.

Samplaí

Aló thar na naisc thíos chun leideanna uirlisí a fheiceáil:

Pants daingean an chéad leibhéal eile keffiyeh is dócha nár chuala tú trácht orthu. Photo mboth féasóg amh denim letterpress mála teachtaire vegan stumptown. Tá seaman vinil terry richardson ag an seitan feirme go tábla, éadaí Meiriceánach quinoa inbhuanaithe quinoa 8-giotán mcsweeney . Beard stumptown, cardigans banh mi lomo thundercats. Tofu bithdhíosal williamsburg marfa, ceithre seomra vegan cleanse loko mcsweeney. Ceardaí fíor- íorónach is cuma cad is eochair , scenester farm-go-table banksy Austin twitter láimhseáil freegan cred raw denim caife aon-bhunús víreasach.

Leid uirlisí statach

Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.

Ceithre threoir

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

Feidhmiúlacht rogha an diúltaithe

Ar chúiseanna feidhmíochta, is rogha an diúltaithe iad na data-apis Tooltip agus Popover, rud a chiallaíonn go gcaithfidh tú iad a thosú tú féin .

Bealach amháin chun na leideanna uirlisí go léir ar leathanach a thosú ná iad a roghnú de réir a n- data-toggletréith:

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

Úsáid

Gineann an breiseán leid uirlisí inneachar agus marcáil ar éileamh, agus de réir réamhshocraithe cuireann sé leideanna uirlisí i ndiaidh a n-eiliminte truicear.

Spreag an leid uirlisí trí JavaScript:

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

Marcáil

Níl sa mharcáil riachtanach do leid uirlisí ach datatréith agus titlear an eilimint HTML is mian leat leid uirlisí a bheith agat. Tá an marcáil ginte ar leid uirlisí sách simplí, cé go dteastaíonn suíomh uaidh (de réir réamhshocraithe, socraithe topag an mbreiseán).

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

Naisc il-líne

Uaireanta is mian leat leid uirlisí a chur le hipearnasc a chumhdaíonn línte iolracha. Is é iompar réamhshocraithe an bhreiseáin leid uirlisí ná é a lárú go cothrománach agus go hingearach. Cuir white-space: nowrap;le do chuid ancairí chun é seo a sheachaint.

Teastaíonn socrú speisialta le haghaidh leideanna uirlisí i ngrúpaí cnaipí, grúpaí ionchuir agus táblaí

Agus leideanna uirlisí á n-úsáid agat maidir le heilimintí laistigh de , .btn-group.input-groupar ghnéithe a bhaineann le tábla ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), beidh ort an rogha a shonrú container: 'body'(atá doiciméadaithe thíos) chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus/ nó a coirnéil chothromú a chailleadh nuair a tharraingítear an leid uirlisí).

Ná déan iarracht leideanna uirlisí a thaispeáint ar eilimintí ceilte

Má agairt $(...).tooltip('show')nuair a bheidh an eilimint sprice, display: none;beidh an leid uirlisí suite go mícheart.

Leideanna uirlisí inrochtana d'úsáideoirí méarchláir agus teicneolaíochta cúnta

I gcás úsáideoirí a dhéanann nascleanúint le méarchlár, agus go háirithe úsáideoirí teicneolaíochtaí cúnta, níor cheart duit ach leideanna uirlisí a chur le heilimintí atá dírithe ar mhéarchlár amhail naisc, rialtáin foirmeacha, nó aon eilimint threallach a bhfuil tabindex="0"tréith aici.

Tá eilimintí fillte de dhíth le haghaidh leideanna uirlisí maidir le heilimintí faoi mhíchumas

Chun leid uirlisí a chur le a disabled.disableddúil, cuir an eilimint taobh istigh de a <div>agus cuir an leid uirlisí air sin <div>ina ionad.

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

Ainm Cineál Réamhshocrú Cur síos
beochan Boole fíor Cuir trasdul céimnithe CSS i bhfeidhm ar an leid uirlisí
coimeádán teaghrán | bréagach bréagach

Cuireann sé an leid uirlisí le heilimint ar leith. Sampla: container: 'body'. Tá an rogha seo úsáideach go háirithe sa mhéid is go gceadaíonn sé duit an leid uirlisí a shuíomh i sreabhadh an doiciméid in aice leis an eilimint truicearaithe - rud a chuirfidh cosc ​​ar an leid uirlisí ó snámh ón eilimint spreagaithe le linn athrú méide fuinneoige.

moill uimhir | réad 0

Moill ag taispeáint agus ag cur i bhfolach an leid uirlisí (ms) - ní bhaineann sé le cineál truicear láimhe

Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó

Is é struchtúr an ábhair:delay: { "show": 500, "hide": 100 }

html Boole bréagach Cuir HTML isteach sa leid uirlisí. Más bréagach é, textúsáidfear modh jQuery chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS.
socrúchán teaghrán | feidhm 'barr'

Conas an leid uirlisí a shuíomh - barr | bun | chlé | ceart | gluaisteán.
Nuair a shonraítear "uathoibríoch", déanfaidh sé an leid uirlisí a atreorú go dinimiciúil. Mar shampla, má tá an socrúchán "uathoibríoch ar chlé", taispeánfar an leid uirlisí ar an taobh clé nuair is féidir, nó taispeánfaidh sé ar dheis.

Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM leid uirlisí mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an thiscomhthéacs socraithe don ásc leid uirlisí.

roghnóir teaghrán bréagach Má chuirtear roghnóir ar fáil, déanfar cuspóirí na leideanna uirlisí a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, úsáidtear é seo chun leideanna uirlisí a chur leis le hábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach .
teimpléad teaghrán '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Bunús HTML le húsáid agus an leid uirlisí á chruthú.

Déanfar na leideanna uirlisí titlea instealladh isteach sa .tooltip-inner.

.tooltip-arrowbeidh saighead an leid uirlisí.

Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an .tooltiprang.

teideal teaghrán | feidhm ''

Luach teidil réamhshocraithe mura titlebhfuil aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an leid uirlisí ceangailte léi.

truicear teaghrán 'fócas hover' Conas a spreagtar leid uirlisí - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manualní féidir é a chomhcheangal le haon truicear eile.
amharclann teaghrán | réad | feidhm { roghnóir: 'corp', stuáil: 0 }

Coinníonn sé an leid uirlisí laistigh de theorainneacha an eilimint seo. Sampla: viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

Má thugtar feidhm, tugtar nód DOM na heiliminte spreagúla mar an t-aon argóint atá aici. Tá an thiscomhthéacs socraithe don ásc leid uirlisí.

Tréithe sonraí le haghaidh leideanna uirlisí aonair

De rogha air sin is féidir roghanna le haghaidh leideanna aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.

Modhanna

$().tooltip(options)

Nascann láimhseálaí leid uirlisí le bailiúchán eilimint.

.tooltip('show')

Nochtann leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an leid uirlisí (ie sula shown.bs.tooltipdtarlaíonn an teagmhas). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo. Ní thaispeántar leideanna uirlisí le teidil fad nialasacha riamh.

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

.tooltip('hide')

Folaigh leid uirlisí eiliminte. Filleann sé ar an nglaoiteoir sula mbeidh an leid uirlisí curtha i bhfolach (ie sula hidden.bs.tooltipdtarlaíonn an t-imeacht). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo.

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

.tooltip('toggle')

Scoránaigh an leid uirlisí eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an leid uirlisí (.i. sula dtarlaíonn shown.bs.tooltipnó sula hidden.bs.tooltipdtarlaíonn an teagmhas). Meastar gur "lámhleabhar" a spreag an leid uirlisí é seo.

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

.tooltip('destroy')

Seithí agus scriosann leid uirlisí eiliminte. Ní féidir leideanna uirlisí a úsáideann tarmligean (a chruthaítear leis an selectorrogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.

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

Imeachtaí

Cineál Imeachta Cur síos
taispeáin.bs.leid Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
leid.uirlis.bs Cuirtear an teagmhas seo ar ceal nuair a bheidh an leid uirlisí infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
leid.uirlis.bs Cuirtear an teagmhas seo ar ceal láithreach nuair hidea ghlaoitear an modh ásc.
i bhfolach.bs.leid Tá an teagmhas seo bréan nuair a bhíonn an leid uirlisí curtha i bhfolach ón úsáideoir (fanacht go dtí go gcríochnófar na haistrithe CSS).
cuireadh.bs.toolt Cuirtear an teagmhas seo ar ceal tar éis na show.bs.tooltiphócáide nuair a cuireadh an teimpléad leid uirlisí leis an DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Cuir forleagan beaga ábhair, cosúil leis na cinn ar an iPad, le haon eilimint le haghaidh faisnéise tánaisteacha tithíochta.

Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.

Spleáchas breiseán

Éilíonn Popovers go gcuirfear an breiseán tooltip san áireamh i do leagan de Bootstrap.

Feidhmiúlacht rogha an diúltaithe

Ar chúiseanna feidhmíochta, is rogha an diúltaithe iad na data-apis Tooltip agus Popover, rud a chiallaíonn go gcaithfidh tú iad a thosú tú féin .

Bealach amháin chun na míreanna aníos ar leathanach a thúsú ná iad a roghnú de réir a n- data-toggletréith:

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

Teastaíonn socrú speisialta le haghaidh popovers i ngrúpaí cnaipí, grúpaí ionchuir agus táblaí

Nuair a bheidh popovers á n-úsáid ar eilimintí laistigh de , .btn-group.input-groupar eilimintí a bhaineann le tábla ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), beidh ort an rogha a shonrú container: 'body'(atá doiciméadaithe thíos) chun fo-iarmhairtí nach dteastaíonn a sheachaint (amhail an eilimint ag fás níos leithne agus/ nó a coirnéil chothromú a chailleadh nuair a spreagtar an popover).

Ná déan iarracht popovers a thaispeáint ar eilimintí ceilte

Má agairt $(...).popover('show')nuair a bheidh an eilimint sprice, display: none;beidh an popover suite go mícheart.

Teastaíonn eilimintí cumhdaigh de bharr popovers ar eilimintí míchumasaithe

Chun popover a chur le disabled.disableddúil, cuir an eilimint taobh istigh de a <div>agus cuir an popover leis sin <div>ina ionad.

Naisc il-líne

Uaireanta is mian leat a popover a chur le hipearnasc a fillteann línte iolracha. Is é iompar réamhshocraithe an bhreiseáin popover ná é a lárú go cothrománach agus go hingearach. Cuir white-space: nowrap;le do chuid ancairí chun é seo a sheachaint.

Samplaí

Popover statach

Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé.

Popover barr

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

Popover ceart

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

Popover bun

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

D’imigh an Popover

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

Taispeántas beo

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

Ceithre threoir

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

Ruaig an chéad chliceáil eile

Bain úsáid as an focustruicear chun popovers a dhíbhe ar an gcéad chliceáil eile a dhéanann an t-úsáideoir.

Marcáil shonrach ag teastáil le haghaidh díbhe-ar-chliceáil eile

Le haghaidh iompar ceart trasbhrabhsálaí agus tras-ardáin, ní mór duit an chlib a úsáid <a>, an <button>chlib, agus ní mór duit na tréithe role="button"agus na tabindextréithe a chur san áireamh freisin.

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

Úsáid

Cumasaigh popovers trí JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

Ainm Cineál Réamhshocrú Cur síos
beochan Boole fíor Cuir trasdul céimnithe CSS i bhfeidhm ar an bpíosa aníos
coimeádán teaghrán | bréagach bréagach

Cuireann sé an popover le gné ar leith. Sampla: container: 'body'. Tá an rogha seo thar a bheith úsáideach sa mhéid is go gceadaíonn sé duit an popover a shuíomh i sreabhadh an doiciméid in aice leis an eilimint spreagthaigh - rud a chuirfidh cosc ​​ar an bpíosa aníos a bheith ag snámh ón eilimint spreagaithe le linn athrú méide fuinneoige.

ábhar teaghrán | feidhm ''

Luach réamhshocraithe an ábhair mura data-contentbhfuil an aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.

moill uimhir | réad 0

Moill ag taispeáint agus i bhfolach an popover (ms) - ní bhaineann sé le cineál truicear láimhe

Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó

Is é struchtúr an ábhair:delay: { "show": 500, "hide": 100 }

html Boole bréagach Cuir HTML isteach sa popover. Más bréagach é, textúsáidfear modh jQuery chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS.
socrúchán teaghrán | feidhm 'ceart'

Conas an popover a shuíomh - barr | bun | chlé | ceart | gluaisteán.
Nuair a shonraítear "uathoibríoch", athróidh sé an popover go dinimiciúil. Mar shampla, má tá an socrúchán "uathoibríoch ar chlé", taispeánfar an popover ar an taobh clé nuair is féidir, nó taispeánfaidh sé ar dheis.

Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM popover mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an thiscomhthéacs socraithe don chás aníos.

roghnóir teaghrán bréagach Má chuirtear roghnóir ar fáil, déanfar réada aníos a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, baintear úsáid as seo le gur féidir popovers a chur leis an ábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach .
teimpléad teaghrán '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Bunús HTML le húsáid agus an popover á chruthú.

Déanfar na popover's titlea instealladh isteach sa .popover-title.

Déanfar na popover's contenta instealladh isteach sa .popover-content.

.arrowbeidh an popover saighead.

Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an .popoverrang.

teideal teaghrán | feidhm ''

Luach teidil réamhshocraithe mura titlebhfuil aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.

truicear teaghrán 'cliceáil' Conas a spreagtar aníos - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manualní féidir é a chomhcheangal le haon truicear eile.
amharclann teaghrán | réad | feidhm { roghnóir: 'corp', stuáil: 0 }

Coinníonn sé an popover laistigh de theorainneacha an eilimint seo. Sampla: viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

Má thugtar feidhm, tugtar nód DOM na heiliminte spreagúla mar an t-aon argóint atá aici. Tá an thiscomhthéacs socraithe don chás aníos.

Tréithe sonraí le haghaidh popovers aonair

De rogha air sin, is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.

Modhanna

$().popover(options)

Tosaíonn popovers le haghaidh bailiúchán eilimint.

.popover('show')

Nochtann popover eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an t-athrú aníos (ie sula shown.bs.popoverdtarlaíonn an teagmhas). Meastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover. Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.

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

.popover('hide')

Folaíonn popover eilimint. Filleann sé ar an nglaoiteoir sular cuireadh an t-amóg aníos i bhfolach (ie sula hidden.bs.popoverdtarlaíonn an teagmhas). Meastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover.

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

.popover('toggle')

Scoránaigh eilimint a popover. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an t-amóg aníos (.i. sula dtarlaíonn an t-imeacht) shown.bs.popover. hidden.bs.popoverMeastar gurb é seo "lámhleabhar" a chuireann faoi deara an popover.

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

.popover('destroy')

Seithí agus scriosann popover eilimint. Ní féidir popovers a úsáideann tarmligean (a chruthaítear ag baint úsáide as an selectorrogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.

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

Imeachtaí

Cineál Imeachta Cur síos
taispeáin.bs.píosa Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
taispeánta.bs.popover Tá an teagmhas seo bréan nuair a bhíonn an aníos infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
folaigh.bs.popover Cuirtear an teagmhas seo ar ceal láithreach nuair hidea ghlaoitear an modh ásc.
i bhfolach.bs.popover Tá an teagmhas seo bréan nuair a bhíonn an aníos aníos curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
isteach.bs.popover Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popoverhócáide nuair a chuirtear an teimpléad aníos leis an DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Teachtaireachtaí foláirimh alert.js

Foláirimh shamplacha

Cuir feidhmiúlacht díbhe le gach teachtaireacht foláirimh leis an mbreiseán seo.

Nuair a bhíonn .closecnaipe á úsáid, caithfidh sé a bheith ar an gcéad leanbh den .alert-dismissiblemharcáil agus ní fhéadfaidh aon ábhar téacs a bheith os a chomhair sa mharcáil.

Úsáid

Níl le déanamh ach a chur data-dismiss="alert"le do chnaipe dúnta chun feidhmiúlacht dhúnadh foláirimh a thabhairt go huathoibríoch. Má dhúnann tú foláireamh, bainfear den DOM é.

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

Chun do chuid foláirimh a úsáid beochan agus iad ag dúnadh, déan cinnte go bhfuil an .fadeagus.in na ranganna curtha i bhfeidhm orthu cheana féin.

Modhanna

$().alert()

Éisteann foláireamh le haghaidh imeachtaí cliceáil ar ghnéithe sliocht a bhfuil an data-dismiss="alert"tréith acu. (Ní gá nuair a bhíonn uath-thionscnamh an data-api in úsáid.)

$().alert('close')

Dúnann foláireamh trína bhaint den DOM. Má tá an .fadeagus .inranganna i láthair ar an eilimint, beidh an foláireamh céimnithe amach sula mbainfear é.

Imeachtaí

Nochtann breiseán foláirimh Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht foláirimh.

Cineál Imeachta Cur síos
dún.bs.aire Téann an teagmhas seo chun solais láithreach nuair closea ghlaoitear an modh ásc.
dúnta.bs.aire Bristear an teagmhas seo nuair a dhúntar an foláireamh (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Cnaipí button.js

Déan níos mó le cnaipí. Rialú stáit cnaipe nó cruthaigh grúpaí cnaipí le haghaidh tuilleadh comhpháirteanna mar bharraí uirlisí.

Comhoiriúnacht tras-bhrabhsálaí

Leanann Firefox de stáit rialaithe (míchumas agus seiceáltacht) trasna ualaí leathanach . Réiteach chun é seo a úsáid is ea autocomplete="off". Féach ar fhabht Mozilla #654072 .

Stáit

Cuir data-loading-text="Loading..."le húsáid stát luchtaithe ar chnaipe.

Tá an ghné seo imithe i léig ó v3.3.5 agus baineadh é in v4.

Bain úsáid as cibé stát is mian leat!

Ar mhaithe leis an léiriú seo, táimid ag úsáid data-loading-textagus $().button('loading'), ach ní hé sin an t-aon stát is féidir leat a úsáid. Féach níos mó faoi seo thíos sna $().button(string)doiciméid .

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

Scoránaigh aonair

Cuir data-toggle="button"leis chun scoránú a ghníomhachtú ar chnaipe amháin.

Ní mór cnaipí réamh-scoránaigh.active agusaria-pressed="true"

Le haghaidh cnaipí réamhscornaithe, ní mór duit an .activerang agus an aria-pressed="true"tréith a chur leis an duine buttonféin.

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

ticbhosca / Raidió

Cuir data-toggle="buttons"le .btn-groupticbhosca nó ionchuir raidió chun scoránú a chumasú ina stíleanna faoi seach.

Tá gá le roghanna réamhroghnaithe.active

Le haghaidh roghanna réamhroghnaithe, ní mór duit an .activerang a chur leis an ionchur labelféin.

Staid seiceáilte amhairc nuashonraithe ach amháin le cliceáil

Má dhéantar staid ticbhosca an chnaipe ticbhosca a nuashonrú gan clickimeacht a chur ar an gcnaipe (m.sh. trí <input type="reset">nó trí checkedairí an ionchuir a shocrú), beidh ort an .activerang a scoránaigh ar do chuid féin an ionchuir label.

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

Modhanna

$().button('toggle')

Scoránaigh an staid bhrú. Tugann sé an chuma ar an gcnaipe go bhfuil sé curtha i ngníomh.

$().button('reset')

Athshocraigh staid na gcnaipe - malartaíonn sé téacs go buntéacs. Tá an modh seo asincrónach agus filleann sé sula mbeidh an t-athshocrú críochnaithe i ndáiríre.

$().button(string)

Malartaíonn téacs chuig aon stát sonraí sainithe téacs.

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

Laghdaigh collapse.js

Breiseán solúbtha a úsáideann dornán ranganna le haghaidh iompar éasca scoránaigh.

Spleáchas breiseán

Éilíonn Collapse go gcuirfear an breiseán aistrithe san áireamh i do leagan de Bootstrap.

Sampla

Cliceáil ar na cnaipí thíos chun eilimint eile a thaispeáint agus a cheilt trí athruithe ranga:

  • .collapseseithí ábhar
  • .collapsinga chuirtear i bhfeidhm le linn aistrithe
  • .collapse.inléiríonn ábhar

Is féidir leat nasc a úsáid leis an hreftréith, nó cnaipe leis an data-targettréith. Sa dá chás, data-toggle="collapse"tá an gá.

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>

Sampla bosca ceoil

Leathnaigh an t-iompar caolaithe réamhshocraithe chun cairdín a chruthú le comhpháirt an phainéil.

Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
<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>

Is féidir freisin s a mhalartú .panel-bodyle .list-groups.

  • Bootply
  • Itmus amháin agus áis
  • Dara eros

Déan rochtain ar rialuithe leathnaithe/laghdaithe

Bí cinnte a chur aria-expandedleis an eilimint rialaithe. Sainmhíníonn an tréith seo go sainráite staid reatha na heiliminte collapsible do léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Má dhúntar an eilimint infhillte de réir réamhshocraithe, ba cheart go mbeadh luach aria-expanded="false". Má tá an eilimint infhillte socraithe agat le bheith oscailte de réir réamhshocraithe ag baint úsáide as an inrang, socraigh aria-expanded="true"an rialtán ina ionad sin. Scoránóidh an breiseán an aitreabúid seo go huathoibríoch bunaithe ar cibé ar osclaíodh nó nár dúnadh an eilimint infhillte.

Ina theannta sin, má tá d’eilimint rialaithe ag díriú ar eilimint infhillte amháin – .i. tá an data-targetaitreabúid dírithe ar idroghnóir – is féidir leat tréith bhreise a chur aria-controlsleis an eilimint rialaithe, ina bhfuil an ideilimint infhillte. Baineann léitheoirí scáileáin nua-aimseartha agus teicneolaíochtaí cúnta comhchosúla úsáid as an tréith seo chun aicearraí breise a sholáthar d’úsáideoirí chun nascleanúint a dhéanamh go díreach chuig an eilimint infhillte féin.

Úsáid

Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:

  • .collapseseithí an t-ábhar
  • .collapse.inléiríonn an t-ábhar
  • .collapsingcuirtear leis nuair a thosaíonn an t-aistriú, agus baintear é nuair a chríochnaíonn sé

Is féidir na ranganna seo a fháil i component-animations.less.

Trí tréithe sonraí

Ní gá ach cuir data-toggle="collapse"leis data-targetan eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte. Glacann an data-targettréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapsea chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise in.

Chun bainistíocht grúpa cosúil le bosca ceoil a chur le rialú infhillte, cuir an tréith sonraí data-parent="#selector". Déan tagairt don taispeántas chun é seo a fheiceáil i ngníomh.

Trí JavaScript

Cumasaigh de láimh le:

$('.collapse').collapse()

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-parent="".

Ainm cineál réamhshocraithe tuairisc
tuismitheoir roghnóir bréagach Má chuirtear roghnóir ar fáil, dúnfar gach eilimint in-chomhlaite faoin tuismitheoir sonraithe nuair a thaispeánfar an mhír in-chomhlaite seo. (cosúil le hiompar traidisiúnta bosca ceoil - braitheann sé seo ar an panelrang)
scoránaigh Boole fíor Scoránaigh an eilimint infhillte ar agairt

Modhanna

.collapse(options)

Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object.

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

.collapse('toggle')

Scoránaigh eilimint infhillte a thaispeántar nó folaithe. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an eilimint in-láite (.i. sula dtarlaíonn an t-imeacht) shown.bs.collapse.hidden.bs.collapse

.collapse('show')

Léiríonn eilimint infhillte. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint infhillte (ie sula shown.bs.collapsedtarlaíonn an teagmhas).

.collapse('hide')

Seithí eilimint infhillte. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint in-chomhlaite curtha i bhfolach (ie sula hidden.bs.collapsedtarlaíonn an teagmhas).

Imeachtaí

Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.

Cineál Imeachta Cur síos
taispeáin.bs.leac Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
léirithe.bs Cuirtear an teagmhas seo ar ceal nuair a bhíonn eilimint chlaonta curtha infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
folaigh.bs.leac Cuirtear an teagmhas seo ar ceal láithreach nuair hidea glaodh ar an modh.
i bhfolach.bs.leag Cuirtear an teagmhas seo ar ceal nuair a cuireadh eilimint chlaonta i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Timpealláin timpealláin.js

Comhpháirt taispeántas sleamhnán chun rothaíocht trí eilimintí, cosúil le timpeallán. Ní thacaítear le timpealláin neadaithe.

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

Fotheidil roghnacha

Cuir fotheidil le do shleamhnáin go héasca leis an .carousel-captioneilimint laistigh d'aon cheann .item. Cuir beagnach aon HTML roghnach ann agus déanfar é a ailíniú agus a fhormáidiú go huathoibríoch.

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

Timpealláin iolracha

Éilíonn timpealláin go n-úsáidfear idar an gcoimeádán is forimeallaí (an .carousel) le haghaidh rialuithe timpealláin chun feidhmiú i gceart. Nuair a chuirtear timpealláin iolracha leis, nó nuair a athraítear timpealláin id, déan cinnte na rialuithe ábhartha a nuashonrú.

Trí tréithe sonraí

Bain úsáid as tréithe sonraí chun suíomh an timpealláin a rialú go héasca. data-slideglacann sé leis na heochairfhocail prevnext, a athraíonn an suíomh sleamhnáin i gcoibhneas lena shuíomh reatha. Mar mhalairt air sin, bain úsáid as data-slide-toinnéacs amh sleamhnáin a chur ar aghaidh chuig an timpeallán data-slide-to="2", a aistríonn suíomh an tsleamhnáin go hinnéacs ar leith ag tosú le 0.

Úsáidtear an data-ride="carousel"tréith chun timpeallán a mharcáil mar bheochan ag tosú ag ualach an leathanaigh. Ní féidir é a úsáid in éineacht le (iomarcach agus neamhriachtanach) inisealacha JavaScript a chur in aithne don timpeallán céanna.

Trí JavaScript

Cuir glaoch ar timpealláin de láimh le:

$('.carousel').carousel()

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-interval="".

Ainm cineál réamhshocraithe tuairisc
eatramh uimhir 5000 An méid ama le moill idir rothaíocht go huathoibríoch earra. Má tá sé bréagach, ní rothóidh timpealláin go huathoibríoch.
sos teaghrán | null "hover" Má shocraítear é "hover", stopann rothaíocht an timpealláin ar aghaidh mouseenteragus athuair rothaíocht an timpealláin air mouseleave. Má tá sé socraithe go null, ní chuirfear sos ar hovering thar an timpeallán.
wrap Boole fíor Cibé ar cheart don timpeallán rothaíocht go leanúnach nó stadanna crua a bheith aige.
méarchlár Boole fíor Cibé ar cheart don timpeallán freagairt d'imeachtaí méarchláir.

Tosaíonn an timpeallán le rogha roghnach objectagus tosaíonn sé ag rothaíocht trí mhíreanna.

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

Rothaíochta tríd na míreanna timpealláin ó chlé go deas.

Stopann an timpeallán ó rothaíocht trí earraí.

Rothlaíonn sé an timpeallán chuig fráma ar leith (0 bunaithe, cosúil le sraith).

Timthriallta go dtí an mhír roimhe seo.

Timthriallta go dtí an chéad mhír eile.

Nochtann rang timpealláin Bootstrap dhá imeacht chun dul i ngleic le feidhmiúlacht timpealláin.

Tá na hairíonna breise seo a leanas ag an dá imeacht:

  • direction: An treo ina bhfuil an timpeallán ag sleamhnú ( "left""right").
  • relatedTarget: An eilimint DOM atá á sliseadh isteach mar an mhír ghníomhach.

Déantar gach imeacht timpealláin a chur ar an timpeallán féin (.i. ag an <div class="carousel">).

Cineál Imeachta Cur síos
sleamhnán.bs.carousel Téann an teagmhas seo chun cinn láithreach nuair a úsáidtear an slidemodh ásc.
slid.bs.carousel Tá an teagmhas seo bréan nuair a bhíonn an t-aistriú sleamhnáin críochnaithe ag an timpeallán.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Sampla

Scoránaigh an breiseán greamaithe position: fixed;air agus as, ag déanamh aithrise ar an éifeacht a aimsítear le position: sticky;. Taispeántas beo den bhreiseán affix is ​​ea an tseolloingseoireachta ar dheis.


Úsáid

Bain úsáid as an breiseán affix trí tréithe sonraí nó de láimh le do JavaScript féin. Sa dá chás, ní mór duit CSS a sholáthar maidir le suíomh agus leithead d'ábhar greamaithe.

Tabhair faoi deara: Ná húsáid an breiseán affix ar eilimint atá in eilimint sách suite, mar cholún tarraingthe nó bhrúite, mar gheall ar fhabht rindreála Safari .

Shuiteáil trí CSS

Scoránaigh an breiseán affix idir trí rang, gach ceann acu ag léiriú stát ar leith: .affix, .affix-top, agus .affix-bottom. Ní mór duit na stíleanna, seachas position: fixed;ar .affix, a sholáthar do na ranganna seo tú féin (neamhspleách ar an mbreiseán seo) chun na suíomhanna iarbhír a láimhseáil.

Seo mar a oibríonn an breiseán affix:

  1. Chun tús a chur leis, cuireann an breiseán .affix-tople fios go bhfuil an eilimint sa suíomh is fearr. Ag an bpointe seo níl aon suíomh CSS ag teastáil.
  2. Má scrollaítear thar an eilimint is mian leat a ghreamú ba cheart go spreagfaí an greamú iarbhír. Seo an áit a .affixathshocraítear .affix-topagus a shocraíonn position: fixed;(arna sholáthar ag CSS Bootstrap).
  3. Má shainmhínítear fritháireamh bun, ba cheart go .affixgcuirfí .affix-bottom. Ós rud é go bhfuil fritháirimh roghnach, caithfidh tú an CSS cuí a shocrú chun ceann a shocrú. Sa chás seo, cuir position: absolute;nuair is gá. Úsáideann an breiseán an aitreabúid sonraí nó rogha JavaScript chun a chinneadh cén áit ar cheart an eilimint a shuíomh as sin.

Lean na céimeanna thuas chun do CSS a shocrú do cheachtar de na roghanna úsáide thíos.

Trí tréithe sonraí

Chun iompar a ghreamú go héasca le haon eilimint, níl le déanamh ach cuir data-spy="affix"leis an eilimint a bhfuil tú ag iarraidh spy a chur uirthi. Úsáid fritháirimh chun a shainiú cathain is ceart feannadh eilimint a scoránú.

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

Trí JavaScript

Cuir glaoch ar an mbreiseán affix trí JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset-top="200".

Ainm cineál réamhshocraithe tuairisc
fhritháireamh uimhir | feidhm | réad 10 Picteilíní le fritháireamh ón scáileán agus suíomh an scrolla á ríomh. Má chuirtear uimhir amháin ar fáil, cuirfear an fritháireamh i bhfeidhm sa dá threo barr agus bun. Chun fritháireamh uathúil, bun agus barr a sholáthar ní gá ach réad offset: { top: 10 }offset: { top: 10, bottom: 5 }. Bain úsáid as feidhm nuair is gá duit fritháireamh a ríomh go dinimiciúil.
sprioc roghnóir | nód | eilimint jQuery an windowréad Sonraíonn an ghné sprice den ghreamú.

Modhanna

.affix(options)

Gníomhachtaíonn sé d'inneachar mar ábhar greamaithe. Glacann rogha roghnach object.

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

.affix('checkPosition')

Athríomh staid an ghreamaithe bunaithe ar thoisí, suíomh agus suíomh scrollaithe na n-eilimintí ábhartha. Cuirtear an .affix, .affix-top, agus .affix-bottomna ranganna leis an ábhar greamaithe nó baintear as iad de réir an stáit nua. Is gá an modh seo a ghlaoch gach uair a athraítear toisí an ábhair ghreamaithe nó an ghné sprice, chun suíomh ceart an ábhair ghreamaithe a chinntiú.

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

Imeachtaí

Nochtann breiseán greamaithe Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht an ghreamaithe.

Cineál Imeachta Cur síos
affix.bs Tinte an teagmhas seo díreach roimh an eilimint a ghreamú.
ghreamaithe.bs Tá an teagmhas seo fired tar éis an eilimint a ghreamú.
affix-top.bs.affix Titeann an teagmhas seo as go díreach sula ndéantar an eilimint a ghreamú den bharr.
affixed-barr.bs.affix Cuirtear an teagmhas seo ar ceal tar éis don eilimint a bheith greamaithe den bharr.
affix-bun.bs.affix Titeann an teagmhas seo díreach roimh an eilimint a ghreamú ón mbun.
affixed-bun.bs.affix Bristear an teagmhas seo tar éis don eilimint a bheith greamaithe ag an mbun.