ພາບລວມຂອງໂຄງການ, ເນື້ອໃນຂອງມັນ, ແລະວິທີການເລີ່ມຕົ້ນດ້ວຍແມ່ແບບງ່າຍໆ.
ກ່ອນທີ່ຈະດາວໂຫລດ, ໃຫ້ແນ່ໃຈວ່າມີຕົວແກ້ໄຂລະຫັດ (ພວກເຮົາແນະນໍາ Sublime Text 2 ) ແລະບາງຄວາມຮູ້ການເຮັດວຽກຂອງ HTML ແລະ CSS. ພວກເຮົາຈະບໍ່ໄດ້ຍ່າງຜ່ານໄຟລ໌ແຫຼ່ງທີ່ນີ້, ແຕ່ພວກເຂົາເຈົ້າມີໃຫ້ດາວໂຫຼດ. ພວກເຮົາຈະສຸມໃສ່ການເລີ່ມຕົ້ນດ້ວຍໄຟລ໌ Bootstrap ທີ່ຖືກລວບລວມ.
ວິທີທີ່ໄວທີ່ສຸດເພື່ອເລີ່ມຕົ້ນ: ເອົາສະບັບທີ່ລວບລວມແລະຫຍໍ້ຂອງ CSS, JS, ແລະຮູບພາບຂອງພວກເຮົາ. ບໍ່ມີເອກະສານ ຫຼືໄຟລ໌ຕົ້ນສະບັບ.
ເອົາໄຟລ໌ຕົ້ນສະບັບສໍາລັບ CSS ແລະ JavaScript ທັງຫມົດ, ພ້ອມກັບສໍາເນົາທ້ອງຖິ່ນຂອງເອກະສານໂດຍການດາວໂຫລດເວີຊັນຫຼ້າສຸດໂດຍກົງຈາກ GitHub.
ພາຍໃນການດາວໂຫຼດ, ທ່ານຈະພົບເຫັນໂຄງສ້າງໄຟລ໌ຕໍ່ໄປນີ້ ແລະເນື້ອໃນ, ການຈັດກຸ່ມຊັບສິນທົ່ວໄປຢ່າງມີເຫດຜົນ ແລະໃຫ້ທັງການປ່ຽນແປງທີ່ລວບລວມ ແລະຫຍໍ້ໆ.
ເມື່ອດາວໂຫລດແລ້ວ, unzip ໂຟເດີທີ່ຖືກບີບອັດເພື່ອເບິ່ງໂຄງສ້າງຂອງ Bootstrap. ທ່ານຈະເຫັນບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້:
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . ນາ ທີ css ├── js / │ ├── bootstrap . js │ ├── bootstrap . ນາ ທີ js ├── img / │ ├── glyphicons - halflings . png │ ├── glyphicons - halflings - ສີຂາວ . png └── README . md
ນີ້ແມ່ນຮູບແບບພື້ນຖານທີ່ສຸດຂອງ Bootstrap: ໄຟລ໌ທີ່ລວບລວມສໍາລັບການນໍາໃຊ້ການຫຼຸດລົງຢ່າງໄວວາໃນເກືອບທຸກໂຄງການເວັບໄຊຕ໌. ພວກເຮົາສະຫນອງການລວບລວມ CSS ແລະ JS ( bootstrap.*
), ເຊັ່ນດຽວກັນກັບການລວບລວມແລະຫຍໍ້ CSS ແລະ JS ( bootstrap.min.*
). ໄຟລ໌ຮູບພາບຖືກບີບອັດໂດຍໃຊ້ ImageOptim , ແອັບຯ Mac ສໍາລັບການບີບອັດ PNGs.
ກະລຸນາຮັບຊາບວ່າທຸກໆ plugins JavaScript ຕ້ອງການ jQuery ທີ່ຈະລວມເຂົ້າ.
Bootstrap ມາພ້ອມກັບ HTML, CSS, ແລະ JS ສໍາລັບທຸກປະເພດຂອງສິ່ງຕ່າງໆ, ແຕ່ພວກເຂົາສາມາດສະຫຼຸບໄດ້ດ້ວຍບາງປະເພດທີ່ສັງເກດເຫັນຢູ່ເທິງສຸດຂອງ ເອກະສານ Bootstrap .
ຄໍເຕົ້າໄຂ່ທີ່ທົ່ວໂລກສໍາລັບຮ່າງກາຍເພື່ອປັບປະເພດແລະພື້ນຫລັງ, ຮູບແບບການເຊື່ອມໂຍງ, ລະບົບຕາຂ່າຍໄຟຟ້າ, ແລະສອງຮູບແບບງ່າຍດາຍ.
ຮູບແບບສໍາລັບອົງປະກອບ HTML ທົ່ວໄປເຊັ່ນ: typography, code, tables, forms, and buttons. ນອກຈາກນີ້ຍັງປະກອບມີ Glyphicons , ຊຸດໄອຄອນນ້ອຍໆອັນຍິ່ງໃຫຍ່.
ຮູບແບບພື້ນຖານສໍາລັບອົງປະກອບການໂຕ້ຕອບທົ່ວໄປເຊັ່ນແຖບແລະຢາ, navbar, ການແຈ້ງເຕືອນ, ສ່ວນຫົວຂອງຫນ້າ, ແລະອື່ນໆ.
ຄ້າຍຄືກັນກັບອົງປະກອບ, plugins Javascript ເຫຼົ່ານີ້ແມ່ນອົງປະກອບການໂຕ້ຕອບສໍາລັບສິ່ງຕ່າງໆເຊັ່ນຄໍາແນະນໍາເຄື່ອງມື, popovers, modals, ແລະອື່ນໆ.
ຮ່ວມກັນ, ພາກ ສ່ວນອົງປະ ກອບ ແລະ Javascript plugins ໃຫ້ອົງປະກອບການໂຕ້ຕອບດັ່ງຕໍ່ໄປນີ້:
ໃນຄູ່ມືໃນອະນາຄົດ, ພວກເຮົາອາດຈະຍ່າງຜ່ານອົງປະກອບເຫຼົ່ານີ້ເປັນສ່ວນບຸກຄົນໃນລາຍລະອຽດເພີ່ມເຕີມ. ຈົນກ່ວານັ້ນ, ຊອກຫາແຕ່ລະສິ່ງເຫຼົ່ານີ້ຢູ່ໃນເອກະສານສໍາລັບຂໍ້ມູນກ່ຽວກັບວິທີການນໍາໃຊ້ແລະປັບແຕ່ງພວກມັນ.
ດ້ວຍການແນະນໍາສັ້ນໆກ່ຽວກັບເນື້ອຫາອອກຈາກທາງ, ພວກເຮົາສາມາດສຸມໃສ່ການວາງ Bootstrap ເພື່ອໃຊ້. ເພື່ອເຮັດສິ່ງນີ້, ພວກເຮົາຈະນໍາໃຊ້ຮູບແບບ HTML ພື້ນຖານທີ່ປະກອບມີທຸກສິ່ງທຸກຢ່າງທີ່ພວກເຮົາໄດ້ກ່າວມາໃນ ໂຄງສ້າງໄຟລ໌ .
ໃນປັດຈຸບັນ, ນີ້ແມ່ນເບິ່ງ ໄຟລ໌ HTML ປົກກະຕິ :
- <!DOCTYPE html>
- <html>
- <ຫົວ>
- <title> ແມ່ແບບ Bootstrap 101 </title>
- </head>
- <ຮ່າງກາຍ>
- <h1> ສະ ບາຍດີ, ໂລກ! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- </body>
- </html>
ເພື່ອເຮັດໃຫ້ນີ້ ເປັນແບບ Bootstrapped , ພຽງແຕ່ປະກອບມີໄຟລ໌ CSS ແລະ JS ທີ່ເຫມາະສົມ:
- <!DOCTYPE html>
- <html>
- <ຫົວ>
- <title> ແມ່ແບບ Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <ຮ່າງກາຍ>
- <h1> ສະ ບາຍດີ, ໂລກ! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
ແລະເຈົ້າຕັ້ງແລ້ວ! ດ້ວຍສອງໄຟລ໌ທີ່ເພີ່ມເຂົ້າມາ, ທ່ານສາມາດເລີ່ມຕົ້ນພັດທະນາເວັບໄຊທ໌ຫຼືແອັບພລິເຄຊັນໃດໆດ້ວຍ Bootstrap.
ຍ້າຍອອກໄປນອກແມ່ແບບພື້ນຖານດ້ວຍການວາງຕົວຢ່າງບາງອັນ. ພວກເຮົາຊຸກຍູ້ໃຫ້ຄົນອື່ນໆເຮັດຊ້ໍາຕົວຢ່າງເຫຼົ່ານີ້ແລະບໍ່ພຽງແຕ່ໃຊ້ພວກມັນເປັນຜົນສຸດທ້າຍ.
ໄປທີ່ເອກະສານສໍາລັບຂໍ້ມູນ, ຕົວຢ່າງ, ແລະຕົວຢ່າງຂອງລະຫັດ, ຫຼືກ້າວກະໂດດຕໍ່ໄປແລະປັບແຕ່ງ Bootstrap ສໍາລັບໂຄງການທີ່ຈະມາເຖິງ.
ເຂົ້າໄປເບິ່ງເອກະສານ Bootstrap ປັບແຕ່ງ Bootstrap