Bootstrap

Scaffolding

Bootstrap ຖືກສ້າງຂຶ້ນໃນຕາຂ່າຍໄຟຟ້າ 12 ຖັນທີ່ຕອບສະໜອງ. ພວກເຮົາຍັງໄດ້ລວມເອົາການຈັດວາງຄົງທີ່ ແລະ ຄວາມກວ້າງຂອງນໍ້າ ໂດຍອີງໃສ່ລະບົບນັ້ນ.

ຮູບແບບທົ່ວໂລກ ສໍາລັບການປັບ CSS, typography, ແລະການເຊື່ອມຕໍ່

ຕ້ອງການ HTML5 doctype

Bootstrap ເຮັດໃຫ້ການນໍາໃຊ້ອົງປະກອບ HTML ແລະຄຸນສົມບັດ CSS ທີ່ຕ້ອງການໃຊ້ HTML5 doctype. ໃຫ້ແນ່ໃຈວ່າຈະລວມເອົາມັນຢູ່ໃນຕອນຕົ້ນຂອງທຸກໆຫນ້າ Bootstrapped ໃນໂຄງການຂອງທ່ານ.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typography ແລະການເຊື່ອມຕໍ່

ພາຍໃນ ໄຟລ໌ scaffolding.less , ພວກເຮົາກໍານົດພື້ນຖານການສະແດງຜົນທົ່ວໂລກ, typography, ແລະຮູບແບບການເຊື່ອມໂຍງ. ໂດຍສະເພາະ, ພວກເຮົາ:

  • ເອົາຂອບເທິງຮ່າງກາຍ
  • ຕັ້ງ background-color: white;ຢູ່ເທິງbody
  • ໃຊ້ @baseFontFamily, @baseFontSize, ແລະ @baseLineHeightຄຸນລັກສະນະເປັນພື້ນຖານການພິມຂອງພວກເຮົາ
  • ກໍານົດສີການເຊື່ອມຕໍ່ທົ່ວໂລກຜ່ານ @linkColorແລະນໍາໃຊ້ການເຊື່ອມຕໍ່ underlines ພຽງແຕ່ໃສ່:hover

ຣີເຊັດຜ່ານ Normalize

ໃນຖານະເປັນຂອງ Bootstrap 2, ການຕັ້ງຄ່າ CSS ແບບດັ້ງເດີມໄດ້ພັດທະນາເພື່ອນໍາໃຊ້ອົງປະກອບຈາກ Normalize.css , ໂຄງການໂດຍ Nicolas Gallagher ທີ່ຍັງມີອໍານາດ HTML5 Boilerplate .

ການຣີເຊັດໃໝ່ຍັງສາມາດພົບໄດ້ໃນ reset.less , ແຕ່ມີການຖອດອອກຫຼາຍອົງປະກອບເພື່ອຄວາມສັ້ນ ແລະຄວາມຖືກຕ້ອງ.

ລະບົບຕາຂ່າຍເລີ່ມ ຕົ້ນ 12 ຖັນທີ່ມີການບິດຕອບສະໜອງ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນທີ່ສະຫນອງໃຫ້ຢູ່ໃນ Bootstrap ໃຊ້ 12 ຖັນ ທີ່ສະແດງຢູ່ໃນຄວາມກວ້າງຂອງ 724px, 940px (ຄ່າເລີ່ມຕົ້ນໂດຍບໍ່ມີການຕອບສະຫນອງ CSS ລວມ), ແລະ 1170px. ຂ້າງລຸ່ມນີ້ 767px viewports, ຖັນກາຍເປັນນ້ໍາແລະ stack ໃນແນວຕັ້ງ.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


ການຊົດເຊີຍຖັນ

4
4 ຊົດເຊີຍ 4
3 ຊົດເຊີຍ 3
3 ຊົດເຊີຍ 3
8 ຊົດເຊີຍ 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

ຖັນຮັງ

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

ຕົວຢ່າງ

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

ລະດັບ 1 ຂອງຖັນ
ລະດັບ 2
ລະດັບ 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     ລະດັບ 1 ຖັນ
  4.     <div class = "row" > 
  5.       <div class = "span3" > ລະດັບ 2 </div> 
  6.       <div class = "span3" > ລະດັບ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ລະບົບຕາຂ່າຍກະແສໄຟຟ້າ 12 ຖັນຕອບສະໜອງ, ຖັນຕາມເປີເຊັນ

ຖັນຂອງນ້ໍາ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

ແຖວນ້ຳ

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

ມາກອັບ

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ຮັງຂອງນ້ໍາ

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

ນ້ຳ 12
ທາດແຫຼວ 6
ທາດແຫຼວ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     ລະດັບ 1 ຂອງຖັນ
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > ລະດັບ 2 </div> 
  6.       <div class = "span6" > ລະດັບ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ການປັບແຕ່ງຕາຂ່າຍໄຟຟ້າ

ຕົວແປ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
@gridColumns 12 ຈຳນວນຖັນ
@gridColumnWidth 60px ຄວາມກວ້າງຂອງແຕ່ລະຖັນ
@gridGutterWidth 20px ຊ່ອງຫວ່າງທາງລົບລະຫວ່າງຖັນ

ຕົວແປໃນ LESS

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

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

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

ຕອບສະໜອງຢູ່

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

Layouts ແມ່ແບບພື້ນຖານເພື່ອສ້າງຫນ້າເວັບ

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

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

  1. <ຮ່າງກາຍ>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

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

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!---ເນື້ອໃນແຖບດ້ານຂ້າງ-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!---ເນື້ອໃນຮ່າງກາຍ-->
  8.     </div>
  9.   </div>
  10. </div>

