Nsɛm a Wɔaka abom

Ankorankoro anaasɛ wɔaboaboa ano

Wobetumi de plugins aka ho mmiako mmiako (de Bootstrap no ankorankoro *.jsfael ahorow bedi dwuma), anaasɛ ne nyinaa prɛko pɛ (de adi dwuma bootstrap.jsanaasɛ wɔayɛ no ketewaa no bootstrap.min.js).

Data su ahorow

Wubetumi de Bootstrap plugins nyinaa adi dwuma denam markup API no so ara kwa a worenkyerɛw JavaScript line biako mpo. Eyi yɛ Bootstrap API a edi kan na ɛsɛ sɛ ɛyɛ nea edi kan a wususuw ho bere a wode plugin redi dwuma no.

Ɛno akyi no, wɔ tebea horow bi mu no, ebia ɛbɛyɛ papa sɛ wudum saa dwumadi yi. Enti, yɛsan nso ma tumi a yɛde besiw data attribute API no ano denam nsɛm a esisi nyinaa a wobeyi afi krataa no so a wɔde din ahyɛ mu no so data-api. Eyi te sɛ eyi:

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

Sɛnea ɛbɛyɛ a, sɛ wopɛ sɛ wode w’ani si plugin pɔtee bi so a, fa plugin no din ka ho kɛkɛ sɛ dinbea ka data-api dinbea no ho te sɛ eyi:

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

Dwumadie API

Yɛsan nso gye di sɛ ɛsɛ sɛ wutumi de Bootstrap plugins nyinaa di dwuma denam JavaScript API no so ara kwa. Ɔmanfoɔ API nyinaa yɛ akwan baako, a wɔde nkɔnsɔnkɔnsɔn gu so, na ɛsan de nneɛma a wɔaboaboa ano a wɔayɛ ho adwuma no ba.

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

Ɛsɛ sɛ akwan nyinaa gye optional options ade, ahama a ɛde n’ani si ɔkwan pɔtee bi so, anaasɛ biribiara (a ɛhyɛ plugin ase a ɛwɔ default suban):

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

Plugin biara nso da ne raw constructor adi wɔ Constructoragyapade bi so: $.fn.popover.Constructor. Sɛ wopɛ sɛ wonya plugin nhwɛso pɔtee bi a, gye no tẽẽ fi element bi mu: $('[rel="popover"]').data('popover').

Nsiesiei ahorow a wɔahyɛ da ayɛ

Wubetumi asesa nhyehyɛe a wɔahyɛ da ayɛ ama plugin bi denam plugin no Constructor.DEFAULTSade a wobɛsesa no so:

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

Ntawntawdi biara nni hɔ

Ɛtɔ da bi a ɛho hia sɛ wode Bootstrap plugins di dwuma ne UI frameworks afoforo. Wɔ saa tebea horow yi mu no, edin-ahunmu nhyiam betumi aba bere ne bere mu. Sɛ eyi ba a, wubetumi afrɛ .noConflictplugin a wopɛ sɛ wosan de bo no ba no.

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

Nsɛm a esisi

Bootstrap ma amanneɛbɔ nsɛm a esisi ma plugins dodow no ara nneyɛe soronko. Mpɛn pii no, eyinom ba wɔ asɛmfua a enni awiei ne adeyɛ a atwam mu - baabi a wɔde asɛmfua a enni awiei (ex. show) no kanyan wɔ adeyɛ bi mfiase, na ne adeyɛ asɛm bi a atwam (ex. shown) no fi ase bere a adeyɛ bi awie no.

Ɛde besi 3.0.0 no, Bootstrap nsɛm a esisi nyinaa wɔ din ntam.

Nsɛm a esisi a enni awiei nyinaa ma wotumi preventDefaultyɛ adwuma. Eyi ma wotumi gyina adeyɛ bi a wɔyɛ no ano ansa na afi ase.

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

Nneɛma a wɔde tew nneɛma ho

Tooltips ne Popovers de yɛn sanitizer a wɔasisi no di dwuma de sanitize options a egye HTML.

Default whiteListvalue no ne nea edidi so yi:

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

Sɛ wopɛ sɛ wode values ​​foforo ka default yi whiteListho a wubetumi ayɛ nea edidi so yi:

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)

