ການເລີ່ມຕົ້ນ
ພາບລວມຂອງ Bootstrap, ວິທີການດາວໂຫຼດ ແລະນໍາໃຊ້, ແມ່ແບບພື້ນຖານ ແລະຕົວຢ່າງ, ແລະອື່ນໆອີກ.
ພາບລວມຂອງ Bootstrap, ວິທີການດາວໂຫຼດ ແລະນໍາໃຊ້, ແມ່ແບບພື້ນຖານ ແລະຕົວຢ່າງ, ແລະອື່ນໆອີກ.
Bootstrap (ປະຈຸບັນ v3.3.7) ມີວິທີງ່າຍໆສອງສາມຢ່າງເພື່ອເລີ່ມຕົ້ນໄວ, ແຕ່ລະອັນທີ່ດຶງດູດກັບລະດັບທັກສະ ແລະກໍລະນີການນໍາໃຊ້ທີ່ແຕກຕ່າງກັນ. ອ່ານຜ່ານເພື່ອເບິ່ງສິ່ງທີ່ເຫມາະສົມກັບຄວາມຕ້ອງການສະເພາະຂອງເຈົ້າ.
ລວບລວມແລະຫຍໍ້ CSS, JavaScript, ແລະຕົວອັກສອນ. ບໍ່ມີເອກະສານ ຫຼືໄຟລ໌ຕົ້ນສະບັບຖືກລວມເຂົ້າ.
Source Less, JavaScript, ແລະ font file, ພ້ອມກັບ docs ຂອງພວກເຮົາ. ຕ້ອງການ compiler ໜ້ອຍລົງ ແລະ ບາງການຕັ້ງຄ່າ.
Bootstrap ported ຈາກ Less ຫາ Sass ເພື່ອຄວາມສະດວກໃນການລວມຢູ່ໃນໂຄງການ Rails, Compass, ຫຼື Sass-only.
ຄົນທີ່ຢູ່ jsDelivr ດ້ວຍຄວາມກະລຸນາໃຫ້ການສະຫນັບສະຫນູນ CDN ສໍາລັບ CSS ແລະ JavaScript ຂອງ Bootstrap. ພຽງແຕ່ໃຊ້ການ ເຊື່ອມຕໍ່ Bootstrap CDN ເຫຼົ່ານີ້ .
ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕັ້ງແລະຈັດການ Bootstrap's Less, CSS, JavaScript, ແລະຕົວອັກສອນໂດຍໃຊ້ Bower :
ທ່ານຍັງສາມາດຕິດຕັ້ງ Bootstrap ໂດຍໃຊ້ npm :
require('bootstrap')
ຈະໂຫລດທຸກປລັກອິນ jQuery ຂອງ Bootstrap ໃສ່ວັດຖຸ jQuery. ໂມ bootstrap
ດູນຕົວມັນເອງບໍ່ໄດ້ສົ່ງອອກຫຍັງ. ທ່ານສາມາດໂຫລດ plugins jQuery ຂອງ Bootstrap ດ້ວຍຕົນເອງໂດຍການໂຫລດ /js/*.js
ໄຟລ໌ພາຍໃຕ້ໄດເລກະທໍລີລະດັບສູງສຸດຂອງແພັກເກັດ.
Bootstrap package.json
ມີບາງ metadata ເພີ່ມເຕີມພາຍໃຕ້ກະແຈຕໍ່ໄປນີ້:
less
- ເສັ້ນທາງໄປຫາ ໄຟລ໌ແຫຼ່ງ ຕົ້ນຕໍຂອງ Bootstrap ຫນ້ອຍstyle
- ເສັ້ນທາງໄປສູ່ CSS ທີ່ບໍ່ແມ່ນການຫຍໍ້ຂອງ Bootstrap ທີ່ໄດ້ຖືກລວບລວມໄວ້ກ່ອນໂດຍໃຊ້ການຕັ້ງຄ່າເລີ່ມຕົ້ນ (ບໍ່ມີການປັບແຕ່ງ)ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕັ້ງແລະຈັດການ Bootstrap's Less, CSS, JavaScript, ແລະ fonts ໂດຍໃຊ້ Composer :
Bootstrap ໃຊ້ Autoprefixer ເພື່ອຈັດການກັບ ຄໍານໍາຫນ້າຜູ້ຂາຍ CSS . ຖ້າທ່ານກໍາລັງລວບລວມ Bootstrap ຈາກແຫຼ່ງ Less/Sass ຂອງມັນແລະບໍ່ໃຊ້ Gruntfile ຂອງພວກເຮົາ, ທ່ານຈະຕ້ອງປະສົມປະສານ Autoprefixer ເຂົ້າໃນຂະບວນການສ້າງຕົວທ່ານເອງ. ຖ້າທ່ານກໍາລັງໃຊ້ Bootstrap precompiled ຫຼືໃຊ້ Gruntfile ຂອງພວກເຮົາ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບເລື່ອງນີ້ເພາະວ່າ Autoprefixer ໄດ້ຖືກປະສົມປະສານເຂົ້າໃນ Gruntfile ຂອງພວກເຮົາແລ້ວ.
Bootstrap ສາມາດດາວໂຫລດໄດ້ໃນສອງຮູບແບບ, ພາຍໃນທີ່ເຈົ້າຈະພົບເຫັນໄດເລກະທໍລີແລະໄຟລ໌ຕໍ່ໄປນີ້, ການຈັດກຸ່ມຊັບພະຍາກອນທົ່ວໄປຢ່າງມີເຫດຜົນແລະການສະຫນອງການລວບລວມແລະການປ່ຽນແປງຫນ້ອຍ.
ກະລຸນາສັງເກດວ່າ plugins JavaScript ທັງຫມົດຮຽກຮ້ອງໃຫ້ມີ jQuery ລວມ, ດັ່ງທີ່ສະແດງໃຫ້ເຫັນຢູ່ໃນ ແມ່ແບບເລີ່ມຕົ້ນ . ປຶກສາຂອງພວກເຮົາbower.json
ເພື່ອເບິ່ງວ່າ jQuery ຮຸ່ນໃດໄດ້ຮັບການສະຫນັບສະຫນູນ.
ເມື່ອດາວໂຫລດແລ້ວ, unzip ໂຟເດີທີ່ຖືກບີບອັດເພື່ອເບິ່ງໂຄງສ້າງຂອງ Bootstrap. ທ່ານຈະເຫັນບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້:
ນີ້ແມ່ນຮູບແບບພື້ນຖານທີ່ສຸດຂອງ Bootstrap: ໄຟລ໌ precompiled ສໍາລັບການນໍາໃຊ້ຫຼຸດລົງໄວໃນເກືອບທຸກໂຄງການເວັບໄຊຕ໌. ພວກເຮົາສະຫນອງການລວບລວມ CSS ແລະ JS ( bootstrap.*
), ເຊັ່ນດຽວກັນກັບການລວບລວມແລະຫຍໍ້ CSS ແລະ JS ( bootstrap.min.*
). CSS source maps ( bootstrap.*.map
) ສາມາດໃຊ້ໄດ້ກັບບາງເຄື່ອງມືນັກພັດທະນາຂອງຕົວທ່ອງເວັບ. ຕົວອັກສອນຈາກ Glyphicons ແມ່ນລວມ, ເຊັ່ນດຽວກັນກັບຫົວຂໍ້ Bootstrap ທາງເລືອກ.
ການດາວໂຫຼດລະຫັດແຫຼ່ງ Bootstrap ປະກອບມີ CSS, JavaScript, ແລະຊັບສິນຟອນທີ່ລວບລວມໄວ້ກ່ອນ, ພ້ອມກັບແຫຼ່ງທີ່ນ້ອຍກວ່າ, JavaScript, ແລະເອກະສານ. ໂດຍສະເພາະ, ມັນປະກອບມີດັ່ງຕໍ່ໄປນີ້ແລະອື່ນໆ:
The less/
, js/
, ແລະ fonts/
ເປັນລະຫັດແຫຼ່ງສໍາລັບ CSS, JS, ແລະຕົວອັກສອນໄອຄອນຂອງພວກເຮົາ (ຕາມລໍາດັບ). ໂຟນເດີ ປະ dist/
ກອບມີທຸກຢ່າງທີ່ມີລາຍຊື່ຢູ່ໃນສ່ວນການດາວໂຫຼດທີ່ກຽມໄວ້ຂ້າງເທິງ. ໂຟນເດີ ປະ docs/
ກອບມີລະຫັດແຫຼ່ງສໍາລັບເອກະສານຂອງພວກເຮົາ, ແລະ examples/
ການນໍາໃຊ້ Bootstrap. ນອກຈາກນັ້ນ, ໄຟລ໌ອື່ນໆທີ່ປະກອບມີສະຫນັບສະຫນູນສໍາລັບການຫຸ້ມຫໍ່, ຂໍ້ມູນອະນຸຍາດ, ແລະການພັດທະນາ.
Bootstrap ໃຊ້ Grunt ສໍາລັບລະບົບການກໍ່ສ້າງຂອງມັນ, ດ້ວຍວິທີການທີ່ສະດວກໃນການເຮັດວຽກກັບກອບ. ມັນເປັນວິທີທີ່ພວກເຮົາລວບລວມລະຫັດຂອງພວກເຮົາ, ດໍາເນີນການທົດສອບ, ແລະອື່ນໆ.
ເພື່ອຕິດຕັ້ງ Grunt, ກ່ອນອື່ນ ໝົດ ທ່ານຕ້ອງ ດາວ ໂຫລດແລະຕິດຕັ້ງ node.js (ເຊິ່ງລວມມີ npm). npm ຫຍໍ້ ມາຈາກ node packaged modules ແລະເປັນວິທີການຈັດການການພັດທະນາ dependencies ຜ່ານ node.js.
ຫຼັງຈາກນັ້ນ, ຈາກເສັ້ນຄໍາສັ່ງ:grunt-cli
ທົ່ວໂລກດ້ວຍ npm install -g grunt-cli
./bootstrap/
ທໍລີຮາກ, ຈາກນັ້ນດໍາເນີນການ npm install
. npm ຈະເບິ່ງ package.json
ໄຟລ໌ແລະອັດຕະໂນມັດການຕິດຕັ້ງການເພິ່ງພາອາໄສທ້ອງຖິ່ນທີ່ຈໍາເປັນທີ່ມີລາຍຊື່ຢູ່ທີ່ນັ້ນ.ເມື່ອສໍາເລັດ, ທ່ານຈະສາມາດດໍາເນີນການຄໍາສັ່ງ Grunt ຕ່າງໆທີ່ສະຫນອງໃຫ້ຈາກເສັ້ນຄໍາສັ່ງ.
grunt dist
(ພຽງແຕ່ລວບລວມ CSS ແລະ JavaScript)ສ້າງໄດເລກະ /dist/
ທໍລີຄືນໃຫມ່ດ້ວຍໄຟລ໌ CSS ແລະ JavaScript ທີ່ລວບລວມແລະຫຍໍ້. ໃນຖານະເປັນຜູ້ໃຊ້ Bootstrap, ປົກກະຕິແລ້ວນີ້ແມ່ນຄໍາສັ່ງທີ່ທ່ານຕ້ອງການ.
grunt watch
(ເບິ່ງ)ເບິ່ງໄຟລ໌ແຫຼ່ງທີ່ນ້ອຍລົງ ແລະລວບລວມພວກມັນຄືນເປັນ CSS ໂດຍອັດຕະໂນມັດທຸກຄັ້ງທີ່ທ່ານບັນທຶກການປ່ຽນແປງ.
grunt test
(ແລ່ນທົດສອບ)ແລ່ນ JSHint ແລະດໍາເນີນການ ທົດສອບ QUnit headlessly ໃນ PhantomJS .
grunt docs
(ສ້າງ ແລະທົດສອບຊັບສິນເອກະສານ)ກໍ່ສ້າງແລະທົດສອບ CSS, JavaScript, ແລະຊັບສິນອື່ນໆທີ່ຖືກນໍາໃຊ້ໃນເວລາທີ່ດໍາເນີນການເອກະສານຢູ່ໃນທ້ອງຖິ່ນໂດຍຜ່ານ bundle exec jekyll serve
.
grunt
(ສ້າງທຸກສິ່ງທຸກຢ່າງຢ່າງແທ້ຈິງແລະດໍາເນີນການທົດສອບ)ລວບລວມແລະຫຍໍ້ CSS ແລະ JavaScript, ສ້າງເວັບໄຊທ໌ເອກະສານ, ແລ່ນຕົວກວດສອບ HTML5 ຕໍ່ກັບເອກະສານ, ສ້າງຊັບສິນ Customizer, ແລະອື່ນໆອີກ. ຕ້ອງ ການ Jekyll . ປົກກະຕິແລ້ວພຽງແຕ່ມີຄວາມຈໍາເປັນຖ້າຫາກວ່າທ່ານກໍາລັງ hacking ສຸດ Bootstrap ຕົວຂອງມັນເອງ.
ຖ້າທ່ານພົບບັນຫາກັບການຕິດຕັ້ງ dependencies ຫຼືແລ່ນຄໍາສັ່ງ Grunt, ທໍາອິດລຶບໄດເລກະ /node_modules/
ທໍລີທີ່ສ້າງຂຶ້ນໂດຍ npm. ຫຼັງຈາກນັ້ນ, rerun npm install
.
ເລີ່ມຕົ້ນດ້ວຍແມ່ແບບ HTML ພື້ນຖານນີ້, ຫຼືແກ້ໄຂ ຕົວຢ່າງເຫຼົ່ານີ້ . ພວກເຮົາຫວັງວ່າທ່ານຈະປັບຕົວແບບແລະຕົວຢ່າງຂອງພວກເຮົາ, ປັບໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການຂອງທ່ານ.
ສຳເນົາ HTML ຂ້າງລຸ່ມນີ້ເພື່ອເລີ່ມເຮັດວຽກກັບເອກະສານ Bootstrap ໜ້ອຍທີ່ສຸດ.
ສ້າງໃນແມ່ແບບພື້ນຖານຂ້າງເທິງດ້ວຍອົງປະກອບຫຼາຍຂອງ Bootstrap. ພວກເຮົາຊຸກຍູ້ໃຫ້ທ່ານປັບແຕ່ງແລະປັບ Bootstrap ໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການຂອງໂຄງການສ່ວນບຸກຄົນຂອງທ່ານ.
ເອົາລະຫັດແຫຼ່ງສໍາລັບທຸກໆຕົວຢ່າງຂ້າງລຸ່ມນີ້ໂດຍການ ດາວໂຫລດ Bootstrap repository . ຕົວຢ່າງສາມາດພົບໄດ້ໃນໄດເລກະ docs/examples/
ທໍລີ.
Bootlint ແມ່ນເຄື່ອງມື linter Bootstrap HTML ຢ່າງເປັນທາງການ. ມັນອັດຕະໂນມັດກວດເບິ່ງຄວາມຜິດພາດ HTML ທົ່ວໄປຫຼາຍໃນຫນ້າເວັບທີ່ກໍາລັງໃຊ້ Bootstrap ໃນທາງ "vanilla". ອົງປະກອບ/widgets ຂອງ Vanilla Bootstrap ຕ້ອງການພາກສ່ວນຂອງ DOM ຂອງເຂົາເຈົ້າໃຫ້ສອດຄ່ອງກັບໂຄງສ້າງທີ່ແນ່ນອນ. Bootlint ກວດເບິ່ງວ່າຕົວຢ່າງຂອງອົງປະກອບ Bootstrap ມີໂຄງສ້າງ HTML ຢ່າງຖືກຕ້ອງ. ພິຈາລະນາເພີ່ມ Bootlint ເຂົ້າໃນລະບົບຕ່ອງໂສ້ການພັດທະນາເວັບໄຊຕ໌ Bootstrap ຂອງທ່ານເພື່ອວ່າບໍ່ມີຄວາມຜິດພາດທົ່ວໄປເຮັດໃຫ້ການພັດທະນາໂຄງການຂອງທ່ານຊ້າລົງ.
ຕິດຕາມການພັດທະນາຂອງ Bootstrap ແລະເຂົ້າເຖິງຊຸມຊົນດ້ວຍຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດເຫຼົ່ານີ້.
irc.freenode.net
ເຊີບເວີ, ໃນຊ່ອງ ##bootstrap .twitter-bootstrap-3
.bootstrap
ໃນແພັກເກັດທີ່ດັດແປງຫຼືເພີ່ມການເຮັດວຽກຂອງ Bootstrap ເມື່ອແຈກຢາຍຜ່ານ npm ຫຼືກົນໄກການຈັດສົ່ງທີ່ຄ້າຍຄືກັນສໍາລັບການຄົ້ນພົບສູງສຸດ.ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕາມ @getbootstrap ໃນ Twitter ສໍາລັບວິດີໂອເພງນິນທາຫລ້າສຸດແລະຫນ້າຫວາດສຽວ.
Bootstrap ຈະປັບຫນ້າຂອງທ່ານໂດຍອັດຕະໂນມັດສໍາລັບຂະຫນາດຫນ້າຈໍຕ່າງໆ. ນີ້ແມ່ນວິທີການປິດຄຸນສົມບັດນີ້ເພື່ອໃຫ້ຫນ້າຂອງທ່ານເຮັດວຽກຄືກັບ ຕົວຢ່າງທີ່ບໍ່ຕອບສະຫນອງ ນີ້ .
<meta>
ທີ່ໄດ້ກ່າວໄວ້ໃນ ເອກະສານ CSSwidth
on the .container
for each grid tier with a single width, ຍົກຕົວຢ່າງ width: 970px !important;
ໃຫ້ແນ່ໃຈວ່າການນີ້ມາຫຼັງຈາກ Bootstrap CSS ເລີ່ມຕົ້ນ. ທ່ານສາມາດເລືອກທາງເລືອກ !important
ດ້ວຍການສອບຖາມສື່ ຫຼືບາງຕົວເລືອກ-fu..col-xs-*
ຫ້ອງຮຽນນອກເໜືອໄປຈາກ, ຫຼືແທນທີ່, ຂະໜາດກາງ/ໃຫຍ່. ບໍ່ຕ້ອງເປັນຫ່ວງ, ຕາຂ່າຍອຸປະກອນຂະໜາດນ້ອຍພິເສດຈະປັບຂະໜາດໃຫ້ທຸກຄວາມລະອຽດ.ທ່ານຈະຍັງຕ້ອງການ Respond.js ສໍາລັບ IE8 (ນັບຕັ້ງແຕ່ການສອບຖາມສື່ຂອງພວກເຮົາຍັງມີຢູ່ ແລະຈໍາເປັນຕ້ອງໄດ້ຮັບການປະມວນຜົນ). ນີ້ປິດການໃຊ້ງານ "ເວັບໄຊທ໌ມືຖື" ລັກສະນະຂອງ Bootstrap.
ພວກເຮົາໄດ້ນໍາໃຊ້ຂັ້ນຕອນເຫຼົ່ານີ້ເພື່ອເປັນຕົວຢ່າງ. ອ່ານລະຫັດແຫຼ່ງຂອງມັນເພື່ອເບິ່ງການປ່ຽນແປງສະເພາະທີ່ປະຕິບັດ.
ຊອກຫາການຍ້າຍຈາກ Bootstrap ເວີຊັນເກົ່າໄປເປັນ v3.x? ກວດເບິ່ງ ຄູ່ມືການຍົກຍ້າຍຂອງພວກເຮົາ .
Bootstrap ຖືກສ້າງຂຶ້ນເພື່ອເຮັດວຽກທີ່ດີທີ່ສຸດໃນ desktop ແລະ mobile browsers ຫຼ້າສຸດ, ຊຶ່ງຫມາຍຄວາມວ່າຕົວທ່ອງເວັບທີ່ເກົ່າແກ່ອາດຈະສະແດງຮູບແບບທີ່ແຕກຕ່າງກັນ, ເຖິງແມ່ນວ່າຈະເຮັດວຽກຢ່າງເຕັມທີ່, ການສະແດງອົງປະກອບບາງຢ່າງ.
ໂດຍສະເພາະ, ພວກເຮົາສະຫນັບສະຫນູນ ເວີຊັນຫຼ້າສຸດ ຂອງຕົວທ່ອງເວັບແລະເວທີຕໍ່ໄປນີ້.
ຕົວທ່ອງເວັບທາງເລືອກທີ່ໃຊ້ WebKit, Blink, ຫຼື Gecko ເວີຊັນຫຼ້າສຸດ, ບໍ່ວ່າຈະໂດຍກົງຫຼືຜ່ານ API ເບິ່ງເວັບຂອງເວທີ, ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງຊັດເຈນ. ຢ່າງໃດກໍຕາມ, Bootstrap ຄວນ (ໃນກໍລະນີຫຼາຍທີ່ສຸດ) ສະແດງແລະເຮັດວຽກຢ່າງຖືກຕ້ອງໃນຕົວທ່ອງເວັບເຫຼົ່ານີ້ເຊັ່ນດຽວກັນ. ຂໍ້ມູນການສະຫນັບສະຫນູນສະເພາະແມ່ນສະຫນອງໃຫ້ຂ້າງລຸ່ມນີ້.
ໂດຍທົ່ວໄປແລ້ວ, Bootstrap ສະຫນັບສະຫນູນເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງແຕ່ລະແພລະຕະຟອມທີ່ສໍາຄັນ. ໃຫ້ສັງເກດວ່າຕົວທ່ອງເວັບຂອງຕົວແທນ (ເຊັ່ນ Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ແມ່ນບໍ່ຮອງຮັບ.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ບໍ່ມີ |
iOS | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ |
ເຊັ່ນດຽວກັນ, ເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບ desktop ສ່ວນໃຫຍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ບໍ່ມີ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ |
Windows | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ບໍ່ສະຫນັບສະຫນຸນ |
ໃນ Windows, ພວກເຮົາຮອງຮັບ Internet Explorer 8-11 .
ສໍາລັບ Firefox, ນອກເຫນືອຈາກການປ່ອຍຄວາມຫມັ້ນຄົງປົກກະຕິຫລ້າສຸດ, ພວກເຮົາຍັງສະຫນັບສະຫນູນການ ຂະຫຍາຍການສະຫນັບສະຫນູນ (ESR) ຮຸ່ນຫຼ້າສຸດຂອງ Firefox.
ໂດຍບໍ່ເປັນທາງການ, Bootstrap ຄວນເບິ່ງແລະປະຕິບັດໄດ້ດີພຽງພໍໃນ Chromium ແລະ Chrome ສໍາລັບ Linux, Firefox ສໍາລັບ Linux, ແລະ Internet Explorer 7, ເຊັ່ນດຽວກັນກັບ Microsoft Edge, ເຖິງແມ່ນວ່າພວກເຂົາບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເປັນທາງການ.
ສໍາລັບບັນຊີລາຍຊື່ຂອງບາງຂໍ້ບົກພ່ອງຂອງຕົວທ່ອງເວັບທີ່ Bootstrap ຕ້ອງຕໍ່ສູ້ກັບ, ເບິ່ງ Wall of browser bug ຂອງພວກເຮົາ .
Internet Explorer 8 ແລະ 9 ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ, ຢ່າງໃດກໍຕາມ, ກະລຸນາຮັບຊາບວ່າບາງຄຸນສົມບັດ CSS3 ແລະອົງປະກອບ HTML5 ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໂດຍຕົວທ່ອງເວັບເຫຼົ່ານີ້. ນອກຈາກນັ້ນ, Internet Explorer 8 ຕ້ອງການໃຊ້ Respond.js ເພື່ອເປີດໃຊ້ການຮອງຮັບການສອບຖາມສື່.
ຄຸນນະສົມບັດ | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
ບໍ່ສະຫນັບສະຫນຸນ | ສະຫນັບສະຫນູນ |
box-shadow |
ບໍ່ສະຫນັບສະຫນຸນ | ສະຫນັບສະຫນູນ |
transform |
ບໍ່ສະຫນັບສະຫນຸນ | ສະຫນັບສະຫນູນ, ມີ -ms ຄໍານໍາຫນ້າ |
transition |
ບໍ່ສະຫນັບສະຫນຸນ | |
placeholder |
ບໍ່ສະຫນັບສະຫນຸນ |
ເຂົ້າ ໄປເບິ່ງ Can I use... ສໍາລັບລາຍລະອຽດກ່ຽວກັບການຮອງຮັບ browser ຂອງຄຸນສົມບັດ CSS3 ແລະ HTML5.
ລະວັງການເຕືອນໄພຕໍ່ໄປນີ້ເມື່ອໃຊ້ Respond.js ໃນການພັດທະນາ ແລະສະພາບແວດລ້ອມການຜະລິດຂອງທ່ານສໍາລັບ Internet Explorer 8.
ການໃຊ້ Respond.js ກັບ CSS ທີ່ໂຮດຢູ່ໃນໂດເມນ (ຍ່ອຍ) ທີ່ແຕກຕ່າງກັນ (ຕົວຢ່າງ, ໃນ CDN) ຮຽກຮ້ອງໃຫ້ມີການຕິດຕັ້ງເພີ່ມເຕີມ. ເບິ່ງເອກະສານ Respond.js ສໍາລັບລາຍລະອຽດ.
file://
ເນື່ອງຈາກກົດລະບຽບຄວາມປອດໄພຂອງຕົວທ່ອງເວັບ, Respond.js ບໍ່ເຮັດວຽກກັບຫນ້າທີ່ເບິ່ງຜ່ານ file://
ໂປໂຕຄອນ (ຄືກັບເວລາເປີດໄຟລ໌ HTML ທ້ອງຖິ່ນ). ເພື່ອທົດສອບຄຸນສົມບັດການຕອບສະໜອງໃນ IE8, ເບິ່ງໜ້າເວັບຂອງທ່ານຜ່ານ HTTP(S). ເບິ່ງເອກະສານ Respond.js ສໍາລັບລາຍລະອຽດ.
@import
Respond.js ບໍ່ເຮັດວຽກກັບ CSS ທີ່ອ້າງອີງຜ່ານ @import
. ໂດຍສະເພາະ, ບາງການຕັ້ງຄ່າ Drupal ແມ່ນເປັນທີ່ຮູ້ຈັກທີ່ຈະໃຊ້ @import
. ເບິ່ງເອກະສານ Respond.js ສໍາລັບລາຍລະອຽດ.
IE8 ບໍ່ຮອງຮັບຢ່າງເຕັມ box-sizing: border-box;
ທີ່ເມື່ອລວມເຂົ້າກັບ min-width
, max-width
, min-height
, ຫຼື max-height
. ສໍາລັບເຫດຜົນນັ້ນ, ເປັນຂອງ v3.0.1, ພວກເຮົາບໍ່ໄດ້ໃຊ້ max-width
ໃນ .container
s.
IE8 ມີບັນຫາບາງຢ່າງກັບ @font-face
ເມື່ອລວມເຂົ້າກັບ :before
. Bootstrap ໃຊ້ການປະສົມປະສານກັບ Glyphicons ຂອງມັນ. ຖ້າຫນ້າເວັບຖືກເກັບໄວ້, ແລະໂຫລດໂດຍບໍ່ມີຫນູຢູ່ເທິງຫນ້າຕ່າງ (ເຊັ່ນ: ກົດປຸ່ມໂຫຼດຫນ້າຈໍຄືນຫຼືໂຫລດບາງສິ່ງບາງຢ່າງໃນ iframe) ຫຼັງຈາກນັ້ນຫນ້າເວັບຈະຖືກສະແດງກ່ອນທີ່ font ຈະໂຫລດ. ເລື່ອນຢູ່ເທິງໜ້າ (ເນື້ອໃນ) ຈະສະແດງບາງໄອຄອນ ແລະ ການເລື່ອນໃສ່ໄອຄອນທີ່ຍັງເຫຼືອຈະສະແດງໃຫ້ເຫັນຄືກັນ. ເບິ່ງບັນຫາ #13863 ສໍາລັບລາຍລະອຽດ.
Bootstrap ບໍ່ຮອງຮັບໃນໂໝດຄວາມເຂົ້າກັນໄດ້ຂອງ Internet Explorer ແບບເກົ່າ. ເພື່ອໃຫ້ແນ່ໃຈວ່າທ່ານກໍາລັງໃຊ້ໂຫມດການສະແດງຜົນຫຼ້າສຸດສໍາລັບ IE, ພິຈາລະນາລວມເອົາ <meta>
ແທັກທີ່ເຫມາະສົມໃນຫນ້າເວັບຂອງທ່ານ:
ຢືນຢັນຮູບແບບເອກະສານໂດຍການເປີດເຄື່ອງມືດີບັກ: ກົດ F12ແລະກວດເບິ່ງ "ຮູບແບບເອກະສານ".
ແທັກນີ້ແມ່ນລວມຢູ່ໃນເອກະສານ ແລະຕົວຢ່າງທັງໝົດຂອງ Bootstrap ເພື່ອຮັບປະກັນການສະແດງຜົນທີ່ດີທີ່ສຸດທີ່ເປັນໄປໄດ້ໃນແຕ່ລະລຸ້ນທີ່ຮອງຮັບຂອງ Internet Explorer.
ເບິ່ງ ຄໍາຖາມ StackOverflow ນີ້ ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.
Internet Explorer 10 ບໍ່ໄດ້ແຍກ ຄວາມກວ້າງຂອງ ອຸປະກອນ ຈາກ ຄວາມ ກວ້າງ ຂອງຊ່ອງເບິ່ງ , ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ໃຊ້ການສອບຖາມສື່ໃນ CSS ຂອງ Bootstrap ຢ່າງຖືກຕ້ອງ. ໂດຍປົກກະຕິທ່ານພຽງແຕ່ຕ້ອງການເພີ່ມ CSS snippet ດ່ວນເພື່ອແກ້ໄຂນີ້:
ຢ່າງໃດກໍ່ຕາມ, ນີ້ໃຊ້ບໍ່ໄດ້ກັບອຸປະກອນທີ່ໃຊ້ Windows Phone 8 ລຸ້ນເກົ່າກວ່າ Update 3 (aka GDR3) , ຍ້ອນວ່າມັນເຮັດໃຫ້ອຸປະກອນດັ່ງກ່າວສະແດງມຸມເບິ່ງ desktop ສ່ວນໃຫຍ່ແທນທີ່ຈະເປັນມຸມເບິ່ງ "ໂທລະສັບ" ແຄບ. ເພື່ອແກ້ໄຂບັນຫານີ້, ທ່ານຈະຕ້ອງ ລວມເອົາ CSS ແລະ JavaScript ຕໍ່ໄປນີ້ເພື່ອແກ້ໄຂຂໍ້ຜິດພາດ .
ສຳລັບຂໍ້ມູນເພີ່ມເຕີມ ແລະຂໍ້ແນະນຳການນຳໃຊ້, ກະລຸນາອ່ານ Windows Phone 8 ແລະ Device-Width .
ໃນຖານະເປັນຫົວຫນ້າເຖິງ, ພວກເຮົາລວມເອົາມັນຢູ່ໃນເອກະສານແລະຕົວຢ່າງຂອງ Bootstrap ທັງຫມົດເປັນການສາທິດ.
ເຄື່ອງຈັກການສະແດງຜົນຂອງ Safari ຮຸ່ນກ່ອນ v7.1 ສໍາລັບ OS X ແລະ Safari ສໍາລັບ iOS v8.0 ມີບັນຫາບາງຢ່າງກັບຈໍານວນຕໍາແໜ່ງທົດສະນິຍົມທີ່ໃຊ້ໃນ .col-*-1
ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ດັ່ງນັ້ນ, ຖ້າທ່ານມີ 12 ຖັນຕາຂ່າຍໄຟຟ້າ, ທ່ານສັງເກດເຫັນວ່າມັນສັ້ນເມື່ອທຽບກັບແຖວອື່ນໆຂອງຖັນ. ນອກຈາກການຍົກລະດັບ Safari / iOS, ທ່ານມີບາງທາງເລືອກສໍາລັບການແກ້ໄຂ:
.pull-right
ຖັນຕາໜ່າງສຸດທ້າຍຂອງທ່ານເພື່ອຈັດຮຽງໃຫ້ຖືກຕ້ອງການສະຫນັບສະຫນູນສໍາລັບ ອົງ overflow: hidden
ປະ <body>
ກອບແມ່ນຂ້ອນຂ້າງຈໍາກັດໃນ iOS ແລະ Android. ເພື່ອເຮັດສິ່ງນີ້, ເມື່ອທ່ານເລື່ອນຜ່ານທາງເທິງຫຼືລຸ່ມຂອງ modal ໃນຕົວທ່ອງເວັບຂອງອຸປະກອນເຫຼົ່ານັ້ນ, <body>
ເນື້ອຫາຈະເລີ່ມເລື່ອນລົງ. ເບິ່ງ ຂໍ້ບົກພ່ອງຂອງ Chrome #175502 (ແກ້ໄຂໃນ Chrome v40) ແລະ ຂໍ້ບົກພ່ອງ WebKit #153852 .
ໃນ iOS 9.3, ໃນຂະນະທີ່ modal ເປີດ, ຖ້າການສໍາພັດເບື້ອງຕົ້ນຂອງ gesture ເລື່ອນແມ່ນຢູ່ໃນຂອບເຂດຂອງຂໍ້ຄວາມ <input>
ຫຼື a <textarea>
, <body>
ເນື້ອໃນພາຍໃຕ້ modal ຈະຖືກເລື່ອນແທນທີ່ຈະເປັນ modal ຕົວຂອງມັນເອງ. ເບິ່ງ WebKit bug #153856 .
ນອກຈາກນັ້ນ, ໃຫ້ສັງເກດວ່າຖ້າທ່ານໃຊ້ແຖບ navbar ຄົງທີ່ຫຼືໃຊ້ວັດສະດຸປ້ອນພາຍໃນ modal, iOS ມີຂໍ້ຜິດພາດໃນການສະແດງຜົນທີ່ບໍ່ປັບປຸງຕໍາແຫນ່ງຂອງອົງປະກອບຄົງທີ່ໃນເວລາທີ່ແປ້ນພິມ virtual ຖືກກະຕຸ້ນ. ການແກ້ໄຂບາງຢ່າງສໍາລັບການນີ້ລວມມີການຫັນປ່ຽນອົງປະກອບຂອງທ່ານໄປຫາ position: absolute
ຫຼືຮຽກຮ້ອງໃຫ້ຈັບເວລາໃນຈຸດສຸມເພື່ອພະຍາຍາມແກ້ໄຂການຈັດຕໍາແຫນ່ງດ້ວຍຕົນເອງ. ນີ້ບໍ່ໄດ້ຖືກຈັດການໂດຍ Bootstrap, ສະນັ້ນມັນຂຶ້ນກັບທ່ານທີ່ຈະຕັດສິນໃຈວ່າວິທີແກ້ໄຂທີ່ດີທີ່ສຸດສໍາລັບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ.
ອົງ ປະ .dropdown-backdrop
ກອບດັ່ງກ່າວບໍ່ໄດ້ໃຊ້ໃນ iOS ໃນ nav ເນື່ອງຈາກຄວາມສັບສົນຂອງ z-indexing. ດັ່ງນັ້ນ, ເພື່ອປິດ dropdowns ໃນ navbars, ທ່ານຕ້ອງໄດ້ໂດຍກົງຄລິກອົງປະກອບ dropdown (ຫຼື ອົງປະກອບອື່ນໆທີ່ຈະ fire event ຄລິກໃນ iOS ).
ການຊູມຫນ້າຢ່າງຫຼີກລ່ຽງບໍ່ໄດ້ສະເຫນີການສະແດງຜົນປອມໃນບາງອົງປະກອບ, ທັງໃນ Bootstrap ແລະສ່ວນທີ່ເຫຼືອຂອງເວັບ. ອີງຕາມບັນຫາ, ພວກເຮົາອາດຈະສາມາດແກ້ໄຂໄດ້ (ຄົ້ນຫາກ່ອນແລະຫຼັງຈາກນັ້ນເປີດບັນຫາຖ້າຕ້ອງການ). ຢ່າງໃດກໍຕາມ, ພວກເຮົາມີແນວໂນ້ມທີ່ຈະບໍ່ສົນໃຈສິ່ງເຫຼົ່ານີ້ຍ້ອນວ່າພວກເຂົາມັກຈະບໍ່ມີການແກ້ໄຂໂດຍກົງນອກເຫນືອຈາກການແກ້ໄຂບັນຫາ hacky.
:hover
/ :focus
ໃນມືຖືເຖິງແມ່ນວ່າການ hovering ທີ່ແທ້ຈິງເປັນໄປບໍ່ໄດ້ຢູ່ໃນຫນ້າຈໍສໍາພັດສ່ວນໃຫຍ່, ຕົວທ່ອງເວັບຂອງໂທລະສັບມືຖືສ່ວນໃຫຍ່ເຮັດຕາມການສະຫນັບສະຫນຸນ hover ແລະເຮັດໃຫ້ :hover
"ຫນຽວ". ໃນຄໍາສັບຕ່າງໆອື່ນໆ, :hover
ຮູບແບບເລີ່ມຕົ້ນນໍາໃຊ້ຫຼັງຈາກແຕະອົງປະກອບໃດຫນຶ່ງແລະພຽງແຕ່ຢຸດເຊົາການສະຫມັກຫຼັງຈາກຜູ້ໃຊ້ແຕະບາງອົງປະກອບອື່ນໆ. ນີ້ສາມາດເຮັດໃຫ້ລັດຂອງ Bootstrap :hover
ກາຍເປັນ "ຕິດຢູ່" ທີ່ບໍ່ປາດຖະຫນາໃນຕົວທ່ອງເວັບດັ່ງກ່າວ. ບາງຕົວທ່ອງເວັບຂອງໂທລະສັບມືຖືຍັງເຮັດໃຫ້ :focus
ຄ້າຍຄືກັນ. ໃນປັດຈຸບັນບໍ່ມີການແກ້ໄຂງ່າຍໆສໍາລັບບັນຫາເຫຼົ່ານີ້ນອກເຫນືອຈາກການເອົາຮູບແບບດັ່ງກ່າວອອກທັງຫມົດ.
ແມ້ແຕ່ຢູ່ໃນບາງຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ການພິມສາມາດ quirky.
ໂດຍສະເພາະ, ໃນ Chrome v32 ແລະບໍ່ຄໍານຶງເຖິງການຕັ້ງຄ່າຂອບ, Chrome ໃຊ້ຄວາມກວ້າງ viewport ແຄບກວ່າຂະຫນາດກະດາດຕົວຈິງໃນເວລາທີ່ການແກ້ໄຂຄໍາຖາມສື່ມວນຊົນໃນຂະນະທີ່ພິມຫນ້າເວັບ. ນີ້ສາມາດສົ່ງຜົນໃຫ້ຕາຂ່າຍໄຟຟ້າຂະຫນາດນ້ອຍພິເສດຂອງ Bootstrap ຖືກເປີດໃຊ້ໂດຍບໍ່ຄາດຄິດໃນເວລາພິມ. ເບິ່ງບັນຫາ #12078 ແລະ Chrome bug #273306 ສໍາລັບລາຍລະອຽດບາງຢ່າງ. ວິທີແກ້ໄຂບັນຫາທີ່ແນະນຳ:
@screen-*
ຕົວແປໜ້ອຍລົງເພື່ອໃຫ້ເຈ້ຍເຄື່ອງພິມຂອງເຈົ້າຖືວ່າໃຫຍ່ກວ່າຂະໜາດນ້ອຍພິເສດ.ນອກຈາກນີ້, ເປັນຂອງ Safari v8.0, fixed-width .container
s ສາມາດເຮັດໃຫ້ Safari ໃຊ້ຂະຫນາດຕົວອັກສອນທີ່ຜິດປົກກະຕິໃນເວລາທີ່ພິມ. ເບິ່ງ #14868 ແລະ WebKit bug #138192 ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ. ຫນຶ່ງໃນການແກ້ໄຂທີ່ເປັນໄປໄດ້ສໍາລັບການນີ້ແມ່ນການເພີ່ມ CSS ຕໍ່ໄປນີ້:
ອອກຈາກກ່ອງ, Android 4.1 (ແລະແມ້ກະທັ້ງບາງລຸ້ນໃຫມ່ທີ່ປາກົດຂື້ນ) ສົ່ງກັບແອັບຯ Browser ເປັນຕົວທ່ອງເວັບທາງເລືອກເລີ່ມຕົ້ນ (ກົງກັນຂ້າມກັບ Chrome). ແຕ່ຫນ້າເສຍດາຍ, ແອັບຯ Browser ມີຂໍ້ບົກພ່ອງຫຼາຍຢ່າງແລະບໍ່ສອດຄ່ອງກັບ CSS ໂດຍທົ່ວໄປ.
ໃນ <select>
ອົງປະກອບ, ຕົວທ່ອງເວັບຫຼັກຊັບ Android ຈະບໍ່ສະແດງການຄວບຄຸມດ້ານຂ້າງຖ້າມີ border-radius
ແລະ / ຫຼື border
ນໍາໃຊ້. (ເບິ່ງ ຄໍາຖາມ StackOverflow ນີ້ ສໍາລັບລາຍລະອຽດ.) ໃຊ້ snippet ຂອງລະຫັດຂ້າງລຸ່ມນີ້ເພື່ອເອົາ CSS ທີ່ກະທໍາຜິດແລະສະແດງ <select>
ເປັນອົງປະກອບ unstyled ໃນຕົວທ່ອງເວັບຫຼັກຊັບ Android. ຕົວແທນຜູ້ໃຊ້ sniffing ຫຼີກເວັ້ນການແຊກແຊງກັບຕົວທ່ອງເວັບຂອງ Chrome, Safari, ແລະ Mozilla.
ຕ້ອງການເບິ່ງຕົວຢ່າງ? ກວດເບິ່ງຕົວຢ່າງ JS Bin ນີ້.
ເພື່ອໃຫ້ປະສົບການທີ່ດີທີ່ສຸດທີ່ເປັນໄປໄດ້ກັບຕົວທ່ອງເວັບເກົ່າແລະ buggy, Bootstrap ໃຊ້ CSS browser hacks ໃນຫຼາຍໆບ່ອນເພື່ອເປົ້າຫມາຍ CSS ພິເສດໃຫ້ກັບບາງຮຸ່ນຂອງຕົວທ່ອງເວັບເພື່ອເຮັດວຽກກັບແມງໄມ້ໃນຕົວທ່ອງເວັບຂອງຕົນເອງ. ການແຮັກເຫຼົ່ານີ້ເຂົ້າໃຈໄດ້ເຮັດໃຫ້ຜູ້ກວດສອບ CSS ຈົ່ມວ່າບໍ່ຖືກຕ້ອງ. ຢູ່ໃນສະຖານທີ່ສອງຢ່າງ, ພວກເຮົາຍັງໃຊ້ຄຸນສົມບັດ CSS ທີ່ມີເລືອດອອກທີ່ຍັງບໍ່ທັນໄດ້ມາດຕະຖານຢ່າງເຕັມສ່ວນ, ແຕ່ເຫຼົ່ານີ້ຖືກນໍາໃຊ້ຢ່າງດຽວສໍາລັບການເພີ່ມປະສິດທິພາບກ້າວຫນ້າ.
ຄໍາເຕືອນການຢືນຢັນເຫຼົ່ານີ້ບໍ່ສໍາຄັນໃນການປະຕິບັດເພາະວ່າສ່ວນທີ່ບໍ່ແມ່ນ hacky ຂອງ CSS ຂອງພວກເຮົາມີຄວາມຖືກຕ້ອງຢ່າງເຕັມສ່ວນແລະສ່ວນ hacky ບໍ່ໄດ້ແຊກແຊງການເຮັດວຽກທີ່ເຫມາະສົມຂອງສ່ວນທີ່ບໍ່ແມ່ນ hacky, ດັ່ງນັ້ນເປັນຫຍັງພວກເຮົາເຈດຕະນາບໍ່ສົນໃຈຄໍາເຕືອນໂດຍສະເພາະເຫຼົ່ານີ້.
ເອກະສານ HTML ຂອງພວກເຮົາເຊັ່ນດຽວກັນມີບາງຄໍາເຕືອນການກວດສອບ HTML ທີ່ບໍ່ສໍາຄັນແລະບໍ່ມີຜົນສະທ້ອນອັນເນື່ອງມາຈາກການລວມເອົາການແກ້ໄຂຂອງພວກເຮົາສໍາລັບ ບາງຂໍ້ຜິດພາດ Firefox .
ໃນຂະນະທີ່ພວກເຮົາບໍ່ສະຫນັບສະຫນູນ plugins ຫຼື add-ons ພາກສ່ວນທີສາມຢ່າງເປັນທາງການ, ພວກເຮົາສະເຫນີຄໍາແນະນໍາທີ່ເປັນປະໂຫຍດເພື່ອຊ່ວຍຫຼີກເວັ້ນບັນຫາທີ່ອາດຈະເກີດຂື້ນໃນໂຄງການຂອງທ່ານ.
ບາງຊອບແວພາກສ່ວນທີສາມ, ລວມທັງ Google Maps ແລະ Google Custom Search Engine, ຂັດແຍ້ງກັບ Bootstrap ເນື່ອງຈາກ * { box-sizing: border-box; }
, ກົດລະບຽບທີ່ເຮັດໃຫ້ມັນ padding
ບໍ່ມີຜົນຕໍ່ຄວາມກວ້າງຂອງຄອມພິວເຕີ້ສຸດທ້າຍຂອງອົງປະກອບ. ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ ຮູບແບບກ່ອງແລະຂະຫນາດຢູ່ທີ່ CSS Tricks .
ອີງຕາມບໍລິບົດ, ທ່ານອາດຈະ override ຕາມຄວາມຕ້ອງການ (ທາງເລືອກ 1) ຫຼືປັບຂະຫນາດກ່ອງສໍາລັບພາກພື້ນທັງຫມົດ (ທາງເລືອກ 2).
Bootstrap ປະຕິບັດຕາມມາດຕະຖານເວັບໄຊຕ໌ທົ່ວໄປແລະ - ດ້ວຍການພະຍາຍາມພິເສດຫນ້ອຍທີ່ສຸດ - ສາມາດຖືກນໍາໃຊ້ເພື່ອສ້າງເວັບໄຊທ໌ທີ່ສາມາດເຂົ້າເຖິງຜູ້ທີ່ໃຊ້ AT .
ຖ້າການນໍາທາງຂອງທ່ານມີການເຊື່ອມໂຍງຫຼາຍແລະມາກ່ອນເນື້ອຫາຕົ້ນຕໍໃນ DOM, ເພີ່ມການ Skip to main content
ເຊື່ອມຕໍ່ກ່ອນການນໍາທາງ (ສໍາລັບຄໍາອະທິບາຍງ່າຍໆ, ເບິ່ງ ບົດຄວາມໂຄງການ A11Y ນີ້ກ່ຽວກັບການເຊື່ອມຕໍ່ນໍາທາງຂ້າມ ). ການໃຊ້ຄລາສ .sr-only
ຈະເຊື່ອງລິ້ງຂ້າມຜ່ານທາງສາຍຕາ, ແລະ .sr-only-focusable
ຊັ້ນຮຽນຈະຮັບປະກັນວ່າລິ້ງຈະເຫັນໄດ້ເມື່ອຖືກເນັ້ນ (ສຳລັບຜູ້ໃຊ້ແປ້ນພິມທີ່ເບິ່ງເຫັນ).
ເນື່ອງຈາກຂໍ້ບົກພ່ອງ/ຂໍ້ບົກພ່ອງໃນ Chrome ທີ່ມີມາດົນນານ (ເບິ່ງ ບັນຫາ 262171 ໃນຕົວຕິດຕາມບັກ Chromium ) ແລະ Internet Explorer (ເບິ່ງບົດຄວາມນີ້ກ່ຽວກັບ ການເຊື່ອມຕໍ່ໃນຫນ້າແລະຄໍາສັ່ງສຸມໃສ່ ), ທ່ານຈະຕ້ອງໃຫ້ແນ່ໃຈວ່າເປົ້າຫມາຍຂອງການເຊື່ອມຕໍ່ຂ້າມຂອງທ່ານ. ຢ່າງໜ້ອຍແມ່ນສາມາດສຸມໃສ່ໂຄງການໄດ້ໂດຍການເພີ່ມ tabindex="-1"
.
ນອກຈາກນັ້ນ, ທ່ານອາດຈະຕ້ອງການສະກັດກັ້ນຢ່າງຈະແຈ້ງທີ່ຊີ້ໃຫ້ເຫັນຈຸດສຸມໃສ່ເປົ້າຫມາຍ (ໂດຍສະເພາະ Chrome ປະຈຸບັນຍັງກໍານົດຈຸດສຸມກ່ຽວກັບອົງປະກອບ tabindex="-1"
ໃນເວລາທີ່ເຂົາເຈົ້າຖືກຄລິກດ້ວຍຫນູ) ກັບ #content:focus { outline: none; }
.
ໃຫ້ສັງເກດວ່າ bug ນີ້ຍັງຈະສົ່ງຜົນກະທົບຕໍ່ການເຊື່ອມຕໍ່ໃນຫນ້າອື່ນໆທີ່ເວັບໄຊຂອງທ່ານອາດຈະຖືກນໍາໃຊ້, rendering ໃຫ້ເຂົາເຈົ້າບໍ່ມີປະໂຫຍດສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ. ທ່ານອາດຈະພິຈາລະນາເພີ່ມການແກ້ໄຂຊ່ອງຫວ່າງທີ່ຄ້າຍຄືກັນກັບຕົວກໍານົດການສະມໍ / fragment ທີ່ມີຊື່ອື່ນໆທີ່ເຮັດຫນ້າທີ່ເປັນເປົ້າຫມາຍເຊື່ອມຕໍ່.
ເມື່ອຕັ້ງຫົວຂໍ້ ( <h1>
- <h6>
), ຫົວເອກະສານຫຼັກຂອງທ່ານຄວນຈະເປັນ <h1>
. ຫົວຂໍ້ຕໍ່ໄປຄວນຈະເຮັດໃຫ້ການນໍາໃຊ້ຢ່າງມີເຫດຜົນ <h2>
- <h6>
ເຊັ່ນວ່າຜູ້ອ່ານຫນ້າຈໍສາມາດສ້າງຕາຕະລາງເນື້ອໃນສໍາລັບຫນ້າຂອງທ່ານ.
ສຶກສາເພີ່ມເຕີມທີ່ HTML CodeSniffer ແລະ Penn State's AccessAbility .
ໃນປັດຈຸບັນ, ບາງສ່ວນຂອງການປະສົມສີເລີ່ມຕົ້ນທີ່ມີຢູ່ໃນ Bootstrap (ເຊັ່ນ: ປະເພດ ປຸ່ມທີ່ມີຮູບແບບ ຕ່າງໆ , ບາງສີທີ່ເນັ້ນໃສ່ລະຫັດທີ່ໃຊ້ສໍາລັບ ການບລັອກລະຫັດພື້ນຖານ , ຫ້ອງຮຽນຜູ້ຊ່ວຍ .bg-primary
ພື້ນຫລັງຂອງສະພາບການ , ແລະສີເຊື່ອມຕໍ່ເລີ່ມຕົ້ນເມື່ອໃຊ້ໃນພື້ນຫລັງສີຂາວ) ມີອັດຕາສ່ວນທາງກົງກັນຂ້າມຕ່ໍາ (ຕ່ໍາອັດຕາສ່ວນທີ່ ແນະນໍາຂອງ 4.5:1 ). ນີ້ສາມາດເຮັດໃຫ້ເກີດບັນຫາກັບຜູ້ໃຊ້ທີ່ມີສາຍຕາຕໍ່າຫຼືຜູ້ທີ່ຕາບອດສີ. ສີເລີ່ມຕົ້ນເຫຼົ່ານີ້ອາດຈະຕ້ອງຖືກແກ້ໄຂເພື່ອເພີ່ມຄວາມຄົມຊັດ ແລະ ຄວາມຊັດເຈນຂອງພວກມັນ.
Bootstrap ຖືກປ່ອຍອອກມາພາຍໃຕ້ໃບອະນຸຍາດ MIT ແລະເປັນລິຂະສິດ 2016 Twitter. ຕົ້ມລົງເປັນຕ່ອນນ້ອຍ, ມັນສາມາດໄດ້ຮັບການອະທິບາຍດ້ວຍເງື່ອນໄຂດັ່ງຕໍ່ໄປນີ້.
ໃບອະນຸຍາດ Bootstrap ເຕັມແມ່ນຢູ່ ໃນ repository ໂຄງການ ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.
ສະມາຊິກຊຸມຊົນໄດ້ແປເອກະສານຂອງ Bootstrap ເປັນພາສາຕ່າງໆ. ບໍ່ມີອັນໃດໄດ້ຮັບການສະໜັບສະໜູນຢ່າງເປັນທາງການ ແລະພວກມັນອາດຈະບໍ່ທັນສະ ເໝີ ໄປ.
ພວກເຮົາບໍ່ໄດ້ຊ່ວຍຈັດຕັ້ງຫຼືເປັນເຈົ້າພາບການແປພາສາ, ພວກເຮົາພຽງແຕ່ເຊື່ອມຕໍ່ກັບພວກເຂົາ.
ສຳເລັດການແປໃໝ່ ຫຼືດີກວ່າບໍ? ເປີດການຮ້ອງຂໍດຶງເພື່ອເພີ່ມມັນໃສ່ບັນຊີລາຍຊື່ຂອງພວກເຮົາ.