ພາບລວມ

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

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

ການນໍາໃຊ້ JavaScript ທີ່ລວບລວມ

ທັງສອງ bootstrap.jsແລະ bootstrap.min.jsປະກອບດ້ວຍ plugins ທັງຫມົດໃນໄຟລ໌ດຽວ. ປະກອບມີພຽງແຕ່ຫນຶ່ງ.

ການຂຶ້ນກັບປລັກອິນ

ບາງ plugins ແລະອົງປະກອບ CSS ແມ່ນຂຶ້ນກັບ plugins ອື່ນໆ. ຖ້າທ່ານລວມເອົາ plugins ແຕ່ລະອັນ, ໃຫ້ແນ່ໃຈວ່າຈະກວດເບິ່ງການເພິ່ງພາອາໄສເຫຼົ່ານີ້ຢູ່ໃນເອກະສານ. ໃຫ້ສັງເກດວ່າ plugins ທັງຫມົດແມ່ນຂຶ້ນກັບ jQuery (ນີ້ຫມາຍຄວາມວ່າ jQuery ຕ້ອງຖືກລວມຢູ່ ກ່ອນ ໄຟລ໌ plugin). ປຶກສາຂອງພວກເຮົາbower.json ເພື່ອເບິ່ງວ່າ jQuery ຮຸ່ນໃດໄດ້ຮັບການສະຫນັບສະຫນູນ.

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

ທ່ານສາມາດນໍາໃຊ້ 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')

ພຽງແຕ່ຫນຶ່ງ plugin ຕໍ່ອົງປະກອບໂດຍຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ຢ່າໃຊ້ຄຸນສົມບັດຂໍ້ມູນຈາກຫຼາຍປລັກອິນຢູ່ໃນອົງປະກອບດຽວກັນ. ຕົວຢ່າງ, ປຸ່ມບໍ່ສາມາດມີຄໍາແນະນໍາເຄື່ອງມືແລະສະຫຼັບ modal ໄດ້. ເພື່ອເຮັດສິ່ງນີ້, ໃຊ້ອົງປະກອບຫໍ່.

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

ຕົວເລກສະບັບ

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

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

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

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

ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ

Bootstrap ບໍ່ຮອງຮັບຫ້ອງສະໝຸດ JavaScript ຂອງພາກສ່ວນທີສາມຢ່າງເປັນທາງການ ເຊັ່ນ Prototype ຫຼື jQuery UI. ເຖິງວ່າຈະມີ .noConflictເຫດການທີ່ມີ namespaced, ອາດຈະມີບັນຫາຄວາມເຂົ້າກັນໄດ້ທີ່ທ່ານຈໍາເປັນຕ້ອງແກ້ໄຂດ້ວຍຕົນເອງ.

ການ ຫັນ ປ່ຽນ 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.

ບໍ່ຮອງຮັບໂມດູນເປີດຫຼາຍອັນ

ໃຫ້ແນ່ໃຈວ່າບໍ່ເປີດ modal ໃນຂະນະທີ່ອັນອື່ນຍັງເຫັນໄດ້. ການສະແດງຫຼາຍກວ່າຫນຶ່ງ modal ໃນເວລານັ້ນຕ້ອງການລະຫັດແບບກໍານົດເອງ.

ການຈັດວາງເຄື່ອງໝາຍໂມດູນ

ພະຍາຍາມວາງລະຫັດ HTML ຂອງ modal ຢູ່ໃນຕໍາແຫນ່ງລະດັບສູງສຸດໃນເອກະສານຂອງທ່ານເພື່ອຫຼີກເວັ້ນການອົງປະກອບອື່ນໆທີ່ມີຜົນກະທົບຕໍ່ຮູບລັກສະນະແລະ / ຫຼືການເຮັດວຽກຂອງ modal.

ອຸ​ປະ​ກອນ​ມື​ຖື​ຄໍາ​ເຕືອນ​

ມີບາງຂໍ້ເຕືອນກ່ຽວກັບການໃຊ້ modals ໃນອຸປະກອນມືຖື. ເບິ່ງເອກະສານສະຫນັບສະຫນູນຕົວທ່ອງເວັບຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດ.

ເນື່ອງຈາກ 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 ສາມາດເຂົ້າເຖິງໄດ້

ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ role="dialog"ແລະ aria-labelledby="...", ການອ້າງອີງຫົວຂໍ້ modal, ກັບ .modal, ແລະ role="document"ຕົວ .modal-dialogຂອງມັນເອງ.

ນອກຈາກນັ້ນ, ທ່ານອາດຈະໃຫ້ລາຍລະອຽດຂອງກ່ອງໂຕ້ຕອບ modal ຂອງທ່ານກັບ aria-describedbyon .modal.

ການຝັງວິດີໂອ YouTube

ການຝັງວິດີໂອ YouTube ໃນ modals ຕ້ອງການ JavaScript ເພີ່ມເຕີມທີ່ບໍ່ຢູ່ໃນ Bootstrap ເພື່ອຢຸດການຫຼິ້ນອັດຕະໂນມັດ ແລະອື່ນໆອີກ. ເບິ່ງໂພສ Stack Overflow ທີ່ເປັນປະໂຫຍດນີ້ ສຳລັບຂໍ້ມູນເພີ່ມເຕີມ.

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

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 bs-example-modal-lg" 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 bs-example-modal-sm" 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 ດຽວກັນ, ພຽງແຕ່ມີເນື້ອໃນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ? ການນໍາໃຊ້ 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="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ສາກຫຼັງ boolean ຫຼື string ໄດ້'static' ຄວາມຈິງ ລວມມີອົງປະກອບສາກຫຼັງ modal. ອີກທາງເລືອກ, ລະບຸ staticສາກຫຼັງທີ່ບໍ່ປິດ modal ໃນການຄລິກ.
ແປ້ນພິມ ບູລີນ ຄວາມຈິງ ປິດ modal ເມື່ອກົດປຸ່ມ escape ຖືກກົດ
ສະແດງໃຫ້ເຫັນ ບູລີນ ຄວາມຈິງ ສະແດງ modal ເມື່ອເລີ່ມຕົ້ນ.
ໄລຍະໄກ ເສັ້ນທາງ ບໍ່ຖືກຕ້ອງ