Sɛ wopɛ sɛ wutwa yɛn sanitizer no ho esiane sɛ wopɛ sɛ wode nhomakorabea a wɔatu ho ama di dwuma nti, sɛ nhwɛso no DOMPurify , ɛsɛ sɛ woyɛ nea edidi so yi:

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

Nkyerɛase nɔma ahorow

Wobetumi afa VERSIONplugin no constructor no agyapade so akɔ Bootstrap jQuery plugins no mu biara nkyerɛase no so. Sɛ nhwɛso no, wɔ adwinnade ho nkyerɛkyerɛmu plugin no ho no:

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

Fallbacks titiriw biara nni hɔ bere a wɔagyae JavaScript no

Bootstrap no plugins no nkɔ akyi titiriw gracefully bere a JavaScript ayɛ adwuma no. Sɛ wodwene dwumadiefoɔ suahunu ho wɔ saa asɛm yi mu a, fa <noscript>kyerɛkyerɛ tebea no mu (ne sɛdeɛ wobɛsan ama JavaScript ayɛ adwuma) ama wo dwumadiefoɔ, ne/anaasɛ fa w’ankasa wo custom fallbacks ka ho.

Nsakraeɛ nsakraeɛ.js

Ɛfa nsakrae ahorow ho

Sɛ wopɛ nsakrae nsunsuanso a ɛnyɛ den a, fa ka ho transition.jspɛnkoro ka JS fael afoforo no ho. Sɛ wode compiled (anaasɛ minified) no redi dwuma a bootstrap.js, ɛho nhia sɛ wode eyi bɛka ho—ɛwɔ hɔ dedaw.

Nea ɛwɔ mu

Transition.js yɛ ɔboafoɔ titire ma nsɛm a transitionEndɛsisi ne CSS nsakraeɛ emulator nso. Plugin afoforo no de di dwuma de hwɛ CSS nsakrae mmoa na ɛkyere nsakrae a ɛsensɛn hɔ.

Nsakrae ahorow a wɔma ɛyɛ adwuma

Wobetumi asiw nsakrae ahorow ano wɔ wiase nyinaa denam JavaScript fã a edidi so yi so, a ɛsɛ sɛ ɛba bere a transition.js(anaasɛ bootstrap.jsanaa bootstrap.min.js, sɛnea ɛte biara) ahyɛ mu akyi:

$.support.transition = false

Nneɛma a wɔde yɛ adwuma modal.js

Modals no yɛ streamlined, nanso ɛyɛ mmerɛw, nkɔmmɔbɔ nsɛm a ɛkyerɛ a ɛwɔ dwumadie a ɛsua koraa a wɔhwehwɛ ne smart defaults.

Esiane sɛnea HTML5 kyerɛkyerɛ ne nkyerɛase mu nti, autofocusHTML su no nni nkɛntɛnso biara wɔ Bootstrap modals mu. Sɛ wopɛ sɛ wunya nkɛntɛnso koro no ara a, fa JavaScript bi a wɔahyɛ da ayɛ di dwuma:

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

Nhwɛso ahorow

Static nhwɛso

Modal a wɔakyerɛ ase a ɛwɔ atiri, nipadua, ne nneyɛe ahorow a wɔahyehyɛ wɔ ase hɔ.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo a ɛwɔ hɔ

Toggle a modal via JavaScript denam button a ɛwɔ ase ha no a wobɛma so. Ɛbɛtwetwe akɔ fam na ɛbɛyera afi kratafa no atifi.

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

Nneɛma akɛse a wubetumi apaw

Modals wɔ akɛseɛ mmienu a wobɛpaw, a ɛwɔ hɔ denam modifier classes a wɔde bɛto a .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>

Yi animation no fi hɔ

Sɛ wopɛ modals a ɛda adi kɛkɛ sen sɛ ɛbɛyera akɔ mu ahwɛ a, yi .fadeadesua no fi wo modal markup no mu.

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

Grid nhyehyɛe no a wɔde bedi dwuma

Sɛ wopɛ sɛ wunya Bootstrap grid nhyehyɛe no mu mfaso wɔ modal bi mu a, nest .rows kɛkɛ wɔ mu .modal-bodyna afei fa grid nhyehyɛe no adesua ahorow a ɛyɛ daa no di dwuma.

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

