ຂະຫຍາຍ · Bootstrap ເປັນພາສາລາວ

Bootstrap ແມ່ນເຮັດດ້ວຍ LESS ຫຼັກຂອງມັນ, ເປັນພາສາສະໄຕລ໌ຊີດແບບເຄື່ອນໄຫວທີ່ສ້າງໂດຍເພື່ອນທີ່ດີຂອງພວກເຮົາ, Alexis Sellier . ມັນເຮັດໃຫ້ການພັດທະນາ CSS ທີ່ອີງໃສ່ລະບົບໄວຂຶ້ນ, ງ່າຍຂຶ້ນ, ແລະມ່ວນຫຼາຍ.

ເປັນຫຍັງ LESS?

ຫນຶ່ງໃນຜູ້ສ້າງຂອງ Bootstrap ຂຽນບົດຄວາມ blog ໄວກ່ຽວກັບເລື່ອງນີ້ , ສະຫຼຸບໄດ້ທີ່ນີ້:

Bootstrap ລວບລວມໄວຂຶ້ນ ~6 ເທົ່າດ້ວຍ Less ເມື່ອປຽບທຽບກັບ Sass
ຫນ້ອຍລົງໃນ JavaScript, ເຮັດໃຫ້ມັນງ່າຍຂຶ້ນສໍາລັບພວກເຮົາທີ່ຈະ dive in ແລະ patch ເມື່ອທຽບກັບ Ruby ກັບ Sass.
ຫນ້ອຍແມ່ນຫຼາຍ; ພວກເຮົາຕ້ອງການຮູ້ສຶກວ່າພວກເຮົາກໍາລັງຂຽນ CSS ແລະເຮັດໃຫ້ Bootstrap ເຂົ້າເຖິງໄດ້ກັບທຸກຄົນ.

ມີຫຍັງແດ່?

ໃນຖານະເປັນສ່ວນຂະຫຍາຍຂອງ CSS, LESS ປະກອບມີຕົວແປ, mixins ສໍາລັບ snippets ທີ່ໃຊ້ຄືນໃຫມ່ຂອງລະຫັດ, ການດໍາເນີນງານສໍາລັບຄະນິດສາດງ່າຍດາຍ, ຮັງ, ແລະແມ້ກະທັ້ງການທໍາງານຂອງສີ.

ສຶກສາເພີ່ມເຕີມ

ເຂົ້າເບິ່ງເວັບໄຊທ໌ທາງການຢູ່ທີ່ http://lesscss.org/ ເພື່ອສຶກສາເພີ່ມເຕີມ.

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

ຫມາຍເຫດ: ຖ້າທ່ານກໍາລັງສົ່ງຄໍາຮ້ອງຂໍການດຶງໄປຫາ GitHub ດ້ວຍ CSS ທີ່ຖືກດັດແປງ, ທ່ານ ຕ້ອງ ລວບລວມ CSS ຜ່ານວິທີການເຫຼົ່ານີ້.

ເຄື່ອງມືສໍາລັບການລວບລວມ

ເສັ້ນຄໍາສັ່ງ

ປະຕິບັດຕາມ ຄໍາແນະນໍາໃນໂຄງການ readme ໃນ GitHub ສໍາລັບການລວບລວມຜ່ານເສັ້ນຄໍາສັ່ງ.

JavaScript

ດາວໂຫລດ Less.js ຫຼ້າສຸດ ແລະລວມເອົາເສັ້ນທາງໄປຫາມັນ (ແລະ Bootstrap) ໃນ <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

ເພື່ອລວບລວມໄຟລ໌ .less ຄືນໃໝ່, ພຽງແຕ່ບັນທຶກພວກມັນ ແລະໂຫຼດໜ້າຂອງທ່ານຄືນໃໝ່. Less.js ລວບລວມພວກມັນແລະເກັບຮັກສາພວກມັນໄວ້ໃນບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນ.

ແອັບ Mac ທີ່ບໍ່ເປັນທາງການ

