ປຸ່ມ

ໃຊ້ຮູບແບບປຸ່ມແບບກຳນົດເອງຂອງ 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>

ປິດການຫໍ່ຂໍ້ຄວາມ

ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ບໍ່​ຕ້ອງ​ການ​ຂໍ້​ຄວາມ​ປຸ່ມ​ທີ່​ຈະ​ຫໍ່​, ທ່ານ​ສາ​ມາດ​ເພີ່ມ .text-nowrap​ຊັ້ນ​ໃນ​ປຸ່ມ​ໄດ້​. ໃນ Sass, ທ່ານສາມາດຕັ້ງ $btn-white-space: nowrapໃຫ້ປິດການຫໍ່ຂໍ້ຄວາມສໍາລັບແຕ່ລະປຸ່ມ.

ແທັກປຸ່ມ

ຫ້ອງ .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ຢູ່ໃນປຸ່ມສະມໍ. ໃນຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນຄຸນສົມບັດນັ້ນ, ທ່ານຈະບໍ່ເຫັນຕົວກະພິບທີ່ພິການທັງຫມົດ.
• ປຸ່ມທີ່ຖືກປິດການນຳໃຊ້ <a>ຄວນມີ aria-disabled="true"ຄຸນສົມບັດເພື່ອຊີ້ບອກສະຖານະຂອງອົງປະກອບຕໍ່ກັບເຕັກໂນໂລຊີຊ່ວຍເຫຼືອ.
• ປຸ່ມທີ່ຖືກປິດການນຳໃຊ້ <a> ບໍ່ຄວນ ລວມເອົາ hrefຄຸນສົມບັດ.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

ຄໍາເຕືອນກ່ຽວກັບຫນ້າທີ່ເຊື່ອມຕໍ່

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

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

ປຸ່ມ 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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

ວິທີການ