ເພີ່ມ jQuery ແລະ Bootstrap ເພື່ອຂຽນໂປແກຼມທີ່ໃຊ້ໃນມືຖືແລະຕອບສະ ໜອງ

ໃນພາກທີ 1 ຂອງຊຸດນີ້, ພວກເຮົາໄດ້ຕັ້ງໂຄງການ HTML 5 ຂັ້ນພື້ນຖານໂດຍ ນຳ ໃຊ້ Netbeans ເປັນ IDE ຂອງພວກເຮົາ, ແລະພວກເຮົາຍັງໄດ້ ນຳ ສະ ເໜີ ອົງປະກອບ ຈຳ ນວນ ໜຶ່ງ ທີ່ໄດ້ຖືກເພີ່ມເຂົ້າໃນສະເພາະຂອງພາສານີ້.

ໃນບາງ ຄຳ ສັບ, ທ່ານສາມາດຄິດກ່ຽວກັບ jQuery ເປັນຫ້ອງສະ ໝຸດ Javascript ຂ້າມແລະເວບໄຊທ໌ຂ້າມເວບໄຊທ໌ເຊິ່ງສາມາດເຮັດໃຫ້ງ່າຍຂື້ນ ສຳ ລັບລູກຄ້າທີ່ຂຽນຢູ່ ໜ້າ HTML ໃນທາງກົງກັນຂ້າມ, Bootstrap ສາມາດຖືກອະທິບາຍວ່າເປັນກອບທີ່ສົມບູນທີ່ລວມເອົາເຄື່ອງມື HTML, CSS, ແລະ Javascript ເພື່ອສ້າງ ໜ້າ ເວບທີ່ຕອບສະ ໜອງ ກັບມືຖືແລະຕອບສະ ໜອງ ໄດ້.

ໃນບົດຄວາມນີ້ພວກເຮົາຈະແນະ ນຳ ທ່ານກ່ຽວກັບ jQuery ແລະ Bootstrap, ສອງເຄື່ອງອຸປະໂພກທີ່ລ້ ຳ ຄ່າໃນການຂຽນລະຫັດ HTML 5 ງ່າຍກວ່າ. ທັງ jQuery ແລະ Bootstrap ແມ່ນໄດ້ຮັບໃບອະນຸຍາດພາຍໃຕ້ໃບອະນຸຍາດ MIT ແລະ Apache 2.0, ເຊິ່ງເຂົ້າກັນໄດ້ກັບ GPL ແລະເປັນຊອບແວທີ່ບໍ່ເສຍຄ່າ.

ກະລຸນາຮັບຊາບວ່າແນວຄວາມຄິດພື້ນຖານຂອງ HTML, CSS, ແລະ Javascript ບໍ່ໄດ້ຖືກບັນຈຸເຂົ້າໃນບົດຂຽນໃດ ໜຶ່ງ ຂອງຊຸດນີ້. ຖ້າທ່ານຮູ້ສຶກວ່າທ່ານ ຈຳ ເປັນຕ້ອງໄດ້ເລັ່ງກັບຫົວຂໍ້ນີ້ກ່ອນກ່ອນທີ່ຈະ ດຳ ເນີນການ, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ການສອນ HTML 5 ໃນ W3Schools.

ລວມ jQuery ແລະ Bootstrap ເຂົ້າໃນໂຄງການຂອງພວກເຮົາ

ເພື່ອດາວໂຫລດ jQuery, ເຂົ້າໄປທີ່ເວບໄຊທ໌ຂອງໂຄງການທີ່ http://jquery.com ແລະກົດປຸ່ມທີ່ສະແດງແຈ້ງການ ສຳ ລັບຮຸ່ນຫຼ້າສຸດທີ່ ໝັ້ນ ຄົງ.

