Source

ປຸ່ມ

ໃຊ້ຮູບແບບປຸ່ມແບບກຳນົດເອງຂອງ Bootstrap ສໍາລັບການປະຕິບັດໃນຮູບແບບ, ກ່ອງໂຕ້ຕອບ, ແລະອື່ນໆອີກ ດ້ວຍການຮອງຮັບຫຼາຍຂະໜາດ, ລັດ ແລະອື່ນໆອີກ.

ຕົວຢ່າງ

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ການ​ນໍາ​ໃຊ້​ສີ​ເພື່ອ​ເພີ່ມ​ຄວາມ​ຫມາຍ​ພຽງ​ແຕ່​ສະ​ຫນອງ​ການ​ສະ​ແດງ​ໃຫ້​ເຫັນ​, ທີ່​ຈະ​ບໍ່​ໄດ້​ຮັບ​ການ​ນໍາ​ໃຊ້​ເຕັກ​ໂນ​ໂລ​ຊີ​ການ​ຊ່ວຍ​ເຫຼືອ - ເຊັ່ນ​: ຕົວ​ອ່ານ​ຫນ້າ​ຈໍ​. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-onlyຊັ້ນ.

ແທັກປຸ່ມ

ຫ້ອງ .btnຮຽນຖືກອອກແບບເພື່ອໃຊ້ກັບ <button>ອົງປະກອບ. ຢ່າງໃດກໍ່ຕາມ, ທ່ານຍັງສາມາດໃຊ້ຫ້ອງຮຽນເຫຼົ່ານີ້ຢູ່ໃນ <a>ຫຼື <input>ອົງປະກອບ (ເຖິງແມ່ນວ່າບາງຕົວທ່ອງເວັບອາດຈະນໍາໃຊ້ການສະແດງຜົນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ).

ເມື່ອນໍາໃຊ້ຫ້ອງຮຽນປຸ່ມກ່ຽວກັບ <a>ອົງປະກອບທີ່ຖືກນໍາໃຊ້ເພື່ອກະຕຸ້ນການເຮັດວຽກໃນຫນ້າ (ເຊັ່ນ: ເນື້ອຫາທີ່ຫຍໍ້ລົງ), ແທນທີ່ຈະເຊື່ອມຕໍ່ກັບຫນ້າໃຫມ່ຫຼືພາກສ່ວນຕ່າງໆພາຍໃນຫນ້າປະຈຸບັນ, ລິ້ງຄ໌ເຫຼົ່ານີ້ຄວນຈະຖືກມອບໃຫ້ role="button"ທີ່ເຫມາະສົມເພື່ອຖ່າຍທອດຈຸດປະສົງຂອງພວກເຂົາໃຫ້ກັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອເຊັ່ນ: ຜູ້ອ່ານຫນ້າຈໍ.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ປຸ່ມໂຄງຮ່າງ

ຕ້ອງການປຸ່ມ, ແຕ່ບໍ່ແມ່ນສີພື້ນຫລັງທີ່ຮຸນແຮງທີ່ພວກເຂົາເອົາມາບໍ? ແທນທີ່ຫ້ອງຮຽນຕົວແກ້ໄຂເລີ່ມຕົ້ນດ້ວຍອັນ .btn-outline-*ເພື່ອລຶບຮູບພື້ນຫຼັງ ແລະສີທັງໝົດຢູ່ໃນປຸ່ມໃດນຶ່ງ.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ຂະໜາດ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ເພີ່ມ .btn-lgຫຼື .btn-smສໍາລັບຂະຫນາດເພີ່ມເຕີມ.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ສ້າງປຸ່ມລະດັບບລັອກ—ເຊິ່ງຂະຫຍາຍຄວາມກວ້າງເຕັມຂອງພໍ່ແມ່—ໂດຍການເພີ່ມ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

ສະຖານະທີ່ເຄື່ອນໄຫວ

ປຸ່ມຕ່າງໆຈະປາກົດຖືກກົດ (ມີພື້ນຫຼັງສີເຂັ້ມກວ່າ, ຂອບສີເຂັ້ມກວ່າ, ແລະເງົາໃສ່) ເມື່ອເປີດໃຊ້ງານ. ບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ class ເປັນ <button>s ຍ້ອນວ່າເຂົາເຈົ້າໃຊ້ pseudo-class . ແນວໃດກໍ່ຕາມ, ທ່ານຍັງສາມາດບັງຄັບໃຫ້ມີລັກສະນະການເຄື່ອນໄຫວດຽວກັນກັບ .active(ແລະລວມເອົາ aria-pressed="true"ຄຸນລັກສະນະ) ຖ້າທ່ານຈໍາເປັນຕ້ອງເຮັດຊ້ໍາແບບໂຄງການ.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

ສະຖານະຄົນພິການ

ເຮັດໃຫ້��ຸ່ມບໍ່ເຄື່ອນໄຫວໂດຍການເພີ່ມ disabledຄຸນສົມບັດ boolean ໃສ່ <button>ອົງປະກອບໃດນຶ່ງ.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