ການອອກແບບຕອບ ສະຫນອງ ຄໍາຖາມສື່ສໍາລັບອຸປະກອນຕ່າງໆແລະການແກ້ໄຂ

ອຸປະກອນທີ່ຕອບສະຫນອງ

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

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

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

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

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

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

ປ້າຍກຳກັບ ຄວາມກວ້າງຂອງໂຄງຮ່າງ ຄວາມກວ້າງຂອງຖັນ ຄວາມກວ້າງຂອງ Gutter
ໂທລະສັບສະຫຼາດ 480px ແລະຂ້າງລຸ່ມນີ້ ຖັນຂອງແຫຼວ, ບໍ່ມີຄວາມກວ້າງຄົງທີ່
ໂທລະສັບສະຫຼາດກັບແທັບເລັດ 767px ແລະຂ້າງລຸ່ມນີ້ ຖັນຂອງແຫຼວ, ບໍ່ມີຄວາມກວ້າງຄົງທີ່
ແທັບເລັດຮູບຄົນ 768px ແລະສູງກວ່າ 42px 20px
ຄ່າເລີ່ມຕົ້ນ 980px ຂຶ້ນໄປ 60px 20px
ຈໍສະແດງຜົນຂະຫນາດໃຫຍ່ 1200px ແລະສູງກວ່າ 70px 30px

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

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

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

ການ​ນໍາ​ໃຊ້​ຄໍາ​ຖາມ​ສື່​ມວນ​ຊົນ​

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

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

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

  1.   /* ໂທລະ​ສັບ​ພູມ​ສັນ​ຖານ​ແລະ​ລົງ */
  2.   @media ( ສູງສຸດ - width : 480px ) { ... }     
  3.  
  4.   /* ໂທລະ​ສັບ​ພູມ​ສັນ​ຖານ​ກັບ​ແທັບ​ເລັດ​ຮູບ​ຄົນ */
  5.   @media ( ສູງສຸດ - width : 767px ) { ... }     
  6.  
  7.   /* ແທັບ​ເລັດ​ຮູບ​ຄົນ​ກັບ​ພູມ​ສັນ​ຖານ​ແລະ desktop */
  8.   @media ( min - width : 768px ) ແລະ ( max - width : 979px ) { ... }        
  9.  
  10.   /* desktop ຂະ​ຫນາດ​ໃຫຍ່ */
  11.   @media ( min - width : 1200px ) { ... }

ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ຕອບສະຫນອງ

ພວກ​ມັນ​ແມ່ນ​ຫຍັງ

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

ເວລາທີ່ຈະໃຊ້

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

ຕົວຢ່າງ, ທ່ານອາດຈະສະແດງ <select>ອົງປະກອບສໍາລັບ nav ໃນການຈັດວາງມືຖື, ແຕ່ບໍ່ແມ່ນຢູ່ໃນແທັບເລັດຫຼື desktop.

ຫ້ອງຮຽນສະຫນັບສະຫນູນ

ສະແດງໃຫ້ເຫັນນີ້ແມ່ນຕາຕະລາງຂອງຫ້ອງຮຽນທີ່ພວກເຮົາສະຫນັບສະຫນູນແລະຜົນກະທົບຂອງພວກມັນຕໍ່ຮູບແບບການສອບຖາມສື່ທີ່ໃຫ້ (ຕິດສະຫຼາກໂດຍອຸປະກອນ). ພວກເຂົາສາມາດພົບເຫັນຢູ່ໃນ responsive.less.

ຫ້ອງຮຽນ ໂທລະສັບ480px ແລະຂ້າງລຸ່ມນີ້ ເມັດ767px ແລະຂ້າງລຸ່ມນີ້ ເດັສທັອບ768px ແລະສູງກວ່າ
.visible-phone ເຫັນໄດ້
.visible-tablet ເຫັນໄດ້
.visible-desktop ເຫັນໄດ້
.hidden-phone ເຫັນໄດ້ ເຫັນໄດ້
.hidden-tablet ເຫັນໄດ້ ເຫັນໄດ້
.hidden-desktop ເຫັນໄດ້ ເຫັນໄດ້

ກໍລະນີທົດສອບ

ປັບຂະໜາດບຣາວເຊີຂອງທ່ານ ຫຼືໂຫຼດໃນອຸປະກອນຕ່າງໆເພື່ອທົດສອບຊັ້ນຮຽນຂ້າງເທິງ.

ເຫັນໄດ້ໃນ...

ເຄື່ອງໝາຍຖືກສີຂຽວຊີ້ບອກໃຫ້ເຫັນຊັ້ນໃນຊ່ອງເບິ່ງປັດຈຸບັນຂອງທ່ານ.

  • ໂທລະສັບ✔ໂທລະສັບ
  • ແທັບເລັດ✔ແທັບເລັດ
  • ເດັສທັອບ✔ຕັ້ງໂຕະ

ເຊື່ອງຢູ່...

ທີ່ນີ້, ເຄື່ອງໝາຍຖືກສີຂຽວຊີ້ບອກວ່າຊັ້ນຖືກເຊື່ອງໄວ້ຢູ່ໃນຊ່ອງເບິ່ງປັດຈຸບັນຂອງເຈົ້າ.

  • ໂທລະສັບ✔ໂທລະສັບ
  • ແທັບເລັດ✔ແທັບເລັດ
  • ເດັສທັອບ✔ຕັ້ງໂຕະ