ຕົວເລືອກນີ້ຖືກຍົກເລີກຕັ້ງແຕ່ v3.3.0 ແລະຖືກລຶບອອກໃນ v4. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ແມ່ແບບຂ້າງລູກຄ້າຫຼືກອບການຜູກມັດຂໍ້ມູນ, ຫຼືໂທ ຫາ jQuery.load ຕົວທ່ານເອງ.

ຖ້າ URL ຫ່າງໄກສອກຫຼີກຖືກສະຫນອງໃຫ້, ເນື້ອຫາຈະຖືກໂຫລດຫນຶ່ງຄັ້ງload ຜ່ານ ວິທີການ ຂອງ jQuery ແລະຖືກໃສ່ເຂົ້າໄປໃນ .modal-contentdiv. ຖ້າທ່ານກໍາລັງໃຊ້ data-api, ທ່ານອາດຈະໃຊ້ hrefຄຸນສົມບັດເພື່ອລະບຸແຫຼ່ງຫ່າງໄກສອກຫຼີກ. ຕົວຢ່າງຂອງອັນນີ້ແມ່ນສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

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

ວິທີການ

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

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

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

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

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

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

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

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

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

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

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

ເຫດການ

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

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

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.modal ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ. ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ.
show.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ.
hide.bs.modal ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
loaded.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ໂຫລດເນື້ອຫາໂດຍໃຊ້ remoteທາງເລືອກ.
$('#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()

data-toggle="dropdown"ຍັງຕ້ອງການ

ບໍ່ວ່າທ່ານຈະໂທຫາ dropdown ຂອງທ່ານຜ່ານ JavaScript ຫຼືແທນທີ່ຈະໃຊ້ data-api, data-toggle="dropdown"ສະເຫມີຈໍາເປັນຕ້ອງມີຢູ່ໃນອົງປະກອບ trigger ຂອງ dropdown.

ບໍ່ມີ

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

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

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

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.dropdown ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອວິທີການສະແດງຕົວຢ່າງຖືກເອີ້ນ.
show.bs.dropdown ເຫດການນີ້ຖືກຍິງອອກເມື່ອການເລື່ອນລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS, ເພື່ອໃຫ້ສໍາເລັດ).
hide.bs.dropdown ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອວິທີການເຊື່ອງຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.dropdown ເຫດການນີ້ຖືກຍິງອອກໄປເມື່ອການເລື່ອນລົງໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS, ເພື່ອໃຫ້ສໍາເລັດ).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ຕົວຢ່າງໃນ navbar

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

@ໄຂມັນ

ໂຄສະນາ leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ກ່ອນທີ່ພວກເຂົາຈະຂາຍອອກ qui. Tumblr farm-to-table bike rights ໃດກໍ່ຕາມ. ສັດ keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ທີ່ທ່ານອາດຈະບໍ່ເຄີຍໄດ້ຍິນຂອງເຂົາເຈົ້າ et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

skateboard mustache Veniam marfa, adipisicing fugiat velit pitchfork ຈັບຫນວດ. Freegan ຈັບຫນວດ aliqua cupidatat mcsweeney's vero. Cupidatat ສີ່ loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles ການອອກກໍາລັງກາຍທີ່ບໍ່ແມ່ນຄວາມງາມ quis gentrify. Brooklyn adipisicing craft beer ຮອງ keytar deserunt.

ຫນຶ່ງ

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. ສິດທິລົດຖີບ Lomo adipisicing banh mi, velit ea sunt ລະດັບຕໍ່ໄປ locavore ກາເຟຕົ້ນກໍາເນີດດຽວໃນ magna veniam. ຊີວິດສູງ id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS ແມ່ນ adipisicing. Consectetur nisi DIY ຖົງ messenger ຫນ້ອຍ. Cred ex in, sustainable delectus consectetur fanny pack iphone.

ສອງ

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa ໃດກໍ່ຕາມ delectus ລົດອາຫານ. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກມັນ consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ກ່ອນທີ່ພວກເຂົາຈະຂາຍອອກ, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS Chambray Laboris tempor veniam. ສັດ mollit minim commodo ullamco thundercats.

ການ​ນໍາ​ໃຊ້

ຕ້ອງການ Bootstrap nav

ໃນປັດຈຸບັນ Scrollspy ຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ ອົງປະກອບຂອງ Bootstrap nav ສໍາລັບການເນັ້ນທີ່ເຫມາະສົມຂອງການເຊື່ອມຕໍ່ທີ່ມີການເຄື່ອນໄຫວ.

ຕ້ອງການເປົ້າໝາຍ ID ທີ່ສາມາດແກ້ໄຂໄດ້

ລິ້ງ Navbar ຕ້ອງມີເປົ້າໝາຍ id ທີ່ສາມາດແກ້ໄຂໄດ້. ຕົວຢ່າງ, <a href="#home">home</a>ຕ້ອງສອດຄ່ອງກັບບາງສິ່ງບາງຢ່າງໃນ DOM ເຊັ່ນ <div id="home"></div>.

ອົງປະກອບທີ່ ບໍ່ແມ່ນ :visibleເປົ້າໝາຍຖືກລະເລີຍ

ອົງປະກອບເປົ້າໝາຍທີ່ບໍ່ເປັນ :visibleໄປຕາມ jQuery ຈະຖືກລະເລີຍ ແລະລາຍການ nav ທີ່ສອດຄ້ອງກັນຂອງພວກມັນຈະບໍ່ຖືກເນັ້ນໃສ່.

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

ບໍ່ວ່າວິທີການປະຕິບັດ, 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="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ຊົດເຊີຍ ເລກ 10 pixels ທີ່ຈະຊົດເຊີຍຈາກດ້ານເທິງໃນເວລາທີ່ຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ.

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
activate.bs.scrollspy ເຫດການນີ້ຈະດັບໄຟທຸກຄັ້ງທີ່ລາຍການໃໝ່ຖືກເປີດໃຊ້ໂດຍ scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

ແຖບຕົວຢ່າງ

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

denim ດິບ ທີ່ ທ່ານ ອາດ ຈະ ບໍ່ ໄດ້ ຍິນ ຂອງ ເຂົາ ເຈົ້າ jean ສັ້ນ Austin . Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ເຄື່ອງແຕ່ງກາຍອາເມລິກາ, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ຂະຫຍາຍການນຳທາງແບບແຖບ

