ພາບລວມ

ສ່ວນບຸກຄົນຫຼືລວບລວມ

Plugins ສາມາດຖືກລວມເຂົ້າເປັນສ່ວນບຸກຄົນ (ໂດຍນໍາໃຊ້ *.jsໄຟລ໌ສ່ວນບຸກຄົນຂອງ Bootstrap), ຫຼືທັງຫມົດໃນເວລາດຽວກັນ (ການນໍາໃຊ້ bootstrap.jsຫຼື minified bootstrap.min.js).

ຄຸນລັກສະນະຂອງຂໍ້ມູນ

ທ່ານສາມາດນໍາໃຊ້ plugins Bootstrap ທັງຫມົດໂດຍຜ່ານ markup API ໂດຍບໍ່ຕ້ອງຂຽນ JavaScript ເສັ້ນດຽວ. ນີ້ແມ່ນ API ຊັ້ນທໍາອິດຂອງ Bootstrap ແລະຄວນຈະເປັນການພິຈາລະນາທໍາອິດຂອງທ່ານໃນເວລາທີ່ໃຊ້ plugin.

ທີ່ເວົ້າວ່າ, ໃນບາງສະຖານະການມັນອາດຈະຕ້ອງການທີ່ຈະປິດການທໍາງານນີ້. ດັ່ງນັ້ນ, ພວກເຮົາຍັງສະຫນອງຄວາມສາມາດໃນການປິດການທໍາງານຂໍ້ມູນ API ຄຸນລັກສະນະໂດຍການ unbinding ເຫດການທັງຫມົດທີ່ຢູ່ໃນເອກະສານ namespaced ກັບ data-api. ນີ້ເບິ່ງຄືວ່າ:

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

ອີກທາງເລືອກ, ເພື່ອແນໃສ່ plugin ສະເພາະ, ພຽງແຕ່ໃສ່ຊື່ຂອງ plugin ເປັນ namespace ພ້ອມກັບ namespace data-api ແບບນີ້:

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

API ໂປຣແກຣມ

ພວກເຮົາຍັງເຊື່ອວ່າທ່ານຄວນຈະສາມາດນໍາໃຊ້ plugins Bootstrap ທັງຫມົດໂດຍຜ່ານ JavaScript API. APIs ສາທາລະນະທັງຫມົດແມ່ນວິທີດຽວ, ເປັນລະບົບຕ່ອງໂສ້, ແລະສົ່ງຄືນການເກັບກໍາທີ່ປະຕິບັດ.

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

ວິທີການທັງໝົດຄວນຍອມຮັບວັດຖຸທາງເລືອກທີ່ເປັນທາງເລືອກ, ສະຕຣິງທີ່ແນເປົ້າໝາຍໃສ່ວິທີການໃດນຶ່ງ, ຫຼືບໍ່ມີຫຍັງເລີຍ (ທີ່ລິເລີ່ມ plugin ທີ່ມີພຶດຕິກຳເລີ່ມຕົ້ນ):

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

ແຕ່ລະ plugin ຍັງເປີດເຜີຍຕົວສ້າງວັດຖຸດິບຂອງມັນຢູ່ໃນ Constructorຊັບສິນ: $.fn.popover.Constructor. ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ​ໄດ້​ຮັບ​ຕົວ​ຢ່າງ plugin ສະ​ເພາະ​ໃດ​ຫນຶ່ງ​, ດຶງ​ມັນ​ໂດຍ​ກົງ​ຈາກ​ອົງ​ປະ​ກອບ​: $('[rel="popover"]').data('popover').

ການຕັ້ງຄ່າເລີ່ມຕົ້ນ

ທ່ານ​ສາ​ມາດ​ປ່ຽນ​ການ​ຕັ້ງ​ຄ່າ​ເລີ່ມ​ຕົ້ນ​ສໍາ​ລັບ plugin ໄດ້​ໂດຍ​ການ​ປັບ​ປຸງ Constructor.DEFAULTS​ຈຸດ​ປະ​ສົງ​ຂອງ plugin ໄດ້​:

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

ບໍ່ມີຂໍ້ຂັດແຍ່ງ

ບາງຄັ້ງມັນຈໍາເປັນຕ້ອງໃຊ້ plugins Bootstrap ກັບກອບ UI ອື່ນໆ. ໃນສະຖານະການເຫຼົ່ານີ້, ການຂັດກັນຂອງ namespace ສາມາດເກີດຂຶ້ນເປັນບາງຄັ້ງຄາວ. ຖ້າສິ່ງນີ້ເກີດຂຶ້ນ, ທ່ານອາດຈະໂທຫາ .noConflictplugin ທີ່ທ່ານຕ້ອງການທີ່ຈະກັບຄືນມູນຄ່າຂອງ.

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

ເຫດການ

Bootstrap ໃຫ້ເຫດການທີ່ກໍາຫນົດເອງສໍາລັບການປະຕິບັດທີ່ເປັນເອກະລັກຂອງ plugins ສ່ວນໃຫຍ່. ໂດຍທົ່ວໄປແລ້ວ, ສິ່ງເຫຼົ່ານີ້ມາໃນຮູບແບບການມີສ່ວນຮ່ວມທີ່ບໍ່ມີຂອບເຂດ ແລະ ທີ່ຜ່ານມາ - ບ່ອນທີ່ infinitive (ex. show) ຖືກກະຕຸ້ນໃນຕອນເລີ່ມຕົ້ນຂອງເຫດການ, ແລະແບບຟອມການມີສ່ວນຮ່ວມທີ່ຜ່ານມາຂອງມັນ (ຕົວຢ່າງ. shown) ຖືກກະຕຸ້ນໃນເວລາສໍາເລັດການດໍາເນີນການ.

ເປັນຂອງ 3.0.0, ເຫດການ Bootstrap ທັງຫມົດແມ່ນ namespaced.

ເຫດການທີ່ບໍ່ມີຂອບເຂດທັງໝົດໃຫ້ການ preventDefaultເຮັດວຽກ. ນີ້ສະຫນອງຄວາມສາມາດໃນການຢຸດການປະຕິບັດການດໍາເນີນການກ່ອນທີ່ຈະເລີ່ມຕົ້ນ.

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

ເຈວລ້າງມື

ຄໍາແນະນໍາເຄື່ອງມືແລະ Popovers ໃຊ້ຢາຂ້າເຊື້ອໃນຕົວຂອງພວກເຮົາເພື່ອເຮັດຄວາມສະອາດທາງເລືອກທີ່ຍອມຮັບ HTML.

ຄ່າເລີ່ມຕົ້ນ whiteListແມ່ນຕໍ່ໄປນີ້:

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

