Akopọ

Olukuluku tabi akopọ

Awọn afikun le wa ni ẹyọkan (lilo awọn *.jsfaili kọọkan Bootstrap), tabi gbogbo wọn ni ẹẹkan (lilo bootstrap.jstabi miniified bootstrap.min.js).

Awọn eroja data

O le lo gbogbo awọn afikun Bootstrap nikan nipasẹ API isamisi laisi kikọ laini kan ti JavaScript. Eyi jẹ API kilasi akọkọ Bootstrap ati pe o yẹ ki o jẹ akiyesi akọkọ rẹ nigbati o nlo ohun itanna kan.

Iyẹn ti sọ, ni awọn ipo kan o le jẹ iwunilori lati pa iṣẹ ṣiṣe yii. Nitoribẹẹ, a tun pese agbara lati mu awọn abuda data API kuro nipa ṣiṣiṣẹpọ gbogbo awọn iṣẹlẹ lori aaye ti o ni orukọ pẹlu data-api. Eyi dabi eyi:

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

Ni omiiran, lati fojusi ohun itanna kan pato, kan ṣafikun orukọ ohun itanna bi aaye orukọ kan pẹlu aaye orukọ data-api bii eyi:

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

API ètò

A tun gbagbọ pe o yẹ ki o ni anfani lati lo gbogbo awọn afikun Bootstrap nikan nipasẹ JavaScript API. Gbogbo API ti gbogbo eniyan jẹ ẹyọkan, awọn ọna ẹwọn, ati da ikojọpọ ti a ṣiṣẹ lori pada.

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

Gbogbo awọn ọna yẹ ki o gba ohun aṣayan aṣayan, okun ti o fojusi ọna kan pato, tabi ohunkohun (eyiti o bẹrẹ ohun itanna kan pẹlu ihuwasi aiyipada):

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

Ohun itanna kọọkan tun ṣafihan olupilẹṣẹ aise lori ohun Constructor-ini kan $.fn.popover.Constructor:. Ti o ba fẹ lati gba apẹẹrẹ itanna kan pato, gba pada taara lati ẹya: $('[rel="popover"]').data('popover').

Awọn eto aiyipada

O le yi awọn eto aiyipada pada fun ohun itanna kan nipa yiyipada ohun itanna Constructor.DEFAULTSnaa:

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

Ko si ija

Nigba miiran o jẹ dandan lati lo awọn afikun Bootstrap pẹlu awọn ilana UI miiran. Ni awọn ipo wọnyi, awọn ikọlu aaye orukọ le waye lẹẹkọọkan. Ti eyi ba ṣẹlẹ, o le pe .noConflictohun itanna ti o fẹ lati yi iye pada.

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

Awọn iṣẹlẹ

Bootstrap n pese awọn iṣẹlẹ aṣa fun ọpọlọpọ awọn iṣe alailẹgbẹ awọn afikun. Ni gbogbogbo, iwọnyi wa ni fọọmu ailopin ati ti o ti kọja - nibiti ailopin (fun apẹẹrẹ show) ti jẹ okunfa ni ibẹrẹ iṣẹlẹ kan, ati fọọmu apakan apakan ti o kọja (fun apẹẹrẹ shown) jẹ okunfa lori ipari iṣẹ kan.

Bi ti 3.0.0, gbogbo awọn iṣẹlẹ Bootstrap jẹ orukọ.

Gbogbo awọn iṣẹlẹ ailopin pese preventDefaultiṣẹ ṣiṣe. Eyi n pese agbara lati da ipaniyan ti iṣe ṣaaju ki o to bẹrẹ.

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

Sanitizer

Awọn imọran irinṣẹ ati Awọn agbejade lo imototo ti a ṣe sinu rẹ lati sọ awọn aṣayan di mimọ ti o gba HTML.

Iye aiyipada whiteListni atẹle yii:

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

Ti o ba fẹ ṣafikun awọn iye tuntun si aiyipada yii whiteListo le ṣe atẹle naa:

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)

Ti o ba fẹ lati fori imototo wa nitori pe o fẹ lati lo ile-ikawe iyasọtọ, fun apẹẹrẹ DOMPurify , o yẹ ki o ṣe atẹle naa:

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

Awọn nọmba ẹya

Ẹya ti ọkọọkan awọn afikun jQuery Bootstrap ni a le wọle nipasẹ VERSIONohun-ini ti olupilẹṣẹ ohun itanna naa. Fun apẹẹrẹ, fun ohun itanna ọpa:

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