ປັ໊ກອິນນີ້ຂະຫຍາຍ ອົງປະກອບການນໍາທາງແບບແຖບ ເພື່ອເພີ່ມພື້ນທີ່ທີ່ສາມາດໃສ່ໄດ້.

ການ​ນໍາ​ໃຊ້

ເປີດໃຊ້ແທັບທີ່ສາມາດເປີດໄດ້ຜ່ານ 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ເຫດການຈະບໍ່ຖືກຍິງອອກ.

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.tab ເຫດການນີ້ເລີ່ມເປີດໃນການສະແດງແຖບ, ແຕ່ກ່ອນທີ່ແຖບໃໝ່ຈະຖືກສະແດງ. ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອເປົ້າຫມາຍແຖບທີ່ໃຊ້ວຽກແລະແຖບທີ່ໃຊ້ໄດ້ກ່ອນຫນ້ານີ້ (ຖ້າມີ) ຕາມລໍາດັບ.
show.bs.tab ເຫດການນີ້ຈະເລີ່ມສະແດງໃນແຖບສະແດງຫຼັງຈາກແຖບຖືກສະແດງ. ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອເປົ້າຫມາຍແຖບທີ່ໃຊ້ວຽກແລະແຖບທີ່ໃຊ້ໄດ້ກ່ອນຫນ້ານີ້ (ຖ້າມີ) ຕາມລໍາດັບ.
hide.bs.tab ເຫດການນີ້ຈະດັບໄຟເມື່ອແຖບໃໝ່ຈະຖືກສະແດງ (ແລະດັ່ງນັ້ນແຖບທີ່ເປີດໃຊ້ກ່ອນໜ້າຈະຖືກເຊື່ອງໄວ້). ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ງານໃນປັດຈຸບັນ ແລະແຖບໃໝ່ທີ່ກຳລັງຈະເປີດໃຊ້ໃນໄວໆນີ້, ຕາມລໍາດັບ.
hidden.bs.tab ເຫດການນີ້ໄຟໄຫມ້ຫຼັງຈາກແຖບໃຫມ່ຖືກສະແດງ (ແລະດັ່ງນັ້ນແຖບທີ່ເຮັດວຽກຜ່ານມາຖືກເຊື່ອງໄວ້). ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ວຽກກ່ອນໜ້າ ແລະແຖບທີ່ເຄື່ອນໄຫວໃໝ່ຕາມລຳດັບ.
$('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 ສໍາລັບພາບເຄື່ອນໄຫວ, ແລະຄຸນລັກສະນະຂໍ້ມູນສໍາລັບການເກັບຮັກສາຊື່ທ້ອງຖິ່ນ.

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

ຕົວຢ່າງ

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

ກາງເກງແຫນ້ນລະດັບຕໍ່ໄປ keffiyeh ເຈົ້າອາດຈະ ບໍ່ໄດ້ຍິນກ່ຽວກັບພວກມັນ. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit American apparel ມີ terry richardson vinyl chambray. ໜວດ ມ່າຍ ເຕີ໋ຍ, ກ໊ອງ ບົ໋ວ ມ່າຍ ຢຽດ ເຕົ້າ. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. ຊ່າງຫັດຖະກໍາທີ່ ມີທາດເຫຼັກແທ້ໆອັນ ໃດກໍໄດ້ keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim viral ກາເຟຕົ້ນກໍາເນີດ.

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

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

ສີ່ທິດ

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

ຟັງຊັນເລືອກເຂົ້າ

ສໍາລັບເຫດຜົນດ້ານການປະຕິບັດ, Tooltip ແລະ Popover data-apis ແມ່ນເລືອກເຂົ້າ, ຊຶ່ງຫມາຍຄວາມວ່າ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .

ວິທີໜຶ່ງເພື່ອເລີ່ມຕົ້ນຄຳແນະນຳເຄື່ອງມືທັງໝົດໃນໜ້າໃດໜຶ່ງຈະເປັນການເລືອກພວກມັນຕາມ data-toggleຄຸນລັກສະນະຂອງພວກມັນ:

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

ການເຊື່ອມຕໍ່ຫຼາຍແຖວ

ບາງຄັ້ງທ່ານຕ້ອງການເພີ່ມຄໍາແນະນໍາກັບ hyperlink ທີ່ຫໍ່ຫຼາຍສາຍ. ພຶດຕິກຳເລີ່ມຕົ້ນຂອງປລັກອິນປາຍເຄື່ອງມືແມ່ນການວາງມັນໄວ້ກາງທາງນອນ ແລະແນວຕັ້ງ. ເພີ່ມ white-space: nowrap;ໃສ່ສະມໍຂອງທ່ານເພື່ອຫຼີກເວັ້ນການນີ້.

ຄໍາແນະນໍາເຄື່ອງມືໃນກຸ່ມປຸ່ມ, ກຸ່ມການປ້ອນຂໍ້ມູນ, ແລະຕາຕະລາງຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາກ່ຽວກັບອົງປະກອບພາຍໃນ a .btn-groupຫຼື an .input-group, ຫຼືກ່ຽວກັບອົງປະກອບທີ່ກ່ຽວຂ້ອງກັບຕາຕະລາງ ( <td>, <th>, , <tr>, <thead>, , <tbody>, <tfoot>), ທ່ານຈະຕ້ອງລະບຸທາງເລືອກ container: 'body'(ເອກະສານຂ້າງລຸ່ມນີ້) ເພື່ອຫຼີກເວັ້ນການຜົນຂ້າງຄຽງທີ່ບໍ່ຕ້ອງການ (ເຊັ່ນ: ອົງປະກອບທີ່ຂະຫຍາຍກວ້າງຂຶ້ນແລະ /. ຫຼືສູນເສຍມຸມມົນຂອງມັນເມື່ອຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນ).

ຢ່າພະຍາຍາມສະແດງຄໍາແນະນໍາກ່ຽວກັບອົງປະກອບທີ່ເຊື່ອງໄວ້

ການ $(...).tooltip('show')ເອີ້ນເມື່ອອົງປະກອບເປົ້າໝາຍແມ່ນ display: none;ຈະເຮັດໃຫ້ຄໍາແນະນໍາເຄື່ອງມືຖືກຈັດຕໍາແໜ່ງບໍ່ຖືກຕ້ອງ.

ຄໍາແນະນໍາເຄື່ອງມືທີ່ສາມາດເຂົ້າເຖິງໄດ້ສໍາລັບຜູ້ໃຊ້ແປ້ນພິມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ

ສໍາລັບຜູ້ໃຊ້ທີ່ນໍາທາງດ້ວຍແປ້ນພິມ, ແລະໂດຍສະເພາະຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ທ່ານພຽງແຕ່ຄວນເພີ່ມຄໍາແນະນໍາເຄື່ອງມືໃຫ້ກັບອົງປະກອບທີ່ເນັ້ນໃສ່ແປ້ນພິມເຊັ່ນ: ການເຊື່ອມຕໍ່, ການຄວບຄຸມແບບຟອມ, ຫຼືອົງປະກອບທີ່ກໍານົດເອງທີ່ມີ tabindex="0"ຄຸນລັກສະນະ.

ຄໍາແນະນໍາກ່ຽວກັບອົງປະກອບທີ່ພິການຕ້ອງການອົງປະກອບ wrapper

ເພື່ອເພີ່ມຄໍາແນະນໍາເຄື່ອງມືໃສ່ a disabledຫຼື .disabledອົງປະກອບ, ເອົາອົງປະກອບພາຍໃນຂອງ a <div>ແລະນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືນັ້ນ <div>ແທນ.

ທາງເລືອກ

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

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ການປ່ຽນ CSS ຈືດໆໄປຫາຄຳແນະນຳ
ບັນຈຸ ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ ບໍ່ຖືກຕ້ອງ

ຕື່ມຄໍາແນະນໍາເຄື່ອງມືໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: container: 'body'. ຕົວເລືອກນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະໃນທີ່ມັນອະນຸຍາດໃຫ້ທ່ານຈັດວາງຄໍາແນະນໍາເຄື່ອງມືໃນການໄຫຼເຂົ້າຂອງເອກະສານຢູ່ໃກ້ກັບອົງປະກອບກະຕຸ້ນ - ເຊິ່ງຈະປ້ອງກັນບໍ່ໃຫ້ຄໍາແນະນໍາເຄື່ອງມືຈາກການເລື່ອນອອກຈາກອົງປະກອບກະຕຸ້ນໃນລະຫວ່າງການປັບຂະຫນາດຂອງປ່ອງຢ້ຽມ.

ຊັກຊ້າ ເລກ | ວັດຖຸ 0

ເລື່ອນການສະແດງ ແລະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms) - ບໍ່ໃຊ້ກັບປະເພດຕົວກະຕຸ້ນຄູ່ມື

ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { "show": 500, "hide": 100 }

