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

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

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

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

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

ຕົວຢ່າງ

ແຖວທີ່ຊ້ອນກັນຄວນມີຊຸດຂອງຖັນທີ່ເພີ່ມເຖິງຈຳນວນຖັນຂອງແຖວຫຼັກຂອງມັນ. ຕົວຢ່າງ, ສອງ .span3ຖັນທີ່ຕິດກັນຄວນຖືກວາງໄວ້ພາຍໃນ .span6.

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

ເປີເຊັນ, ບໍ່ແມ່ນ pixels

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

ແຖວນ້ຳ

ເຮັດໃຫ້ນ້ໍາແຖວໃດກໍ່ໄດ້ໂດຍການປ່ຽນ .rowເປັນ .row-fluid. ຖັນຍັງຄົງຢູ່ຄືກັນ, ເຮັດໃຫ້ມັນກົງໄປກົງມາຫຼາຍທີ່ຈະພິກລະຫວ່າງການຈັດວາງຄົງທີ່ ແລະ ນໍ້າ.

ມາກອັບ

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

ການສ້າງຮັງດ້ວຍຕາຂ່າຍນ້ໍາແມ່ນແຕກຕ່າງກັນເລັກນ້ອຍ: ຈໍານວນຖັນທີ່ຊ້ອນກັນບໍ່ຈໍາເປັນຕ້ອງກົງກັບພໍ່ແມ່. ແທນທີ່ຈະ, ຖັນຂອງທ່ານຖືກຕັ້ງຄືນໃໝ່ໃນແຕ່ລະລະດັບ ເພາະວ່າແຕ່ລະແຖວໃຊ້ເວລາເຖິງ 100% ຂອງຖັນຫຼັກ.

<div class = "row-fluid" > 
  <div class = "span12" > 
    ລະດັບ 1 ຂອງຖັນ
    <div class = "row-fluid" > 
      <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 ຮອງຮັບການສອບຖາມສື່ຈຳນວນໜຶ່ງໃນໄຟລ໌ດຽວເພື່ອຊ່ວຍເຮັດໃຫ້ໂຄງການຂອງເຈົ້າເໝາະສົມຫຼາຍຂຶ້ນໃນອຸປະກອນຕ່າງໆ ແລະຄວາມລະອຽດໜ້າຈໍ. ນີ້ແມ່ນສິ່ງທີ່ປະກອບມີ:

ຕ້ອງການແທັກ meta

ເພື່ອຮັບປະກັນອຸປະກອນສະແດງໜ້າທີ່ຕອບສະໜອງຢ່າງຖືກຕ້ອງ, ໃຫ້ໃສ່ແທັກເມຕາຂອງ viewport.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

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

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

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

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

1. ໃຊ້ສະບັບຕອບສະຫນອງທີ່ລວບລວມ, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }