Pangkalahatang-ideya

Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (gamit ang mga indibidwal na *.jsfile ng Bootstrap), o sabay-sabay (gamit bootstrap.jso ang minified bootstrap.min.js).

Mga katangian ng data

Maaari mong gamitin ang lahat ng plugin ng Bootstrap sa pamamagitan lamang ng markup API nang hindi nagsusulat ng isang linya ng JavaScript. Ito ang unang-class na API ng Bootstrap at dapat ang iyong unang pagsasaalang-alang kapag gumagamit ng isang plugin.

Iyon ay sinabi, sa ilang mga sitwasyon ay maaaring kanais-nais na i-off ang functionality na ito. Samakatuwid, nagbibigay din kami ng kakayahang i-disable ang data attribute API sa pamamagitan ng pag-unbinding sa lahat ng kaganapan sa dokumento na may namespace na data-api. Ganito ang hitsura nito:

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

Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:

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

Programmatic API

Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.

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

Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):

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

Inilalantad din ng bawat plugin ang raw constructor nito sa isang Constructorproperty: $.fn.popover.Constructor. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel="popover"]').data('popover').

Mga default na setting

Maaari mong baguhin ang mga default na setting para sa isang plugin sa pamamagitan ng pagbabago sa Constructor.DEFAULTSobject ng plugin:

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

Walang conflict

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

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

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa mga natatanging pagkilos ng karamihan sa mga plugin. Sa pangkalahatan, ang mga ito ay dumating sa isang infinitive at past participle form - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay na-trigger sa pagkumpleto ng isang aksyon.

Sa 3.0.0, lahat ng mga kaganapan sa Bootstrap ay namespaced.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefaultfunctionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula.

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

Sanitizer

Ginagamit ng Tooltips at Popovers ang aming built-in na sanitizer para i-sanitize ang mga opsyon na tumatanggap ng HTML.

Ang default whiteListna halaga ay ang sumusunod:

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

Kung gusto mong magdagdag ng mga bagong value sa default na ito whiteListmaaari mong gawin ang sumusunod:

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)

Kung gusto mong i-bypass ang aming sanitizer dahil mas gusto mong gumamit ng dedikadong library, halimbawa DOMPuify , dapat mong gawin ang sumusunod:

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

Mga numero ng bersyon

Ang bersyon ng bawat isa sa mga plugin ng jQuery ng Bootstrap ay maaaring ma-access sa pamamagitan ng pag- VERSIONaari ng constructor ng plugin. Halimbawa, para sa tooltip plugin:

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

Walang mga espesyal na fallback kapag hindi pinagana ang JavaScript

Ang mga plugin ng Bootstrap ay hindi bumabalik lalo na nang maganda kapag ang JavaScript ay hindi pinagana. Kung nagmamalasakit ka sa karanasan ng user sa kasong ito, gamitin <noscript>upang ipaliwanag ang sitwasyon (at kung paano muling paganahin ang JavaScript) sa iyong mga user, at/o magdagdag ng sarili mong mga custom na fallback.

Transitions transition.js

Tungkol sa mga transition

Para sa mga simpleng transition effect, isama ang transition.jsisang beses sa tabi ng iba pang mga JS file. Kung ginagamit mo ang compiled (o minified) bootstrap.js, hindi na kailangang isama ito—nandiyan na ito.

Anong nasa loob

Ang Transition.js ay isang pangunahing katulong para sa transitionEndmga kaganapan pati na rin ang isang CSS transition emulator. Ito ay ginagamit ng iba pang mga plugin upang tingnan ang CSS transition support at para mahuli ang hanging transition.

Hindi pagpapagana ng mga transition

Maaaring ma-disable sa buong mundo ang mga transition gamit ang sumusunod na snippet ng JavaScript, na dapat na dumating pagkatapos transition.js(o bootstrap.js, bootstrap.min.jsayon sa sitwasyon) ay na-load:

$.support.transition = false

Modals modal.js