Nsakraeɛ modal nsɛm a egyina trigger button so

Wowɔ button ahorow bi a ne nyinaa kanyan modal koro no ara, a emu nsɛm yɛ soronko kakra kɛkɛ? Fa event.relatedTargetne HTML data-*su ahorow (ebia ɛnam jQuery so ) di dwuma de sesa modal no mu nsɛm a egyina bɔtn a wɔakliki so. Hwɛ Modal Events docs no ma nsɛm a ɛfa relatedTarget, .

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Sɛnea wɔde di dwuma

Modal plugin no dannan wo nsɛm a ahintaw no bere a wɔhwehwɛ no, ɛnam data su anaa JavaScript so. Ɛsan nso de ka .modal-opento <body>override default scrolling behavior no ho na ɛma a .modal-backdropto ma click area ma dismissing shown modals bere a clicking outside the modal.

Via data su ahorow so

Fa modal bi yɛ adwuma a wonkyerɛw JavaScript. Fa data-toggle="modal"si controller element bi so, te sɛ button, ne a data-target="#foo"anaasɛ href="#foo"sɛ wode besi modal pɔtee bi so sɛ wobɛdannan.

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

Ɛdenam JavaScript so

Frɛ modal a ɛwɔ id myModala ɛwɔ JavaScript line biako:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-backdrop="".

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

Akwan a wɔfa so yɛ

.modal(options)

Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object.

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

.modal('toggle')

Nsaano toggles a modal. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ modal no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.modalanaa hidden.bs.modaladeyɛ no aba).

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

.modal('show')

Nsaano bue modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada modal no adi ankasa (kyerɛ sɛ ansa na shown.bs.modalasɛm no asi).

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

.modal('hide')

Nsaano de sie modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde modal no asie ankasa (kyerɛ sɛ ansa na hidden.bs.modalasɛm no asi).

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

.modal('handleUpdate')

Ɔsan siesie modal no gyinabea de ko tia scrollbar bi sɛ ebia ɛsɛ sɛ biako pue a, a ɛbɛma modal no ahuruw akɔ benkum so.

Ɛho hia bere a modal no sorokɔ sesa bere a wɔabue no nkutoo.

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

Nsɛm a esisi

Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisii adi ma hooking kɔ modal dwumadi mu.

Wɔtow modal nsɛm a esisi nyinaa wɔ modal no ankasa so (kyerɛ sɛ wɔ <div class="modal">).

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

Nneɛma a ɛwɔ dropdown.js

Nhwɛso ahorow

Fa dropdown menus ka ɛkame ayɛ sɛ biribiara ho denam saa plugin a ɛnyɛ den yi so, a navbar, tabs, ne pills ka ho.

Wɔ navbar bi mu

Wɔ nnuru a wɔde yɛ nnuru mu

Sɛnea wɔde di dwuma

Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .openadesuakuw no a ɛsakra wɔ ɔwofo list ade no so.

Wɔ mobile mfiri ahorow so no, sɛ wubue dropdown bi a, ɛde a .dropdown-backdropsɛ tap beae a wobɛto dropdown menu ahorow mu bere a worebɔ wɔ menu no akyi no ka ho, a ɛyɛ ahwehwɛde a ɛbɛma woanya iOS mmoa a ɛfata. Wei kyerɛ sɛ sɛ wodan fi dropdown menu a wɔabue mu kɔ dropdown menu foforo so a, ɛhwehwɛ sɛ wobɔ mobile so bio.

Hyɛ no nsow: Wɔde data-toggle="dropdown"wɔn ho to attribute no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.

Via data su ahorow so

Fa ka data-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

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

Sɛ wopɛ sɛ wode link buttons di dwuma a, fa data-targetattribute no di dwuma sen sɛ wode 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>

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

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

Nneɛma a wubetumi apaw

Ɛnyɛ ebiara

Akwan a wɔfa so yɛ

$().dropdown('toggle')

Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.

Nsɛm a esisi

Wɔde dropdown nsɛm a esisi nyinaa tow wɔ .dropdown-menu's parent element no so.

Nsɛm a esisi a ɛba fam nyinaa wɔ relatedTargetagyapade bi, a ne bo yɛ toggling anchor element.

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