Ko si awọn ipadasẹhin pataki nigbati JavaScript jẹ alaabo

Awọn afikun Bootstrap ko ṣubu sẹhin paapaa ni oore-ọfẹ nigbati JavaScript jẹ alaabo. Ti o ba bikita nipa iriri olumulo ninu ọran yii, lo <noscript>lati ṣalaye ipo naa (ati bi o ṣe le tun JavaScript ṣiṣẹ) si awọn olumulo rẹ, ati/tabi ṣafikun awọn isubu aṣa tirẹ.

Awọn iyipada.js

Nipa awọn iyipada

Fun awọn ipa iyipada ti o rọrun, pẹlu transition.jslẹẹkan lẹgbẹẹ awọn faili JS miiran. Ti o ba nlo akopọ (tabi miniified) bootstrap.js, ko si iwulo lati ṣafikun eyi — o ti wa tẹlẹ.

Kini inu

Transition.js jẹ oluranlọwọ ipilẹ fun transitionEndawọn iṣẹlẹ bii emulator iyipada CSS kan. O jẹ lilo nipasẹ awọn afikun miiran lati ṣayẹwo fun atilẹyin iyipada CSS ati lati yẹ awọn iyipada ikele.

Pa awọn iyipada kuro

Awọn iyipada le jẹ alaabo agbaye ni lilo snippet JavaScript atẹle, eyiti o gbọdọ wa lẹhin transition.js(tabi bootstrap.js, bootstrap.min.jsbi ọran ti le jẹ) ti kojọpọ:

$.support.transition = false

Modals modal.js

Modals ti wa ni ṣiṣan, ṣugbọn rọ, awọn itọsi ọrọ sisọ pẹlu iṣẹ ṣiṣe ti o kere julọ ti a beere ati awọn aṣiṣe ọlọgbọn.

Nitori bi HTML5 ṣe n ṣalaye awọn itumọ-ọrọ rẹ, ẹda autofocusHTML ko ni ipa ni awọn awoṣe Bootstrap. Lati ṣaṣeyọri ipa kanna, lo diẹ ninu JavaScript aṣa:

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

Awọn apẹẹrẹ

Apẹẹrẹ aimi

Modal ti a ṣe pẹlu akọsori, ara, ati ṣeto awọn iṣe ni ẹlẹsẹ.

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

Live demo

Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

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

Awọn iwọn iyan

Modals ni awọn iwọn iyan meji, wa nipasẹ awọn kilasi modifier lati gbe sori faili .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>

Yọ iwara kuro

Fun awọn awoṣe ti o han nirọrun kuku ju ipare sinu lati wo, yọ .fadekilasi kuro lati isamisi modal rẹ.

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

Lilo awọn akoj eto

Lati lo anfani ti eto akoj Bootstrap laarin modal kan, kan itẹ-ẹiyẹ .rows laarin .modal-bodyati lẹhinna lo awọn kilasi eto akoj deede.

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

Yiyipada akoonu modal da lori bọtini okunfa

Ni opo kan ti awọn bọtini ti gbogbo awọn okunfa kanna modal, o kan pẹlu die-die o yatọ si awọn akoonu ti? Lo event.relatedTargetati awọn abuda HTMLdata-* (o ṣee ṣe nipasẹ jQuery ) lati ṣe iyatọ awọn akoonu ti modal da lori bọtini wo ni o tẹ. Wo Awọn iwe aṣẹ Awọn iṣẹlẹ Modal fun awọn alaye lori 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)
})

Lilo

Ohun itanna modal yi akoonu ti o farapamọ pada lori ibeere, nipasẹ awọn abuda data tabi JavaScript. O tun ṣe afikun .modal-opensi <body>lati bori ihuwasi yiyi lọ aiyipada ati ṣe ipilẹṣẹ kan .modal-backdroplati pese agbegbe tẹ kan fun yiyọ awọn awoṣe ti o han nigbati titẹ si ita modal.

Nipasẹ awọn abuda data

Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.

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

Nipasẹ JavaScript

Pe modal pẹlu id myModalpẹlu laini JavaScript kan:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-backdrop="".

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

Awọn ọna

.modal(options)

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

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

.modal('toggle')

Pẹlu ọwọ yipada modal kan. Pada si olupe ṣaaju ki modal ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.modaltabi hidden.bs.modaliṣẹlẹ waye).

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

.modal('show')

Pẹlu ọwọ ṣii modal kan. Pada si olupe ṣaaju ki modal ti han gangan (ie ṣaaju ki shown.bs.modaliṣẹlẹ naa to waye).

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

.modal('hide')

Pẹlu ọwọ hides a modal. Pada si olupe ṣaaju ki modal naa ti farapamọ gangan (ie ṣaaju ki hidden.bs.modaliṣẹlẹ naa to waye).

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

.modal('handleUpdate')

Ṣe atunṣe ipo ipo modal lati koju ọpa lilọ kiri ni irú ọkan yẹ ki o han, eyiti yoo jẹ ki modal fo si apa osi.

Nikan nilo nigbati giga ti modal yipada lakoko ti o ṣii.

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

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

Gbogbo awọn iṣẹlẹ modal jẹ ina ni modal funrararẹ (ie ni <div class="modal">).

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

Sisọ silẹ silẹ.js

Awọn apẹẹrẹ

Ṣafikun awọn akojọ aṣayan silẹ si ohunkohun pẹlu ohun itanna ti o rọrun yii, pẹlu navbar, awọn taabu, ati awọn oogun.

Laarin a navbar

Laarin awọn oogun

Lilo

Nipasẹ awọn abuda data tabi JavaScript, ohun itanna sisọ silẹ yipada akoonu ti o farapamọ (awọn akojọ aṣayan silẹ) nipa yiyi .openkilaasi lori ohun atokọ obi.

Lori awọn ẹrọ alagbeka, ṣiṣi silẹ silẹ kan ṣafikun .dropdown-backdropbii agbegbe tẹ ni kia kia fun pipade awọn akojọ aṣayan silẹ nigbati titẹ ni ita akojọ aṣayan, ibeere fun atilẹyin iOS to dara. Eyi tumọ si pe yi pada lati akojọ aṣayan silẹ ṣiṣi si akojọ aṣayan silẹ ti o yatọ nilo afikun tẹ ni kia kia lori alagbeka.

Akiyesi: Ẹya data-toggle="dropdown"naa gbarale fun pipade awọn akojọ aṣayan silẹ ni ipele ohun elo, nitorinaa o jẹ imọran ti o dara lati lo nigbagbogbo.

Nipasẹ awọn abuda data

Ṣafikun data-toggle="dropdown"si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.

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

Lati jẹ ki awọn URL wa titi pẹlu awọn bọtini ọna asopọ, lo data-targetabuda dipo 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>

Nipasẹ JavaScript

Pe awọn silẹ nipasẹ JavaScript:

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

Awọn aṣayan

Ko si

Awọn ọna

$().dropdown('toggle')

Yi akojọ aṣayan-silẹ ti navbar ti a fun tabi lilọ kiri taabu pada.

Awọn iṣẹlẹ

Gbogbo dropdown iṣẹlẹ ti wa ni kuro lenu ise ni .dropdown-menu's obi ano.

Gbogbo awọn iṣẹlẹ sisọ silẹ ni relatedTargetohun-ini kan, eyiti iye rẹ jẹ eroja oran toggling.

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

ScrollSpy scrollspy.js

Apeere ni navbar

Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav da lori ipo yi lọ. Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

Lilo

Nbeere ipo ojulumo

Laibikita ọna imuse, scrollspy nilo lilo position: relative;lori eroja ti o ṣe amí lori. Ni ọpọlọpọ igba eyi ni <body>. Nigbati o ba n lọ kiri lori awọn eroja miiran yatọ si <body>, rii daju pe o heightṣeto ati overflow-y: scroll;lo.

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-spy="scroll"si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>). Lẹhinna ṣafikun data-targetẹda pẹlu ID tabi kilasi ti ẹya obi ti .navpaati Bootstrap eyikeyi.

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>

Nipasẹ JavaScript

Lẹhin fifi kun position: relative;ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:

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

Awọn ọna

.scrollspy('refresh')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Awọn iṣẹlẹ

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

Togglable awọn taabu tab.js

Awọn taabu apẹẹrẹ

Ṣafikun iyara, iṣẹ ṣiṣe taabu ti o ni agbara si iyipada nipasẹ awọn pane ti akoonu agbegbe, paapaa nipasẹ awọn akojọ aṣayan silẹ. Awọn taabu itẹle ko ni atilẹyin.

Lilo

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori nkan kan. Ṣafikun navati nav-tabsawọn kilasi si taabu yoo lo iselona taabuul Bootstrap , lakoko ti o ṣafikun ati awọn kilasi yoo lo iselona pill .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>

Ipa ipare

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .inlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

