ປຸ່ມ
ໃຊ້ຮູບແບບປຸ່ມແບບກຳນົດເອງຂອງ 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" 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>ຄໍາເຕືອນກ່ຽວກັບຫນ້າທີ່ເຊື່ອມຕໍ່
ຫ້ອງ .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') |
ທໍາລາຍປຸ່ມຂອງອົງປະກອບ. |