ScrollSpy nsɛm a wɔakyerɛw agu krataa so.js

Nhwɛso wɔ navbar mu

ScrollSpy plugin no yɛ ma nav botae ahorow a egyina scroll gyinabea so no yɛ foforo ankasa. Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ dropdown sub no so nso.

Sɛnea wɔde di dwuma

Ɛhwehwɛ sɛ wɔde gyinabea a ɛfata si hɔ

Ɛmfa ho ɔkwan a wɔfa so de di dwuma no, scrollspy hwehwɛ sɛ wode di dwuma position: relative;wɔ element a woreyɛ akwansra so no so. Mpɛn pii no eyi ne <body>. Sɛ woreyɛ scrollspying wɔ elements a ɛnyɛ <body>, hwɛ hu sɛ wowɔ heightset na wode adi overflow-y: scroll;dwuma.

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation no ho a, fa ka data-spy="scroll"element a wopɛ sɛ wohwɛ so no ho (mpɛn pii no eyi bɛyɛ <body>). Afei fa data-targetattribute no ka ID anaa class a ɛwɔ ɔwofo element a ɛwɔ Bootstrap .navcomponent biara mu no ho.

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>

Ɛdenam JavaScript so

Sɛ wode position: relative;wo CSS no ka ho wie a, frɛ scrollspy no fa JavaScript so:

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

Akwan a wɔfa so yɛ

.scrollspy('refresh')

Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Nsɛm a esisi

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

Tabs a wotumi sesa no tab.js

Nhwɛso tab ahorow

Fa tab dwumadie a ɛyɛ ntɛm a ɛyɛ nnam ka ho ma nsakraeɛ fa panes a ɛwɔ mpɔtam hɔ nsɛm mu, mpo denam dropdown menus so. Nested tabs no ntumi mmoa.

Sɛnea wɔde di dwuma

Ma tabable tabs no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode tab biara yɛ adwuma mmiako mmiako):

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

Wubetumi ayɛ tab ankorankoro adwuma wɔ akwan horow pii so:

$('#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 a wɔde hyɛ agyirae

Wubetumi ama tab anaa pill navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ ara kwa data-toggle="tab"anaasɛ wobɛka so. data-toggle="pill"Sɛ wode navne nav-tabsadesua ahorow no ka tab ulno ho a ɛbɛma wode Bootstrap tab no ayɛ adwuma , bere a wode navne nav-pillsadesua ahorow no aka ho no de pill styling no bedi dwuma .

<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 nkɛntɛnso

Sɛ wopɛ sɛ tab ahorow no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .inma nsɛm a edi kan no da adi.

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

Akwan a wɔfa so yɛ

$().tab

Ɛma tab element ne nsɛm a ɛwɔ mu no yɛ adwuma. Ɛsɛ sɛ tab nya a data-targetanaasɛ hreftargeting a container node wɔ DOM no mu. Wɔ atifi hɔ nhwɛso ahorow no mu no, tabs no ne <a>s a ɛwɔ data-toggle="tab"su ahorow no.

.tab('show')

Paw tab a wɔde ama no na ɛkyerɛ emu nsɛm a ɛbata ho. Tab foforo biara a na wɔadi kan apaw no bɛyɛ nea wɔanpaw na emu nsɛm a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (kyerɛ sɛ ansa na shown.bs.tabasɛm no asi).

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

Nsɛm a esisi

Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:

1. hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
2. show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
3. hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
4. shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)

Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, ɛnde wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.

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

Nnwinnade Ho AfotuNnwinnade ho nsɛm

Wɔde jQuery.tipsy plugin a eye kyɛn so a Jason Frame kyerɛwee no na ɛkanyan no; Nnwinnade ho nsɛm yɛ nkyerɛase a wɔayɛ no foforo, a ɛnyɛ mfonini so, ɛde CSS3 di dwuma ma animations, ne data-attributes ma local title storage.

Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

Nhwɛso ahorow

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ ahorow:

Static adwinnade ho nsɛm

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ.

Akwankyerɛ anan

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

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

Sɛnea wɔde di dwuma