$().tab

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM. Ninu awọn apẹẹrẹ ti o wa loke, awọn taabu jẹ awọn <a>s pẹlu awọn abuda data-toggle="tab".

.tab('show')

Yan taabu ti a fun ati ṣafihan akoonu ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati akoonu ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tabiṣẹlẹ naa to waye).

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

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

1. hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
2. show.bs.tab(lori taabu ti yoo han)
3. hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
4. shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

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

Irinṣẹ ọpa irinṣẹ.js

Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo CSS3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.

Awọn apẹẹrẹ

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Aimi irinṣẹ

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Awọn itọnisọna mẹrin

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

Lilo

Ohun itanna ọpa irinṣẹ n ṣe agbejade akoonu ati isamisi lori ibeere, ati nipasẹ awọn aaye aiyipada awọn itọnisọna irinṣẹ lẹhin ipin okunfa wọn.

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

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

Siṣamisi

Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan dataati titlelori ẹya HTML ti o fẹ lati ni itọpa irinṣẹ kan. Aami ti ipilẹṣẹ ti ọpa irinṣẹ jẹ kuku rọrun, botilẹjẹpe o nilo ipo kan (nipasẹ aiyipada, ṣeto si topnipasẹ ohun itanna).

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Awọn ọna

$().tooltip(options)

So olutọpa ohun elo kan si ikojọpọ eroja.

.tooltip('show')

Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ. Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.

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

.tooltip('hide')

Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti farapamọ (ie ṣaaju ki hidden.bs.tooltipiṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('toggle')

Yipada ohun elo ti ohun elo. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.tooltiptabi hidden.bs.tooltipiṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa ohun elo irinṣẹ.

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

.tooltip('destroy')

Hides ati ki o run ohun ano ká irinṣẹ. Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti nfa ọmọ.

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

Awọn iṣẹlẹ

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

Popovers popover.js

Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile.

Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

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

Awọn apẹẹrẹ

Agbejade aimi

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi.

Live demo

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

Awọn itọnisọna mẹrin

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

Yọọ kuro ni titẹ atẹle

Lo focusokunfa lati yọ awọn popovers kuro ni titẹ atẹle ti olumulo ṣe.

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

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Awọn ọna

$().popover(options)

Initializes popovers fun ohun akojọpọ eroja.

.popover('show')

Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popoveriṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover. Awọn agbejade ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

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

.popover('hide')

Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popoveriṣẹlẹ naa to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.

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

.popover('toggle')

Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popovertabi hidden.bs.popoveriṣẹlẹ to waye). Eyi ni a ka si “afọwọṣe” ti nfa popover.

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

.popover('destroy')

Hides ati ki o run ohun ano ká popover. Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.

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

Awọn iṣẹlẹ

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

Itaniji awọn ifiranṣẹ alert.js

Awọn itaniji apẹẹrẹ

Ṣafikun iṣẹ idasile si gbogbo awọn ifiranṣẹ itaniji pẹlu ohun itanna yii.

Nigbati o ba nlo .closebọtini kan, o gbọdọ jẹ ọmọ akọkọ ti .alert-dismissibleko si si akoonu ọrọ ti o le wa niwaju rẹ ni isamisi.

Lilo

Kan ṣafikun data-dismiss="alert"si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi. Pipade titaniji yoo yọ kuro lati DOM.

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

Lati jẹ ki awọn titaniji rẹ lo iwara nigba pipade, rii daju pe wọn ni .fadeati .inawọn kilasi ti a ti lo tẹlẹ si wọn.

Awọn ọna

$().alert()

Mu ki o gbọ titaniji fun awọn iṣẹlẹ tẹ lori awọn eroja iran ti o ni abuda naa data-dismiss="alert". (Ko ṣe pataki nigba lilo ipilẹṣẹ-afọwọṣe data-api.)

$().alert('close')

Tititaniji pa nipa yiyọ kuro lati DOM. Ti o ba ti .fadeati.in awọn kilasi ba wa lori eroja, itaniji yoo parẹ ṣaaju ki o to yọkuro.

Awọn iṣẹlẹ

Ohun itanna gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

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

Awọn bọtini bọtini.js

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Stateful

Fikun -un data-loading-text="Loading..."lati lo ipo ikojọpọ lori bọtini kan.

Ẹya ara ẹrọ yii ti wa ni idinku lati v3.3.5 ati pe o ti yọkuro ni 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>

Yiyi ẹyọkan

Fikun -un data-toggle="button"lati mu yiyi ṣiṣẹ lori bọtini ẹyọkan.

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

