Bootstrap

Scaffolding

Bootstrap ຖືກສ້າງຂຶ້ນໃນ 12-column grids, layouts ແລະອົງປະກອບທີ່ຕອບສະຫນອງ.

ການຕັ້ງຄ່າທົ່ວໂລກ

ຕ້ອງການ HTML5 doctype

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

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

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

Bootstrap ກໍານົດພື້ນຖານການສະແດງທົ່ວໂລກ, typography, ແລະຮູບແບບການເຊື່ອມຕໍ່. ໂດຍສະເພາະ, ພວກເຮົາ:

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

ຮູບແບບເຫຼົ່ານີ້ສາມາດພົບເຫັນໄດ້ພາຍໃນ scaffolding.less .

ຣີເຊັດຜ່ານ Normalize

ດ້ວຍ Bootstrap 2, ບລັອກການຣີເຊັດແບບເກົ່າໄດ້ຖືກຫຼຸດລົງໃນເງື່ອນໄຂຂອງ Normalize.css , ໂຄງການໂດຍ Nicolas Gallagher ແລະ Jonathan Neal ທີ່ໃຫ້ພະລັງງານ HTML5 Boilerplate ເຊັ່ນກັນ. ໃນຂະນະທີ່ພວກເຮົາໃຊ້ Normalize ຫຼາຍພາຍໃນ reset.less ຂອງພວກເຮົາ , ພວກເຮົາໄດ້ເອົາບາງອົງປະກອບອອກໂດຍສະເພາະສໍາລັບ Bootstrap.

ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນ

ຕົວຢ່າງຕາຕະລາງສົດ

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

ຕາຕະລາງພື້ນຖານ HTML

ສໍາລັບຮູບແບບສອງຖັນແບບງ່າຍໆ, ສ້າງ a .rowແລະເພີ່ມຈໍານວນ .span*ຄໍລໍາທີ່ເຫມາະສົມ. ເນື່ອງຈາກນີ້ເປັນຕາໜ່າງ 12 ຖັນ, ແຕ່ລະແຖວ .span*ຈະຂະຫຍາຍຈຳນວນຂອງ 12 ຖັນເຫຼົ່ານັ້ນ, ແລະຄວນເພີ່ມເຖິງ 12 ຖັນສະເໝີ (ຫຼືຈຳນວນຖັນໃນຫຼັກ).

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

ດ້ວຍຕົວຢ່າງນີ້, ພວກເຮົາມີ .span4ແລະ .span8ສ້າງ 12 ຖັນທັງຫມົດແລະແຖວທີ່ສົມບູນ.

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

ຍ້າຍຖັນໄປທາງຂວາໂດຍໃຊ້ .offset*ຊັ້ນຮຽນ. ແຕ່ລະຊັ້ນຮຽນເພີ່ມຂອບຊ້າຍຂອງຖັນໜຶ່ງຖັນທັງໝົດ. ຕົວຢ່າງ, .offset4ຍ້າຍ .span4ຫຼາຍກວ່າສີ່ຖັນ.

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

ຖັນຮັງ

ເພື່ອວາງເນື້ອຫາຂອງທ່ານດ້ວຍຕາຂ່າຍເລີ່ມຕົ້ນ, ໃຫ້ເພີ່ມຖັນໃໝ່ .rowແລະຊຸດຂອງ .span*ຖັນພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ .span*. ແຖວທີ່ຊ້ອນກັນຄວນປະກອບມີຊຸດຂອງຖັນທີ່ເພີ່ມເຖິງຈຳນວນຖັນຂອງຫຼັກຂອງມັນ.

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

ລະບົບຕາຂ່າຍໄຟຟ້າ

ຕົວຢ່າງຊ່ອງຂອງນ້ໍາສົດ

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

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

HTML ຕາຂ່າຍໄຟຟ້າພື້ນຖານ

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

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

ການຊົດເຊີຍຂອງນ້ໍາ

ປະຕິບັດວິທີການດຽວກັນກັບການຊົດເຊີຍລະບົບຕາຂ່າຍໄຟຟ້າຄົງທີ່: ເພີ່ມ .offset*ໃສ່ຖັນໃດນຶ່ງເພື່ອຊົດເຊີຍຈາກຖັນຫຼາຍນັ້ນ.