Adwinnade ho nkyerɛkyerɛmu plugin no yɛ nsɛm ne agyiraehyɛde wɔ ahwehwɛde so, na sɛnea ɛte no, ɛde adwinnade ho nsɛm si wɔn trigger element no akyi.

Fa JavaScript so na ɛkanyan adwinnade no:

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

Markup a wɔde hyɛ agyirae

Agyiraehyɛde a wɔhwehwɛ ma adwinnade ho nkyerɛkyerɛmu no yɛ datasu bi nkutoo na titlewɔ HTML element no so no wopɛ sɛ wunya adwinnade ho nsɛm. Nnwinnade bi agyiraehyɛde a wɔayɛ no yɛ mmerɛw mmom, ɛwom sɛ ɛhwehwɛ gyinabea (default no, wɔde ahyɛ mu topdenam plugin no so).

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Akwan a wɔfa so yɛ

$().tooltip(options)

Fa adwinnade a wɔde di dwuma no bata element ahorow a wɔaboaboa ano ho.

.tooltip('show')

Ɛda element bi adwinnade ho nsɛm adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada adwinnade no adi ankasa (kyerɛ sɛ ansa na shown.bs.tooltipasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no. Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

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

.tooltip('hide')

Fa element bi adwinnade ho nsɛm sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde adwinnade no asie ankasa (kyerɛ sɛ ansa na...hidden.bs.tooltip asɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no.

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

.tooltip('toggle')

Toggles element bi adwinnade ho nsɛm. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ adwinnade no asɛm no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.tooltipanaa hidden.bs.tooltipadeyɛ no aba). Wobu eyi sɛ "nsaano" a ɛkanyan adwinnade no.

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

.tooltip('destroy')

Hide na ɛsɛe element bi adwinnade tip. Nnwinnade a wɔde delegation di dwuma (a wɔde option ) na ɛyɛe noselector ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

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

Nsɛm a esisi

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

Popovers a ɛwɔ hɔ no popover.js

Fa nsɛm nketenkete a wɔde akata so, te sɛ nea ɛwɔ iPad no so, ka element biara a wode bɛfa nsɛm a ɛto so abien no ho.

Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.

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

Nhwɛso ahorow

Popover a ɛyɛ gyinabea

Nneɛma anan wɔ hɔ a wubetumi apaw: atifi, nifa, ase, ne benkum a wɔahyehyɛ no pɛpɛɛpɛ.

Live demo a ɛwɔ hɔ

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

Akwankyerɛ anan

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

Dismiss wɔ klik a edi hɔ no so

Fa focustrigger no di dwuma fa yi popovers no wɔ klik a edi hɔ a nea ɔde di dwuma no yɛ no so.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Sɛnea wɔde di dwuma

Ma popovers nyɛ adwuma denam JavaScript so:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-animation="".

Akwan a wɔfa so yɛ

$().popover(options)

Fi ase popovers ma element ahorow a wɔaboaboa ano.

.popover('show')

Ɛda element bi popover adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada popover no adi ankasa (kyerɛ sɛ ansa na shown.bs.popoverasɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan popover no. Popovers a wɔn asɛmti ne emu nsɛm nyinaa yɛ zero-length no, wɔmfa nkyerɛ da.

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

.popover('hide')

Fa element bi popover no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde popover no asie ankasa (kyerɛ sɛ ansa na...hidden.bs.popover asɛm no asi). Wobu eyi sɛ "nsaano" a ɛkanyan popover no.

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

.popover('toggle')

Toggles element bi popover. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ popover no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.popoveranaa hidden.bs.popoveradeyɛ no aba). Wobu eyi sɛ "nsaano" a ɛkanyan popover no.

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

.popover('destroy')

Hide na ɛsɛe element bi popover. Popovers a ɛde delegation di dwuma (a wɔbɔ denam option noselector so ) no ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

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

Nsɛm a esisi

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

Kɔkɔbɔ nkrasɛm alert.js

Nhwɛso a ɛfa kɔkɔbɔ ahorow ho

Fa dismiss dwumadie ka kɔkɔbɔ nkra nyinaa ho denam saa plugin yi so.

Sɛ wode .closebɔtn redi dwuma a, ɛsɛ sɛ ɛyɛ no ba a odi kan .alert-dismissiblena nsɛm biara a ɛwɔ mu no ntumi mma n’anim wɔ agyiraehyɛde no mu.

Sɛnea wɔde di dwuma

Fa ka data-dismiss="alert"wo close button no ho kɛkɛ na ama woanya alert close functionality no ara kwa. Sɛ woto kɔkɔbɔ bi mu a, eyi fi DOM no mu.

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

Sɛ wopɛ sɛ wo kɔkɔbɔ ahorow no de animation bedi dwuma bere a woretoto mu a, hwɛ hu sɛ wɔwɔ .fadene .inadesua ahorow a wɔde adi dwuma dedaw wɔ wɔn ho.

Akwan a wɔfa so yɛ

$().alert()

Ɛma kɔkɔbɔ tie click nsɛm a esisi wɔ aseni elements a ɛwɔ data-dismiss="alert"attribute no so. (Ɛho nhia bere a wode data-api no auto-initialization redi dwuma no.)

$().alert('close')

Ɛto kɔkɔbɔ bi mu denam yi a wubeyi afi DOM no mu no so. Sɛ na .fadene.in adesua ahorow no wɔ element no so a, kɔkɔbɔ no bɛyera ansa na wɔayi afi hɔ.

Nsɛm a esisi

Bootstrap no kɔkɔbɔ plugin no da nsɛm kakraa bi a esisi ma hooking kɔ kɔkɔbɔ dwumadi mu adi.

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

Nsɛmma nhoma no button.js

Fa bɔton yɛ pii. Control button states anaa yɛ buttons akuo ma components pii te sɛ toolbars.

Ɔman no mu nsɛm

Fa ka data-loading-text="Loading..."ho na wode loading tebea adi dwuma wɔ button bi so.

Saa ade yi yɛ nea wɔagyae fi v3.3.5 na wɔayi afi hɔ wɔ v4 mu.

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

Toggle biako pɛ

Fa ka data-toggle="button"ho na ama toggling a ɛwɔ button biako so no ayɛ adwuma.

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

Hwɛ adaka / Radio so

Fa ka data-toggle="buttons"checkbox .btn-groupanaa radio inputs a ɛwɔ mu no ho na ama woatumi ayɛ toggling wɔ wɔn styles mu.

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

Akwan a wɔfa so yɛ

$().button('toggle')

Toggles push tebea no. Ɛma button no te sɛ nea wɔayɛ no adwuma.

$().button('reset')

Sesa button tebea - sesa nsɛm kɔ mfitiase nkyerɛwee so. Saa kwan yi yɛ asynchronous na ɛsan ba ansa na resetting no awie ankasa.

$().button(string)

Sesa nsɛm kɔ data biara a wɔakyerɛkyerɛ nkyerɛwee tebea mu.

<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 a ɛwɔ hɔ no.js

Flexible plugin a ɛde nsa kakraa bi adesua ahorow di dwuma ma toggle suban a ɛyɛ mmerɛw.

Nhwɛsoɔ

Klik buttons a ɛwɔ aseɛ ha no so na kyerɛ na fa element foforɔ bi sie denam class nsakraeɛ so:

• .collapsede nsɛm a ɛwɔ mu no sie
• .collapsingwɔde di dwuma wɔ nsakrae ahorow mu
• .collapse.inkyerɛ emu nsɛm

Wubetumi de link a ɛwɔ hrefattribute no adi dwuma, anaasɛ button a ɛwɔ data-targetattribute no. Wɔ nsɛm abien no nyinaa mu no, data-toggle="collapse"wɔhwehwɛ sɛ wɔyɛ saa.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordion ho nhwɛso

Trɛw default collapse suban no mu na yɛ accordion ne panel component no.

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

Ɛsan nso yɛ yie sɛ wobɛsesa .panel-bodys ne .list-groups.

Sɛnea wɔde di dwuma

Collapse plugin no de adesua kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:

• .collapsede emu nsɛm no sie
• .collapse.inkyerɛ emu nsɛm no
• .collapsingwɔde ka ho bere a nsakrae no afi ase, na woyi fi hɔ bere a awie no

Wobetumi ahu saa adesua ahorow yi wɔ component-animations.less.

Via data su ahorow so

Kɛkɛ fa data-toggle="collapse"ne a data-targetka element no ho ma automatically assign control of a collapsible element. Attribute no data-targetgye CSS selector a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapseelement a wotumi bu no ho. Sɛ wopɛ sɛ default open a, fa class foforo no ka hoin .

Sɛ wode kuw nhyehyɛe a ɛte sɛ accordion bɛka control a wotumi bubu mu ho a, fa data su no ka ho data-parent="#selector". Hwɛ demo no na woahu eyi wɔ adeyɛ mu.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

$('.collapse').collapse()

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-parent="".

Akwan a wɔfa so yɛ

.collapse(options)

Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object.

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

.collapse('toggle')

Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.collapseanaa hidden.bs.collapseadeyɛ no aba).

