ວິທີການ

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

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

ເບິ່ງສິ່ງທີ່ບໍ່ຖືກຕ້ອງ, ຫຼືບາງທີອາດຈະເຮັດໄດ້ດີກວ່າ? ເປີດບັນຫາ - ພວກເຮົາຢາກຈະສົນທະນາກັບເຈົ້າ.

ສະຫຼຸບ

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

• ອົງປະກອບຄວນຕອບສະຫນອງແລະມືຖືທໍາອິດ
• ອົງປະກອບຄວນຖືກສ້າງດ້ວຍຊັ້ນພື້ນຖານແລະຂະຫຍາຍຜ່ານຫ້ອງຮຽນຕົວແກ້ໄຂ
• ລັດອົງປະກອບຄວນປະຕິບັດຕາມຂະໜາດ z-index ທົ່ວໄປ
• ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຕ້ອງການການປະຕິບັດ HTML ແລະ CSS ຫຼາຍກວ່າ JavaScript
• ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ໃຊ້ປະໂຫຍດຫຼາຍກວ່າຮູບແບບທີ່ກໍາຫນົດເອງ
• ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການບັງຄັບໃຊ້ຂໍ້ກໍານົດ HTML ທີ່ເຄັ່ງຄັດ (ຕົວເລືອກເດັກນ້ອຍ)

ຕອບສະໜອງ

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

ໃນທົ່ວ Bootstrap, ທ່ານຈະເຫັນສິ່ງນີ້ຢ່າງຊັດເຈນທີ່ສຸດໃນການສອບຖາມສື່ຂອງພວກເຮົາ. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ພວກເຮົາໃຊ້ການ min-widthສອບຖາມທີ່ເລີ່ມຕົ້ນທີ່ຈະນໍາໃຊ້ໃນຈຸດພັກຜ່ອນສະເພາະແລະດໍາເນີນການຜ່ານຈຸດພັກຜ່ອນທີ່ສູງຂຶ້ນ. ສໍາລັບຕົວຢ່າງ, .d-noneນໍາໃຊ້ຈາກ min-width: 0infinity. ໃນທາງກົງກັນຂ້າມ, .d-md-noneໃຊ້ໄດ້ຈາກຈຸດແບ່ງຂະໜາດກາງ ແລະຂຶ້ນ.

ບາງຄັ້ງພວກເຮົາຈະໃຊ້ max-widthໃນເວລາທີ່ຄວາມຊັບຊ້ອນຂອງອົງປະກອບທີ່ຕ້ອງການມັນ. ບາງຄັ້ງ, ການ overrides ເຫຼົ່ານີ້ແມ່ນມີຫນ້າທີ່ແລະຈິດໃຈທີ່ຈະແຈ້ງກວ່າທີ່ຈະປະຕິບັດແລະສະຫນັບສະຫນູນກ່ວາການຂຽນຄືນໃຫມ່ຫນ້າທີ່ຫຼັກຈາກອົງປະກອບຂອງພວກເຮົາ. ພວກເຮົາພະຍາຍາມຈໍາກັດວິທີການນີ້, ແຕ່ຈະໃຊ້ມັນໃນບາງເວລາ.

ຫ້ອງຮຽນ

ນອກເໜືອໄປຈາກ Reboot ຂອງພວກເຮົາ, ຮູບແບບການປັບແຕ່ງແບບປົກກະຕິຂ້າມບຣາວເຊີ, ຮູບແບບທັງໝົດຂອງພວກເຮົາມີຈຸດປະສົງເພື່ອໃຊ້ຫ້ອງຮຽນເປັນຕົວເລືອກ. ນີ້ຫມາຍຄວາມວ່າການຊີ້ນໍາທີ່ຊັດເຈນຂອງຕົວເລືອກປະເພດ (ເຊັ່ນ, input[type="text"]) ແລະຫ້ອງຮຽນພໍ່ແມ່ extraneous (ເຊັ່ນ, .parent .child) ທີ່ເຮັດໃຫ້ຮູບແບບສະເພາະເກີນໄປທີ່ຈະ override ໄດ້ຢ່າງງ່າຍດາຍ.

