Overview

Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (gamit ang mga indibidwal nga *.jsfile sa Bootstrap), o tanan sa usa ka higayon (gamit bootstrap.jso ang minified bootstrap.min.js).

Mga hiyas sa datos

Mahimo nimong gamiton ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa markup API nga wala magsulat usa ka linya sa JavaScript. Kini ang una nga klase nga API sa Bootstrap ug kinahanglan nga imong una nga konsiderahon kung mogamit usa ka plugin.

Ingon niana, sa pipila ka mga sitwasyon mahimo’g gusto nga i-off kini nga pagpaandar. Busa, naghatag usab kami og abilidad sa pag-disable sa data attribute API pinaagi sa pag-unbinding sa tanang panghitabo sa dokumento nga namespaced sa data-api. Kini tan-awon sama niini:

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

Sa laing paagi, aron ma-target ang usa ka piho nga plugin, ilakip lang ang ngalan sa plugin ingon usa ka namespace kauban ang data-api namespace sama niini:

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

Programmatic API

Nagtuo usab kami nga kinahanglan nimo nga magamit ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa JavaScript API. Ang tanang publikong API kay single, chainable nga mga pamaagi, ug ibalik ang koleksyon nga giaksyonan.

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

Ang tanan nga mga pamaagi kinahanglan nga modawat sa usa ka opsyonal nga butang nga kapilian, usa ka hilo nga nagpunting sa usa ka partikular nga pamaagi, o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga pamatasan):

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

Ang matag plugin nagbutyag usab sa iyang hilaw nga tigtukod sa usa ka Constructorkabtangan: $.fn.popover.Constructor. Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, kuhaa kini direkta gikan sa usa ka elemento: $('[rel="popover"]').data('popover').

Default nga mga setting

Mahimo nimong usbon ang default setting para sa usa ka plugin pinaagi sa pag-usab sa Constructor.DEFAULTSbutang sa plugin:

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