Ang mga modal ay streamline, ngunit nababaluktot, ang mga dialog na prompt na may pinakamababang kinakailangang functionality at mga smart default.

Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocusHTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:

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

Mga halimbawa

Static na halimbawa

Isang nai-render na modal na may header, katawan, at hanay ng mga pagkilos sa footer.

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

I-toggle ang isang modal sa pamamagitan ng JavaScript sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

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

Mga opsyonal na laki

Ang mga modal ay may dalawang opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .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>

Alisin ang animation

Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fadeklase sa iyong modal markup.

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

Gamit ang grid system

Upang samantalahin ang Bootstrap grid system sa loob ng isang modal, mag-nest lang .rowsa loob ng .modal-bodyat pagkatapos ay gamitin ang mga normal na klase ng grid system.

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

Pag-iiba-iba ng modal na nilalaman batay sa trigger button

May isang grupo ng mga button na lahat ay nagti-trigger ng parehong modal, na may bahagyang magkaibang mga nilalaman? Gamitin event.relatedTargetat HTML na mga data-*katangian (maaaring sa pamamagitan ng jQuery ) upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click. Tingnan ang mga doc ng Modal Events para sa mga detalye sa 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)
})

Paggamit

I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Nagdaragdag din ito .modal-opensa <body>to override default na pag-scroll na gawi at bumubuo ng .modal-backdroppara magbigay ng lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nag-click sa labas ng modal.

Sa pamamagitan ng mga katangian ng data

Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.

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

Sa pamamagitan ng JavaScript

Tumawag ng modal na may id myModalna may isang linya ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".

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

Paraan

.modal(options)

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

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

.modal('toggle')

Manu-manong i-toggle ang isang modal. Bumabalik sa tumatawag bago ang modal ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.modalo hidden.bs.modalkaganapan).

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

.modal('show')

Manu-manong nagbubukas ng modal. Bumabalik sa tumatawag bago aktwal na naipakita ang modal (ibig sabihin, bago shown.bs.modalmangyari ang kaganapan).

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

.modal('hide')

Manu-manong nagtatago ng modal. Bumabalik sa tumatawag bago pa talaga naitago ang modal (ibig sabihin, bago hidden.bs.modalmangyari ang kaganapan).

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

.modal('handleUpdate')

Isinasaayos muli ang pagpoposisyon ng modal upang kontrahin ang isang scrollbar kung sakaling may lumitaw, na gagawing tumalon ang modal sa kaliwa.

Kailangan lamang kapag ang taas ng modal ay nagbabago habang ito ay bukas.

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

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.

Ang lahat ng modal na kaganapan ay pinapagana sa modal mismo (ibig sabihin, sa <div class="modal">).

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

Mga dropdown na dropdown.js

Mga halimbawa

Magdagdag ng mga dropdown na menu sa halos anumang bagay gamit ang simpleng plugin na ito, kabilang ang navbar, mga tab, at mga tabletas.

Sa loob ng isang navbar

Sa loob ng mga tabletas

Paggamit

Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .openklase sa item sa listahan ng magulang.

Sa mga mobile device, ang pagbubukas ng dropdown ay nagdaragdag ng .dropdown-backdropbilang isang tap area para sa pagsasara ng mga dropdown na menu kapag nag-tap sa labas ng menu, isang kinakailangan para sa wastong suporta sa iOS. Nangangahulugan ito na ang paglipat mula sa isang bukas na dropdown na menu patungo sa ibang dropdown na menu ay nangangailangan ng karagdagang pag-tap sa mobile.

Tandaan: Ang data-toggle="dropdown"katangian ay umaasa sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.

Sa pamamagitan ng mga katangian ng data

Idagdag data-toggle="dropdown"sa isang link o button upang i-toggle ang isang dropdown.

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

Upang panatilihing buo ang mga URL gamit ang mga button ng link, gamitin ang data-targetattribute sa halip na 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>

Sa pamamagitan ng JavaScript

Tawagan ang mga dropdown sa pamamagitan ng JavaScript:

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

Mga pagpipilian

wala

Paraan