ດັ່ງນັ້ນ, ອົງປະກອບຄວນຖືກສ້າງດ້ວຍຊັ້ນພື້ນຖານທີ່ເປັນເຮືອນທົ່ວໄປ, ບໍ່ຄວນຖືກຄອບຄຸມດ້ວຍຄູ່ມູນຄ່າຊັບສິນ. ສໍາລັບຕົວຢ່າງ, .btnແລະ .btn-primary. ພວກເຮົາໃຊ້ .btnສໍາລັບທຸກຮູບແບບທົ່ວໄປເຊັ່ນ display, padding, ແລະ border-width. ຫຼັງຈາກນັ້ນ, ພວກເຮົາໃຊ້ຕົວແກ້ໄຂເຊັ່ນ .btn-primaryການເພີ່ມສີ, ສີພື້ນຫລັງ, ສີຂອບ, ແລະອື່ນໆ.

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

z-index scales

ມີສອງ z-indexເກັດໃນ Bootstrap - ອົງປະກອບພາຍໃນອົງປະກອບແລະອົງປະກອບ overlay.

ອົງປະກອບຂອງອົງປະກອບ

• ບາງອົງປະກອບໃນ Bootstrap ຖືກສ້າງຂຶ້ນດ້ວຍອົງປະກອບທີ່ທັບຊ້ອນກັນເພື່ອປ້ອງກັນບໍ່ໃຫ້ມີຊາຍແດນສອງເທົ່າໂດຍບໍ່ມີການດັດແປງ borderຊັບສິນ. ຕົວຢ່າງ, ກຸ່ມປຸ່ມ, ກຸ່ມການປ້ອນຂໍ້ມູນ, ແລະ pagination.
• ອົງປະກອບເຫຼົ່ານີ້ແບ່ງປັນ z-indexຂະຫນາດ ມາດຕະຖານ 0ຜ່ານ 3.
• 0ແມ່ນຄ່າເລີ່ມຕົ້ນ (ເບື້ອງຕົ້ນ), 1ແມ່ນ :hover, 2ແມ່ນ :active/ .active, ແລະ 3ແມ່ນ :focus.
• ວິທີການນີ້ກົງກັບຄວາມຄາດຫວັງຂອງພວກເຮົາກ່ຽວກັບຄວາມສໍາຄັນຂອງຜູ້ໃຊ້ສູງສຸດ. ຖ້າອົງປະກອບແມ່ນສຸມໃສ່, ມັນຢູ່ໃນທັດສະນະແລະຄວາມສົນໃຈຂອງຜູ້ໃຊ້. ອົງປະກອບທີ່ມີການເຄື່ອນໄຫວແມ່ນສູງທີ່ສຸດເປັນອັນດັບສອງຍ້ອນວ່າພວກມັນຊີ້ໃຫ້ເຫັນເຖິງສະຖານະ. Hover ແມ່ນສູງສຸດອັນດັບສາມເພາະວ່າມັນຊີ້ໃຫ້ເຫັນເຖິງຄວາມຕັ້ງໃຈຂອງຜູ້ໃຊ້, ແຕ່ເກືອບ ທຸກຢ່າງ ສາມາດ hovered ໄດ້.

ອົງປະກອບຊ້ອນກັນ

