ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນທີ່ສະຫນອງໃຫ້ເປັນສ່ວນຫນຶ່ງຂອງ Bootstrap ແມ່ນ ຕາຂ່າຍໄຟຟ້າກວ້າງ 940px, 12-column .

ມັນ​ຍັງ​ມີ​ສີ່​ການ​ປ່ຽນ​ແປງ​ທີ່​ຕອບ​ສະ​ຫນອງ​ສໍາ​ລັບ​ອຸ​ປະ​ກອນ​ຕ່າງໆ​ແລະ​ການ​ແກ້​ໄຂ​: ໂທລະ​ສັບ​, ຮູບ​ແບບ​ເມັດ​, ພູມ​ສັນ​ຖານ​ຂອງ​ຕາ​ຕະ​ລາງ​ແລະ desktops ຂະ​ຫນາດ​ນ້ອຍ​, ແລະ desktops widescreen ຂະ​ຫນາດ​ໃຫຍ່​.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

ດັ່ງທີ່ສະແດງຢູ່ນີ້, ຮູບແບບພື້ນຖານສາມາດຖືກສ້າງຂື້ນດ້ວຍສອງ "ຖັນ," ແຕ່ລະອັນກວມເອົາຈໍານວນ 12 ຖັນພື້ນຖານທີ່ພວກເຮົາກໍານົດເປັນສ່ວນຫນຶ່ງຂອງລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ.

ດ້ວຍລະບົບຕາຂ່າຍໄຟຟ້າແບບຄົງທີ່ (ບໍ່ແມ່ນຂອງແຫຼວ) ໃນ Bootstrap, ການສ້າງຮັງແມ່ນງ່າຍ. ເພື່ອວາງເນື້ອຫາຂອງທ່ານ, ພຽງແຕ່ເພີ່ມຖັນໃໝ່ .rowແລະຊຸດຂອງ .span*ຖັນພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ .span*.

ຕົວຢ່າງ

<div class = "row" > 
  <div class = "span12" > 
    ລະດັບ 1 ຂອງຖັນ
    <div class = "row" > 
      <div class = "span6" > ລະດັບ 2 </div> 
      <div class = "span6" > ລະດັບ 2 </div> 
    </div>
  </div>
</div>

ຕົວແປໃນ LESS

ສ້າງຂຶ້ນໃນ Bootstrap ແມ່ນຕົວແປຈຳນວນໜຶ່ງສຳລັບການປັບແຕ່ງລະບົບຕາຂ່າຍ 940px ເລີ່ມຕົ້ນ, ທີ່ບັນທຶກໄວ້ຂ້າງເທິງ. ຕົວແປທັງໝົດສຳລັບຕາໜ່າງຈະຖືກເກັບໄວ້ໃນ variables.less.

ວິທີການປັບແຕ່ງ

ການດັດແກ້ຕາຂ່າຍໄຟຟ້າຫມາຍເຖິງການປ່ຽນສາມ @grid*ຕົວແປແລະການລວບລວມ Bootstrap. ປ່ຽນຕົວແປຕາຕະລາງໃນ variables.less ແລະໃຊ້ຫນຶ່ງໃນ ສີ່ວິທີທີ່ບັນທຶກໄວ້ເພື່ອລວບລວມຄືນ . ຖ້າທ່ານກໍາລັງເພີ່ມຄໍລໍາຫຼາຍ, ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ CSS ສໍາລັບຜູ້ທີ່ຢູ່ໃນ grid.less.

ຕອບສະໜອງຢູ່

ການປັບແຕ່ງຕາຂ່າຍໄຟຟ້າພຽງແຕ່ເຮັດວຽກຢູ່ໃນລະດັບເລີ່ມຕົ້ນ, ຕາຂ່າຍໄຟຟ້າ 940px. ເພື່ອຮັກສາລັກສະນະທີ່ຕອບສະຫນອງຂອງ Bootstrap, ທ່ານຍັງຈະຕ້ອງປັບແຕ່ງຕາຂ່າຍໄຟຟ້າໃນ responsive.less.

ຮູບແບບຄົງທີ່

ຮູບແບບເລີ່ມຕົ້ນ ແລະງ່າຍດາຍ 940px-wide, ສູນກາງສໍາລັບພຽງແຕ່ກ່ຽວກັບເວັບໄຊທ໌ໃດຫນຶ່ງຫຼືຫນ້າທີ່ສະຫນອງໃຫ້ໂດຍດຽວ <div class="container">.