ໃນເວລາທີ່ຂຽນນີ້ມັນເປັນ v1.11.3 ສຳ ລັບຄວາມເຂົ້າກັນໄດ້ຂອງ browser (ລວມທັງ Internet Explorer ຮຸ່ນ 6, 7, ແລະ 8) ຫຼື v2.1.4 ຖ້າທ່ານແນ່ໃຈວ່າຜູ້ມາຢ້ຽມຢາມຂອງທ່ານຈະບໍ່ໃຊ້ IE ລຸ້ນເຫລົ່ານັ້ນ.

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

ທ່ານຈະສັງເກດເຫັນວ່າທ່ານສາມາດດາວໂລດ .min.js ທີ່ຖືກບີບອັດຫລື .js ທີ່ບໍ່ໄດ້ຖືກບີບດ່ວນຂອງ jQuery. ອັນດັບ ໜຶ່ງ ແມ່ນມີຄວາມ ໝາຍ ເປັນພິເສດ ສຳ ລັບເວັບໄຊທ໌ຕ່າງໆແລະຊ່ວຍຫຼຸດຜ່ອນເວລາໂຫຼດ ໜ້າ ເວບໄຊທ໌ຕ່າງໆ (ແລະດັ່ງນັ້ນ Google ຈຶ່ງຈະຈັດອັນດັບເວັບໄຊທ໌ຂອງເຈົ້າໃຫ້ດີຂື້ນ), ໃນຂະນະທີ່ອັນດັບສອງແມ່ນເປົ້າ ໝາຍ ສ່ວນໃຫຍ່ແມ່ນຢູ່ໃນລະຫັດເພື່ອຈຸດປະສົງການພັດທະນາ.

ເພື່ອຜົນປະໂຫຍດຂອງຄວາມຫຍໍ້ທໍ້ແລະຄວາມສະດວກໃນການ ນຳ ໃຊ້, ພວກເຮົາຈະດາວໂຫລດເວີຊັນທີ່ບີບອັດ (ທີ່ເອີ້ນວ່າ minified) ໄປທີ່ໂຟນເດີສະຄິບພາຍໃນໂຄງສ້າງຂອງເວັບໄຊທ໌ຂອງພວກເຮົາ.

ກົດຂວາໃສ່ລິ້ງ ສຳ ລັບຮວບຮວມ, ຮຸ່ນການຜະລິດແລະເລືອກ Save Link As …ແລະຈາກນັ້ນ ນຳ ທາງໄປທີ່ໄດເລກະທໍລີທີ່ລະບຸ

ສຸດທ້າຍ, ກົດປຸ່ມ Save ຢູ່ທາງລຸ່ມຂອງກ່ອງໂຕ້ຕອບປັດຈຸບັນ:

ດຽວນີ້ເຖິງເວລາແລ້ວທີ່ຈະເພີ່ມ Bootstrap ເຂົ້າໃນໂຄງການຂອງພວກເຮົາ. ເຂົ້າໄປທີ່ http://getbootstrap.com ແລະກົດທີ່ Download Bootstrap. ໃນ ໜ້າ ຕໍ່ໄປ, ໃຫ້ຄລິກໃສ່ຕົວເລືອກທີ່ເນັ້ນທີ່ລະບຸໄວ້ຂ້າງລຸ່ມເພື່ອດາວໂຫລດສ່ວນປະກອບນ້ອຍ, ພ້ອມທີ່ຈະໃຊ້, ໃນແຟ້ມ zip:

ເມື່ອການດາວໂຫລດ ສຳ ເລັດ, ໄປທີ່ໂຟນເດີດາວໂຫລດຂອງທ່ານ, ຖອດແຟ້ມເອກະສານ, ແລະຄັດລອກແຟ້ມທີ່ຖືກເນັ້ນໃສ່ບັນດາທິດທາງທີ່ຊີ້ບອກຢູ່ໃນໂຄງການຂອງທ່ານ:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist

# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

ຖ້າທ່ານຂະຫຍາຍໂຄງສ້າງຂອງເວບໄຊທ໌ຂອງທ່ານໃນ Netbeans, ມັນຄວນຈະມີລັກສະນະດັ່ງຕໍ່ໄປນີ້: