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

Plugins ສາມາດຖືກລວມເຂົ້າເປັນສ່ວນບຸກຄົນ (ເຖິງແມ່ນວ່າບາງອັນຕ້ອງຂຶ້ນກັບ), ຫຼືທັງຫມົດໃນເວລາດຽວກັນ. ທັງ bootstrap.js ແລະ bootstrap.min.js ມີປລັກອິນທັງໝົດຢູ່ໃນໄຟລ໌ດຽວ.

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

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

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

$ ( 'ຮ່າງກາຍ' ). ປິດ ( '.data-api' )

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

$ ( 'ຮ່າງກາຍ' ). ປິດ ( '.alert.data-api' )

API ໂປຣແກຣມ

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

$ ( ".btn.danger" ). ປຸ່ມ ( "ສະຫຼັບ" ). addClass ( "ໄຂມັນ" )

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

$ ( "#myModal" ). modal () // ເລີ່ມຕົ້ນດ້ວຍຄ່າເລີ່ມຕົ້ນ                       
$ ( "#myModal" ). modal ({ keyboard : false }) // initialized with no keyboard     
$ ( "#myModal" ). modal ( 'show' ) // initializes ແລະ invokes ສະແດງທັນທີ                

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

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

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

var bootstrapButton = $ . fn _ ປຸ່ມ . noConflict () // ສົ່ງຄືນ $.fn.button ກັບຄ່າທີ່ໄດ້ມອບຫມາຍກ່ອນຫນ້ານີ້ 
$ . fn _ bootstrapBtn = bootstrapButton             // ໃຫ້ $().bootstrapBtn ການທໍາງານຂອງ bootstrap

ເຫດການ

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

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

$ ( '#myModal' ). on ( 'ສະແດງ' , function ( e ) {   
    ຖ້າ (! data ) ກັບຄືນ e . PreventDefault () // ຢຸດ modal ຈາກການສະແດງ   
})

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

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

ກໍລະນີທີ່ໃຊ້

ບາງຕົວຢ່າງຂອງ plugin ການປ່ຽນແປງ:

• ເລື່ອນ ຫຼື fading ໃນ modals
• ແຖບ​ທີ່​ຂາດ​ໄປ​
• ການແຈ້ງເຕືອນຫາຍໄປ
• ແຖບເລື່ອນເລື່ອນ

ຕົວຢ່າງ

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

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

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

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <ປຸ່ມ type = "ປຸ່ມ" class = "ປິດ" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> ສ່ວນຫົວໂມດູນ </h3>
  </div>
  <div class = "modal-body" > 
    <p> ຮ່າງກາຍອັນໜຶ່ງອັນດີ… </p>
  </div>
  <div class = "modal-footer" > 
    <a href="#" class="btn"> ປິດ </a> _ _ _ _ _  
    <a href="#" class="btn btn-primary"> ບັນ ທຶກ ການ ປ່ຽນ ແປງ </a>  
  </div>
</div>

ການສາທິດສົດ

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

<!-- ປຸ່ມເພື່ອກະຕຸ້ນ modal -->
<a href="#myModal" role="button" class="btn" data-toggle = "modal"> ເປີດ ຕົວ ໂມ ດູນ ສາ ທິດ </a> _ _    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ຮ່າງກາຍອັນໜຶ່ງອັນດີ… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ປິດ </button>   
    <button class = "btn btn-primary" > ບັນທຶກການປ່ຽນແປງ </button> 
  </div>
</div>

ການ​ນໍາ​ໃຊ້

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

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

<button type = "button" data-toggle = "modal" data-target = "#myModal" > ເປີດຕົວ ໂມດູນ </button>   

ຜ່ານ JavaScript

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

$ ( '#myModal' ). modal ( ທາງ​ເລືອກ ​)

ທາງເລືອກ

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

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

ວິທີການ

.modal(ທາງເລືອກ)

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

$ ( '#myModal' ). modal ({
  ແປ້ນພິມ : false 
})

.modal('ສະຫຼັບ')

ສະຫຼັບ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ສະຫຼັບ' )

.modal('ສະແດງ')

ເປີດ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ສະແດງ' )

.modal('ເຊື່ອງ')

ເຊື່ອງ modal ດ້ວຍຕົນເອງ.

$ ( '#myModal' ). modal ( 'ເຊື່ອງ' )

ເຫດການ

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

$ ( '#myModal' ). on ( 'ເຊື່ອງໄວ້' , function () {   
  // ເຮັດຫຍັງ...
})

ຕົວຢ່າງ

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

ພາຍໃນແຖບ navbar

ພາຍໃນແຖບ