.collapse('show')

Kyerɛ element bi a ɛtumi hwe ase. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu mu no ankasa (kyerɛ sɛ ansa na shown.bs.collapseasɛm no asi).

.collapse('hide')

Ɛde element bi a wotumi bubu mu sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde element a wotumi bubu mu no asie ankasa (kyerɛ sɛ ansa na hidden.bs.collapseasɛm no asi).

Nsɛm a esisi

Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.

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

Carousel a wɔde yɛ kar.js

Slideshow afã bi a wɔde sakre fa element ahorow mu, te sɛ carousel. Wɔntumi mmoa carousels a wɔde ahyɛ mu no.

Nhwɛso ahorow

Dada Deɛ ɛdi hɔ

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

Nsɛm a wɔakyerɛw wɔ ase a wubetumi apaw

Fa nsɛm a wɔakyerɛw no ka wo slide ahorow no ho mmerɛw denam .carousel-captionelement a ɛwɔ biara mu .itemno so . Fa HTML biara a wopɛ no to mu wɔ hɔ na ɛbɛyɛ nea ɛne ne ho hyia na wɔayɛ no sɛnea ɛte no ara.

Nea edi kan wɔ slide label no so

Nulla vitae elit libero, aduru bi a wɔfrɛ no pharetra a wɔde hyɛ nipadua mu.