Bootstrap ປະກອບມີອົງປະກອບຈໍານວນຫນຶ່ງທີ່ເຮັດຫນ້າທີ່ເປັນການຊ້ອນກັນຂອງບາງປະເພດ. ນີ້ປະກອບມີ, ໃນລໍາດັບສູງສຸດ z-index, dropdowns, navbars ຄົງແລະຫນຽວ, modals, tooltips, ແລະ popovers. ອົງປະກອບເຫຼົ່ານີ້ມີ z-indexຂະຫນາດຂອງຕົນເອງທີ່ເລີ່ມຕົ້ນທີ່ 1000. ຕົວເລກເລີ່ມຕົ້ນນີ້ຖືກເລືອກໂດຍຕົນເອງ ແລະເຮັດໜ້າທີ່ເປັນຕົວກັນນ້ອຍລະຫວ່າງຮູບແບບຂອງພວກເຮົາ ແລະຮູບແບບທີ່ກຳນົດເອງຂອງໂຄງການຂອງທ່ານ.

ແຕ່ລະອົງປະກອບການວາງຊ້ອນເພີ່ມ z-indexມູນຄ່າຂອງມັນເລັກນ້ອຍໃນລັກສະນະທີ່ຫຼັກການ UI ທົ່ວໄປອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສຸມໃສ່ຫຼື hovered ອົງປະກອບທີ່ຈະຍັງຄົງຢູ່ໃນເບິ່ງຕະຫຼອດເວລາ. ຕົວຢ່າງ, modal ແມ່ນການສະກັດເອກະສານ (ຕົວຢ່າງ, ທ່ານບໍ່ສາມາດປະຕິບັດການອື່ນໆທີ່ຊ່ວຍປະຢັດສໍາລັບການປະຕິບັດຂອງ modal), ດັ່ງນັ້ນພວກເຮົາເອົາສິ່ງນັ້ນຂ້າງເທິງ navbars ຂອງພວກເຮົາ.

ສຶກສາເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນີ້ໃນ z-indexໜ້າໂຄງຮ່າງ ຂອງພວກເຮົາ .

HTML ແລະ CSS ຜ່ານ JS

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

ຫຼັກການນີ້ແມ່ນ API JavaScript ຊັ້ນທໍາອິດຂອງພວກເຮົາໂດຍໃຊ້ dataຄຸນລັກສະນະ. ທ່ານບໍ່ຈໍາເປັນຕ້ອງຂຽນເກືອບທຸກ JavaScript ເພື່ອໃຊ້ plugins JavaScript ຂອງພວກເຮົາ; ແທນທີ່ຈະ, ຂຽນ HTML. ອ່ານເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນີ້ໃນ ຫນ້າພາບລວມ JavaScript ຂອງພວກເຮົາ .

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

ດຽວກັນໄປສໍາລັບອົງປະກອບທີ່ສັບສົນຫຼາຍ. ໃນຂະນະທີ່ພວກເຮົາ ສາມາດ ຂຽນ plugin ການກວດສອບແບບຟອມຂອງພວກເຮົາເອງເພື່ອເພີ່ມຊັ້ນຮຽນໃຫ້ກັບອົງປະກອບຂອງພໍ່ແມ່ໂດຍອີງໃສ່ສະຖານະຂອງວັດສະດຸປ້ອນ, ດ້ວຍເຫດນີ້ເຮັດໃຫ້ພວກເຮົາຈັດຮູບແບບຂໍ້ຄວາມທີ່ມີສີແດງ, ພວກເຮົາມັກໃຊ້ :valid/ :invalidpseudo-elements ທຸກໆຕົວທ່ອງເວັບສະຫນອງໃຫ້ພວກເຮົາ.

ອຸປະໂພກ

ຫ້ອງຮຽນຜົນປະໂຫຍດ - ອະດີດຜູ້ຊ່ວຍໃນ Bootstrap 3 - ເປັນພັນທະມິດທີ່ມີປະສິດທິພາບໃນການຕໍ່ສູ້ກັບ CSS bloat ແລະການປະຕິບັດຫນ້າທີ່ບໍ່ດີ. ໂດຍທົ່ວໄປແລ້ວ ປະເພດຜົນປະໂຫຍດແມ່ນເປັນການຈັບຄູ່ຊັບສິນ-ຄ່າທີ່ບໍ່ປ່ຽນແປງໄດ້ອັນດຽວທີ່ສະແດງອອກເປັນຊັ້ນ (ຕົວຢ່າງ: .d-blockເປັນຕົວແທນ display: block;). ການອຸທອນຕົ້ນຕໍຂອງພວກເຂົາແມ່ນຄວາມໄວຂອງການນໍາໃຊ້ໃນຂະນະທີ່ຂຽນ HTML ແລະການຈໍາກັດຈໍານວນ CSS ແບບກໍານົດເອງທີ່ທ່ານຕ້ອງຂຽນ.

