ປັ໊ກອິນ Modal ຂອງພວກເຮົາເປັນ plugin js modal ແບບດັ້ງເດີມທີ່ກະທັດຮັດທີ່ສຸດ, ເອົາໃຈໃສ່ເປັນພິເສດທີ່ຈະລວມເອົາພຽງແຕ່ຫນ້າທີ່ເປົ່າທີ່ພວກເຮົາຕ້ອງການຢູ່ທີ່ນີ້ໃນ twitter.

ດາວໂຫຼດ

ໃຊ້ bootstrap-modal

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

ທາງເລືອກ

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

ມາກອັບ

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

<a class="btn" data-controls-modal = "my-modal" data-backdrop = "static"> ເປີດ ຕົວ ໂມ ດູນ </a>    

ແຈ້ງການ ຖ້າຫາກວ່າທ່ານຕ້ອງການ modal ຂອງທ່ານມີການເຄື່ອນໄຫວໃນແລະອອກ, ພຽງແຕ່ເພີ່ມ .fadeຫ້ອງຮຽນກັບ .modalອົງປະກອບຂອງທ່ານ (ເບິ່ງການສາທິດເພື່ອເບິ່ງນີ້ຢູ່ໃນການປະຕິບັດ).

ວິທີການ

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

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

$ ( '#my-modal' ). modal ({
  ແປ້ນ​ພິມ ​: ຄວາມ​ຈິງ 
})

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

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

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

.modal('ສະແດງ')

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

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

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

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

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

.modal(ຈິງ)

ໃຫ້ຜົນເປັນອົງປະກອບ modal class instance.

$ ( '#my-modal' ). modal ( ຈິງ )

ສັງ​ເກດ​ເຫັນ ​ທາງ​ເລືອກ​, ນີ້​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ດຶງ​ຂໍ້​ມູນ​ດ້ວຍ $().data('modal').

ເຫດການ

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

ເຫດການ	ລາຍລະອຽດ
ສະແດງໃຫ້ເຫັນ	ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ສະແດງໃຫ້ເຫັນ	ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ).
ເຊື່ອງ	ເຫດການນີ້ຈະຖືກຍິງທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
ເຊື່ອງໄວ້	ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ css ສໍາເລັດ).

$ ( '#my-modal' ). bind ( 'ເຊື່ອງ' , function () {   
  // ເຮັດຫຍັງ...
})

ສາທິດ

ເປີດຕົວ Modal

ປັ໊ກອິນນີ້ແມ່ນສໍາລັບການເພີ່ມການໂຕ້ຕອບແບບເລື່ອນລົງໃສ່ແຖບ bootstrap topbar ຫຼືແຖບນໍາທາງ.

ດາວໂຫຼດ

ການໃຊ້ bootstrap-dropdown.js

$ ( '#topbar' ). ເລື່ອນລົງ ()

ມາກອັບ

ເພື່ອເພີ່ມຟັງຊັນແບບເລື່ອນລົງໃສ່ອົງປະກອບ nav ໃດກໍ່ຕາມ, ໃຫ້ໃຊ້ data-dropdownຄຸນສົມບັດ. ທຸກໆ dropdown bootstrap ທີ່ຖືກຕ້ອງຈະຖືກເປີດໃຊ້ໂດຍອັດຕະໂນມັດ.

<ul class = "tabs" > 
  <li class = "active" > <a href="#"> ເຮືອນ </a> </li >  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href="#" class="dropdown-toggle"> ເລື່ອນ ລົງ </a> _ _ _ _  
    <ul class = "dropdown-menu" > 
      <li > <a href = "#"> ລິ້ງ ຮອງ </a></li> 
      <li > <a href = "#"> ອັນ ອື່ນຢູ່ນີ້ </a></li> 
      <li class = "divider" ></li> 
      <li > <a href = "#"> ລິ້ງ ອື່ນ </a></li> 
    </ul>
  </li>
</ul>

ແຈ້ງການ ຖ້າ ui ຂອງທ່ານມີຫຼາຍ dropdowns, ພິຈາລະນາເພີ່ມ data-dropdownຄຸນລັກສະນະຂອງອົງປະກອບບັນຈຸທີ່ສໍາຄັນເຊັ່ນ .tabsຫຼື .topbar.

ວິທີການ

$().dropdown()

api ທີ່ເປັນໂປຼແກຼມສໍາລັບການເປີດໃຊ້ເມນູສໍາລັບແຖບເທິງຫຼືແຖບນໍາທາງທີ່ລະບຸ.

ສາທິດ

ປັ໊ກອິນນີ້ແມ່ນສໍາລັບການເພີ່ມປະຕິສໍາພັນຂອງ scrollspy (ການປັບປຸງອັດຕະໂນມັດ nav) ກັບແຖບດ້ານເທິງຂອງ bootstrap.

