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

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

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

Sanitizer

Úsáideann Leideanna Uirlisí agus Popovers ár sláintitheoir ionsuite chun roghanna a ghlacann le HTML a shláintiú.

whiteListSeo a leanas an luach réamhshocraithe :

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

Más mian leat luachanna nua a chur leis an réamhshocrú seo whiteListis féidir leat na rudaí seo a leanas a dhéanamh:

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

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

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

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

Más mian leat ár sláintitheoir a sheachbhóthar toisc gur fearr leat leabharlann tiomnaithe a úsáid, mar shampla DOMPurify , ba cheart duit an méid seo a leanas a dhéanamh:

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

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

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.

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.jsnó bootstrap.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.

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>

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

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

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

Bain beochan

Le haghaidh módúil atá le feiceáil go simplí seachas céimnithe isteach sa radharc, 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 -->

Ábhar módúil a athrú bunaithe ar an gcnaipe truicear

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,

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

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

Modhanna

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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

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

dropdowns dropdown.js

Samplaí

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

Úsáid

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

Roghanna

Dada

Modhanna

$().dropdown('toggle')

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

Imeachtaí

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.

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

Úsáid

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

Imeachtaí

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

Ú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"nó 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-targetnó hrefnó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.

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

Leideanna uirlisí 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:

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>

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

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

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í

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

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

Samplaí

Popover statach

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

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.

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

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í

$('#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 go n-úsáidfidh do chuid foláirimh beochan agus iad ag dúnadh, cinntigh go bhfuil na ranganna .fadeagus na .inranganna 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.in ranganna 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.

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

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.

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

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

Scoránaigh aonair

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

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

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

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

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

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

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

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

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

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.

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

Samplaí

Roimhe Seo Ar aghaidh

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

An chéad lipéad sleamhnáin

Nulla vitae elit libero, pharetra augue mollis interdum.

An dara lipéad sleamhnáin

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tríú lipéad sleamhnáin

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Roimhe Seo Ar aghaidh

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

Úsáid

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 prevnó next, 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 sleamhnán amh 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 i gcomhcheangal 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()

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

Modhanna

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

Timthriallta go dtí an mhír roimhe seo.

.carousel('next')

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

Imeachtaí

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

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

Modhanna

.affix(options)

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

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

.affix('checkPosition')

Déanann sé staid an ghreamaithe a athríomh 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.