Slide label a ɛto so abien

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ.

Slide label a ɛto so abiɛsa

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Dada Deɛ ɛdi hɔ

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

Sɛnea wɔde di dwuma

Carousel ahorow pii

Carousel ahorow hwehwɛ sɛ wɔde biribi di dwuma wɔ ade ida ɛwɔ akyi pɛɛ no ​​so (the .carousel) na ama carousel controls ahorow no atumi ayɛ adwuma yiye. Sɛ wode carousel pii ka ho, anaasɛ woresakra carousel’s id, hwɛ hu sɛ wobɛma controls a ɛfa ho no ayɛ foforo.

Via data su ahorow so

Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-slidegye nsɛmfua titiriw prevanaa next, a ɛsakra slide gyinabea no toto ne mprempren gyinabea no ho. Sɛnea ɛbɛyɛ foforo no, fa di dwuma data-slide-tode fa raw slide index kɔ carousel no so data-slide-to="2", a ɛdannan slide no gyinabea kɔ index pɔtee bi a efi ase wɔ 0.

Wɔde data-ride="carousel"su no di dwuma de hyɛ carousel agyirae sɛ ɛyɛ animating a efi ase wɔ kratafa a wɔde hyɛ mu. Wontumi mfa nni dwuma nka (redundant ne nea ɛho nhia) pefee JavaScript mfiase a ɛwɔ carousel koro no ara ho.

Ɛdenam JavaScript so

Frɛ carousel denam nsa so de:

$('.carousel').carousel()

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-interval="".

Akwan a wɔfa so yɛ

.carousel(options)

Initializes carousel ne optional options objectna ofi ase sakre fa nneɛma mu.

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

.carousel('cycle')

Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.

.carousel('pause')

Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.

.carousel(number)

Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, a ɛte sɛ array).

.carousel('prev')

Kyinkyin kɔ ade a atwam no so.

.carousel('next')

Kyinkyin kɔ ade a edi hɔ no so.

Nsɛm a esisi

Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi.

Nsɛm abien no nyinaa wɔ nneɛma foforo a edidi so yi:

• direction: Ɔkwan a carousel no retwe ( "left"anaasɛ "right").
• relatedTarget: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.

Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ, wɔ <div class="carousel">).

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

Fa affix.js hyɛ mu

Nhwɛsoɔ

