ວິທີການ
ຮຽນຮູ້ກ່ຽວກັບຫຼັກການແນະນໍາ, ຍຸດທະສາດ ແລະເຕັກນິກທີ່ໃຊ້ໃນການກໍ່ສ້າງ ແລະຮັກສາ Bootstrap ເພື່ອໃຫ້ທ່ານສາມາດປັບແຕ່ງ ແລະຂະຫຍາຍມັນໄດ້ງ່າຍຂຶ້ນ.
ໃນຂະນະທີ່ຫນ້າເວັບເລີ່ມຕົ້ນສະຫນອງການທ່ອງທ່ຽວແນະນໍາຂອງໂຄງການແລະສິ່ງທີ່ມັນສະເຫນີ, ເອກະສານນີ້ເນັ້ນໃສ່ ວ່າເປັນຫຍັງ ພວກເຮົາເຮັດສິ່ງທີ່ພວກເຮົາເຮັດໃນ Bootstrap. ມັນອະທິບາຍປັດຊະຍາຂອງພວກເຮົາໃນການສ້າງເວັບເພື່ອໃຫ້ຜູ້ອື່ນສາມາດຮຽນຮູ້ຈາກພວກເຮົາ, ປະກອບສ່ວນກັບພວກເຮົາ, ແລະຊ່ວຍພວກເຮົາປັບປຸງ.
ເບິ່ງສິ່ງທີ່ບໍ່ຖືກຕ້ອງ, ຫຼືບາງທີອາດຈະເຮັດໄດ້ດີກວ່າ? ເປີດບັນຫາ - ພວກເຮົາຢາກຈະສົນທະນາກັບເຈົ້າ.
ສະຫຼຸບ
ພວກເຮົາຈະເຂົ້າໄປໃນແຕ່ລະສິ່ງເຫຼົ່ານີ້ຕະຫຼອດ, ແຕ່ໃນລະດັບສູງ, ນີ້ແມ່ນສິ່ງທີ່ແນະນໍາວິທີການຂອງພວກເຮົາ.
- ອົງປະກອບຄວນຕອບສະຫນອງແລະມືຖືທໍາອິດ
- ອົງປະກອບຄວນຖືກສ້າງດ້ວຍຊັ້ນພື້ນຖານແລະຂະຫຍາຍຜ່ານຫ້ອງຮຽນຕົວແກ້ໄຂ
- ລັດອົງປະກອບຄວນປະຕິບັດຕາມຂະໜາດ z-index ທົ່ວໄປ
- ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຕ້ອງການການປະຕິບັດ HTML ແລະ CSS ຫຼາຍກວ່າ JavaScript
- ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ໃຊ້ປະໂຫຍດຫຼາຍກວ່າຮູບແບບທີ່ກໍາຫນົດເອງ
- ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການບັງຄັບໃຊ້ຂໍ້ກໍານົດ HTML ທີ່ເຄັ່ງຄັດ (ຕົວເລືອກເດັກນ້ອຍ)
ຕອບສະໜອງ
ຮູບແບບການຕອບສະໜອງຂອງ Bootstrap ຖືກສ້າງຂຶ້ນເພື່ອຕອບສະໜອງ, ເປັນວິທີການທີ່ມັກເອີ້ນວ່າເປັນ ມືຖືກ່ອນ . ພວກເຮົາໃຊ້ຄໍານີ້ຢູ່ໃນເອກະສານຂອງພວກເຮົາແລະສ່ວນໃຫຍ່ເຫັນດີກັບມັນ, ແຕ່ບາງຄັ້ງມັນສາມາດກວ້າງເກີນໄປ. ໃນຂະນະທີ່ບໍ່ແມ່ນທຸກອົງປະກອບ ຕ້ອງ ຕອບສະຫນອງທັງຫມົດໃນ Bootstrap, ວິທີການຕອບສະຫນອງນີ້ແມ່ນກ່ຽວກັບການຫຼຸດຜ່ອນການ overrides CSS ໂດຍການຊຸກຍູ້ໃຫ້ທ່ານເພີ່ມຮູບແບບຍ້ອນວ່າ viewport ກາຍເປັນຂະຫນາດໃຫຍ່.
ໃນທົ່ວ Bootstrap, ທ່ານຈະເຫັນສິ່ງນີ້ຢ່າງຊັດເຈນທີ່ສຸດໃນການສອບຖາມສື່ຂອງພວກເຮົາ. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ພວກເຮົາໃຊ້ການ min-width
ສອບຖາມທີ່ເລີ່ມຕົ້ນທີ່ຈະນໍາໃຊ້ໃນຈຸດພັກຜ່ອນສະເພາະແລະດໍາເນີນການຜ່ານຈຸດພັກຜ່ອນທີ່ສູງຂຶ້ນ. ສໍາລັບຕົວຢ່າງ, .d-none
ນໍາໃຊ້ຈາກ min-width: 0
infinity. ໃນທາງກົງກັນຂ້າມ, .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
/ :invalid
pseudo-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, ເຊັ່ນດຽວກັນກັບການກວດສອບຄວາມຜິດພາດທົ່ວໄປ.