ຖ້າທ່ານຕ້ອງການເພີ່ມຄ່າໃຫມ່ໃຫ້ກັບຄ່າເລີ່ມຕົ້ນນີ້ whiteList, ທ່ານສາມາດເຮັດດັ່ງຕໍ່ໄປນີ້:

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)

ຖ້າທ່ານຕ້ອງການຂ້າມຢາຂ້າເຊື້ອຂອງພວກເຮົາເພາະວ່າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະ, ຕົວຢ່າງ DOMPurify , ທ່ານຄວນເຮັດສິ່ງຕໍ່ໄປນີ້:

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

ຕົວເລກສະບັບ

ສະບັບຂອງແຕ່ລະ plugins jQuery ຂອງ Bootstrap ສາມາດເຂົ້າເຖິງໄດ້ໂດຍຜ່ານ VERSIONຊັບສິນຂອງຕົວສ້າງຂອງ plugin. ສໍາລັບຕົວຢ່າງ, ສໍາລັບ plugin ຄໍາແນະນໍາເຄື່ອງມື:

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

ບໍ່ມີຂໍ້ບົກຜ່ອງພິເສດເມື່ອ JavaScript ຖືກປິດໃຊ້ງານ

ປັ໊ກອິນຂອງ Bootstrap ຈະບໍ່ກັບຄືນມາໂດຍສະເພາະເມື່ອ JavaScript ຖືກປິດໃຊ້ງານ. ຖ້າທ່ານສົນໃຈປະສົບການຂອງຜູ້ໃຊ້ໃນກໍລະນີນີ້, ໃຫ້ໃຊ້ <noscript>ເພື່ອອະທິບາຍສະຖານະການ (ແລະວິທີການເປີດໃຊ້ JavaScript ຄືນໃໝ່) ໃຫ້ກັບຜູ້ໃຊ້ຂອງເຈົ້າ, ແລະ/ຫຼືເພີ່ມການຕອບໂຕ້ແບບກຳນົດເອງຂອງເຈົ້າເອງ.

ການ ຫັນ ປ່ຽນ transition.js

ກ່ຽວກັບການຫັນປ່ຽນ

ສໍາລັບຜົນກະທົບການຫັນປ່ຽນທີ່ງ່າຍດາຍ, ປະກອບມີ transition.jsຫນຶ່ງຄັ້ງຄຽງຄູ່ກັບໄຟລ໌ JS ອື່ນໆ. ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ກໍາ​ລັງ​ນໍາ​ໃຊ້​ການ​ສັງ​ລວມ (ຫຼື​ຫຍໍ້​) bootstrap.js​, ບໍ່​ຈໍາ​ເປັນ​ຕ້ອງ​ປະ​ກອບ​ການ​ນີ້​, ມັນ​ມີ​ຢູ່​ແລ້ວ​.

ພາຍໃນແມ່ນຫຍັງ

Transition.js ເປັນຜູ້ຊ່ວຍພື້ນຖານສໍາລັບ transitionEndເຫດການເຊັ່ນດຽວກັນກັບ CSS transition emulator. ມັນຖືກນໍາໃຊ້ໂດຍ plugins ອື່ນໆເພື່ອກວດເບິ່ງການສະຫນັບສະຫນູນການປ່ຽນ CSS ແລະເພື່ອຈັບການປ່ຽນ Hanging.

ການປິດການຫັນປ່ຽນ

Transitions ສາມາດຖືກປິດໃຊ້ງານທົ່ວໂລກໂດຍໃຊ້ JavaScript snippet ຕໍ່ໄປນີ້, ເຊິ່ງຈະຕ້ອງມາຫຼັງຈາກ transition.js(ຫຼື bootstrap.js, bootstrap.min.jsຕາມກໍລະນີ) ໄດ້ໂຫລດ:

$.support.transition = false

Modals modal.js

Modals ແມ່ນປັບປຸງ, ແຕ່ມີຄວາມຍືດຫຍຸ່ນ, dialog prompts ກັບຟັງຊັນທີ່ຕ້ອງການຕໍາ່ສຸດທີ່ແລະຄ່າເລີ່ມຕົ້ນ smart.

ເນື່ອງຈາກ HTML5 ກໍານົດຄວາມຫມາຍຂອງມັນ, autofocusຄຸນລັກສະນະ HTML ບໍ່ມີຜົນໃນ Bootstrap modals. ເພື່ອບັນລຸຜົນດຽວກັນ, ໃຫ້ໃຊ້ JavaScript ແບບກຳນົດເອງບາງອັນ:

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

ຕົວຢ່າງ

ຕົວຢ່າງຄົງທີ່

ໂມດູນທີ່ສະແດງດ້ວຍສ່ວນຫົວ, ຮ່າງກາຍ, ແລະຊຸດຄຳສັ່ງຢູ່ໃນສ່ວນທ້າຍ.

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

ການສາທິດສົດ

ສະຫຼັບ modal ຜ່ານ JavaScript ໂດຍການຄລິກໃສ່ປຸ່ມຂ້າງລຸ່ມນີ້. ມັນຈະເລື່ອນລົງແລະຈາງລົງຈາກດ້ານເທິງຂອງຫນ້າ.

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

ຂະຫນາດທາງເລືອກ

Modals ມີ​ສອງ​ຂະ​ຫນາດ​ທາງ​ເລືອກ​, ທີ່​ມີ​ຢູ່​ຜ່ານ​ຫ້ອງ​ການ​ດັດ​ແກ້​ທີ່​ຈະ​ໄດ້​ຮັບ​ການ​ວາງ​ໄວ້​ໃນ .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>

ເອົາພາບເຄື່ອນໄຫວ

ສໍາລັບ modals ທີ່ພຽງແຕ່ປາກົດແທນທີ່ຈະຫາຍໄປໃນການເບິ່ງ, ເອົາ .fadeຫ້ອງຮຽນອອກຈາກ modal markup ຂອງທ່ານ.

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

ການນໍາໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າ

ເພື່ອໃຊ້ປະໂຫຍດຈາກລະບົບຕາຂ່າຍ Bootstrap ພາຍໃນ modal, ພຽງແຕ່ຮັງ .rows ພາຍໃນ .modal-bodyແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ຫ້ອງຮຽນລະບົບຕາຂ່າຍໄຟຟ້າປົກກະຕິ.

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

ເນື້ອຫາ modal ແຕກຕ່າງກັນໂດຍອີງໃສ່ປຸ່ມ trigger

ມີຫຼາຍປຸ່ມທີ່ກະຕຸ້ນໃຫ້ modal ດຽວກັນ, ພຽງແຕ່ມີເນື້ອໃນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ? ການນໍາໃຊ້ event.relatedTargetແລະ ຄຸນລັກສະນະ HTMLdata-* (ອາດຈະ ຜ່ານ jQuery ) ເພື່ອປ່ຽນແປງເນື້ອໃນຂອງ modal ຂຶ້ນກັບວ່າປຸ່ມໃດຖືກຄລິກ. ເບິ່ງເອກະສານເຫດການ Modal ສໍາລັບລາຍລະອຽດກ່ຽວກັບ 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)
})

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນ modal ສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ຂອງທ່ານຕາມຄວາມຕ້ອງການ, ຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ມັນຍັງເພີ່ມ .modal-openໃສ່ <body>ເພື່ອ override ພຶດຕິກໍາການເລື່ອນໃນຕອນຕົ້ນແລະສ້າງ a .modal-backdropເພື່ອສະຫນອງພື້ນທີ່ຄລິກສໍາລັບການປິດ modals ສະແດງໃຫ້ເຫັນໃນເວລາທີ່ຄລິກໃສ່ນອກ modal ໄດ້.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເປີດໃຊ້ modal ໂດຍບໍ່ຕ້ອງຂຽນ JavaScript. ຕັ້ງ data-toggle="modal"ຢູ່ໃນອົງປະກອບຂອງຕົວຄວບຄຸມ, ເຊັ່ນປຸ່ມ, ພ້ອມກັບ data-target="#foo"ຫຼື href="#foo"ເພື່ອເປົ້າຫມາຍ modal ສະເພາະເພື່ອສະຫຼັບ.

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

ຜ່ານ JavaScript

ໂທຫາ modal ທີ່ມີ id myModalກັບແຖວດຽວຂອງ JavaScript:

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-backdrop="".

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

ວິທີການ

.modal(options)

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນ modal. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

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

.modal('toggle')

ສະຫຼັບ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ie ກ່ອນທີ່ຈະ shown.bs.modalຫຼື hidden.bs.modalເຫດການເກີດຂຶ້ນ).

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

.modal('show')

ເປີດ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.modalເຫດການຈະເກີດຂຶ້ນ).

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

.modal('hide')

ເຊື່ອງ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.modalເຫດການຈະເກີດຂຶ້ນ).

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

.modal('handleUpdate')

ປັບຕຳແໜ່ງຂອງ modal ເພື່ອຕ້ານແຖບເລື່ອນໃນກໍລະນີທີ່ອັນໜຶ່ງຄວນຈະປາກົດ, ເຊິ່ງຈະເຮັດໃຫ້ໂມດູນໂດດໄປທາງຊ້າຍ.

ຕ້ອງການພຽງແຕ່ໃນເວລາທີ່ຄວາມສູງຂອງ modal ມີການປ່ຽນແປງໃນຂະນະທີ່ມັນເປີດ.

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

ເຫດການ

ຫ້ອງຮຽນ modal ຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ modal.

ເຫດການ modal ທັງຫມົດແມ່ນ fired ຢູ່ modal ຕົວຂອງມັນເອງ (ie at the <div class="modal">).

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

ເລື່ອນ ລົງ dropdown.js

ຕົວຢ່າງ

ເພີ່ມເມນູແບບເລື່ອນລົງໃສ່ເກືອບທຸກຢ່າງດ້ວຍປລັກອິນງ່າຍໆນີ້, ລວມທັງແຖບ navbar, ແຖບ, ແລະຢາ.

ພາຍໃນແຖບ navbar

ພາຍໃນຢາຄຸມກໍາເນີດ

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ ຫຼື JavaScript, ປລັກອິນແບບເລື່ອນລົງຈະສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ (ເມນູແບບເລື່ອນລົງ) ໂດຍການສະຫຼັບ .openຊັ້ນຮຽນຢູ່ໃນລາຍການລາຍຊື່ຫຼັກ.

ໃນອຸປະກອນມືຖື, ການເປີດເມນູເລື່ອນລົງຈະເພີ່ມ .dropdown-backdropພື້ນທີ່ແຕະເພື່ອປິດເມນູແບບເລື່ອນລົງເມື່ອແຕະຢູ່ນອກເມນູ, ຄວາມຕ້ອງການສໍາລັບການຮອງຮັບ iOS ທີ່ເຫມາະສົມ. ນີ້ຫມາຍຄວາມວ່າການປ່ຽນຈາກເມນູເລື່ອນລົງທີ່ເປີດໄປຫາເມນູເລື່ອນລົງທີ່ແຕກຕ່າງກັນຮຽກຮ້ອງໃຫ້ມີການແຕະພິເສດໃນມືຖື.

ຫມາຍເຫດ: data-toggle="dropdown"ຄຸນລັກສະນະແມ່ນອີງໃສ່ການປິດເມນູແບບເລື່ອນລົງໃນລະດັບແອັບພລິເຄຊັນ, ສະນັ້ນມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ມັນຕະຫຼອດເວລາ.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພີ່ມ data-toggle="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>

ເພື່ອຮັກສາ URLs ໄວ້ກັບປຸ່ມເຊື່ອມຕໍ່, ໃຊ້ data-targetຄຸນສົມບັດແທນ 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>

ຜ່ານ JavaScript

ໂທຫາ dropdowns ຜ່ານ JavaScript:

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

ທາງເລືອກ

ບໍ່ມີ

ວິທີການ

$().dropdown('toggle')

ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ.

ເຫດການ

ເຫດການແບບເລື່ອນລົງທັງໝົດແມ່ນຖືກຍິງຢູ່ທີ່ .dropdown-menuອົງປະກອບຫຼັກຂອງ.

ເຫດການແບບເລື່ອນລົງທັງໝົດມີ relatedTargetຄຸນສົມບັດ, ເຊິ່ງຄ່າຂອງມັນແມ່ນອົງປະກອບສະມໍ.

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

ScrollSpy scrollspy.js

ຕົວຢ່າງໃນ navbar

plugin ScrollSpy ແມ່ນສໍາລັບການປັບປຸງອັດຕະໂນມັດເປົ້າຫມາຍ nav ໂດຍອີງໃສ່ຕໍາແຫນ່ງເລື່ອນ. ເລື່ອນພື້ນທີ່ທາງລຸ່ມແຖບ navbar ແລະເບິ່ງການປ່ຽນແປງຊັ້ນຮຽນທີ່ມີການເຄື່ອນໄຫວ. ລາຍການຍ່ອຍແບບເລື່ອນລົງຈະຖືກເນັ້ນໃສ່ເຊັ່ນກັນ.

ການ​ນໍາ​ໃຊ້

ຮຽກຮ້ອງໃຫ້ມີການຈັດຕໍາແຫນ່ງທີ່ກ່ຽວຂ້ອງ