Apoti ayẹwo / Redio

Ṣafikun data-toggle="buttons"si .btn-groupapoti ayẹwo tabi awọn igbewọle redio lati jẹ ki yiyi pada ni awọn aṣa ara wọn.

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

Awọn ọna

$().button('toggle')

Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

$().button('reset')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba. Ọna yii jẹ asynchronous ati awọn ipadabọ ṣaaju ki atunto ti pari nitootọ.

$().button(string)

Yi ọrọ pada si eyikeyi data asọye ipo ọrọ.

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

Kọlulẹ.js _

Ohun itanna to rọ ti o lo iwonba awọn kilasi fun ihuwasi yilọ irọrun.

Apeere

Tẹ awọn bọtini ni isalẹ lati ṣafihan ati tọju nkan miiran nipasẹ awọn ayipada kilasi:

• .collapsehides akoonu
• .collapsingti lo lakoko awọn iyipada
• .collapse.infihan akoonu

O le lo ọna asopọ kan pẹlu hrefabuda, tabi bọtini kan pẹlu data-targetabuda. Ni awọn ọran mejeeji, o data-toggle="collapse"nilo.

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

Accordion apẹẹrẹ

Faagun ihuwasi isubu aiyipada lati ṣẹda accordion pẹlu paati nronu.

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

O tun ṣee ṣe lati paarọ .panel-bodys pẹlu .list-groups.

Lilo

Ohun itanna idapọmọra nlo awọn kilasi diẹ lati mu gbigbe gbigbe ti o wuwo naa:

• .collapsehides awọn akoonu
• .collapse.infihan akoonu
• .collapsingti wa ni afikun nigbati awọn orilede bẹrẹ, ati kuro nigbati o ba pari

Awọn kilasi wọnyi le wa ni component-animations.less.

Nipasẹ awọn abuda data

Kan ṣafikun data-toggle="collapse"ati kan data-targetsi eroja lati fi iṣakoso laifọwọyi ti nkan kan ti o le bajẹ. Ẹya naa data-targetgba oluyan CSS kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in.

Lati ṣafikun iṣakoso ẹgbẹ bi accordion si iṣakoso ikojọpọ, ṣafikun abuda data naa data-parent="#selector". Tọkasi demo lati wo eyi ni iṣe.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

$('.collapse').collapse()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-parent="".

Awọn ọna

.collapse(options)

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

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

.collapse('toggle')

Yi eroja ti o le kolu pada si ifihan tabi pamọ. Pada si olupe ṣaaju ki nkan ti o le kọlu ti han tabi farapamọ gangan (ie ṣaaju ki iṣẹlẹ shown.bs.collapsetabi hidden.bs.collapseiṣẹlẹ to waye).

.collapse('show')

Ṣe afihan eroja ti o le ṣubu. Pada si olupe ṣaaju ki ohun elo ti o le kolu ti han gangan (ie ṣaaju ki shown.bs.collapseiṣẹlẹ naa to waye).

.collapse('hide')

Ìbòmọlẹ ohun kan collapsible. Pada si olupe ṣaaju ki nkan ti o le kolu ti farapamọ nitootọ (ie ṣaaju ki hidden.bs.collapseiṣẹlẹ naa to waye).

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

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

Carousel carousel.js

Apakan agbelera fun gigun kẹkẹ nipasẹ awọn eroja, bii carousel kan. Awọn carousels itẹle ko ni atilẹyin.

Awọn apẹẹrẹ

Ti tẹlẹ Itele

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

Awọn akọle iyan

Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-captioneroja laarin eyikeyi .item. Gbe o kan nipa eyikeyi HTML iyan laarin nibẹ ati pe yoo wa ni ibamu laifọwọyi ati tito akoonu.

Aami ifaworanhan akọkọ

Nulla vitae elit libero, a pharetra augue mollis interdum.

Aami ifaworanhan keji

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kẹta ifaworanhan aami

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Ti tẹlẹ Itele

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

Lilo

Awọn carousels pupọ

Carousels nilo lilo ohun kan idlori apo eiyan ti ita (awọn .carousel) fun awọn iṣakoso carousel lati ṣiṣẹ daradara. Nigbati o ba nfi ọpọlọpọ awọn carousels kun, tabi nigba iyipada carousel's kan id, rii daju lati ṣe imudojuiwọn awọn idari ti o yẹ.

Nipasẹ awọn abuda data

Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slidegba awọn koko-ọrọ prevtabi next, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-slide-tolati kọja atọka ifaworanhan aise si carousel data-slide-to="2", eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0.