$().dropdown('toggle')

I-toggle ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation.

Mga kaganapan

Ang lahat ng mga dropdown na kaganapan ay pinapagana sa pangunahing .dropdown-menuelemento ng 's.

May property ang lahat ng dropdown na event relatedTarget, na ang value ay ang toggling anchor element.

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

ScrollSpy scrollspy.js

Halimbawa sa navbar

Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position. Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na sub item ay iha-highlight din.

Paggamit

Nangangailangan ng kamag-anak na pagpoposisyon

Anuman ang paraan ng pagpapatupad, ang scrollspy ay nangangailangan ng paggamit ng position: relative;sa elementong iyong tinitiktikan. Sa karamihan ng mga kaso ito ang <body>. Kapag nag-scroll sa mga elemento maliban sa <body>, siguraduhing magkaroon ng isang heightset at overflow-y: scroll;inilapat.

Sa pamamagitan ng mga katangian ng data

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag data-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang <body>). Pagkatapos ay idagdag ang data-targetattribute na may ID o klase ng parent element ng anumang .navbahagi ng 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>

Sa pamamagitan ng JavaScript

Pagkatapos idagdag position: relative;sa iyong CSS, tawagan ang scrollspy sa pamamagitan ng JavaScript:

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

Paraan

.scrollspy('refresh')

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Mga kaganapan

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

Mga togglable tab na tab.js

Mga halimbawang tab

Magdagdag ng mabilis, dynamic na paggana ng tab upang lumipat sa mga pane ng lokal na nilalaman, kahit na sa pamamagitan ng mga dropdown na menu. Hindi sinusuportahan ang mga nested tab.

Paggamit

Paganahin ang mga tab na tab sa pamamagitan ng JavaScript (kailangang isaaktibo ang bawat tab):

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

Maaari mong i-activate ang mga indibidwal na tab sa maraming paraan:

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

Markup

Maaari mong i-activate ang isang tab o pill navigation nang hindi sumusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-toggle="tab"o data-toggle="pill"sa isang elemento. Ang pagdagdag ng navat mga nav-tabsklase sa tab ulay maglalapat ng Bootstrap tab styling , habang ang pagdaragdag ng navat mga nav-pillsklase ay maglalapat ng pill styling .

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

Fade effect

Upang mag-fade in ang mga tab, idagdag .fadesa bawat isa .tab-pane. Ang unang tab pane ay dapat ding .ingawin ang unang nilalaman na nakikita.

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

Paraan

$().tab

Ina-activate ang isang elemento ng tab at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-targeto isang pag- hreftarget ng isang container node sa DOM. Sa mga halimbawa sa itaas, ang mga tab ay ang mga <a>s na may mga data-toggle="tab"katangian.

.tab('show')

Pinipili ang ibinigay na tab at ipinapakita ang nauugnay na nilalaman nito. Ang anumang iba pang tab na dati nang napili ay hindi mapipili at ang nauugnay na nilalaman nito ay nakatago. Bumabalik sa tumatawag bago aktwal na naipakita ang tab pane (ibig sabihin bago shown.bs.tabmangyari ang kaganapan).

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

Mga kaganapan

Kapag nagpapakita ng bagong tab, gagana ang mga kaganapan sa sumusunod na pagkakasunud-sunod:

1. hide.bs.tab(sa kasalukuyang aktibong tab)
2. show.bs.tab(sa ipapakitang tab)
3. hidden.bs.tab(sa nakaraang aktibong tab, kapareho ng para sa hide.bs.tabkaganapan)
4. shown.bs.tab(sa bagong-aktibong kakapakitang tab, kapareho ng para sa show.bs.tabkaganapan)

Kung wala pang tab na aktibo, hindi papaganahin ang hide.bs.tabat mga hidden.bs.tabkaganapan.

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

Mga tooltip tooltip.js

May inspirasyon ng mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang mga tooltip ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng CSS3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat.

Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

Mga halimbawa

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Static na tooltip

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

Apat na direksyon

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

Paggamit

Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.