ແອັບ Mac ທີ່ບໍ່ເປັນທາງການຈະ ເບິ່ງໄດເຣັກທໍຣີຂອງໄຟລ໌ .less ແລະລວບລວມລະຫັດໄປຍັງໄຟລ໌ທ້ອງຖິ່ນຫຼັງຈາກບັນທຶກໄຟລ໌ .less ທີ່ເບິ່ງແລ້ວທຸກຄັ້ງ. ຖ້າທ່ານຕ້ອງການ, ທ່ານສາມາດສະຫຼັບການຕັ້ງຄ່າໃນແອັບຯສໍາລັບການຫຍໍ້ອັດຕະໂນມັດແລະໄດເລກະທໍລີໃດທີ່ໄຟລ໌ລວບລວມໄດ້ສິ້ນສຸດລົງ.

ແອັບເພີ່ມເຕີມ

Crunch

Crunch ເປັນບັນນາທິການ ແລະຄອມພີວເຊີທີ່ເບິ່ງໜ້ອຍທີ່ສຸດທີ່ສ້າງຂຶ້ນໃນ Adobe Air.

CodeKit

ສ້າງໂດຍຜູ້ຊາຍດຽວກັນກັບແອັບຯ Mac ທີ່ບໍ່ເປັນທາງການ, CodeKit ເປັນແອັບຯ Mac ທີ່ລວບລວມຂໍ້ມູນ LESS, SASS, Stylus ແລະ CoffeeScript.

ບໍ່ງ່າຍດາຍ

ແອັບ Mac, Linux, ແລະ Windows ສຳລັບການລາກ ແລະວາງການລວບລວມໄຟລ໌ໜ້ອຍລົງ. ນອກຈາກນັ້ນ, ລະຫັດແຫຼ່ງແມ່ນຢູ່ໃນ GitHub .

ເລີ່ມຕົ້ນໂຄງການເວັບໃດໆຢ່າງໄວວາ ໂດຍການລົງໃນ CSS ແລະ JS ທີ່ຖືກລວບລວມຫຼືຫຍໍ້. ຊັ້ນໃນຮູບແບບທີ່ກໍາຫນົດເອງແຍກຕ່າງຫາກສໍາລັບການຍົກລະດັບງ່າຍແລະການບໍາລຸງຮັກສາກ້າວໄປຂ້າງຫນ້າ.

ຕັ້ງຄ່າໂຄງສ້າງໄຟລ໌

ດາວໂຫລດ Bootstrap ຫຼ້າສຸດທີ່ລວບລວມແລ້ວໃສ່ໃນໂຄງການຂອງທ່ານ. ຕົວຢ່າງ, ທ່ານອາດຈະມີບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້:

  ແອັບ/
      ການຈັດວາງ/
      ແມ່ແບບ/
  ສາທາລະນະ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ໃຊ້ແມ່ແບບເລີ່ມຕົ້ນ

ສຳເນົາ HTML ພື້ນຖານຕໍ່ໄປນີ້ເພື່ອເລີ່ມຕົ້ນ.

<html>
  <ຫົວ>
    <title> ແມ່ແບບ Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <ຮ່າງກາຍ>
    <h1> ສະ ບາຍດີ, ໂລກ! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

ຊັ້ນໃນລະຫັດແບບກຳນົດເອງ

ເຮັດວຽກຢູ່ໃນ CSS, JS, ແລະອື່ນໆຕາມຄວາມຈໍາເປັນເພື່ອເຮັດໃຫ້ Bootstrap ຂອງທ່ານເອງດ້ວຍໄຟລ໌ CSS ແລະ JS ແຍກຕ່າງຫາກຂອງທ່ານເອງ.

<html>
  <ຫົວ>
    <title> ແມ່ແບບ Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- ໂຄງການ -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <ຮ່າງກາຍ>
    <h1> ສະ ບາຍດີ, ໂລກ! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- ໂຄງການ -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

ຂະຫຍາຍ Bootstrap

ສ້າງດ້ວຍ LESS