ການ​ນໍາ​ໃຊ້

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

ເພີ່ມ data-toggle="dropdown"ໃສ່ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບການເລື່ອນລົງ.

<div class = "dropdown" > 
  <a class="dropdown-toggle" data-toggle = "dropdown" href="#"> ຕົວ ກະ ຕຸ້ນ ແບບ ເລື່ອນ ລົງ </a>   
  <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ເພື່ອຮັກສາ URLs ໄວ້, ໃຫ້ໃຊ້ data-targetຄຸນສົມບັດແທນ href="#".

<div class = "dropdown" > 
  <a class="dropdown-toggle" id = "dLabel" ບົດບາດ = "ປຸ່ມ" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _ _ _      
    ເລື່ອນລົງ
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ຜ່ານ JavaScript

ໂທຫາ dropdowns ຜ່ານ JavaScript:

$ ( '.dropdown-toggle' ). ເລື່ອນລົງ ()

ທາງເລືອກ

ບໍ່ມີ

ວິທີການ

$().dropdown('toggle')

api ທີ່ເປັນໂປຣແກຣມສໍາລັບການສະຫຼັບເມນູສໍາລັບແຖບ navbar ຫຼືແຖບນໍາທາງທີ່ລະບຸ.

ຕົວຢ່າງໃນ navbar

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

ການ​ນໍາ​ໃຊ້

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

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ໃນ​ການ​ນໍາ​ທາງ topbar ຂອງ​ທ່ານ, ພຽງ​ແຕ່​ເພີ່ມ data-spy="scroll"​ໃສ່​ອົງ​ປະ​ກອບ​ທີ່​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ spy ກ່ຽວ​ກັບ (ໂດຍ​ທົ່ວ​ໄປ​ນີ້​ຈະ​ເປັນ​ຮ່າງ​ກາຍ) ແລະ data-target=".navbar"​ເພື່ອ​ເລືອກ​ເອົາ navigation ໃດ​ທີ່​ຈະ​ນໍາ​ໃຊ້. ທ່ານ​ຈະ​ຕ້ອງ​ການ​ນໍາ​ໃຊ້ scrollspy ກັບ .nav​ອົງ​ປະ​ກອບ​.

<body data-spy = "ເລື່ອນ" data-target = ".navbar" > ... </body>  

ຜ່ານ JavaScript

ໂທຫາ scrollspy ຜ່ານ JavaScript:

$ ( '#navbar' ). scrollspy ()

ວິທີການ

.scrollspy('ໂຫຼດຫນ້າຈໍຄືນ')

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

$ ( '[data-spy="scroll"]' ). ແຕ່ລະ ( ຟັງຊັນ () {  
  var $spy = $ ( ນີ້ ). scrollspy ( 'ໂຫຼດຫນ້າຈໍຄືນ' )
});

ທາງເລືອກ

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

ເຫດການ

ແຖບຕົວຢ່າງ

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

ການ​ນໍາ​ໃຊ້

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

$ ( '#myTab a' ). ຄລິກ ( ຟັງຊັນ ( e ) {  
  e . PreventDefault ();
  $ ( ນີ້ ). tab ( 'ສະແດງ' );
})

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບໂດຍຊື່ 
$ ( '#myTab a:first' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບທໍາອິດ 
$ ( '#myTab a:last' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບສຸດທ້າຍ 
$ ( '#myTab li:eq(2) a' ). tab ( 'ສະແດງ' ); // ເລືອກແຖບທີສາມ (0-indexed) 

ມາກອັບ

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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> ໜ້າ ຫຼັກ </a> </li>  
  <li><a href = "#profile" data-toggle = "tab">ໂປຣໄຟລ໌ </a> </li >  
  <li><a href = "#messages" data-toggle = "tab"> ຂໍ້ຄວາມ </a> </li>  
  <li><a href = "#settings" data-toggle = "tab"> ການ ຕັ້ງຄ່າ </a></li>  
</ul>

ວິທີການ

$().tab

ເປີດໃຊ້ອົງປະກອບແຖບ ແລະຕົວບັນຈຸເນື້ອຫາ. ແຖບຄວນຈະມີ data-targetຫຼືການ hrefກໍາຫນົດເປົ້າຫມາຍ node container ໃນ DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href="#home"> ເຮືອນ </a> </li >  
  <li><a href="#profile"> ໂປຣ ໄຟລ໌ </a> < /li> 
  <li > <a href = "#messages"> ຂໍ້ຄວາມ </a></li> 
  <li><a href = "#settings"> ການ ຕັ້ງຄ່າ </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "ຂໍ້ຄວາມ" > ... </div>  
  <div class = "tab-pane" id = "ການຕັ້ງຄ່າ" > ... </div>  
</div>
 
<script>
  $ ( ຟັງຊັນ () {  
    $ ( '#myTab a:last' ). tab ( 'ສະແດງ' );
  })
</script>

ເຫດການ

$ ( 'a[data-toggle="tab"]' ). on ( 'ສະແດງ' , function ( e ) {   
  e . ເປົ້າໝາຍ // ແຖບເປີດໃຊ້ງານ
  e . ເປົ້າໝາຍທີ່ກ່ຽວຂ້ອງ // ແຖບກ່ອນໜ້າ
})

ຕົວຢ່າງ

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

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

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

ສີ່ທິດ

ຄຳແນະນຳໃນກຸ່ມການປ້ອນຂໍ້ມູນ

ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືແລະ popovers ກັບກຸ່ມການປ້ອນ Bootstrap, ທ່ານຈະຕ້ອງກໍານົດທາງເລືອກ container(ເອກະສານຂ້າງລຸ່ມນີ້) ເພື່ອຫຼີກເວັ້ນການຜົນຂ້າງຄຽງທີ່ບໍ່ຕ້ອງການ.

ການ​ນໍາ​ໃຊ້

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

$ ( '#ຕົວຢ່າງ' ). ຄຳແນະນຳ ( ຕົວເລືອກ )

ທາງເລືອກ

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

ມາກອັບ

<a href="#" data-toggle = "tooltip" title="ຄໍາແນະນໍາເຄື່ອງມືທໍາອິດ" > hover over me </a> _ _   

ວິທີການ

$().tooltip(ທາງເລືອກ)

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

.tooltip('show')

ເປີດເຜີຍຄໍາແນະນໍາຂອງອົງປະກອບ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ສະແດງ' )

.tooltip('ເຊື່ອງ')

ເຊື່ອງຄໍາແນະນໍາຂອງອົງປະກອບ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ເຊື່ອງ' )

.tooltip('ສະຫຼັບ')

ສະຫຼັບຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ.

$ ( '#element' ). ຄຳແນະນຳ ( 'ສະຫຼັບ' )

.tooltip('ທໍາລາຍ')

ເຊື່ອງ ແລະທຳລາຍຄຳແນະນຳຂອງອົງປະກອບໃດໜຶ່ງ.

$ ( '#element' ). ຄໍາແນະນໍາ ( 'ທໍາລາຍ' )

ຕົວຢ່າງ

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

popover ຄົງທີ່

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

ບໍ່ມີເຄື່ອງໝາຍທີ່ສະແດງເປັນ popovers ຖືກສ້າງຂຶ້ນຈາກ JavaScript ແລະເນື້ອຫາພາຍໃນ dataຄຸນສົມບັດ.

ການສາທິດສົດ

ສີ່ທິດ

ການ​ນໍາ​ໃຊ້

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

$ ( '#ຕົວຢ່າງ' ). popover ( ທາງເລືອກ )

ທາງເລືອກ

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

ມາກອັບ

ສໍາລັບເຫດຜົນດ້ານປະສິດທິພາບ, Tooltip ແລະ Popover data-apis ຈະຖືກເລືອກເຂົ້າ. ຖ້າທ່ານຕ້ອງການໃຊ້ພວກມັນພຽງແຕ່ລະບຸຕົວເລືອກຕົວເລືອກ.

ວິທີການ

$().popover(ຕົວເລືອກ)

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

.popover('ສະແດງ')

ເປີດເຜີຍອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ສະແດງ' )

.popover('ເຊື່ອງ')

ເຊື່ອງອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ເຊື່ອງ' )

.popover('ສະຫຼັບ')

ສະຫຼັບອົງປະກອບ popover.

$ ( '#element' ). popover ( 'ສະຫຼັບ' )

.popover('ທໍາລາຍ')

ເຊື່ອງ ແລະທຳລາຍການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ.

$ ( '#element' ). popover ( 'ທໍາລາຍ' )

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

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

ການ​ນໍາ​ໃຊ້

ເປີດໃຊ້ການຍົກເລີກການແຈ້ງເຕືອນຜ່ານ JavaScript:

$ ( ".alert" ). ເຕືອນ ()

ມາກອັບ

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

<a class = "ປິດ" data-dismiss = "ເຕືອນ" href = "#" > × </a>   

ວິທີການ

$().alert()

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

.alert('ປິດ')

ປິດການແຈ້ງເຕືອນ.

$ ( ".alert" ). ເຕືອນ ( 'ປິດ' )

ເຫດການ

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

$ ( '#my-alert' ). bind ( 'ປິດ' , function () {   
  // ເຮັດຫຍັງ...
})

ຕົວຢ່າງການນໍາໃຊ້

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

ມີລັດ

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

<button type = "button" class = "btn btn-primary" data-loading-text = "ກຳລັງໂຫລດ..." > ສະຖານະ ກຳລັງໂຫຼດ </button>   

ສະຫຼັບດ່ຽວ

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

<button type = "button" class = "btn btn-primary" data-toggle = "button" > ປິດ/ເປີດ ດ່ຽວ </button>   

ປ່ອງໝາຍ

ເພີ່ມການ data-toggle="buttons-checkbox"ສະຫຼັບຮູບແບບກ່ອງກາໝາຍໃສ່ໃນກຸ່ມ btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <ປຸ່ມ type = "button" class = "btn btn-primary" > ຊ້າຍ </button>  
  <button type = "button" class = "btn btn-primary" > ກາງ </button>  
  <button type = "button" class = "btn btn-primary" > ຂວາ </button>  
</div>

ວິທະຍຸ

ເພີ່ມການ data-toggle="buttons-radio"ສະຫຼັບຮູບແບບວິທະຍຸຢູ່ໃນກຸ່ມ btn.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <ປຸ່ມ type = "button" class = "btn btn-primary" > ຊ້າຍ </button>  
  <button type = "button" class = "btn btn-primary" > ກາງ </button>  
  <button type = "button" class = "btn btn-primary" > ຂວາ </button>  
</div>

ການ​ນໍາ​ໃຊ້

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

$ ( '.nav-tabs' ). ປຸ່ມ ()

ມາກອັບ

ຄຸນລັກສະນະຂອງຂໍ້ມູນແມ່ນລວມເຂົ້າກັບ plugin ປຸ່ມ. ກວດເບິ່ງລະຫັດຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບປະເພດເຄື່ອງຫມາຍຕ່າງໆ.

ທາງເລືອກ

ບໍ່ມີ

ວິທີການ

$().button('toggle')

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('loading')

ຕັ້ງສະຖານະປຸ່ມເປັນການໂຫຼດ - ປິດການໃຊ້ງານປຸ່ມ ແລະປ່ຽນຂໍ້ຄວາມເປັນການໂຫຼດຂໍ້ຄວາມ. ການໂຫຼດຂໍ້ຄວາມຄວນຖືກກໍານົດຢູ່ໃນອົງປະກອບຂອງປຸ່ມໂດຍໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ກຳລັງໂຫຼດ..." > ... </button>    

$().button('reset')

ຣີເຊັດສະຖານະປຸ່ມ - ປ່ຽນຂໍ້ຄວາມເປັນຂໍ້ຄວາມຕົ້ນສະບັບ.

$().button(string)

ຣີເຊັດສະຖານະປຸ່ມ - ສະຫຼັບຂໍ້ຄວາມໄປຫາຂໍ້ມູນໃດໆກໍຕາມທີ່ກຳນົດສະຖານະຂໍ້ຄວາມ.

<button type = "button" class = "btn" data-complete-text = "ສຳເລັດແລ້ວ!" > ... </button>    
<script>
  $ ( '.btn' ). ປຸ່ມ ( 'ສໍາເລັດ' )
</script>

ກ່ຽວກັບ

ຮັບເອົາຮູບແບບພື້ນຖານ ແລະການສະຫນັບສະຫນູນທີ່ຍືດຫຍຸ່ນສໍາລັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເຊັ່ນ: accordions ແລະການນໍາທາງ.

* ຮຽກຮ້ອງໃຫ້ປລັກອິນ Transitions ຖືກລວມເຂົ້າ.

ຕົວຢ່າງ accordion

ການນໍາໃຊ້ plugin ຍຸບ, ພວກເຮົາໄດ້ສ້າງ widget ແບບ accordion ງ່າຍດາຍ:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ຍຸບ" data-parent = "#accordion2" href = "#collapseOne"> _ _ _    
        ລາຍການກຸ່ມທີ່ຫຍໍ້ເຂົ້າໄດ້ #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        ສັດສ່ວນກາງ cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ລົ້ມ" data-parent = "#accordion2" href = "#collapseTwo"> _ _ _    
        ລາຍການກຸ່ມທີ່ຫຍໍ້ເຂົ້າໄດ້ #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        ສັດສ່ວນກາງ cliche...
      </div>
    </div>
  </div>
</div>
...

ທ່ານຍັງສາມາດໃຊ້ plugin ໂດຍບໍ່ມີເຄື່ອງຫມາຍ accordion. ສ້າງປຸ່ມສະຫຼັບການຂະຫຍາຍ ແລະຍຸບຂອງອົງປະກອບອື່ນ.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  ຍຸບງ່າຍ
</button>
 
<div id = "ສາທິດ" class = "ຫຍໍ້ເຂົ້າ" > … </div>  

ການ​ນໍາ​ໃຊ້

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

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

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

ຜ່ານ JavaScript

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

$ ( ".ລົ້ມລົງ" ). ຍຸບ ()

ທາງເລືອກ

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

ວິທີການ

.collapse(ຕົວເລືອກ)

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

$ ( '#myCollapsible' ). ຍຸບ ({
  ສະຫຼັບ : ບໍ່ຖືກຕ້ອງ 
})

.collapse('ສະຫຼັບ')

ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເພື່ອສະແດງ ຫຼືເຊື່ອງໄວ້.

.collapse('show')

ສະແດງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້.

.collapse('ເຊື່ອງ')

ເຊື່ອງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້.

ເຫດການ

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

$ ( '#myCollapsible' ). on ( 'ເຊື່ອງໄວ້' , function () {   
  // ເຮັດຫຍັງ...
})

ຕົວຢ່າງ carousel

slideshow ຂ້າງລຸ່ມນີ້ສະແດງໃຫ້ເຫັນ plugin ທົ່ວໄປແລະອົງປະກອບສໍາລັບການຖີບຜ່ານອົງປະກອບເຊັ່ນ carousel.

ປ້າຍກຳກັບຮູບຕົວຢ່າງທຳອິດ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ປ້າຍກຳກັບຮູບຕົວຢ່າງທີສອງ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ປ້າຍກຳກັບຮູບຕົວຢ່າງອັນທີສາມ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "ເລື່ອນ carousel" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- ລາຍການ Carousel -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ການ​ນໍາ​ໃຊ້

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

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

ຜ່ານ JavaScript

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

$ ( '.carousel' ). ວົງວຽນ ()

ທາງເລືອກ

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

ວິທີການ

.carousel(ຕົວເລືອກ)

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

$ ( '.carousel' ). ວົງວຽນ ({
  ໄລຍະຫ່າງ : 2000 
})

.carousel('ວົງຈອນ')

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

.carousel('ຢຸດ')

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

.carousel(ຕົວເລກ)

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

.carousel('ກ່ອນໜ້າ')

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

.carousel('ຖັດໄປ')

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

ເຫດການ

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

ຕົວຢ່າງ

ປັ໊ກອິນພື້ນຖານ, ຂະຫຍາຍໄດ້ງ່າຍສໍາລັບການສ້າງຕົວພິມທີ່ສະຫງ່າງາມຢ່າງໄວວາດ້ວຍການປ້ອນຂໍ້ຄວາມແບບຟອມໃດໆ.

<ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" data-provide = "typeahead" >  

ທ່ານ​ຈະ​ຕ້ອງ​ການ​ທີ່​ຈະ​ກໍາ​ນົດ autocomplete="off"​ເພື່ອ​ປ້ອງ​ກັນ​ບໍ່​ໃຫ້​ເມ​ນູ​ຂອງ​ຕົວ​ທ່ອງ​ເວັບ​ເລີ່ມ​ຕົ້ນ​ຈາກ​ການ​ປາ​ກົດ​ຢູ່​ຂ້າງ​ເທິງ Bootstrap typeahead dropdown​.

ການ​ນໍາ​ໃຊ້

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

ເພີ່ມຄຸນລັກສະນະຂອງຂໍ້ມູນເພື່ອລົງທະບຽນອົງປະກອບທີ່ມີຟັງຊັນ typeahead ດັ່ງທີ່ສະແດງຢູ່ໃນຕົວຢ່າງຂ້າງເທິງ.

ຜ່ານ JavaScript

ໂທຫາຕົວພິມຫົວດ້ວຍຕົນເອງດ້ວຍ:

$ ( '.typeahead' ). ພິມໜ້າ ()

ທາງເລືອກ

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

ວິທີການ

.typeahead(ຕົວເລືອກ)

ເລີ່ມຕົ້ນການປ້ອນຂໍ້ມູນດ້ວຍຕົວພິມກ່ອນ.

ຕົວຢ່າງ

subnavigation ຢູ່ເບື້ອງຊ້າຍເປັນຕົວຢ່າງສົດຂອງ plugin affix.

ການ​ນໍາ​ໃຊ້

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

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

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

ຜ່ານ JavaScript

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

$ ( '#navbar' ). ຕິດ ()

ທາງເລືອກ

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