Affix plugin no dannan position: fixed;ne ho na ɛdum, na ɛsuasua nkɛntɛnso a wohu wɔ position: sticky;. Subnavigation a ɛwɔ nifa so no yɛ live demo a ɛkyerɛ affix plugin no.

Sɛnea wɔde di dwuma

Fa affix plugin no di dwuma denam data attributes so anaasɛ fa nsa di dwuma denam w’ankasa JavaScript so. Wɔ tebea abien no nyinaa mu no, ɛsɛ sɛ wode CSS ma wo nsɛm a wode ahyɛ mu no gyinabea ne ne tɛtrɛtɛ.

Hyɛ no nsow: Mfa affix plugin no nni dwuma wɔ element bi a ɛwɔ element a ɛwɔ gyinabea kakra mu, te sɛ kɔla a wɔatwe anaa wɔapia, esiane Safari nkyerɛase bɔne nti .

Gyinabea a wɔde si hɔ denam CSS so

Affix plugin no dannan adesua ahorow abiɛsa ntam, a emu biara gyina hɔ ma tebea pɔtee bi: .affix, .affix-top, ne .affix-bottom. Ɛsɛ sɛ wode styles no ma, gye position: fixed;on.affix , ma saa adesua ahorow yi ankasa (a ɛde ne ho fi saa plugin yi ho) di gyinabea ahorow ankasa no ho dwuma.

Sɛnea affix plugin no yɛ adwuma ni:

1. Sɛ wopɛ sɛ wufi ase a, plugin no de ka ho.affix-top de kyerɛ sɛ element no wɔ ne gyinabea a ɛwɔ soro paa. Saa bere yi de CSS gyinabea biara ho nhia.
2. Ɛsɛ sɛ sɛ wokɔ element a wopɛ sɛ wode bata ho no ho a, ɛkanyan nea wode bata ho ankasa no. Eyi ne baabi a wɔde .affixsi ananmu .affix-topna wɔde si hɔposition: fixed; (a Bootstrap CSS de ama).
3. Sɛ wɔakyerɛ ase offset ase a, ɛsɛ sɛ scrolling atwam no .affixde .affix-bottom. Esiane sɛ offsets yɛ nea wopɛ nti, sɛ wode biako si hɔ a, ɛhwehwɛ sɛ wode CSS a ɛfata si hɔ. Sɛ ɛba saa a, fa ka ho position: absolute;bere a ɛho hia no. Plugin no de data attribute anaa JavaScript option no di dwuma de kyerɛ baabi a wode element no besi afi hɔ.

Di atifi hɔ anammɔn no akyi na fa wo CSS no si hɔ ma dwumadie akwan a ɛwɔ aseɛ ha no mu biara.

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode affix suban bɛka element biara ho no, fa ka data-spy="affix"element a wopɛ sɛ wohwɛ so no ho kɛkɛ. Fa offsets di dwuma de kyerɛ bere a ɛsɛ sɛ wodannan element bi pinning.

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

Ɛdenam JavaScript so

Frɛ affix plugin no fa JavaScript so:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset-top="200".

Akwan a wɔfa so yɛ

.affix(options)

Ɛma wo nsɛm no yɛ adwuma sɛ nsɛm a wɔde ahyɛ mu. Gye akwan a wubetumi apaw bi tom object.

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

.affix('checkPosition')

Ɔsan bu affix no tebea ho akontaa gyina nneɛma a ɛfa ho no nsusuwii, gyinabea, ne nhoma mmobɔwee gyinabea so. Wɔde .affix, .affix-top, ne .affix-bottomadesua ahorow no ka nsɛm a wɔde ahyɛ mu no ho anaasɛ woyi fi mu sɛnea tebea foforo no te. Ɛsɛ sɛ wɔfrɛ saa kwan yi bere biara a wɔbɛsesa nsɛm a wɔde ahyɛ mu no nsusuwii anaa ade a wɔde asi wɔn ani so no, na ama wɔahwɛ ahu sɛ wɔde nsɛm a wɔde ahyɛ mu no besi hɔ yiye.

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

Nsɛm a esisi

Bootstrap no affix plugin no da nsɛm kakraa bi a esisi ma hooking kɔ affix dwumadi mu adi.