ປຸ່ມທີ່ປິດໃຊ້ງານໂດຍໃຊ້ <a>ອົງປະກອບປະຕິບັດຕົວແຕກຕ່າງກັນເລັກນ້ອຍ:

  • <a>s ບໍ່ສະຫນັບສະຫນູນ disabledຄຸນລັກສະນະ, ດັ່ງນັ້ນທ່ານຕ້ອງເພີ່ມ .disabledຊັ້ນຮຽນເພື່ອເຮັດໃຫ້ມັນປາກົດເປັນຕາພິການ.
  • ບາງຮູບແບບທີ່ເປັນມິດໃນອະນາຄົດແມ່ນລວມເຂົ້າເພື່ອປິດການໃຊ້ງານທັງໝົດ pointer-eventsຢູ່ໃນປຸ່ມສະມໍ. ໃນຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນຄຸນສົມບັດນັ້ນ, ທ່ານຈະບໍ່ເຫັນຕົວກະພິບທີ່ພິການທັງຫມົດ.
  • ປຸ່ມທີ່ປິດການໃຊ້ງານຄວນມີ aria-disabled="true"ຄຸນສົມບັດເພື່ອຊີ້ບອກສະຖານະຂອງອົງປະກອບຕໍ່ກັບເຕັກໂນໂລຊີຊ່ວຍເຫຼືອ.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

ຫ້ອງ .disabledຮຽນໃຊ້ pointer-events: noneເພື່ອພະຍາຍາມປິດການທໍາງານຂອງການເຊື່ອມຕໍ່ຂອງ <a>s, ແຕ່ວ່າຄຸນສົມບັດ CSS ຍັງບໍ່ທັນໄດ້ມາດຕະຖານ. ນອກຈາກນັ້ນ, ເຖິງແມ່ນວ່າຢູ່ໃນຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນ pointer-events: none, ການນໍາທາງຂອງແປ້ນພິມຍັງບໍ່ໄດ້ຮັບຜົນກະທົບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ແປ້ນພິມທີ່ໄດ້ເຫັນແລະຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອຈະຍັງສາມາດເປີດໃຊ້ການເຊື່ອມຕໍ່ເຫຼົ່ານີ້ໄດ້. ດັ່ງນັ້ນເພື່ອໃຫ້ມີຄວາມປອດໄພ, ເພີ່ມ tabindex="-1"ຄຸນລັກສະນະໃນການເຊື່ອມຕໍ່ເຫຼົ່ານີ້ (ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການເນັ້ນໃສ່ແປ້ນພິມ) ແລະໃຊ້ JavaScript ແບບກໍານົດເອງເພື່ອປິດການເຮັດວຽກຂອງພວກເຂົາ.

ປຸ່ມ plugin

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

ສະຫຼັບລັດ

ເພີ່ມ data-toggle="button"ເພື່ອສະຫຼັບສະຖານະຂອງປຸ່ມ active. ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ກໍາ​ລັງ pre-toggling ປຸ່ມ​, ທ່ານ​ຈະ​ຕ້ອງ​ໄດ້​ເພີ່ມ .active​ຫ້ອງ ​ການ​ດ້ວຍ​ຕົນ​ເອງ ​ແລະ aria-pressed="true" ​ກັບ <button>.

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

ກ່ອງໝາຍ ແລະປຸ່ມວິທະຍຸ

ຮູບແບບ ຂອງ Bootstrap .buttonສາມາດຖືກນໍາໃຊ້ກັບອົງປະກອບອື່ນໆ, ເຊັ່ນ: <label>s, ເພື່ອສະຫນອງການສະຫຼັບປຸ່ມແບບ checkbox ຫຼືວິທະຍຸ. ຕື່ມໃສ່ data-toggle="buttons"ປຸ່ມ .btn-groupທີ່ມີການແກ້ໄຂເຫຼົ່ານັ້ນເພື່ອເປີດໃຊ້ພຶດຕິກໍາການສະຫຼັບຂອງພວກມັນຜ່ານ JavaScript ແລະເພີ່ມ .btn-group-toggleຮູບແບບ <input>s ພາຍໃນປຸ່ມຂອງທ່ານ. ໃຫ້ສັງເກດວ່າທ່ານສາມາດສ້າງປຸ່ມ input-powered ດຽວຫຼືກຸ່ມຂອງເຂົາເຈົ້າ.

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

ກະລຸນາຮັບຊາບວ່າປຸ່ມທີ່ກວດສອບກ່ອນກຳນົດໃຫ້ທ່ານເພີ່ມ .activeຊັ້ນເຂົ້າໃສ່ຕົວປ້ອນຂໍ້ມູນ ດ້ວຍຕົນເອງ <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

ວິທີການ

ວິທີການ ລາຍລະອຽດ
$().button('toggle') ສະຫຼັບສະຖານະ push. ໃຫ້ປຸ່ມປະກົດວ່າມັນຖືກເປີດໃຊ້ແລ້ວ.
$().button('dispose') ທໍາລາຍປຸ່ມຂອງອົງປະກອບ.