ດາວໂຫຼດ

ການນໍາໃຊ້ bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

ມາກອັບ

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ກັບ nav ຂອງ​ທ່ານ​ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ, ພຽງ​ແຕ່​ເພີ່ມ data-scrollspy​ຄຸນ​ລັກ​ສະ​ນະ​ຂອງ .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

ວິທີການ

$().scrollSpy()

ອັດຕະໂນມັດເປີດໃຊ້ປຸ່ມນໍາທາງໂດຍຜູ້ໃຊ້ເລື່ອນຕໍາແຫນ່ງ.

$ ( 'ຮ່າງກາຍ> .topbar' ). scrollSpy ()

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

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

scrollspy caches nav ປຸ່ມແລະສ່ວນປະສານງານສໍາລັບການປະຕິບັດ. ຖ້າທ່ານຕ້ອງການປັບປຸງ cache ນີ້ (ອາດຈະເປັນວ່າທ່ານມີເນື້ອຫາແບບເຄື່ອນໄຫວ) ພຽງແຕ່ໂທຫາວິທີການໂຫຼດຫນ້າຈໍຄືນນີ້. ຖ້າທ່ານໃຊ້ຄຸນລັກສະນະຂໍ້ມູນເພື່ອກໍານົດ scrollspy ຂອງທ່ານ, ພຽງແຕ່ໂທຫາ refresh ກ່ຽວກັບຮ່າງກາຍ.

$ ( 'ຮ່າງກາຍ' ). scrollSpy ( 'ໂຫຼດ​ຫນ້າ​ຈໍ​ຄືນ​' )

ສາທິດ

ກວດເບິ່ງການນຳທາງແຖບເທິງສຸດໃນໜ້ານີ້.

plugin ນີ້ສະຫນອງການທໍາງານເພີ່ມເຕີມສໍາລັບການຄຸ້ມຄອງສະຖານະປຸ່ມ.

ດາວໂຫຼດ

ການໃຊ້ bootstrap-buttons.js

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

ວິທີການ

$().button('toggle')

ສະຫຼັບສະຖານະ push. ໃຫ້ btn ເບິ່ງວ່າມັນໄດ້ຖືກເປີດໃຊ້.

ສັງ​ເກດ ​ທ່ານ​ສາ​ມາດ​ເປີດ​ໃຊ້​ງານ​ການ​ສ��​ຫຼັບ​ປຸ່ມ​ອັດ​ຕະ​ໂນ​ມັດ​ໂດຍ​ການ​ນໍາ​ໃຊ້ data-toggle​ຄຸນ​ລັກ​ສະ​ນະ​.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('loading')

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

<button class = "btn" data-loading-text = "ກຳລັງໂຫຼດຂໍ້ມູນ..." > ... </button>   

$().button('reset')

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

$().button(string)

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

<button class = "btn" data-complete-text = "ສຳເລັດແລ້ວ!" > ... </button>   
<script>
  $('.btn').button('complete')
</scrip>

ສາທິດ

ກຳລັງໂຫຼດຕົວຢ່າງ ສະຫຼັບສາທິດ

ປັ໊ກອິນນີ້ເພີ່ມແທັບໄວ, ແບບເຄື່ອນໄຫວແລະການເຮັດວຽກຂອງຢາ.

ດາວໂຫຼດ

ການໃຊ້ bootstrap-tabs.js

$ ( '.tabs' ). ແຖບ ()

ມາກອັບ

ທ່ານ​ສາ​ມາດ​ກະ​ຕຸ້ນ​ການ​ນໍາ​ທາງ​ແຖບ​ຫຼື​ຢາ​ໂດຍ​ບໍ່​ມີ​ການ​ຂຽນ javascript ໃດ​ໂດຍ​ພຽງ​ແຕ່​ໃຫ້​ເຂົາ​ເຈົ້າ data-tabs​ຫຼື data-pills​ຄຸນ​ລັກ​ສະ​ນະ​.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

ວິທີການ

$().tabs ຫຼື $().pills

ເປີດໃຊ້ການທໍາງານຂອງແທັບ ແລະຢາສໍາລັບພາຊະນະທີ່ໃຫ້ໄວ້. ລິ້ງແຖບຄວນອ້າງອີງ ids ໃນເອກະສານ.

<ul class = "tabs" > 
  <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 = "pill-content" > 
  <div class = "active" id = "ເຮືອນ" > ... </div>  
  <div id = "ໂປຣໄຟລ໌" > ... </div> 
  <div id = "ຂໍ້ຄວາມ" > ... </div> 
  <div id = "ການຕັ້ງຄ່າ" > ... </div> 
</div>
 
<script>
  $ ( ຟັງຊັນ () {  
    $ ( '.tabs' ). ແຖບ ()
  })
</script>

ເຫດການ

ເຫດການ	ລາຍລະອຽດ
ການປ່ຽນແປງ	ເຫດການນີ້ເລີ່ມເກີດການປ່ຽນແປງແຖບ. ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອແນເປົ້າໃສ່ແຖບທີ່ໃຊ້ວຽກ ແລະແຖບທີ່ໃຊ້ວຽກກ່ອນໜ້າຕາມລຳດັບ.

$ ( '#.tabs' ). bind ( 'ປ່ຽນ' , function ( e ) {   
  e . ເປົ້າໝາຍ // ແຖບເປີດໃຊ້ງານ
  e . ເປົ້າໝາຍທີ່ກ່ຽວຂ້ອງ // ແຖບກ່ອນໜ້າ
})

ສາທິດ

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ
• ການຕັ້ງຄ່າ
• ເລື່ອນລົງ
  • @ໄຂມັນ
  • @mdo

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

ດາວໂຫຼດ

ການໃຊ້ bootstrap-twipsy.js

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

ທາງເລືອກ

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
ສັດ	ບູລີນ	ຄວາມຈິງ	ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ
ຊັກຊ້າໃນ	ເລກ	0	ການຊັກຊ້າກ່ອນທີ່ຈະສະແດງຄໍາແນະນໍາເຄື່ອງມື (ms)
ຊັກຊ້າ	ເລກ	0	ການຊັກຊ້າກ່ອນທີ່ຈະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms)
ຜົນຕອບແທນ	ສາຍ	''	ຂໍ້ຄວາມທີ່ຈະໃຊ້ໃນເວລາທີ່ບໍ່ມີຊື່ຄໍາແນະນໍາເຄື່ອງມື
ການຈັດວາງ	ສາຍ	'ຂ້າງເທິງ'	ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ຂ້າງເທິງ | ຂ້າງລຸ່ມນີ້ | ຊ້າຍ | ຖືກຕ້ອງ
html	ບູລີນ	ບໍ່ຖືກຕ້ອງ	ອະນຸຍາດໃຫ້ເນື້ອຫາ html ພາຍໃນຄໍາແນະນໍາເຄື່ອງມື
ດໍາລົງຊີວິດ	ບູລີນ	ບໍ່ຖືກຕ້ອງ	ໃຊ້ການມອບໝາຍເຫດການແທນຕົວຈັດການເຫດການສ່ວນບຸກຄົນ
ຊົດເຊີຍ	ເລກ	0	pixel offset ຂອງຄໍາແນະນໍາເຄື່ອງມືຈາກອົງປະກອບເປົ້າຫມາຍ
ຫົວຂໍ້	string, function	'ຫົວຂໍ້'	ຄຸນລັກສະນະຫຼືວິທີການດຶງຂໍ້ຄວາມຫົວຂໍ້
ກະຕຸ້ນ	ສາຍ	'ເລື່ອນ'	ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື
ແມ່ແບບ	ສາຍ	[ເຄື່ອງໝາຍເລີ່ມຕົ້ນ]	ແມ່ແບບ html ທີ່ໃຊ້ສໍາລັບການສະແດງ twipsy.

ແຈ້ງການ ທາງເລືອກຕົວຢ່າງ twipsy ສ່ວນບຸກຄົນສາມາດຖືກລະບຸໄດ້ໂດຍຜ່ານການນໍາໃຊ້ຄຸນລັກສະນະຂໍ້ມູນ.

<a href="#" data-placement = "below" rel = 'twipsy' title = 'ຂໍ້ຄວາມບາງຫົວຂໍ້' > text </a> _ _    

ວິທີການ

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

ແນບຕົວຈັບ twipsy ກັບການເກັບກໍາອົງປະກອບ.

.twipsy('show')

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

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

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

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

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

.twipsy(ຈິງ)

ໃຫ້ຜົນເປັນຕົວຢ່າງຂອງຄລາສ twipsy.

$ ( '#element' ). twipsy ( ຈິງ )

ສັງ​ເກດ​ເຫັນ ​ທາງ​ເລືອກ​, ນີ້​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ດຶງ​ຂໍ້​ມູນ​ດ້ວຍ $().data('twipsy').

ສາທິດ

plugin popover ສະຫນອງການໂຕ້ຕອບງ່າຍດາຍສໍາລັບການເພີ່ມ popovers ກັບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ. ມັນຂະຫຍາຍ plugin bootstrap-twipsy.js , ສະນັ້ນໃຫ້ແນ່ໃຈວ່າຈະ grab ໄຟລ໌ນັ້ນເຊັ່ນດຽວກັນໃນເວລາທີ່ລວມທັງ popovers ໃນໂຄງການຂອງທ່ານ!