Ẹya data-ride="carousel"naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ko le ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.

Nipasẹ JavaScript

Pe carousel pẹlu ọwọ pẹlu:

$('.carousel').carousel()

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-interval="".

Awọn ọna

.carousel(options)

Ti bẹrẹ carousel pẹlu awọn aṣayan iyan objectati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.

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

.carousel('cycle')

Yiyipo nipasẹ awọn ohun carousel lati osi si otun.

.carousel('pause')

Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.

.carousel(number)

Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun).

.carousel('prev')

Awọn iyipo si nkan ti tẹlẹ.

.carousel('next')

Awọn iyipo si nkan atẹle.

Awọn iṣẹlẹ

Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel.

Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:

• direction: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya "left"tabi "right").
• relatedTarget: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.

Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">).

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

Affix.js _

Apeere

Ohun itanna affix naa yipada position: fixed;si tan ati pipa, ti o ṣe apẹẹrẹ ipa ti a rii pẹlu position: sticky;. Subnavigation ni apa ọtun jẹ demo ifiwe ti ohun itanna affix.

Lilo

Lo ohun itanna affix nipasẹ awọn abuda data tabi pẹlu ọwọ pẹlu JavaScript tirẹ. Ni awọn ipo mejeeji, o gbọdọ pese CSS fun ipo ati iwọn akoonu ti a fi si.

Akiyesi: Maṣe lo ohun itanna affix lori eroja ti o wa ninu ipo ipo ti o jo, gẹgẹbi ti o fa tabi ti ọwọn, nitori aṣiṣe ti n ṣe Safari .

Ipo nipasẹ CSS

Ohun itanna affix yi yipada laarin awọn kilasi mẹta, ọkọọkan n ṣe afihan ipo kan: .affix, .affix-top, ati .affix-bottom. O gbọdọ pese awọn aza, pẹlu awọn sile ti position: fixed;lori .affix, fun awọn wọnyi kilasi ara rẹ (ominira ti yi ohun itanna) lati mu awọn gangan awọn ipo.

Eyi ni bii ohun itanna affix ṣe n ṣiṣẹ:

1. Lati bẹrẹ, ohun itanna naa ṣafikun .affix-toplati tọka pe eroja wa ni ipo oke-julọ julọ. Ni aaye yii ko si ipo CSS ko nilo.
2. Yi lọ kọja ohun elo ti o fẹ fi sii yẹ ki o fa ifaramọ gangan. Eyi ni ibiti o ti .affixrọpo .affix-topati ṣeto position: fixed;(ti a pese nipasẹ Bootstrap's CSS).
3. Ti aiṣedeede isalẹ ba jẹ asọye, yi lọ kọja o yẹ ki o rọpo .affixpẹlu .affix-bottom. Niwọn bi awọn aiṣedeede jẹ iyan, eto ọkan nilo ki o ṣeto CSS ti o yẹ. Ni idi eyi, fi sii position: absolute;nigbati o jẹ dandan. Ohun itanna naa nlo abuda data tabi aṣayan JavaScript lati pinnu ibiti o le gbe nkan naa si lati ibẹ.

Tẹle awọn igbesẹ ti o wa loke lati ṣeto CSS rẹ fun boya awọn aṣayan lilo ni isalẹ.

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi affix si eyikeyi eroja, kan ṣafikun data-spy="affix"si ipin ti o fẹ ṣe amí lori. Lo awọn aiṣedeede lati ṣalaye igba lati yi pinni ti nkan kan pada.

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

Nipasẹ JavaScript

Pe ohun itanna affix nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset-top="200".

Awọn ọna

.affix(options)

Mu akoonu rẹ ṣiṣẹ bi akoonu ti a somọ. Gba awọn aṣayan iyan object.

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

.affix('checkPosition')

Ṣe atunto ipo affix ti o da lori awọn iwọn, ipo, ati ipo yi lọ ti awọn eroja ti o yẹ. Awọn .affix, .affix-top, ati .affix-bottomawọn kilasi ti wa ni afikun si tabi yọkuro lati akoonu ti a fi si ni ibamu si ipinle titun. Ọna yii nilo lati pe ni igbakugba ti awọn iwọn ti akoonu ti a fi si tabi eroja ibi-afẹde ti yipada, lati rii daju ipo ti o tọ ti akoonu ti a somọ.

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

Awọn iṣẹlẹ

Ohun itanna affix Bootstrap ṣe afihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ affix.