4
4 ຊົດເຊີຍ 4
3 ຊົດເຊີຍ 3
3 ຊົດເຊີຍ 3
6 ຊົດເຊີຍ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

ຮັງຂອງນ້ໍາ

ຕາຂ່າຍໄຟຟ້າໃຊ້ການສ້າງຮັງແຕກຕ່າງກັນ: ແຕ່ລະລະດັບຂອງຖັນຄວນເພີ່ມເຖິງ 12 ຖັນ. ນີ້ແມ່ນຍ້ອນວ່າຕາຂ່າຍໄຟຟ້າໃຊ້ອັດຕາສ່ວນ, ບໍ່ແມ່ນ pixels, ສໍາລັບການຕັ້ງຄ່າຄວາມກວ້າງ.

ນ້ຳ 12
ທາດແຫຼວ 6
ທາດແຫຼວ 6
ທາດແຫຼວ 6
ທາດແຫຼວ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     ນ້ຳ 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         ທາດແຫຼວ 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > ນໍ້າ 6 </div> 
  9.           <div class = "span6" > ນໍ້າ 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > ນໍ້າ 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

ການຈັດວາງ

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

ສະໜອງໂຄງຮ່າງຄວາມກວ້າງຄົງທີ່ທົ່ວໄປ (ແລະຕອບສະໜອງຕາມທາງເລືອກ) ໂດຍພຽງແຕ່ <div class="container">ຕ້ອງການ.

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

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

ສ້າງໜ້ານ້ຳ, ສອງຖັນດ້ວຍ <div class="container-fluid">—ດີເລີດສຳລັບແອັບພລິເຄຊັນ ແລະເອກະສານ.

  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 ທີ່ຕອບສະໜອງໃນໂຄງການຂອງທ່ານໂດຍການລວມເອົາແທັກ meta ທີ່ຖືກຕ້ອງ ແລະແຜ່ນສະໄຕລ໌ເພີ່ມເຕີມພາຍໃນ <head>ເອກະສານຂອງທ່ານ. ຖ້າທ່ານໄດ້ລວບລວມ Bootstrap ຈາກຫນ້າປັບແຕ່ງ, ທ່ານຕ້ອງການພຽງແຕ່ໃສ່ແທັກ meta ເທົ່ານັ້ນ.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

ກ່ຽວກັບ Bootstrap ຕອບສະຫນອງ

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

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

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

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

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

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

ປ້າຍກຳກັບ ຄວາມກວ້າງຂອງໂຄງຮ່າງ ຄວາມກວ້າງຂອງຖັນ ຄວາມກວ້າງຂອງ Gutter
ຈໍສະແດງຜົນຂະຫນາດໃຫຍ່ 1200px ແລະສູງກວ່າ 70px 30px
ຄ່າເລີ່ມຕົ້ນ 980px ຂຶ້ນໄປ 60px 20px
ແທັບເລັດຮູບຄົນ 768px ແລະສູງກວ່າ 42px 20px
ໂທລະສັບໄປຫາແທັບເລັດ 767px ແລະຂ້າງລຸ່ມນີ້ ຖັນຂອງແຫຼວ, ບໍ່ມີຄວາມກວ້າງຄົງທີ່
ໂທລະສັບ 480px ແລະຂ້າງລຸ່ມນີ້ ຖັນຂອງແຫຼວ, ບໍ່ມີຄວາມກວ້າງຄົງທີ່ 
  1. /* desktop ຂະ​ຫນາດ​ໃຫຍ່ */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* ແທັບ​ເລັດ​ຮູບ​ເປັນ​ແນວ​ນອນ​ແລະ desktop */
  5. @media ( min - width : 768px ) ແລະ ( max - width : 979px ) { ... }        
  6.  
  7. /* ໂທລະ​ສັບ​ພູມ​ສັນ​ຖານ​ກັບ​ເມັດ​ຮູບ​ແບບ */
  8. @media ( ສູງສຸດ - width : 767px ) { ... }     
  9.  
  10. /* ໂທລະ​ສັບ​ພູມ​ສັນ​ຖານ​ແລະ​ລົງ */
  11. @media ( ສູງສຸດ - width : 480px ) { ... }

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

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

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

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

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

ກໍ​ລະ​ນີ​ທົດ​ສອບ​ອຸ​ປະ​ກອນ​ການ​ຕອບ​ສະ​ຫນອງ​

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

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

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

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

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

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

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