ບໍ່ວ່າວິທີການປະຕິບັດ, scrollspy ຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ position: relative;ອົງປະກອບທີ່ທ່ານກໍາລັງ spying ສຸດ. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ນີ້ແມ່ນ <body>. ໃນເວລາທີ່ scrollspying ກ່ຽວກັບອົງປະກອບອື່ນໆທີ່ບໍ່ແມ່ນ <body>, ໃຫ້ແນ່ໃຈວ່າມີ heightຊຸດແລະ overflow-y: scroll;ນໍາໃຊ້.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ໃນ​ການ​ນໍາ​ທາງ topbar ຂອງ​ທ່ານ, ເພີ່ມ data-spy="scroll"​ໃສ່​ອົງ​ປະ​ກອບ​ທີ່​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ spy ກ່ຽວ​ກັບ (ໂດຍ​ປົກ​ກະ​ຕິ​ຫຼາຍ​ທີ່​ສຸດ​ນີ້​ຈະ​ເປັນ <body>). ຫຼັງຈາກນັ້ນ, ເພີ່ມ data-targetຄຸນລັກສະນະທີ່ມີ ID ຫຼືຊັ້ນຂອງອົງປະກອບຫຼັກຂອງອົງປະກອບ Bootstrap ໃດ .nav.

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>

ຜ່ານ JavaScript

ຫຼັງຈາກເພີ່ມ position: relative;ໃນ CSS ຂອງທ່ານ, ໂທຫາ scrollspy ຜ່ານ JavaScript:

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

ວິທີການ

.scrollspy('refresh')

ເມື່ອໃຊ້ scrollspy ສົມທົບກັບການເພີ່ມຫຼືເອົາອົງປະກອບອອກຈາກ DOM, ທ່ານຈະຕ້ອງໂທຫາວິທີການໂຫຼດຫນ້າຈໍຄືນເຊັ່ນ:

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-offset="".

ເຫດການ

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

ແຖບ ທີ່ສາມາດປິດໄດ້ tab.js

ແຖບຕົວຢ່າງ

ເພີ່ມການທໍາງານຂອງແຖບແບບເຄື່ອນໄຫວໄວເພື່ອປ່ຽນຜ່ານແຖບຂອງເນື້ອຫາທ້ອງຖິ່ນ, ເຖິງແມ່ນວ່າຜ່ານເມນູແບບເລື່ອນລົງ. ບໍ່ຮອງຮັບແຖບ Nested.

ການ​ນໍາ​ໃຊ້

ເປີດໃຊ້ແທັບທີ່ສາມາດເປີດໄດ້ຜ່ານ JavaScript (ແຕ່ລະແທັບຕ້ອງຖືກເປີດໃຊ້ເປັນແຕ່ລະອັນ):

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

ທ່ານສາມາດເປີດໃຊ້ແທັບສ່ວນບຸກຄົນໄດ້ຫຼາຍວິທີ:

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

ມາກອັບ

ທ່ານ​ສາ​ມາດ​ກະ​ຕຸ້ນ​ການ​ນໍາ​ທາງ​ແຖບ​ຫຼື​ຢາ​ໂດຍ​ບໍ່​ມີ​ການ​ຂຽນ JavaScript ໃດ​ໂດຍ​ການ​ພຽງ​ແຕ່​ລະ​ບຸ data-toggle="tab"​ຫຼື data-toggle="pill"​ໃນ​ອົງ​ປະ​ກອບ​. ການເພີ່ມ navແລະ nav-tabsຫ້ອງຮຽນໃສ່ແຖບ ຈະນຳໃຊ້ການຈັດ ຮູບແບບແຖບul Bootstrap , ໃນຂະນະທີ່ການເພີ່ມ ແລະ ຫ້ອງຮຽນຈະນຳໃຊ້ການຈັດ ຮູບແບບເມັດ .navnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

ເສື່ອມຜົນ

ເພື່ອເຮັດໃຫ້ແຖບຫາຍໄປ, ເພີ່ມ .fadeໃສ່ແຕ່ລະອັນ .tab-pane. ແຖບແຖບທໍາອິດຕ້ອງມີ .inເພື່ອເຮັດໃຫ້ເນື້ອຫາເບື້ອງຕົ້ນເຫັນໄດ້.

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

ວິທີການ

$().tab

ເປີດໃຊ້ອົງປະກອບແຖບ ແລະຕົວບັນຈຸເນື້ອຫາ. ແຖບຄວນຈະມີ data-targetຫຼືການ hrefກໍາຫນົດເປົ້າຫມາຍ node container ໃນ DOM. ໃນຕົວຢ່າງຂ້າງເທິງ, ແຖບແມ່ນ <a>s ທີ່ມີ data-toggle="tab"ຄຸນລັກສະນະ.

.tab('show')

ເລືອກແຖບທີ່ໃຫ້ມາ ແລະສະແດງເນື້ອຫາທີ່ກ່ຽວຂ້ອງຂອງມັນ. ແຖບອື່ນໃດທີ່ເລືອກໄວ້ກ່ອນໜ້ານີ້ຈະກາຍເປັນທີ່ບໍ່ເລືອກ ແລະເນື້ອຫາທີ່ກ່ຽວຂ້ອງຂອງມັນຖືກເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ແຖບແຖບໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.tabເຫດການຈະເກີດຂື້ນ).

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

ເຫດການ

ເມື່ອສະແດງແຖບໃໝ່, ເຫດການຈະເກີດຂຶ້ນຕາມລຳດັບຕໍ່ໄປນີ້:

1. hide.bs.tab(ຢູ່ໃນແຖບທີ່ໃຊ້ງານໃນປັດຈຸບັນ)
2. show.bs.tab(ຢູ່ໃນແຖບທີ່ຈະຖືກສະແດງ)
3. hidden.bs.tab(ໃນແຖບທີ່ໃຊ້ງານຜ່ານມາ, ອັນດຽວກັນກັບ hide.bs.tabເຫດການ)
4. shown.bs.tab(ຢູ່ໃນແຖບທີ່ຫາກໍສະແດງໃໝ່ທີ່ເປີດໃໝ່, ອັນດຽວກັນກັບ show.bs.tabເຫດການ)

ຖ້າບໍ່ມີແຖບໃດຖືກເປີດໃຊ້ຢູ່ກ່ອນແລ້ວ, ເຫດການ hide.bs.tabແລະ hidden.bs.tabເຫດການຈະບໍ່ຖືກຍິງອອກ.

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

ຄຳແນະ ນຳ tooltip.js