I-trigger ang tooltip sa pamamagitan ng JavaScript:

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

Markup

Ang kinakailangang markup para sa isang tooltip ay isang datakatangian lamang at titlesa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa toppamamagitan ng plugin).

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Paraan

$().tooltip(options)

Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang tooltip (ibig sabihin, bago shown.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip. Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

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

.tooltip('hide')

Itinatago ang tooltip ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang tooltip (ibig sabihin, bago hidden.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento. Bumabalik sa tumatawag bago ang tooltip ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.tooltipo hidden.bs.tooltipkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

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

.tooltip('destroy')

Itinatago at sinisira ang tooltip ng isang elemento. Ang mga tooltip na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

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

Mga kaganapan

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

Popovers popover.js

Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon.

Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.

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

Mga halimbawa

Static popover

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

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

Apat na direksyon

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

I-dismiss sa susunod na pag-click

Gamitin ang focustrigger upang i-dismiss ang mga popover sa susunod na pag-click na gagawin ng user.

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

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Paraan

$().popover(options)

Sinisimulan ang mga popover para sa isang koleksyon ng elemento.

.popover('show')

Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang parehong pamagat at nilalaman ay zero-length ay hindi kailanman ipinapakita.

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

.popover('hide')

Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

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

.popover('toggle')

I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popovero hidden.bs.popoverkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

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

.popover('destroy')

Itinatago at sinisira ang popover ng isang elemento. Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

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

Mga kaganapan

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

Mga mensahe ng alerto alert.js

Mga halimbawang alerto

Magdagdag ng dismiss functionality sa lahat ng alertong mensahe gamit ang plugin na ito.

Kapag gumagamit ng isang .closebutton, ito dapat ang unang anak ng .alert-dismissibleat walang text na nilalaman ang maaaring mauna dito sa markup.

Paggamit

Idagdag lang data-dismiss="alert"sa iyong close button para awtomatikong magbigay ng alertong close functionality. Ang pagsasara ng alerto ay nag-aalis nito sa DOM.

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

Upang magamit ng iyong mga alerto ang animation kapag nagsasara, tiyaking mayroon na ang mga ito sa .fadeat mga .inklase na nakalapat na sa kanila.

Paraan

$().alert()

Gumagawa ng alerto sa pakikinig para sa mga kaganapan sa pag-click sa mga descendant na elemento na may data-dismiss="alert"katangian. (Hindi kinakailangan kapag ginagamit ang auto-initialization ng data-api.)

$().alert('close')

Nagsasara ng alerto sa pamamagitan ng pag-alis nito sa DOM. Kung ang .fadeat mga .inklase ay naroroon sa elemento, ang alerto ay maglalaho bago ito alisin.

Mga kaganapan

Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapaandar ng alerto.

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

Buttons button.js

Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.

Stateful

Idagdag data-loading-text="Loading..."upang gumamit ng estado ng paglo-load sa isang button.

Hindi na ginagamit ang feature na ito mula noong v3.3.5 at inalis na sa 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>

Single toggle

Idagdag data-toggle="button"para i-activate ang toggling sa iisang button.

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

Checkbox / Radyo

Idagdag data-toggle="buttons"sa isang .btn-groupnaglalaman ng checkbox o mga radio input upang paganahin ang toggling sa kani-kanilang mga istilo.

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

Paraan

$().button('toggle')

I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.

$().button('reset')

Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text. Ang pamamaraang ito ay asynchronous at bumabalik bago ang pag-reset ay aktwal na nakumpleto.

$().button(string)

Pinapalitan ang text sa anumang tinukoy na data na estado ng text.

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

I- collapse collapse.js

Flexible na plugin na gumagamit ng ilang klase para sa madaling pag-uugali ng toggle.

Halimbawa

I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:

• .collapsenagtatago ng nilalaman
• .collapsingay inilapat sa panahon ng mga transition
• .collapse.innagpapakita ng nilalaman

Maaari kang gumamit ng isang link na may hrefkatangian, o isang pindutan na may data-targetkatangian. Sa parehong mga kaso, ang data-toggle="collapse"ay kinakailangan.

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

Halimbawa ng akurdyon

Palawakin ang default na pag-collapse na pag-uugali upang lumikha ng isang akurdyon na may bahagi ng panel.

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

Posible ring ipagpalit ang .panel-bodys sa .list-groups.

Paggamit

Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:

• .collapsenagtatago ng nilalaman
• .collapse.innagpapakita ng nilalaman
• .collapsingay idinaragdag kapag nagsimula ang paglipat, at inalis kapag natapos na ito

Ang mga klase na ito ay matatagpuan sacomponent-animations.less .

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-toggle="collapse"at a data-targetsa elemento para awtomatikong magtalaga ng kontrol ng isang collapsible na elemento. Tumatanggap ang data-targetattribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase in.

Upang magdagdag ng tulad-accordion na pamamahala ng pangkat sa isang collapsible na kontrol, idagdag ang attribute ng data data-parent="#selector". Sumangguni sa demo upang makita ito sa pagkilos.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

$('.collapse').collapse()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-parent="".

Paraan

.collapse(options)

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

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

.collapse('toggle')

Itina-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago naipakita o naitago ang nati-collaps na elemento (ibig sabihin, bago mangyari ang shown.bs.collapseo hidden.bs.collapsekaganapan).

.collapse('show')

Nagpapakita ng nati-collapse na elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang collapsible na elemento (ibig sabihin, bago shown.bs.collapsemangyari ang kaganapan).

.collapse('hide')

Itinatago ang isang collapsible na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang collapsible na elemento (ibig sabihin, bago hidden.bs.collapsemangyari ang kaganapan).

Mga kaganapan

Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.

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

Carousel carousel.js

Isang bahagi ng slideshow para sa pagbibisikleta sa mga elemento, tulad ng isang carousel. Hindi sinusuportahan ang mga nested carousel.

Mga halimbawa

Nakaraang Susunod

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

Opsyonal na mga caption

Magdagdag ng mga caption sa iyong mga slide nang madali gamit ang .carousel-captionelemento sa loob ng anumang .item. Ilagay ang halos anumang opsyonal na HTML sa loob doon at awtomatiko itong ihahanay at ipo-format.

Unang slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Pangalawang slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pangatlong slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Nakaraang Susunod

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

Paggamit

Maramihang carousels

Ang mga carousel ay nangangailangan ng paggamit ng isang idnasa pinakalabas na lalagyan (ang .carousel) para gumana nang maayos ang mga kontrol ng carousel. Kapag nagdaragdag ng maraming carousel, o kapag nagpapalit ng carouselid , tiyaking i-update ang mga nauugnay na kontrol.

Sa pamamagitan ng mga katangian ng data

Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-slidetumatanggap ng mga keyword prevo next, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-slide-toupang magpasa ng raw slide index sa carousel data-slide-to="2", na naglilipat sa posisyon ng slide sa isang partikular na index na nagsisimula sa0 .

Ginagamit ang data-ride="carousel"attribute para markahan ang isang carousel bilang animating simula sa pag-load ng page. Hindi ito maaaring gamitin sa kumbinasyon ng (kalabisan at hindi kailangan) tahasang pagsisimula ng JavaScript ng parehong carousel.

Sa pamamagitan ng JavaScript

Manu-manong tumawag sa carousel gamit ang:

$('.carousel').carousel()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-interval="".

Paraan

.carousel(options)

Sinisimulan ang carousel gamit ang isang opsyonal na opsyon objectat magsisimulang umikot sa mga item.

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

.carousel('cycle')

Umiikot sa mga carousel item mula kaliwa hanggang kanan.

.carousel('pause')

Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.

.carousel(number)

Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array).

.carousel('prev')

Ikot sa nakaraang item.

.carousel('next')

Ikot sa susunod na item.

Mga kaganapan

Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel.

Ang parehong mga kaganapan ay may mga sumusunod na karagdagang katangian:

• direction: Ang direksyon kung saan dumudulas ang carousel (alinman "left"o"right" ).
• relatedTarget: Ang elemento ng DOM na ini-slide sa lugar bilang aktibong item.

Ang lahat ng mga kaganapan sa carousel ay pinaputok sa mismong carousel (ibig sabihin, sa <div class="carousel">).

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

Affix affix.js

Halimbawa

Ang affix plugin ay nag-toggle position: fixed;sa on at off, na ginagaya ang epekto na natagpuan sa position: sticky;. Ang subnavigation sa kanan ay isang live na demo ng affix plugin.

Paggamit

Gamitin ang affix plugin sa pamamagitan ng mga attribute ng data o mano-mano gamit ang sarili mong JavaScript. Sa parehong mga sitwasyon, dapat kang magbigay ng CSS para sa pagpoposisyon at lapad ng iyong nakadikit na nilalaman.

Tandaan: Huwag gamitin ang affix plugin sa isang elementong nakapaloob sa medyo nakaposisyon na elemento, gaya ng hinila o itinulak na column, dahil sa isang Safari rendering bug .

Pagpoposisyon sa pamamagitan ng CSS

Ang affix plugin ay nagpapalipat-lipat sa pagitan ng tatlong klase, bawat isa ay kumakatawan sa isang partikular na estado: .affix, .affix-top, at .affix-bottom. Dapat mong ibigay ang mga istilo, maliban sa position: fixed;on .affix, para sa mga klaseng ito mismo (independyente sa plugin na ito) upang mahawakan ang mga aktwal na posisyon.

Narito kung paano gumagana ang affix plugin:

1. Upang magsimula, nagdaragdag ang plugin.affix-top upang ipahiwatig na ang elemento ay nasa pinakamataas na posisyon nito. Sa puntong ito walang pagpoposisyon ng CSS ang kinakailangan.
2. Ang pag-scroll lampas sa elementong gusto mong idikit ay dapat mag-trigger ng aktwal na pag-affix. Ito ay kung saan .affixpumapalit .affix-topat nagtatakda position: fixed;(ibinigay ng Bootstrap's CSS).
3. Kung tinukoy ang isang pang-ibaba na offset, ang pag-scroll lampas nito ay dapat palitan .affixng .affix-bottom. Dahil ang mga offset ay opsyonal, ang pagtatakda ng isa ay nangangailangan sa iyo na itakda ang naaangkop na CSS. Sa kasong ito, magdagdag position: absolute;kung kinakailangan. Ang plugin ay gumagamit ng data attribute o JavaScript na opsyon upang matukoy kung saan ipoposisyon ang elemento mula doon.

Sundin ang mga hakbang sa itaas upang itakda ang iyong CSS para sa alinman sa mga opsyon sa paggamit sa ibaba.

Sa pamamagitan ng mga katangian ng data

Para madaling magdagdag ng gawi ng affix sa anumang elemento, idagdag langdata-spy="affix" sa elementong gusto mong tiktikan. Gumamit ng mga offset upang tukuyin kung kailan i-toggle ang pag-pin ng isang elemento.

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

Sa pamamagitan ng JavaScript

Tawagan ang affix plugin sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset-top="200".

Paraan

.affix(options)

Ina-activate ang iyong nilalaman bilang nakadikit na nilalaman. Tumatanggap ng opsyonal na opsyon object.

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

.affix('checkPosition')

Muling kinakalkula ang estado ng affix batay sa mga sukat, posisyon, at posisyon ng pag-scroll ng mga nauugnay na elemento. Ang .affix, .affix-top, at .affix-bottommga klase ay idinaragdag o inalis mula sa nakadikit na nilalaman ayon sa bagong estado. Kailangang tawagan ang paraang ito sa tuwing babaguhin ang mga sukat ng nakadikit na nilalaman o ang target na elemento, upang matiyak ang tamang pagpoposisyon ng nakadikit na nilalaman.

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

Mga kaganapan

Ang affix plugin ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa affix functionality.