html ບູລີນ ບໍ່ຖືກຕ້ອງ ໃສ່ HTML ເຂົ້າໄປໃນຄໍາແນະນໍາເຄື່ອງມື. ຖ້າເປັນຜິດ, ວິທີການຂອງ jQuery textຈະຖືກນໍາໃຊ້ເພື່ອໃສ່ເນື້ອຫາເຂົ້າໄປໃນ DOM. ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS.
ການຈັດວາງ ຊ່ອຍແນ່ | ຫນ້າທີ່ 'ເທິງ'

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

ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນດ້ວຍແຖບເຄື່ອງມື DOM node ເປັນອາກິວເມັນທຳອິດຂອງມັນ ແລະອົງປະກອບທີ່ກະຕຸ້ນ DOM node ເປັນອັນທີສອງຂອງມັນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງເຄື່ອງມື.

ໂຕເລືອກ ສາຍ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ເຄື່ອງມືແນະນຳວັດຖຸຈະຖືກມອບໝາຍໃຫ້ເປົ້າໝາຍທີ່ລະບຸໄວ້. ໃນທາງປະຕິບັດ, ນີ້ຖືກນໍາໃຊ້ເພື່ອເປີດໃຊ້ເນື້ອຫາ HTML ແບບເຄື່ອນໄຫວເພື່ອໃຫ້ມີຄໍາແນະນໍາເພີ່ມເຕີມ. ເບິ່ງ ນີ້ ແລະ ຕົວຢ່າງຂໍ້ມູນ .
ແມ່ແບບ ສາຍ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ພື້ນຖານ HTML ທີ່ຈະໃຊ້ໃນເວລາສ້າງຄໍາແນະນໍາເຄື່ອງມື.

ຄໍາແນະນໍາຂອງເຄື່ອງມື titleຈະຖືກສີດເຂົ້າໄປໃນ .tooltip-inner.

.tooltip-arrowຈະກາຍເປັນລູກສອນຂອງຄໍາແນະນໍາ.

ອົງປະກອບ wrapper ຊັ້ນນອກຄວນຈະມີ .tooltipຊັ້ນ.

ຫົວຂໍ້ ຊ່ອຍແນ່ | ຫນ້າທີ່ ''

ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ titleຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນດ້ວຍການ thisອ້າງອິງຂອງມັນກັບອົງປະກອບທີ່ຄໍາແນະນໍາເຄື່ອງມືຕິດຢູ່.

ກະຕຸ້ນ ສາຍ 'ເລື່ອນໂຟກັສ' ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ. manualບໍ່​ສາ​ມາດ​ຖືກ​ລວມ​ເຂົ້າ​ກັບ​ຜົນ​ກະ​ທົບ​ອື່ນໆ​.
ຊ່ອງເບິ່ງ ຊ່ອຍແນ່ | ວັດຖຸ | ຫນ້າທີ່ { ໂຕເລືອກ: 'ຮ່າງກາຍ', padding: 0 }

ຮັກສາຄໍາແນະນໍາເຄື່ອງມືພາຍໃນຂອບເຂດຂອງອົງປະກອບນີ້. ຕົວຢ່າງ: viewport: '#viewport'ຫຼື{ "selector": "#viewport", "padding": 0 }

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຖືກເອີ້ນວ່າ DOM node ອົງປະກອບທີ່ເຮັດໃຫ້ເກີດການໂຕ້ຖຽງເທົ່ານັ້ນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງເຄື່ອງມື.

ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບຄໍາແນະນໍາເຄື່ອງມືສ່ວນບຸກຄົນ

ທາງ​ເລືອກ​ສໍາ​ລັບ​ຄໍາ​ແນະ​ນໍາ​ຂອງ​ບຸກ​ຄົນ​ເປັນ​ທາງ​ເລືອກ​ທີ່​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ລະ​ບຸ​ໂດຍ​ການ​ນໍາ​ໃຊ້​ຄຸນ​ລັກ​ສະ​ນະ​ຂໍ້​ມູນ​, ດັ່ງ​ທີ່​ອະ​ທິ​ບາຍ​ຂ້າງ​ເທິງ​.

ວິທີການ

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

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.tooltip ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
show.bs.tooltip ເຫດການນີ້ຖືກຍິງອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
hide.bs.tooltip ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.tooltip ເຫດການນີ້ຖືກໄລ່ອອກເມື່ອຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລ້ວ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
inserted.bs.tooltip ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກ show.bs.tooltipເຫດການເມື່ອແມ່ແບບຄໍາແນະນໍາເຄື່ອງມືໄດ້ຖືກເພີ່ມໃສ່ DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

ການຂຶ້ນກັບປລັກອິນ

Popovers ຕ້ອງການ plugin ຄໍາແນະນໍາ ເຄື່ອງມື ທີ່ຈະລວມຢູ່ໃນ Bootstrap ຮຸ່ນຂອງທ່ານ.

ຟັງຊັນເລືອກເຂົ້າ

ສໍາລັບເຫດຜົນດ້ານການປະຕິບັດ, Tooltip ແລະ Popover data-apis ແມ່ນເລືອກເຂົ້າ, ຊຶ່ງຫມາຍຄວາມວ່າ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .

ວິທີຫນຶ່ງເພື່ອເລີ່ມຕົ້ນ popovers ທັງຫມົດໃນຫນ້າຫນຶ່ງແມ່ນຈະເລືອກເອົາພວກເຂົາໂດຍ data-toggleຄຸນລັກສະນະຂອງພວກເຂົາ:

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

Popovers ໃນກຸ່ມປຸ່ມ, ກຸ່ມການປ້ອນຂໍ້ມູນ, ແລະຕາຕະລາງຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ເມື່ອໃຊ້ popovers ໃນອົງປະກອບພາຍໃນ a .btn-groupຫຼື an .input-group, ຫຼືໃນອົງປະກອບທີ່ກ່ຽວຂ້ອງກັບຕາຕະລາງ ( <td>, <th>, , <tr>, <thead>, , <tbody>, <tfoot>), ທ່ານຈະຕ້ອງລະບຸທາງເລືອກ container: 'body'(ເອກະສານຂ້າງລຸ່ມນີ້) ເພື່ອຫຼີກເວັ້ນການຜົນຂ້າງຄຽງທີ່ບໍ່ຕ້ອງການ (ເຊັ່ນ: ອົງປະກອບທີ່ຂະຫຍາຍກວ້າງຂຶ້ນແລະ /. ຫຼືສູນເສຍມຸມມົນຂອງມັນເມື່ອ popover ຖືກກະຕຸ້ນ).

ຢ່າພະຍາຍາມສະແດງ popovers ໃນອົງປະກອບທີ່ເຊື່ອງໄວ້

$(...).popover('show')ການ ເອີ້ນເມື່ອອົງປະກອບເປົ້າໝາຍແມ່ນ display: none;ຈະເຮັດໃຫ້ popover ຢູ່ໃນຕຳແໜ່ງບໍ່ຖືກຕ້ອງ .

Popovers ກ່ຽວກັບອົງປະກອບທີ່ພິການຮຽກຮ້ອງໃຫ້ມີອົງປະກອບ wrapper

ເພື່ອເພີ່ມ popover ໃສ່ a disabledຫຼື .disabledອົງປະກອບ, ເອົາອົງປະກອບພາຍໃນຂອງ a <div>ແລະນໍາໃຊ້ popover ໃສ່ນັ້ນ <div>ແທນ.

ການເຊື່ອມຕໍ່ຫຼາຍແຖວ

ບາງຄັ້ງທ່ານຕ້ອງການເພີ່ມ popover ກັບ hyperlink ທີ່ຫໍ່ຫຼາຍສາຍ. ພຶດຕິກຳເລີ່ມຕົ້ນຂອງປລັກອິນ popover ແມ່ນການວາງມັນໄວ້ກາງທາງນອນ ແລະແນວຕັ້ງ. ເພີ່ມ white-space: nowrap;ໃສ່ສະມໍຂອງທ່ານເພື່ອຫຼີກເວັ້ນການນີ້.

ຕົວຢ່າງ

popover ຄົງທີ່

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

Popover ເທິງ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ສິດ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ລຸ່ມ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ຊ້າຍ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ການສາທິດສົດ

<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>ແທັກ, ບໍ່ແມ່ນ ແທັກ <button>, ແລະທ່ານກໍ່ຕ້ອງລວມເອົາ role="button"ແລະ tabindexຄຸນລັກສະນະຕ່າງໆ.

<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="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພາບເຄື່ອນໄຫວ ບູລີນ ຄວາມຈິງ ນຳໃຊ້ CSS ການຫັນປ່ຽນໄປເປັນ popover
ບັນຈຸ ຊ່ອຍແນ່ | ບໍ່ຖືກຕ້ອງ ບໍ່ຖືກຕ້ອງ

ຕື່ມຂໍ້ມູນໃສ່ກັບອົງປະກອບສະເພາະ. ຕົວຢ່າງ: container: 'body'. ທາງເລືອກນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະໃນທີ່ມັນອະນຸຍາດໃຫ້ທ່ານຈັດວາງ popover ໃນການໄຫຼເຂົ້າຂອງເອກະສານຢູ່ໃກ້ກັບອົງປະກອບ triggering - ເຊິ່ງຈະປ້ອງກັນບໍ່ໃຫ້ popover ຈາກການເລື່ອນອອກຈາກອົງປະກອບ triggering ໃນລະຫວ່າງການປັບຂະຫນາດປ່ອງຢ້ຽມ.

ເນື້ອໃນ ຊ່ອຍແນ່ | ຫນ້າທີ່ ''

ຄ່າເນື້ອຫາເລີ່ມຕົ້ນຖ້າ data-contentຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ thisອ້າງອີງໃສ່ອົງປະກອບທີ່ popover ຕິດກັບ.

ຊັກຊ້າ ເລກ | ວັດຖຸ 0

ເລື່ອນການສະແດງ ແລະເຊື່ອງ popover (ms) - ບໍ່ນໍາໃຊ້ກັບປະເພດ trigger ຄູ່ມື

ຖ້າມີຕົວເລກໃຫ້, ການຊັກຊ້າແມ່ນໃຊ້ກັບທັງເຊື່ອງ / ສະແດງ

ໂຄງສ້າງວັດຖຸແມ່ນ:delay: { "show": 500, "hide": 100 }

html ບູລີນ ບໍ່ຖືກຕ້ອງ ໃສ່ HTML ເຂົ້າໄປໃນ popover. ຖ້າເປັນຜິດ, ວິທີການຂອງ jQuery textຈະຖືກນໍາໃຊ້ເພື່ອໃສ່ເນື້ອຫາເຂົ້າໄປໃນ DOM. ໃຊ້ຂໍ້ຄວາມຖ້າທ່ານກັງວົນກ່ຽວກັບການໂຈມຕີ XSS.
ການຈັດວາງ ຊ່ອຍແນ່ | ຫນ້າທີ່ 'ຖືກຕ້ອງ'

ວິທີການຈັດຕໍາແຫນ່ງ popover - ເທິງ | ລຸ່ມ | ຊ້າຍ | ສິດ | ອັດຕະໂນມັດ.
ເມື່ອ "ອັດຕະໂນມັດ" ຖືກລະບຸ, ມັນຈະປ່ຽນການປ່ຽນ popover ແບບໄດນາມິກ. ຕົວຢ່າງ, ຖ້າການຈັດວາງແມ່ນ "ອັດຕະໂນມັດຊ້າຍ", popover ຈະສະແດງໄປທາງຊ້າຍເມື່ອເປັນໄປໄດ້, ຖ້າບໍ່ດັ່ງນັ້ນມັນຈະສະແດງຂວາ.

ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຈັດວາງ, ມັນຖືກເອີ້ນວ່າ popover DOM node ເປັນ argument ທໍາອິດຂອງມັນແລະອົງປະກອບ triggering DOM node ເປັນທີສອງຂອງມັນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງ popover.

ໂຕເລືອກ ສາຍ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ວັດຖຸ popover ຈະຖືກມອບໝາຍໃຫ້ກັບເປົ້າໝາຍທີ່ລະບຸໄວ້. ໃນທາງປະຕິບັດ, ນີ້ຖືກນໍາໃຊ້ເພື່ອເປີດໃຊ້ເນື້ອຫາ HTML ແບບເຄື່ອນໄຫວເພື່ອໃຫ້ມີ popovers ເພີ່ມ. ເບິ່ງ ນີ້ ແລະ ຕົວຢ່າງຂໍ້ມູນ .
ແມ່ແບບ ສາຍ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

ພື້ນຖານ HTML ເພື່ອໃຊ້ໃນເວລາສ້າງ popover.

popover's titleຈະຖືກສີດເຂົ້າໄປໃນ .popover-title.

popover's contentຈະຖືກສີດເຂົ້າໄປໃນ .popover-content.

.arrowຈະກາຍເປັນລູກສອນຂອງ popover.

ອົງປະກອບ wrapper ຊັ້ນນອກຄວນຈະມີ .popoverຊັ້ນ.

ຫົວຂໍ້ ຊ່ອຍແນ່ | ຫນ້າທີ່ ''

ຄ່າເລີ່ມຕົ້ນຂອງຫົວຂໍ້ຖ້າ titleຄຸນສົມບັດບໍ່ມີຢູ່.

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຈະຖືກເອີ້ນໂດຍ thisອ້າງອີງໃສ່ອົງປະກອບທີ່ popover ຕິດກັບ.

ກະຕຸ້ນ ສາຍ 'ຄລິກ' ວິທີການ popover ຖືກກະຕຸ້ນ - ຄລິກ | hover | ສຸມ | ຄູ່ມື. ທ່ານອາດຈະຜ່ານຫຼາຍ triggers; ແຍກພວກມັນດ້ວຍຊ່ອງຫວ່າງ. manualບໍ່​ສາ​ມາດ​ຖືກ​ລວມ​ເຂົ້າ​ກັບ​ຜົນ​ກະ​ທົບ​ອື່ນໆ​.
ຊ່ອງເບິ່ງ ຊ່ອຍແນ່ | ວັດຖຸ | ຫນ້າທີ່ { ໂຕເລືອກ: 'ຮ່າງກາຍ', padding: 0 }

ຮັກສາ popover ພາຍໃນຂອບເຂດຂອງອົງປະກອບນີ້. ຕົວຢ່າງ: viewport: '#viewport'ຫຼື{ "selector": "#viewport", "padding": 0 }

ຖ້າຟັງຊັນຖືກມອບໃຫ້, ມັນຖືກເອີ້ນວ່າ DOM node ອົງປະກອບທີ່ເຮັດໃຫ້ເກີດການໂຕ້ຖຽງເທົ່ານັ້ນ. ສະ thisພາບການຖືກຕັ້ງເປັນຕົວຢ່າງ popover.

ຄຸນລັກສະນະຂໍ້ມູນສໍາລັບ popovers ສ່ວນບຸກຄົນ

ທາງເລືອກສໍາລັບ popovers ສ່ວນບຸກຄົນສາມາດຖືກລະບຸເປັນທາງເລືອກໂດຍຜ່ານການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ, ດັ່ງທີ່ອະທິບາຍຂ້າງເທິງ.