ໄດ້ຮັບການດົນໃຈຈາກ plugin jQuery.tipsy ທີ່ດີເລີດທີ່ຂຽນໂດຍ Jason Frame; ຄໍາແນະນໍາເຄື່ອງມືແມ່ນສະບັບປັບປຸງ, ເຊິ່ງບໍ່ໄດ້ອີງໃສ່ຮູບພາບ, ໃຊ້ CSS3 ສໍາລັບພາບເຄື່ອນໄຫວ, ແລະຄຸນລັກສະນະຂໍ້ມູນສໍາລັບການເກັບຮັກສາຊື່ທ້ອງຖິ່ນ.

ຄໍາແນະນໍາເຄື່ອງມືທີ່ມີຊື່ສູນແມ່ນບໍ່ເຄີຍສະແດງ.

ຕົວຢ່າງ

ເລື່ອນໃສ່ລິ້ງດ້ານລຸ່ມເພື່ອເບິ່ງຄຳແນະນຳ:

ຄໍາແນະນໍາເຄື່ອງມືຄົງທີ່

ມີສີ່ທາງເລືອກ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຈັດຮຽງຊ້າຍ.

ສີ່ທິດ

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

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນຄໍາແນະນໍາເຄື່ອງມືສ້າງເນື້ອຫາແລະເຄື່ອງຫມາຍຕາມຄວາມຕ້ອງການ, ແລະໂດຍຄ່າເລີ່ມຕົ້ນວາງຄໍາແນະນໍາເຄື່ອງມືຫຼັງຈາກອົງປະກອບຂອງຕົວກະຕຸ້ນຂອງພວກເຂົາ.

ກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືຜ່ານ JavaScript:

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

ມາກອັບ

markup ທີ່ຕ້ອງການສໍາລັບຄໍາແນະນໍາເຄື່ອງມືແມ່ນພຽງແຕ່ dataຄຸນລັກສະນະແລະ titleໃນອົງປະກອບ HTML ທີ່ທ່ານຕ້ອງການທີ່ຈະມີຄໍາແນະນໍາເຄື່ອງມື. ເຄື່ອງຫມາຍທີ່ສ້າງຂຶ້ນຂອງຄໍາແນະນໍາເຄື່ອງມືແມ່ນງ່າຍດາຍຫຼາຍ, ເຖິງແມ່ນວ່າມັນຕ້ອງການຕໍາແຫນ່ງ (ໂດຍຄ່າເລີ່ມຕົ້ນ, ກໍານົດ topໂດຍ 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>

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-animation="".

ວິທີການ

$().tooltip(options)

ແນບຕົວຈັບຄໍາແນະນໍາເຄື່ອງມືໃສ່ຄໍເລັກຊັນອົງປະກອບ.

.tooltip('show')

ເປີດເຜີຍຄໍາແນະນໍາຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື. ຄໍາແນະນໍາເຄື່ອງມືທີ່ມີຊື່ສູນແມ່ນບໍ່ເຄີຍສະແດງ.

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

.tooltip('hide')

ເຊື່ອງຄໍາແນະນໍາຂອງອົງປະກອ��. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຊື່ອງໄວ້ຕົວຈິງ (ເຊັ່ນ: ກ່ອນທີ່ hidden.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື.

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

.tooltip('toggle')

ສະຫຼັບຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ເຊັ່ນວ່າກ່ອນທີ່ເຫດການ shown.bs.tooltipຫຼື hidden.bs.tooltipເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງຄໍາແນະນໍາເຄື່ອງມື.

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

.tooltip('destroy')

ເຊື່ອງ ແລະທຳລາຍຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ. ຄໍາແນະນໍາເຄື່ອງມືທີ່ໃຊ້ການມອບຫມາຍ (ທີ່ຖືກສ້າງຂຶ້ນໂດຍໃຊ້ ຕົວ selectorເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ສືບທອດ.

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

ເຫດການ

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

Popovers popover.js

ຕື່ມການຊ້ອນກັນເລັກນ້ອຍຂອງເນື້ອຫາ, ເຊັ່ນວ່າຢູ່ໃນ iPad, ອົງປະກອບໃດໆສໍາລັບຂໍ້ມູນຮອງທີ່ຢູ່ອາໄສ.

Popovers ທີ່ມີທັງຊື່ ແລະເນື້ອຫາມີຄວາມຍາວສູນແມ່ນບໍ່ເຄີຍສະແດງ.

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

ຕົວຢ່າງ

popover ຄົງທີ່

ມີສີ່ທາງເລືອກ: ເທິງ, ຂວາ, ລຸ່ມ, ແລະຈັດຮຽງຊ້າຍ.

ການສາທິດສົດ

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

ສີ່ທິດ

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

ປິດການຄລິກຕໍ່ໄປ

ໃຊ້ຕົວ focusກະຕຸ້ນເພື່ອປິດ popovers ໃນການຄລິກຕໍ່ໄປທີ່ຜູ້ໃຊ້ເຮັດ.

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

ການ​ນໍາ​ໃຊ້

ເປີດໃຊ້ popovers ຜ່ານ JavaScript:

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-animation="".

ວິທີການ

$().popover(options)

ເລີ່ມຕົ້ນ popovers ສໍາລັບການເກັບກໍາອົງປະກອບ.

.popover('show')

ເປີດເຜີຍການປະກົດຕົວຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.popoverເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover. Popovers ທີ່ມີທັງຊື່ ແລະເນື້ອຫາມີຄວາມຍາວສູນແມ່ນບໍ່ເຄີຍສະແດງ.

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

.popover('hide')

ເຊື່ອງ popover ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.popoverເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.

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

.popover('toggle')

ສະຫຼັບການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.popoverຫຼື hidden.bs.popoverເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.

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

.popover('destroy')

ເຊື່ອງ ແລະທຳລາຍການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ. Popovers ທີ່ໃຊ້ delegation (ເຊິ່ງຖືກສ້າງຂື້ນໂດຍໃຊ້ ຕົວ selectorເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ທີ່ສືບທອດ.

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

ເຫດການ

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

ຂໍ້ຄວາມ ແຈ້ງເຕືອນ alert.js

ຕົວຢ່າງການແຈ້ງເຕືອນ

ເພີ່ມຟັງຊັນການປິດການສົ່ງຂໍ້ຄວາມແຈ້ງເຕືອນທັງໝົດດ້ວຍປລັກອິນນີ້.

ເມື່ອໃຊ້ .closeປຸ່ມ, ມັນຕ້ອງເປັນລູກທໍາອິດຂອງ .alert-dismissibleຂໍ້ຄວາມແລະບໍ່ມີເນື້ອຫາຂໍ້ຄວາມໃດໆທີ່ອາດຈະມາກ່ອນທີ່ຈະຢູ່ໃນເຄື່ອງຫມາຍ.

ການ​ນໍາ​ໃຊ້

ພຽງແຕ່ເພີ່ມ data-dismiss="alert"ໃສ່ປຸ່ມປິດຂອງເຈົ້າເພື່ອໃຫ້ຟັງຊັນປິດການແຈ້ງເຕືອນໂດຍອັດຕະໂນມັດ. ການປິດການແຈ້ງເຕືອນຈະລຶບມັນອອກຈາກ DOM.

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

ເພື່ອໃຫ້ການແຈ້ງເຕືອນຂອງເຈົ້າໃຊ້ອະນິເມຊັນໃນເວລາປິດ, ໃຫ້ແນ່ໃຈວ່າພວກມັນມີ .fadeແລະ .inຊັ້ນຮຽນທີ່ໃຊ້ແລ້ວ.

ວິທີການ

$().alert()

ເຮັດໃຫ້ການແຈ້ງເຕືອນຟັງເຫດການຄລິກຢູ່ອົງປະກອບສືບທອດທີ່ມີ data-dismiss="alert"ຄຸນສົມບັດ. (ບໍ່ຈໍາເປັນເມື່ອໃຊ້ການເລີ່ມຕົ້ນອັດຕະໂນມັດຂອງ data-api.)

$().alert('close')

ປິດການແຈ້ງເຕືອນໂດຍການລຶບມັນອອກຈາກ DOM. ຖ້າ​ຫາກ​ວ່າ .fade​ແລະ.in ຮຽນຢູ່ໃນອົງປະກອບ, ການແຈ້ງເຕືອນຈະຫາຍໄປກ່ອນທີ່ມັນຈະຖືກລຶບອອກ.

ເຫດການ

ປັ໊ກອິນເຕືອນຂອງ Bootstrap ເປີດເຜີຍເຫດການບາງຢ່າງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງການແຈ້ງເຕືອນ.

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

ປຸ່ມ button.js

ເຮັດໄດ້ຫຼາຍຂຶ້ນດ້ວຍປຸ່ມຕ່າງໆ. ປຸ່ມຄວບຄຸມສະຖານະ ຫຼືສ້າງກຸ່ມຂອງປຸ່ມຕ່າງໆສຳລັບອົງປະກອບເພີ່ມເຕີມເຊັ່ນແຖບເຄື່ອງມື.

ມີລັດ

ເພີ່ມ data-loading-text="Loading..."ເພື່ອໃຊ້ສະຖານະໂຫຼດເທິງປຸ່ມ.

ຄຸນສົມບັດນີ້ຖືກປະຕິເສດຕັ້ງແຕ່ v3.3.5 ແລະຖືກລຶບອອກໃນ 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>

ສະຫຼັບດ່ຽວ

ເພີ່ມ data-toggle="button"ເພື່ອເປີດໃຊ້ການສະຫຼັບໃນປຸ່ມດຽວ.

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

Checkbox / Radio

ເພີ່ມໃສ່ data-toggle="buttons"ກ່ອງ .btn-groupໝາຍຕິກ ຫຼືວິທະຍຸທີ່ບັນຈຸເຂົ້າໃສ່ເພື່ອເປີດໃຊ້ການສະຫຼັບໃນແບບຕາມລຳດັບຂອງພວກມັນ.

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

ວິທີການ

$().button('toggle')

ສະຫຼັບສະຖານະ push. ໃຫ້ປຸ່ມປະກົດວ່າມັນຖືກເປີດໃຊ້ແລ້ວ.

$().button('reset')

ຣີເຊັດສະຖານະປຸ່ມ - ປ່ຽນຂໍ້ຄວາມເປັນຂໍ້ຄວາມຕົ້ນສະບັບ. ວິທີການນີ້ແມ່ນ asynchronous ແລະກັບຄືນມາກ່ອນທີ່ຈະຕັ້ງໃຫມ່ໄດ້ສໍາເລັດ.

$().button(string)

ສະຫຼັບຂໍ້ຄວາມໄປຫາຂໍ້ມູນໃດໜຶ່ງທີ່ກຳນົດສະຖານະຂໍ້ຄວາມ.

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

ປັ໊ກອິນທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ນໍາໃຊ້ຫ້ອງຮຽນຈໍານວນຫນ້ອຍສໍາລັບພຶດຕິກໍາການສະຫຼັບງ່າຍ.

ຕົວຢ່າງ

ຄລິກປຸ່ມລຸ່ມນີ້ເພື່ອສະແດງ ແລະເຊື່ອງອົງປະກອບອື່ນຜ່ານການປ່ຽນແປງຊັ້ນຮຽນ:

• .collapseເຊື່ອງເນື້ອຫາ
• .collapsingຖືກນໍາໃຊ້ໃນລະຫວ່າງການຫັນປ່ຽນ
• .collapse.inສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​

ທ່ານສາມາດນໍາໃຊ້ການເຊື່ອມຕໍ່ກັບ hrefຄຸນລັກສະນະ, ຫຼືປຸ່ມທີ່ມີ data-targetຄຸນລັກສະນະ. ໃນທັງສອງກໍລະນີ, data-toggle="collapse"ຕ້ອງການ.

<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

ຂະຫຍາຍພຶດຕິກຳການຍຸບຕົວເລີ່ມຕົ້ນເພື່ອສ້າງເຄື່ອງສຽງກັບອົງປະກອບຂອງແຜງ.

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

ມັນຍັງສາມາດແລກປ່ຽນ .panel-bodys ກັບ .list-groups.

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນທີ່ລົ້ມລົງໃຊ້ສອງສາມຊັ້ນເພື່ອຈັດການກັບການຍົກຫນັກ:

• .collapseເຊື່ອງເນື້ອຫາ
• .collapse.inສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​
• .collapsingຈະຖືກເພີ່ມເມື່ອການປ່ຽນແປງເລີ່ມຕົ້ນ, ແລະເອົາອອກເມື່ອມັນສໍາເລັດ

ຫ້ອງຮຽນເຫຼົ່ານີ້ສາມາດພົບເຫັນຢູ່ໃນ component-animations.less.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ພຽງ​ແຕ່​ເພີ່ມ data-toggle="collapse"​ແລະ a data-targetກັບ​ອົງ​ປະ​ກອບ​ທີ່​ຈະ​ກໍາ​ນົດ​ອັດ​ຕະ​ໂນ​ມັດ​ການ​ຄວບ​ຄຸມ​ຂອງ​ອົງ​ປະ​ກອບ​ທີ່​ຍຸບ​ໄດ້​. ຄຸນລັກ ສະ data-targetນະຍອມຮັບຕົວເລືອກ CSS ເພື່ອໃຊ້ການຫຍໍ້ລົງ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມຊັ້ນ collapseເຂົ້າໄປໃນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຖ້າທ່ານຕ້ອງການໃຫ້ມັນເປີດໃນຕອນຕົ້ນ, ໃຫ້ເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມ in.

ເພື່ອເພີ່ມການຈັດການກຸ່ມທີ່ຄ້າຍກັບ accordion ເຂົ້າໃນການຄວບຄຸມທີ່ພັບໄດ້, ເພີ່ມຄຸນສົມບັດຂໍ້ມູນ data-parent="#selector". ອ້າງເຖິງການສາທິດເພື່ອເບິ່ງອັນນີ້ໃນການປະຕິບັດ.

ຜ່ານ JavaScript

ເປີດໃຊ້ດ້ວຍຕົນເອງດ້ວຍ:

$('.collapse').collapse()

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-parent="".

ວິທີການ

.collapse(options)

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

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

.collapse('toggle')

ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເພື່ອສະແດງ ຫຼືເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງຫຼືຖືກເຊື່ອງໄວ້ (ເຊັ່ນວ່າກ່ອນທີ່ເຫດການ shown.bs.collapseຫຼື hidden.bs.collapseເຫດການຈະເກີດຂື້ນ).

.collapse('show')

ສະແດງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.collapseເຫດການຈະເກີດຂື້ນ).

.collapse('hide')

ເຊື່ອງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຍຸບໄດ້ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ເຊັ່ນ: ກ່ອນທີ່ hidden.bs.collapseເຫດການຈະເກີດຂື້ນ).

ເຫດການ

ຫ້ອງຮຽນຍຸບຂອງ Bootstrap ເປີດເຜີຍເຫດການບໍ່ຫຼາຍປານໃດສໍາລັບການເຊື່ອມໂຍງກັບຫນ້າທີ່ການລົ້ມລົງ.

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

carousel carousel.js

ອົງປະກອບສະໄລ້ໂຊສຳລັບການຖີບລົດຜ່ານອົງປະກອບຕ່າງໆ ເຊັ່ນ: carousel. ບໍ່ຮອງຮັບ carousels ຊ້ອນ.

ຕົວຢ່າງ

ທີ່ຜ່ານມາ ຕໍ່ໄປ

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

ຄຳບັນຍາຍທາງເລືອກ

ເພີ່ມຄຳບັນຍາຍໃສ່ສະໄລ້ຂອງເຈົ້າໄດ້ຢ່າງງ່າຍດາຍດ້ວຍ .carousel-captionອົງປະກອບພາຍໃນ .item. ວາງພຽງແຕ່ກ່ຽວກັບ HTML ທາງເລືອກໃດໆພາຍໃນນັ້ນແລະມັນຈະຖືກຈັດຮຽງແລະຈັດຮູບແບບອັດຕະໂນມັດ.

ປ້າຍສະໄລ້ທຳອິດ

Nulla vitae elit libero, a pharetra augue mollis interdum.

ປ້າຍສະໄລ້ທີສອງ

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ປ້າຍສະໄລ້ທີສາມ

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ທີ່ຜ່ານມາ ຕໍ່ໄປ

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

ການ​ນໍາ​ໃຊ້

ຫຼາຍ carousels

Carousels ຕ້ອງການໃຊ້ idຕູ້ຄອນເທນເນີທີ່ຢູ່ທາງນອກສຸດ (the .carousel) ສໍາລັບການຄວບຄຸມ carousel ເຮັດວຽກຢ່າງຖືກຕ້ອງ. ເມື່ອເພີ່ມຫຼາຍ carousel, ຫຼືເມື່ອປ່ຽນ carousel id, ໃຫ້ແນ່ໃຈວ່າຈະປັບປຸງການຄວບຄຸມທີ່ກ່ຽວຂ້ອງ.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ໃຊ້ຄຸນສົມບັດຂໍ້ມູນເພື່ອຄວບຄຸມຕຳແໜ່ງຂອງ carousel ໄດ້ຢ່າງງ່າຍດາຍ. data-slideຍອມຮັບຄໍາສໍາຄັນ prevຫຼື next, ເຊິ່ງປ່ຽນແປງຕໍາແຫນ່ງສະໄລ້ທີ່ກ່ຽວຂ້ອງກັບຕໍາແຫນ່ງປະຈຸບັນຂອງມັນ. ອີກທາງເລືອກ, ໃຊ້ data-slide-toເພື່ອຜ່ານດັດຊະນີສະໄລ້ດິບໄປຫາ carousel data-slide-to="2", ເຊິ່ງປ່ຽນຕໍາແຫນ່ງສະໄລ້ໄປຫາດັດຊະນີສະເພາະທີ່ເລີ່ມຕົ້ນດ້ວຍ 0.

ຄຸນ ສົມ data-ride="carousel"ບັດຖືກໃຊ້ເພື່ອໝາຍຮູບວົງມົນເປັນພາບເຄື່ອນໄຫວເລີ່ມຕົ້ນໃນເວລາໂຫຼດໜ້າ. ມັນບໍ່ສາມາດຖືກນໍາໃຊ້ໃນການປະສົມປະສານກັບ (ຊ້ໍາຊ້ອນແລະບໍ່ຈໍາເປັນ) ການເລີ່ມຕົ້ນ JavaScript ຢ່າງຊັດເຈນຂອງ carousel ດຽວກັນ.

ຜ່ານ JavaScript

ໂທຫາ carousel ດ້ວຍຕົນເອງດ້ວຍ:

$('.carousel').carousel()

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-interval="".

ວິທີການ

.carousel(options)

ເລີ່ມຕົ້ນ carousel ດ້ວຍຕົວເລືອກທາງເລືອກ objectແລະເລີ່ມການຂີ່ລົດຖີບຜ່ານລາຍການ.

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

.carousel('cycle')

ຮອບວຽນຜ່ານລາຍການ carousel ຈາກຊ້າຍໄປຂວາ.

.carousel('pause')

ຢຸດ carousel ຈາກການຖີບຜ່ານລາຍການ.

.carousel(number)

ວົງຈອນ carousel ໄປຫາກອບສະເພາະ (0 ໂດຍອີງຕາມ, ຄ້າຍຄືກັນກັບ array).

.carousel('prev')

ຮອບວຽນໄປຫາລາຍການກ່ອນໜ້າ.

.carousel('next')

ຮອບວຽນໄປຫາລາຍການຕໍ່ໄປ.

ເຫດການ

ຫ້ອງຮຽນ carousel ຂອງ Bootstrap ເປີດເຜີຍສອງເຫດການສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ carousel.

ທັງສອງເຫດການມີຄຸນສົມບັດເພີ່ມເຕີມດັ່ງຕໍ່ໄປນີ້:

• direction: ທິດທາງທີ່ carousel ເລື່ອນ (ບໍ່ວ່າຈະ "left"ຫຼື "right").
• relatedTarget: ອົງປະກອບ DOM ທີ່ຖືກເລື່ອນເຂົ້າໄປໃນສະຖານທີ່ເປັນລາຍການທີ່ເຮັດວຽກ.

ເຫດການ carousel ທັງຫມົດແມ່ນ fired ຢູ່ carousel ຕົວຂອງມັນເອງ (ie at the <div class="carousel">).

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

ຕື່ມ affix.js

ຕົວຢ່າງ

plugin affix ສະຫຼັບ position: fixed;ເປີດແລະປິດ, emulating ຜົນກະທົບທີ່ພົບເຫັນກັບ position: sticky;. subnavigation ທາງດ້ານຂວາແມ່ນຕົວຢ່າງສົດຂອງ plugin affix.

ການ​ນໍາ​ໃຊ້

ໃຊ້ plugin affix ຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼືດ້ວຍຕົນເອງດ້ວຍ JavaScript ຂອງທ່ານເອງ.ໃນທັງສອງສະຖານະການ, ທ່ານຕ້ອງໃຫ້ CSS ສໍາລັບການຈັດຕໍາແຫນ່ງແລະຄວາມກວ້າງຂອງເນື້ອຫາທີ່ຕິດຢູ່ຂອງທ່ານ.

ໝາຍເຫດ: ຢ່າໃຊ້ປລັກອິນ affix ຢູ່ໃນອົງປະກອບທີ່ມີຕຳແໜ່ງທີ່ຂ້ອນຂ້າງ ເຊັ່ນ: ຖັນທີ່ດຶງ ຫຼື pushed, ເນື່ອງຈາກ ຂໍ້ຜິດພາດໃນການສະແດງຜົນຂອງ Safari .

ການຈັດຕໍາແຫນ່ງຜ່ານ CSS

plugin affix ສະຫຼັບລະຫວ່າງສາມຊັ້ນຮຽນ, ແຕ່ລະອັນສະແດງເຖິງສະຖານະສະເພາະ: .affix, .affix-top, ແລະ .affix-bottom. ທ່ານຕ້ອງສະຫນອງຄໍເຕົ້າໄຂ່ທີ່, ຍົກເວັ້ນຂອງ position: fixed;on .affix, ສໍາລັບຫ້ອງຮຽນເຫຼົ່ານີ້ຕົວທ່ານເອງ (ເອກະລາດຂອງ plugin ນີ້) ເພື່ອຈັດການຕໍາແຫນ່ງຕົວຈິງ.

ນີ້ແມ່ນວິທີທີ່ plugin affix ເຮັດວຽກ:

1. ເພື່ອເລີ່ມຕົ້ນ, plugin ເພີ່ມ.affix-top ເພື່ອຊີ້ບອກວ່າອົງປະກອບຢູ່ໃນຕໍາແຫນ່ງເທິງສຸດຂອງມັນ. ໃນເວລານີ້, ບໍ່ຈໍາເປັນຕ້ອງມີການຈັດຕໍາແຫນ່ງ CSS.
2. ການເລື່ອນຜ່ານອົງປະກອບທີ່ທ່ານຕ້ອງການຕິດຢູ່ຄວນເຮັດໃຫ້ເກີດການຕິດແທດຕົວຈິງ. ນີ້ແມ່ນບ່ອນທີ່ .affixທົດແທນ .affix-topແລະກໍານົດ position: fixed;(ສະຫນອງໃຫ້ໂດຍ CSS ຂອງ Bootstrap).
3. ຖ້າມີການກຳນົດຄ່າຊົດເຊີຍທາງລຸ່ມ, ການເລື່ອນຜ່ານມັນຄວນຈະແທນ .affixທີ່ດ້ວຍ .affix-bottom. ເນື່ອງຈາກການຊົດເຊີຍເປັນທາງເລືອກ, ການຕັ້ງຄ່າຫນຶ່ງຮຽກຮ້ອງໃຫ້ທ່ານກໍານົດ CSS ທີ່ເຫມາະສົມ. ໃນກໍລະນີນີ້, ເພີ່ມ position: absolute;ເມື່ອມີຄວາມຈໍາເປັນ. plugin ໃຊ້ຄຸນລັກສະນະຂໍ້ມູນຫຼືທາງເລືອກ JavaScript ເພື່ອກໍານົດບ່ອນທີ່ຈະຈັດຕໍາແຫນ່ງອົງປະກອບຈາກບ່ອນນັ້ນ.

ປະຕິບັດຕາມຂັ້ນຕອນຂ້າງເທິງເພື່ອກໍານົດ CSS ຂອງທ່ານສໍາລັບທາງເລືອກໃນການນໍາໃຊ້ຂ້າງລຸ່ມນີ້.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພື່ອເພີ່ມພຶດຕິ ກຳ affix ໃສ່ອົງປະກອບໃດ ໜຶ່ງ, ພຽງແຕ່ເພີ່ມdata-spy="affix" ໃສ່ອົງປະກອບທີ່ທ່ານຕ້ອງການທີ່ຈະ spy ກ່ຽວກັບ. ໃຊ້ການຊົດເຊີຍເພື່ອກຳນົດເວລາທີ່ຈະສະຫຼັບການປັກໝຸດອົງປະກອບໃດໜຶ່ງ.

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

ຜ່ານ JavaScript

ໂທຫາ plugin affix ຜ່ານ JavaScript:

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-offset-top="200".

ວິທີການ

.affix(options)

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນເນື້ອໃນທີ່ຕິດຢູ່. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

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

.affix('checkPosition')

ຄິດໄລ່ສະຖານະຂອງເອກະສານຄືນໃໝ່ໂດຍອີງໃສ່ຂະໜາດ, ຕຳແໜ່ງ ແລະຕຳແໜ່ງເລື່ອນຂອງອົງປະກອບທີ່ກ່ຽວຂ້ອງ. The .affix, .affix-top, and .affix-bottomclasses are added to or remove from the affixed content according to the new state . ວິທີການນີ້ຈໍາເປັນຕ້ອງຖືກເອີ້ນທຸກຄັ້ງທີ່ຂະຫນາດຂອງເນື້ອຫາທີ່ຕິດຢູ່ຫຼືອົງປະກອບເປົ້າຫມາຍຖືກປ່ຽນແປງ, ເພື່ອຮັບປະກັນການຈັດຕໍາແຫນ່ງທີ່ຖືກຕ້ອງຂອງເນື້ອຫາທີ່ຕິດຢູ່.

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

ເຫດການ

plugin affix ຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບຫນ້າທີ່ affix.