ໂດຍສະເພາະກ່ຽວກັບ CSS ທີ່ກໍາຫນົດເອງ, ຜົນປະໂຫຍດສາມາດຊ່ວຍຕໍ່ສູ້ກັບການເພີ່ມຂະຫນາດໄຟລ໌ໂດຍການຫຼຸດຜ່ອນຄູ່ຊັບສິນ - ມູນຄ່າຊ້ໍາກັນຫຼາຍທີ່ສຸດຂອງທ່ານເຂົ້າໄປໃນຫ້ອງຮຽນດຽວ. ນີ້ສາມາດມີຜົນກະທົບຢ່າງຫຼວງຫຼາຍໃນລະດັບໃນໂຄງການຂອງທ່ານ.

HTML ປ່ຽນແປງໄດ້

ໃນຂະນະທີ່ເປັນໄປບໍ່ໄດ້ສະ ເໝີ ໄປ, ພວກເຮົາພະຍາຍາມຫຼີກລ້ຽງການເປັນ dogmatic ເກີນໄປໃນຂໍ້ກໍານົດ HTML ຂອງພວກເຮົາສໍາລັບອົງປະກອບ. ດັ່ງນັ້ນ, ພວກເຮົາສຸມໃສ່ຫ້ອງຮຽນດຽວໃນຕົວເລືອກ CSS ຂອງພວກເຮົາແລະພະຍາຍາມຫຼີກເວັ້ນການເລືອກເດັກນ້ອຍໃນທັນທີ ( >). ນີ້ເຮັດໃຫ້ທ່ານມີຄວາມຍືດຫຍຸ່ນໃນການຈັດຕັ້ງປະຕິບັດຂອງທ່ານແລະຊ່ວຍໃຫ້ CSS ຂອງພວກເຮົາງ່າຍດາຍແລະຫນ້ອຍລົງ.

ສົນທິສັນຍາລະຫັດ

Code Guide (ຈາກ Bootstrap co-creator, @mdo) ເອກະສານວິທີການທີ່ພວກເຮົາຂຽນ HTML ແລະ CSS ຂອງພວກເຮົາໃນທົ່ວ Bootstrap. ມັນເຈາະຈົງຂໍ້ແນະນຳສຳລັບການຈັດຮູບແບບທົ່ວໄປ, ຄ່າເລີ່ມຕົ້ນຂອງຄວາມຮູ້ສຶກທົ່ວໄປ, ຄຳສັ່ງຊັບສິນ ແລະຄຸນສົມບັດ, ແລະອື່ນໆອີກ.

ພວກເຮົາໃຊ້ Stylelint ເພື່ອບັງຄັບໃຊ້ມາດຕະຖານເຫຼົ່ານີ້ ແລະອື່ນໆອີກໃນ Sass/CSS ຂອງພວກເຮົາ. ການຕັ້ງຄ່າ Stylelint ແບບກຳນົດເອງຂອງພວກເຮົາ ແມ່ນແຫຼ່ງເປີດ ແລະ ມີໃຫ້ຜູ້ອື່ນນຳໃຊ້ ແລະ ຂະຫຍາຍ.

ພວກເຮົາໃຊ້ vnu-jar ເພື່ອບັງຄັບໃຊ້ HTML ມາດຕະຖານແລະ semantic, ເຊັ່ນດຽວກັນກັບການກວດສອບຄວາມຜິດພາດທົ່ວໄປ.