Walay panagbangi

Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

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

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan sa mga talagsaon nga aksyon sa mga plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang infinitive (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkahuman sa usa ka aksyon.

Ingon sa 3.0.0, ang tanan nga mga panghitabo sa Bootstrap gi-namespaced.

Ang tanan nga infinitive nga mga panghitabo naghatag preventDefaultgamit. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod.

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

Sanitizer

Ang Tooltips ug Popovers naggamit sa among built-in nga sanitizer aron sanitize ang mga opsyon nga modawat sa HTML.

Ang default whiteListnga bili mao ang mosunod:

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 nimong idugang ang bag-ong mga kantidad sa kini nga default whiteListmahimo nimo ang mosunod:

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 nimo nga laktawan ang among sanitizer tungod kay gusto nimo nga mogamit usa ka gipahinungod nga librarya, pananglitan DOMPuify , kinahanglan nimo buhaton ang mga musunud:

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

Numero sa bersyon

Ang bersyon sa matag usa sa Bootstrap's jQuery plugins mahimong ma-access pinaagi sa VERSIONkabtangan sa plugin's constructor. Pananglitan, alang sa tooltip plugin:

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

Walay espesyal nga mga fallbacks kung ang JavaScript gi-disable

Ang mga plugins sa Bootstrap dili mabalik ilabi na nga nindot kung ang JavaScript gi-disable. Kung nagpakabana ka bahin sa kasinatian sa gumagamit sa kini nga kaso, gamita <noscript>aron ipasabut ang sitwasyon (ug kung giunsa pag-usab ang JavaScript) sa imong mga tiggamit, ug / o pagdugang sa imong kaugalingon nga naandan nga mga fallback.

Transitions transition.js

Mahitungod sa mga transisyon

Alang sa yano nga mga epekto sa transisyon, ilakip transition.jskausa kauban ang ubang mga file sa JS. Kung gigamit nimo ang gi-compile (o gi-minified) bootstrap.js, dili kinahanglan nga ilakip kini - naa na kini.

Unsay sulod

Ang Transition.js usa ka batakang katabang alang sa transitionEndmga panghitabo ingon man usa ka CSS transition emulator. Gigamit kini sa ubang mga plugins sa pagsusi sa CSS transition support ug sa pagdakop sa nagbitay nga mga transisyon.

Pag-disable sa mga transisyon

Ang mga transisyon mahimong ma-disable sa tibuok kalibutan gamit ang mosunod nga JavaScript snippet, nga kinahanglang mahitabo human ma-load ang transition.js( bootstrap.jso bootstrap.min.js, ingon nga mahitabo):

$.support.transition = false

Modal modal.js

Ang mga modala gipa-streamline, apan flexible, dialog prompt nga adunay minimum nga gikinahanglan nga gamit ug mga smart default.

Tungod sa kung giunsa paghubit sa HTML5 ang mga semantiko niini, ang autofocusHTML attribute walay epekto sa Bootstrap modals. Aron makab-ot ang parehas nga epekto, gamita ang pipila ka naandan nga JavaScript:

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

Mga pananglitan

Static nga pananglitan

Usa ka gihubad nga modal nga adunay header, lawas, ug hugpong sa mga aksyon 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 nga demo

I-toggle ang usa ka modal pinaagi sa JavaScript pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.

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

Opsyonal nga mga gidak-on

Ang mga modala adunay duha ka opsyonal nga gidak-on, nga magamit pinaagi sa mga klase sa modifier nga ibutang sa usa ka .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>

Kuhaa ang animation

Alang sa mga modals nga yano nga makita imbes nga mawala aron makita, kuhaa ang .fadeklase gikan sa imong modal markup.

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

Paggamit sa sistema sa grid

Aron mapahimuslan ang Bootstrap grid system sulod sa usa ka modal, salag lang .rowsulod sa .modal-bodyug unya gamita ang normal nga grid system nga mga klase.

<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-usab-usab sa modal nga sulod base sa trigger button

Adunay usa ka hugpong sa mga buton nga ang tanan nag-aghat sa parehas nga modal, nga adunay gamay nga lainlaing mga sulud? Paggamit event.relatedTargetug HTML nga mga data-*hiyas (posible pinaagi sa jQuery ) aron lainlain ang mga sulod sa modal depende kung unsang buton ang gi-klik. Tan-awa ang Modal Events docs 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

Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Nagdugang usab .modal-openkini sa <body>pag-override sa default nga pamatasan sa pag-scroll ug nagmugna usa ka .modal-backdroparon mahatagan usa ka lugar sa pag-klik alang sa pagtangtang sa gipakita nga modals kung nag-klik sa gawas sa modal.

Pinaagi sa data attributes

Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-toggle="modal"sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"o href="#foo"sa target sa usa ka piho nga modal sa toggle.

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

Pinaagi sa JavaScript

Pagtawag og modal nga adunay id myModalnga adunay usa ka linya sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-backdrop="".

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

Pamaagi

.modal(options)

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

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

.modal('toggle')

Manwal nga mag-toggle sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.modalo hidden.bs.modalpanghitabo).

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

.modal('show')

Manwal nga nagbukas sa usa ka modal. Mibalik sa nagtawag sa wala pa ipakita ang modal (ie sa wala pa shown.bs.modalmahitabo ang panghitabo).

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

.modal('hide')

Manwal nga nagtago sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gitago (ie sa wala pa hidden.bs.modalmahitabo ang panghitabo).

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

.modal('handleUpdate')

I-adjust pag-usab ang pagpoposisyon sa modal aron makontra ang usa ka scrollbar kung adunay makita, nga maghimo sa modal nga molukso sa wala.

Gikinahanglan lamang kung ang gitas-on sa modal mausab samtang kini bukas.

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

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.

Ang tanan nga modal nga mga panghitabo gipabuto sa modal mismo (ie sa <div class="modal">).

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

Mga dropdown dropdown.js

Mga pananglitan

Idugang ang mga dropdown menu sa halos bisan unsang butang gamit kining yano nga plugin, lakip ang navbar, mga tab, ug mga pildoras.

Sulod sa usa ka navbar

Sulod sa mga pildoras

Paggamit

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .openklase sa parent list item.

Sa mga mobile device, ang pag-abli sa usa ka dropdown nagdugang usa .dropdown-backdropka lugar sa pag-tap para sa pagsira sa mga dropdown menu kung nag-tap sa gawas sa menu, usa ka kinahanglanon alang sa tukma nga suporta sa iOS. Kini nagpasabot nga ang pagbalhin gikan sa usa ka bukas nga dropdown menu ngadto sa lain nga dropdown menu nagkinahanglan og dugang nga pag-tap sa mobile.

Pahinumdom: Ang data-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang 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>

Aron magpabiling buo ang mga URL gamit ang mga buton sa link, gamita ang data-targetattribute imbes nga 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>

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

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

Mga kapilian

Wala

Pamaagi

$().dropdown('toggle')

I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.

Mga panghitabo

Ang tanan nga dropdown nga mga panghitabo gipabuto sa .dropdown-menuelemento sa ginikanan.

Ang tanan nga dropdown nga mga panghitabo adunay usa ka relatedTargetkabtangan, kansang kantidad mao ang toggling anchor nga elemento.

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

ScrollSpy scrollspy.js

Pananglitan sa navbar

Ang ScrollSpy plugin kay para sa awtomatikong pag-update sa mga target sa nav base sa scroll position. I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown sub nga mga butang i-highlight usab.

Paggamit

Nagkinahanglan og relatibong posisyon

Bisan unsa pa ang pamaagi sa pagpatuman, ang scrollspy nanginahanglan sa paggamit sa position: relative;elemento nga imong gipaniid. Sa kadaghanan nga mga kaso kini ang <body>. Kung mag-scrollspy sa mga elemento gawas sa <body>, siguroha nga adunay usa ka heightset ug overflow-y: scroll;magamit.

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>). Dayon idugang ang data-targetattribute nga adunay ID o klase sa ginikanan nga elemento sa bisan unsang .navbahin sa 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>

Pinaagi sa JavaScript

Human sa pagdugang position: relative;sa imong CSS, tawga ang scrollspy pinaagi sa JavaScript:

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

Pamaagi

.scrollspy('refresh')

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Mga panghitabo

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

Mga togglable nga tab tab.js

Mga pananglitan sa tab

Idugang ang dali, dinamikong pag-andar sa tab sa pagbalhin pinaagi sa mga pane sa lokal nga sulud, bisan pinaagi sa mga dropdown menu. Ang mga nested tab dili suportado.

Paggamit

I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

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

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Ang pagdugang sa navug nav-tabsmga klase sa tab ulmagamit ang Bootstrap tab styling , samtang ang pagdugang sa navug nav-pillsmga klase magamit ang 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>

Pagkawala nga epekto

Aron mawala ang mga tab, idugang .fadeang matag usa .tab-pane. Ang una nga tab pane kinahanglan usab .innga maghimo sa una nga sulud nga makita.

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

Pamaagi

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa DOM. Sa mga pananglitan sa ibabaw, ang mga tab mao ang <a>s nga adunay mga data-toggle="tab"hiyas.

.tab('show')

Gipili ang gihatag nga tab ug gipakita ang kauban nga sulud niini. Ang bisan unsang lain nga tab nga gipili kaniadto mahimong dili mapili ug ang kauban nga sulud niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (ie sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

1. hide.bs.tab(sa kasamtangan nga aktibo nga tab)
2. show.bs.tab(sa tab nga ipakita)
3. hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
4. shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

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

Tooltips tooltip.js

Nadasig sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang mga tooltip usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit sa CSS3 para sa mga animation, ug data-attributes alang sa lokal nga pagtipig sa titulo.

Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.

Mga pananglitan

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Static nga tooltip

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.

Upat ka 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 nagmugna og sulod ug markup sa panginahanglan, ug sa default nagbutang sa mga tooltip human sa ilang trigger nga elemento.

I-trigger ang tooltip pinaagi sa JavaScript:

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

Markup

Ang gikinahanglan nga markup para sa tooltip kay usa lang ka dataattribute ug titlesa HTML nga elemento gusto nimo nga naay tooltip. Ang nahimo nga markup sa usa ka tooltip kay yano ra, bisan kung kini nanginahanglan usa ka posisyon (sa default, gitakda topsa 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 kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Pamaagi

$().tooltip(options)

Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.

.tooltip('show')

Nagpadayag sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang tooltip (ie sa wala pa shown.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip. Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.

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

.tooltip('hide')

Nagtago sa tooltip sa usa ka elemento.Mibalik sa nagtawag sa wala pa ang tooltip gitago (ie sa wala pa hidden.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('toggle')

I-toggle ang tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita o gitago ang tooltip (ie sa wala pa angshown.bs.tooltip o hidden.bs.tooltippanghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.

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

.tooltip('destroy')

Nagtago ug nagguba sa tooltip sa usa ka elemento. Mga tooltip nga naggamit sa delegasyon (nga gihimo gamit angselector opsyon ) dili mahimong tagsa-tagsa nga gub-on sa descendant trigger elements.

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

Mga panghitabo

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

Popovers popover.js

Idugang ang gagmay nga mga overlay sa sulud, sama sa naa sa iPad, sa bisan unsang elemento alang sa pagbutang sa sekundaryong impormasyon.

Ang mga Popover kansang titulo ug sulod kay zero-gitas-on wala gayud ipakita.

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

Mga pananglitan

Static nga popover

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.

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

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

Isalikway sa sunod nga pag-klik

Gamita ang focusgatilyo aron isalikway ang mga popovers sa sunod nga pag-klik nga gihimo sa 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

I-enable ang mga popovers pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Pamaagi

$().popover(options)

Nagsugod sa mga popover para sa koleksyon sa elemento.

.popover('show')

Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popovermahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover. Ang mga popover kansang titulo ug sulod kay zero-gitas-on dili gayud ipakita.

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

.popover('hide')

Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa anghidden.bs.popover mahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.

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

.popover('toggle')

I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popovero hidden.bs.popoverpanghitabo). Giisip kini nga "manwal" nga pag-trigger sa popover.

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

.popover('destroy')

Nagtago ug nagguba sa popover sa usa ka elemento. Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.

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

Mga panghitabo

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

Mga mensahe sa alert alert.js

Pananglitan nga mga alerto

Idugang ang dismiss functionality sa tanang alert messages niini nga plugin.

Kung mogamit usa ka .closebuton, kinahanglan nga kini ang una nga bata sa .alert-dismissibleug wala’y sulud nga teksto nga mahimong moabut sa wala pa kini sa markup.

Paggamit

Idugang lang data-dismiss="alert"sa imong close button aron awtomatik nga makahatag ug alert close functionality. Ang pagsira sa usa ka alerto magtangtang niini gikan sa DOM.

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

Aron magamit ang imong mga alerto sa animation kung magsira, siguroha nga naa nila ang .fadeug .inmga klase nga naaplay na sa kanila.

Pamaagi

$().alert()

Naghimo usa ka alerto sa pagpamati sa mga panghitabo sa pag-klik sa mga elemento sa kaliwat nga adunay data-dismiss="alert"hiyas. (Dili kinahanglan kung gamiton ang auto-initialization sa data-api.)

$().alert('close')

Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang .fadeug.in mga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.

Mga panghitabo

Ang alert plugin sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa alert functionality.

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

Butang nga buton.js

Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.

Stateful

Idugang data-loading-text="Loading..."aron magamit ang kahimtang sa pagkarga sa usa ka buton.

Kini nga bahin wala na magamit sukad sa v3.3.5 ug gitangtang 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>

Usa ka toggle

Idugang data-toggle="button"aron ma-activate ang toggling sa usa ka buton.

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

Checkbox / Radyo

Idugang data-toggle="buttons"sa usa ka .btn-groupadunay sulud nga checkbox o mga input sa radyo aron mahimo ang pag-togg sa ilang 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>

Pamaagi

$().button('toggle')

I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.

$().button('reset')

I-reset ang kahimtang sa buton - ibaylo ang teksto sa orihinal nga teksto. Kini nga pamaagi kay asynchronous ug mobalik sa wala pa mahuman ang pag-reset.

$().button(string)

Ibaylo ang teksto sa bisan unsang datos nga gipiho nga kahimtang sa teksto.

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

Collapse collapse.js

Flexible nga plugin nga naggamit sa pipila ka mga klase alang sa sayon ​​​​nga toggle nga kinaiya.

Pananglitan

I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:

• .collapsenagtago sa sulod
• .collapsinggigamit sa panahon sa transisyon
• .collapse.innagpakita sa sulod

Mahimo nimong gamiton ang usa ka link nga adunay hrefattribute, o usa ka buton nga adunay data-targetattribute. Sa duha ka mga kaso, ang data-toggle="collapse"gikinahanglan.

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

Pananglitan sa akordyon

I-extend ang default nga pagkahugno nga kinaiya aron makahimo og akordyon nga adunay sangkap sa 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 usab nga ibaylo ang .panel-bodys sa .list-groups.

Paggamit

Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:

• .collapsenagtago sa sulod
• .collapse.innagpakita sa sulod
• .collapsingidugang kung magsugod na ang transisyon, ug tangtangon kung mahuman na

Kini nga mga klase makita sa component-animations.less.

Pinaagi sa data attributes

Idugang lang data-toggle="collapse"ug a data-targetsa elemento aron awtomatik nga ma-assign ang kontrol sa usa ka collapsible nga elemento. Ang data-targethiyas modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase in.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka collapsible nga kontrol, idugang ang data attribute data-parent="#selector". Tan-awa ang demo aron makita kini nga aksyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

$('.collapse').collapse()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-parent="".

Pamaagi

.collapse(options)

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

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

.collapse('toggle')

I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.collapseo hidden.bs.collapsepanghitabo).

.collapse('show')

Nagpakita sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita (ie sa wala pa shown.bs.collapsemahitabo ang panghitabo).

.collapse('hide')

Nagtago sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento gitago (ie sa wala pa hidden.bs.collapsemahitabo ang panghitabo).

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

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

Carousel carousel.js

Usa ka bahin sa slideshow alang sa pagbisikleta pinaagi sa mga elemento, sama sa usa ka carousel. Wala gisuportahan ang mga nested carousel.

Mga pananglitan

Kaniadto Sunod

<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 nga mga kapsyon

Idugang ang mga kapsyon sa imong mga slide nga dali gamit ang .carousel-captionelemento sa sulod sa bisan unsang .item. Ibutang ang bisan unsang opsyonal nga HTML sa sulod didto ug kini awtomatik nga i-align ug ma-format.

Unang slide label

Nulla vitae elit libero, usa ka pharetra augue mollis interdum.

Ikaduha nga slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ikatulo nga slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Kaniadto Sunod

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

Paggamit

Daghang mga carousel

Ang mga carousel nanginahanglan sa paggamit sa usa idsa pinakagawas nga sudlanan (ang .carousel) aron ang mga kontrol sa carousel molihok sa husto. Kung magdugang ug daghang mga carousel, o kung mag-ilis sa usa ka carousel id, siguruha nga i-update ang mga may kalabotan nga kontrol.

Pinaagi sa data attributes

Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-slidemidawat sa mga keyword prevo next, nga nag-usab sa posisyon sa slide kalabot sa kasamtangan nga posisyon niini. Sa laing paagi, gamita data-slide-toang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-slide-to="2", nga mobalhin sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0.

Ang data-ride="carousel"attribute kay gigamit sa pagmarka sa carousel isip animating sugod sa page load. Dili kini magamit sa kombinasyon sa (kadaghanan ug wala kinahanglana) klaro nga pagsugod sa JavaScript sa parehas nga carousel.

Pinaagi sa JavaScript

Tawga ang carousel nga mano-mano gamit ang:

$('.carousel').carousel()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-interval="".

Pamaagi

.carousel(options)

Nagsugod sa carousel nga adunay opsyonal nga mga kapilian objectug nagsugod sa pagbisikleta sa mga butang.

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

.carousel('cycle')

Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.

.carousel('pause')

Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.

.carousel(number)

I-cycle ang carousel ngadto sa usa ka partikular nga frame (0 base, susama sa array).

.carousel('prev')

Mga siklo sa miaging aytem.

.carousel('next')

Siklo ngadto sa sunod nga butang.

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel.

Ang duha ka mga panghitabo adunay mga mosunod nga dugang nga mga kabtangan:

• direction: Ang direksyon diin ang carousel nag-slide (bisan "left"o "right").
• relatedTarget: Ang elemento sa DOM nga gi-slide sa lugar isip aktibo nga butang.

Ang tanan nga mga panghitabo sa carousel gipabuto sa carousel mismo (ie sa <div class="carousel">).

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

Affix affix.js

Pananglitan

Ang affix plugin position: fixed;nag-on ug off, nga nagsundog sa epekto nga nakit-an sa position: sticky;. Ang subnavigation sa tuo usa ka live demo sa affix plugin.

Paggamit

Gamita ang affix plugin pinaagi sa data attributes o mano-mano gamit ang imong kaugalingong JavaScript. Sa duha nga mga sitwasyon, kinahanglan ka maghatag CSS alang sa pagpahimutang ug gilapdon sa imong gilakip nga sulud.

Pahinumdom: Ayaw gamita ang affix plugin sa usa ka elemento nga anaa sa medyo nakaposisyon nga elemento, sama sa gibira o giduso nga column, tungod sa Safari rendering bug .

Posisyon pinaagi sa CSS

Ang affix nga plugin nag-toggle tali sa tulo ka mga klase, ang matag usa nagrepresentar sa usa ka partikular nga estado: .affix, .affix-top, ug .affix-bottom. Kinahanglan nimo nga ihatag ang mga istilo, gawas sa position: fixed;on .affix, para sa kini nga mga klase sa imong kaugalingon (independente sa kini nga plugin) aron madumala ang aktwal nga mga posisyon.

Ania kung giunsa ang affix plugin nagtrabaho:

1. Sa pagsugod, ang plugin midugang.affix-top aron ipakita nga ang elemento naa sa pinakataas nga posisyon niini. Niini nga punto walay CSS positioning ang gikinahanglan.
2. Ang pag-scroll sa unahan sa elemento nga gusto nimo itaod kinahanglan mag-trigger sa aktuwal nga affixing. Dinhi diin .affixnagpuli .affix-topug nagtakda position: fixed;(gihatag sa Bootstrap's CSS).
3. Kung ang usa ka ubos nga offset gihubit, ang pag-scroll sa nangagi kinahanglan nga pulihan .affixkini sa .affix-bottom. Tungod kay ang mga offset opsyonal, ang pag-set sa usa kinahanglan nimo nga itakda ang angay nga CSS. Sa kini nga kaso, dugangi position: absolute;kung gikinahanglan. Gigamit sa plugin ang data attribute o opsyon sa JavaScript aron mahibal-an kung asa ibutang ang elemento gikan didto.

Sunda ang mga lakang sa ibabaw aron itakda ang imong CSS alang sa bisan hain sa mga kapilian sa paggamit sa ubos.

Pinaagi sa data attributes

Aron dali nga makadugang ug affix nga kinaiya sa bisan unsang elemento, idugang data-spy="affix"lang sa elemento nga gusto nimong espiya. Gamita ang mga offset aron mahibal-an kung kanus-a i-toggle ang pag-pin sa usa ka elemento.

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

Pinaagi sa JavaScript

Tawga ang affix plugin pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset-top="200".

Pamaagi

.affix(options)

Gi-aktibo ang imong sulud ingon gilakip nga sulud. Modawat ug opsyonal nga mga kapilian object.

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

.affix('checkPosition')

Gikalkulo pag-usab ang kahimtang sa affix base sa mga dimensyon, posisyon, ug posisyon sa scroll sa may kalabutan nga mga elemento. Ang .affix, .affix-top, ug .affix-bottommga klase gidugang o gitangtang gikan sa gilakip nga sulod sumala sa bag-ong estado. Kini nga pamaagi kinahanglan nga tawagan kung ang mga sukat sa gilakip nga sulud o ang target nga elemento mabag-o, aron masiguro ang husto nga posisyon sa gilakip nga sulud.

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

Mga panghitabo

Ang plugin sa affix sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa affix functionality.