<ຮ່າງກາຍ>
  <div class = "container" > 
    ...
  </div>
</body>

ຮູບແບບຂອງນ້ໍາ

<div class="container-fluid">ໃຫ້ໂຄງສ້າງໜ້າທີ່ມີຄວາມຍືດຫຍຸ່ນ, min- ແລະ max-widths, ແລະແຖບດ້ານຊ້າຍ. ມັນດີຫຼາຍສຳລັບແອັບ ແລະເອກະສານ.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!---ເນື້ອໃນແຖບດ້ານຂ້າງ-->
    </div>
    <div class = "span10" > 
      <!---ເນື້ອໃນຮ່າງກາຍ-->
    </div>
  </div>
</div>

ອຸປະກອນທີ່ຮອງຮັບ

Bootstrap ຮອງຮັບການສອບຖາມສື່ຈຳນວນໜຶ່ງເພື່ອຊ່ວຍເຮັດໃຫ້ໂຄງການຂອງເຈົ້າເໝາະສົມຫຼາຍຂຶ້ນໃນອຸປະກອນຕ່າງໆ ແລະຄວາມລະອຽດໜ້າຈໍ. ນີ້ແມ່ນສິ່ງທີ່ປະກອບມີ:

ສິ່ງທີ່ເຂົາເຈົ້າເຮັດ

ການສອບຖາມສື່ອະນຸຍາດໃຫ້ມີ CSS ແບບກຳນົດເອງໂດຍອີງໃສ່ເງື່ອນໄຂຕ່າງໆ - ອັດຕາສ່ວນ, ຄວາມກວ້າງ, ປະເພດການສະແດງ, ແລະອື່ນໆ - ແຕ່ໂດຍປົກກະຕິຈະສຸມໃສ່ min-widthແລະ max-width.

• ແກ້ໄຂຄວາມກວ້າງຂອງຖັນໃນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ
• ອົງປະກອບ stack ແທນທີ່ຈະລອຍຢູ່ບ່ອນໃດກໍໄດ້ທີ່ຈໍາເປັນ
• ປັບຂະໜາດຫົວເລື່ອງ ແລະຂໍ້ຄວາມໃຫ້ເໝາະສົມກວ່າສຳລັບອຸປະກອນ

Bootstrap ບໍ່ໄດ້ລວມເອົາຄໍາຖາມສື່ເຫຼົ່ານີ້ໂດຍອັດຕະໂນມັດ, ແຕ່ຄວາມເຂົ້າໃຈແລະການເພີ່ມພວກມັນແມ່ນງ່າຍຫຼາຍແລະຕ້ອງການການຕິດຕັ້ງຫນ້ອຍທີ່ສຸດ. ທ່ານ​ມີ​ທາງ​ເລືອກ​ຈໍາ​ນວນ​ຫນຶ່ງ​ສໍາ​ລັບ​ການ​ລວມ​ທັງ​ຄຸນ​ນະ​ສົມ​ບັດ​ການ​ຕອບ​ສະ​ຫນອງ​ຂອງ Bootstrap​:

1. ໃຊ້ສະບັບຕອບສະຫນອງທີ່ລວບລວມ, bootstrap-responsive.css
2. ເພີ່ມ @import "responsive.less" ແລະລວບລວມ Bootstrap ຄືນໃໝ່
3. ແກ້ໄຂ ແລະລວບລວມ responsive.less ຄືນໃໝ່ເປັນແຍກຕ່າງຫາກ

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

  // ໂທລະສັບພູມສັນຖານແລະລົງ
  @media ( ສູງສຸດ - width : 480px ) { ... }     
 
  // ໂທລະສັບພູມສັນຖານກັບແທັບເລັດຮູບຄົນ
  @media ( ສູງສຸດ - width : 768px ) { ... }     
 
  // ແທັບເລັດແນວຕັ້ງກັບພູມສັນຖານ ແລະເດັສທັອບ
  @media ( min - width : 768px ) ແລະ ( max - width : 940px ) { ... }        
 
  // desktop ຂະຫນາດໃຫຍ່
  @media ( min - width : 1200px ) { .. }