ວິທີການ

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

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.popover ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
show.bs.popover ເຫດການນີ້ຖືກຍິງອອກເມື່ອ popover ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ).
hide.bs.popover ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.popover ເຫດການນີ້ຖືກຍິງອອກເມື່ອ popover ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ).
inserted.bs.popover ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກ show.bs.popoverເຫດການເມື່ອແມ່ແບບ popover ໄດ້ຖືກເພີ່ມໃສ່ DOM.
$('#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 ເປີດເຜີຍເຫດການບາງຢ່າງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງການແຈ້ງເຕືອນ.

ປະເພດເຫດການ ລາຍລະອຽດ
close.bs.alert ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ closeວິທີການຕົວຢ່າງຖືກເອີ້ນ.
closed.bs.alert ເຫດການນີ້ຖືກດັບສູນເມື່ອປິດການແຈ້ງເຕືອນແລ້ວ (ຈະລໍຖ້າການປ່ຽນ CSS ສຳເລັດ).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ປຸ່ມ button.js

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

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ

Firefox ຍັງຄົງຢູ່ໃນຮູບແບບການຄວບຄຸມ (ຄວາມພິການແລະການກວດສອບ) ໃນທົ່ວການໂຫຼດຫນ້າ . ການແກ້ໄຂສໍາລັບການນີ້ແມ່ນການນໍາໃຊ້ autocomplete="off". ເບິ່ງ bug Mozilla #654072 .

ມີລັດ

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

ຄຸນສົມບັດນີ້ຖືກປະຕິເສດຕັ້ງແຕ່ v3.3.5 ແລະຖືກລຶບອອກໃນ v4.

ໃຊ້ລັດໃດກໍໄດ້ຕາມໃຈມັກ!

ສໍາລັບເຫດຜົນຂອງການສາທິດນີ້, ພວກເຮົາກໍາລັງໃຊ້ data-loading-textແລະ $().button('loading'), ແຕ່ວ່າບໍ່ແມ່ນລັດດຽວທີ່ທ່ານສາມາດນໍາໃຊ້. ເບິ່ງເພີ່ມເຕີມກ່ຽວກັບສິ່ງນີ້ຂ້າງລຸ່ມນີ້ໃນ $().button(string)ເອກະສານ .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

ສະຫຼັບດ່ຽວ

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

ຕ້ອງການປຸ່ມສະຫຼັບກ່ອນ.active ແລະaria-pressed="true"

ສໍາລັບປຸ່ມສະຫຼັບກ່ອນ, ທ່ານຕ້ອງເພີ່ມ .activeຊັ້ນຮຽນແລະ aria-pressed="true"ຄຸນລັກສະນະໃຫ້ກັບ ຕົວຂອງ buttonທ່ານເອງ.

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

Checkbox / Radio

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

ຕ້ອງການທາງເລືອກທີ່ເລືອກໄວ້ລ່ວງໜ້າ.active

ສໍາລັບທາງເລືອກທີ່ເລືອກໄວ້ກ່ອນ, ທ່ານຕ້ອງເພີ່ມ .activeຊັ້ນເຂົ້າໃນການປ້ອນຂໍ້ມູນ labelດ້ວຍຕົວເອງ.

Visual checked state ພຽງແຕ່ອັບເດດເມື່ອຄລິກ

ຖ້າສະຖານະທີ່ເລືອກຂອງປຸ່ມ checkbox ໄດ້ຖືກປັບປຸງໂດຍບໍ່ມີການຍິງ clickເຫດການຢູ່ໃນປຸ່ມ (ເຊັ່ນ: ຜ່ານ <input type="reset">ຫຼືຜ່ານການຕັ້ງຄ່າ checkedຄຸນສົມບັດຂອງວັດສະດຸປ້ອນ), ທ່ານຈະຕ້ອງສະຫຼັບ .activeຊັ້ນໃນຕົວປ້ອນຂໍ້ມູນ labelດ້ວຍຕົວເອງ.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> 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" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

ຫຍໍ້ ລົງ collapse.js

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

ການຂຶ້ນກັບປລັກອິນ

ຫຍໍ້ລົງຮຽກຮ້ອງໃຫ້ ປລັກອິນການຫັນປ່ຽນ ຖືກລວມເຂົ້າໃນ Bootstrap ລຸ້ນຂອງທ່ານ.

ຕົວຢ່າງ

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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

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

ສັດ pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. ລົດບັນທຸກອາຫານ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ເອົານົກໃສ່ມັນ squid ກາເຟຕົ້ນກໍາເນີດດຽວ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. ໂຄສະນາ vegan excepteur butcher ຮອງ lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ທ່ານອາດຈະບໍ່ໄດ້ຍິນກ່ຽວກັບພວກເຂົາ accusamus ແຮງງານ VHS ແບບຍືນຍົງ.
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.
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 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.

  • Bootply
  • One itmus ac facilin
  • Second eros

ເຮັດໃຫ້ການຄວບຄຸມການຂະຫຍາຍ/ຫຍໍ້ເຂົ້າໄດ້

ໃຫ້ແນ່ໃຈວ່າເພີ່ມ aria-expandedໃສ່ອົງປະກອບຄວບຄຸມ. ຄຸນລັກສະນະນີ້ກໍານົດຢ່າງຈະແຈ້ງກ່ຽວກັບສະຖານະປັດຈຸບັນຂອງອົງປະກອບທີ່ຫຍໍ້ລົງໄປໃນຫນ້າຈໍຜູ້ອ່ານແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນ. ຖ້າອົງປະກອບທີ່ຍຸບໄດ້ຖືກປິດໂດຍຄ່າເລີ່ມຕົ້ນ, ມັນຄວນຈະມີມູນຄ່າ aria-expanded="false". ຖ້າທ່ານໄດ້ຕັ້ງອົງປະກອບທີ່ສາມາດພັບໄດ້ໃຫ້ເປີດເປັນຄ່າເລີ່ມຕົ້ນໂດຍໃຊ້ inຊັ້ນ, ໃຫ້ຕັ້ງ aria-expanded="true"ໃສ່ຕົວຄວບຄຸມແທນ. ປັ໊ກອິນຈະສະຫຼັບຄຸນສົມບັດນີ້ໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ວ່າອົງປະກອບທີ່ຍຸບໄດ້ເປີດ ຫຼືປິດຫຼືບໍ່.

ນອກຈາກນັ້ນ, ຖ້າອົງປະກອບຄວບຄຸມຂອງທ່ານກໍາລັງຕັ້ງເປົ້າຫມາຍໃສ່ອົງປະກອບທີ່ລົ້ມລົງອັນດຽວ - ເຊັ່ນ: data-targetຄຸນລັກສະນະແມ່ນຊີ້ໄປຫາ idຕົວເລືອກ - ທ່ານອາດຈະເພີ່ມ aria-controlsຄຸນລັກສະນະເພີ່ມເຕີມໃຫ້ກັບອົງປະກອບຄວບຄຸມ, ເຊິ່ງປະກອບດ້ວຍ idອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ເຄື່ອງອ່ານຫນ້າຈໍທີ່ທັນສະໄຫມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນໃຊ້ຄຸນລັກສະນະນີ້ເພື່ອໃຫ້ຜູ້ໃຊ້ມີທາງລັດເພີ່ມເຕີມເພື່ອນໍາທາງໂດຍກົງໄປຫາອົງປະກອບທີ່ລົ້ມລົງເອງ.

ການ​ນໍາ​ໃຊ້

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

  • .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="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ພໍ່ແມ່ ໂຕເລືອກ ບໍ່ຖືກຕ້ອງ ຖ້າຕົວເລືອກຖືກສະໜອງໃຫ້, ອົງປະກອບທີ່ຫຍໍ້ເຂົ້າໄດ້ທັງໝົດພາຍໃຕ້ຫຼັກທີ່ລະບຸໄວ້ຈະຖືກປິດເມື່ອລາຍການທີ່ຫຍໍ້ລົງໄດ້ນີ້ຖືກສະແດງ. (ຄ້າຍ​ຄື​ກັນ​ກັບ​ພຶດ​ຕິ​ກໍາ accordion ພື້ນ​ເມືອງ - ນີ້​ແມ່ນ​ຂຶ້ນ​ກັບ panel​ຫ້ອງ​ຮຽນ​)
ສະຫຼັບ ບູລີນ ຄວາມຈິງ ສະຫຼັບອົງປະກອ���ທີ່ຫຍໍ້ລົງໄດ້ໃນຄຳເຊີນ

ວິທີການ

.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 ເປີດເຜີຍເຫດການບໍ່ຫຼາຍປານໃດສໍາລັບການເຊື່ອມໂຍງກັບຫນ້າທີ່ການລົ້ມລົງ.

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.collapse ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
show.bs.collapse ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບການຫຍໍ້ລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ).
hide.bs.collapse ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ hideວິທີການໄດ້ຖືກເອີ້ນ.
hidden.bs.collapse ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບຫຍໍ້ທໍ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
$('#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 ທາງເລືອກໃດໆພາຍໃນນັ້ນແລະມັນຈະຖືກຈັດຮຽງແລະຈັດຮູບແບບອັດຕະໂນມັດ.

<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="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ໄລຍະຫ່າງ ເລກ 5000 ໄລຍະເວລາທີ່ຈະຊັກຊ້າລະຫວ່າງການຖີບເຄື່ອງອັດຕະໂນມັດ. ຖ້າເປັນຜິດ, carousel ຈະບໍ່ຮອບວຽນອັດຕະໂນມັດ.
ຢຸດ​ຊົ່ວ​ຄາວ ຊ່ອຍແນ່ | null "ເລື່ອນ" ຖ້າຕັ້ງເປັນ "hover", ຢຸດການຂີ່ຈັກຍານຂອງ carousel ໄວ້ຊົ່ວຄາວ mouseenterແລະ ສືບຕໍ່ການຖີບລົດຂອງ carousel ໃນ mouseleave. ຖ້າຕັ້ງເປັນ null, ການເລື່ອນໄປເທິງວົງວຽນຈະບໍ່ຢຸດມັນໄວ້ຊົ່ວຄາວ.
ຫໍ່ ບູລີນ ຄວາມຈິງ ບໍ່ວ່າ carousel ຄວນຮອບວຽນຢ່າງຕໍ່ເນື່ອງ ຫຼືມີການຢຸດຍາກ.
ແປ້ນພິມ ບູລີນ ຄວາມຈິງ ບໍ່ວ່າ carousel ຄວນຕອບສະໜອງຕໍ່ກັບເຫດການແປ້ນພິມ.

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

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

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

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

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

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

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

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

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

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

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

ປະເພດເຫດການ ລາຍລະອຽດ
slide.bs.carousel ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ slideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
slide.bs.carousel ເຫດການນີ້ຈະຖືກດັບໄຟເມື່ອ 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, ເນື່ອງຈາກ bug rendering Safari .

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

plugin affix ສະຫຼັບລະຫວ່າງສາມຊັ້ນຮຽນ, ແຕ່ລະອັນເປັນຕົວແທນຂອງລັດສະເພາະ: .affix, .affix-top, ແລະ .affix-bottom. ທ່ານຕ້ອງສະຫນອງຄໍເຕົ້າໄຂ່ທີ່, ຍົກເວັ້ນ position: fixed;ກ່ຽວກັບການ .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".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ຊົດເຊີຍ ເລກ | ຫນ້າທີ່ | ວັດຖຸ 10 pixels ທີ່ຈະຊົດເຊີຍຈາກຫນ້າຈໍໃນເວລາທີ່ການຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ. ຖ້າມີຕົວເລກດຽວ, ການຊົດເຊີຍຈະຖືກນໍາໃຊ້ໃນທິດທາງທັງເທິງແລະລຸ່ມ. ເພື່ອໃຫ້ເປັນເອກະລັກ, ລຸ່ມແລະເທິງຊົດເຊີຍພຽງແຕ່ໃຫ້ວັດຖຸ offset: { top: 10 }ຫຼື offset: { top: 10, bottom: 5 }. ໃຊ້ຟັງຊັນເມື່ອທ່ານຕ້ອງການຄິດໄລ່ຄ່າຊົດເຊີຍແບບໄດນາມິກ.
ເປົ້າ​ຫມາຍ ຕົວເລືອກ | node | ອົງປະກອບ jQuery ວັດ windowຖຸ ລະບຸອົງປະກອບເປົ້າໝາຍຂອງ affix.

ວິທີການ

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

ປະເພດເຫດການ ລາຍລະອຽດ
affix.bs.affix ເຫດການນີ້ໄຟໄຫມ້ທັນທີກ່ອນທີ່ອົງປະກອບຈະຖືກແກ້ໄຂ.
affixed.bs.affix ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກອົງປະກອບໄດ້ຖືກແກ້ໄຂແລ້ວ.
affix-top.bs.affix ເຫດການນີ້ຈະດັບໄຟທັນທີກ່ອນທີ່ອົງປະກອບຈະຖືກຕິດຢູ່ເທິງສຸດ.
affixed-top.bs.affix ເຫດການນີ້ຖືກໄລ່ອອກຫຼັງຈາກອົງປະກອບຖືກຕິດຢູ່ເທິງສຸດ.
affix-bottom.bs.affix ເຫດການນີ້ຈະດັບໄຟທັນທີກ່ອນທີ່ອົງປະກອບຈະຖືກຕິດຢູ່ດ້ານລຸ່ມ.
affixed-bottom.bs.affix ເຫດການນີ້ແມ່ນຖືກໄລ່ອອກຫຼັງຈາກອົງປະກອບໄດ້ຖືກຕິດຢູ່ດ້ານລຸ່ມ.