ແຈ້ງການ ທ່ານຕ້ອງປະກອບໄຟລ໌ bootstrap-twipsy.js ກ່ອນ bootstrap-popover.js.

ດາວໂຫຼດ

ການໃຊ້ bootstrap-popover.js

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

ທາງເລືອກ

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
ສັດ	ບູລີນ	ຄວາມຈິງ	ນຳໃຊ້ css fade transition ກັບຄຳແນະນຳ
ຊັກຊ້າໃນ	ເລກ	0	ການຊັກຊ້າກ່ອນທີ່ຈະສະແດງຄໍາແນະນໍາເຄື່ອງມື (ms)
ຊັກຊ້າ	ເລກ	0	ການຊັກຊ້າກ່ອນທີ່ຈະເຊື່ອງຄໍາແນະນໍາເຄື່ອງມື (ms)
ຜົນຕອບແທນ	ສາຍ	''	ຂໍ້ຄວາມທີ່ຈະໃຊ້ໃນເວລາທີ່ບໍ່ມີຊື່ຄໍາແນະນໍາເຄື່ອງມື
ການຈັດວາງ	ສາຍ	'ຖືກຕ້ອງ'	ວິທີການຈັດຕໍາແຫນ່ງຄໍາແນະນໍາເຄື່ອງມື - ຂ້າງເທິງ | ຂ້າງລຸ່ມນີ້ | ຊ້າຍ | ຖືກຕ້ອງ
html	ບູລີນ	ບໍ່ຖືກຕ້ອງ	ອະນຸຍາດໃຫ້ເນື້ອຫາ html ພາຍໃນຄໍາແນະນໍາເຄື່ອງມື
ດໍາລົງຊີວິດ	ບູລີນ	ບໍ່ຖືກຕ້ອງ	ໃຊ້ການມອບໝາຍເຫດການແທນຕົວຈັດການເຫດການສ່ວນບຸກຄົນ
ຊົດເຊີຍ	ເລກ	0	pixel offset ຂອງຄໍາແນະນໍາເຄື່ອງມືຈາກອົງປະກອບເປົ້າຫມາຍ
ຫົວຂໍ້	string, function	'ຫົວຂໍ້'	ຄຸນລັກສະນະຫຼືວິທີການດຶງຂໍ້ຄວາມຫົວຂໍ້
ເນື້ອໃນ	string, function	'ເນື້ອໃນຂໍ້ມູນ'	ສະຕຣິງ ຫຼືວິທີການດຶງຂໍ້ຄວາມເນື້ອຫາ. ຖ້າບໍ່ມີອັນໃດຖືກສະໜອງໃຫ້, ເນື້ອຫາຈະມາຈາກຄຸນລັກສະນະຂອງເນື້ອຫາຂໍ້ມູນ.
ກະຕຸ້ນ	ສາຍ	'ເລື່ອນ'	ຄໍາແນະນໍາເຄື່ອງມືຖືກກະຕຸ້ນແນວໃດ - hover | ສຸມ | ຄູ່ມື
ແມ່ແບບ	ສາຍ	[ເຄື່ອງໝາຍເລີ່ມຕົ້ນ]	ແມ່ແບບ html ທີ່ໃຊ້ສໍາລັບການສະແດງ popover.

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

<a data-placement = "below" href="#" class="btn ອັນຕະລາຍ" rel = "popover"> ຂໍ້ ຄວາມ </a> _ _ _    

ວິທີການ

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

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

.popover('ສະແດງ')

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

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

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

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

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

ສາທິດ

hover ສໍາລັບ popover

ປັ໊ກອິນແຈ້ງເຕືອນແມ່ນຫ້ອງຮຽນນ້ອຍໆພິເສດສໍາລັບການເພີ່ມການເຮັດວຽກທີ່ໃກ້ຊິດກັບການແຈ້ງເຕືອນ.

ດາວໂຫຼດ

ໃຊ້ bootstrap-alerts.js

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

ມາກອັບ

ພຽງ​ແຕ່​ເພີ່ມ data-alert​ຄຸນ​ລັກ​ສະ​ນະ​ໃຫ້​ຂໍ້​ຄວາມ​ເຕືອນ​ຂອງ​ທ່ານ​ອັດ​ຕະ​ໂນ​ມັດ​ໃຫ້​ເຂົາ​ເຈົ້າ​ເຮັດ​ວຽກ​ໃກ້​ຊິດ​.

ທາງເລືອກ

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
ໂຕເລືອກ	ສາຍ	'.ປິດ'	ຕົວເລືອກອັນໃດເພື່ອແນໃສ່ປິດການແຈ້ງເຕືອນ.

ວິທີການ

$().ເຕືອນ()

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

.alert('ປິດ')

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

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

ສາທິດ