in English

ແນະນຳ

ເລີ່ມຕົ້ນດ້ວຍ Bootstrap, ກອບທີ່ນິຍົມທີ່ສຸດໃນໂລກສໍາລັບການສ້າງເວັບໄຊທ໌ທີ່ຕອບສະຫນອງ, ມືຖືທໍາອິດ, ດ້ວຍ jsDelivr ແລະຫນ້າເລີ່ມຕົ້ນຂອງແມ່ແບບ.

ເລີ່ມໄວ

ຊອກຫາການເພີ່ມ Bootstrap ໃນໂຄງການຂອງທ່ານຢ່າງໄວວາບໍ? ໃຊ້ jsDelivr, CDN ແຫຼ່ງເປີດຟຣີ. ໃຊ້ຕົວຈັດການຊຸດຫຼືຕ້ອງການດາວໂຫລດໄຟລ໌ແຫຼ່ງ? ໄປທີ່ໜ້າດາວໂຫຼດ .

CSS

ສຳເນົາແຜ່ນສະໄຕລ໌ <link>ໃສ່ໃນຂອງເຈົ້າ <head>ກ່ອນສະໄຕຊີດອື່ນໆທັງໝົດເພື່ອໂຫລດ CSS ຂອງພວກເຮົາ.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

ຈສ

ຫຼາຍໆອົງປະກອບຂອງພວກເຮົາຕ້ອງການໃຊ້ JavaScript ເພື່ອເຮັດວຽກ. ໂດຍສະເພາະ, ພວກເຂົາຕ້ອງ ການ jQuery , Popper , ແລະ plugins JavaScript ຂອງພວກເຮົາເອງ. ພວກເຮົາໃຊ້ ການສ້າງແບບກະທັດຮັດຂອງ jQuery , ແຕ່ສະບັບເຕັມຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ.

ວາງ ອັນໃດອັນໜຶ່ງຕໍ່ໄປນີ້ <script>ຢູ່ ໃກ້ທ້າຍໜ້າຂອງເຈົ້າ, ກ່ອນໜ້າ </body>ປ້າຍປິດ, ເພື່ອເປີດໃຊ້ພວກມັນ. jQuery ຕ້ອງມາກ່ອນ, ຈາກນັ້ນ Popper, ແລະຫຼັງຈາກນັ້ນ plugins JavaScript ຂອງພວກເຮົາ.

ມັດ

ລວມເອົາທຸກໆ plugin Bootstrap JavaScript ກັບຫນຶ່ງໃນສອງຊຸດຂອງພວກເຮົາ. ທັງສອງ bootstrap.bundle.jsແລະ bootstrap.bundle.min.jsລວມເອົາ Popper ສໍາລັບຄໍາແນະນໍາແລະ popovers ຂອງພວກເຮົາ, ແຕ່ບໍ່ແມ່ນ jQuery . ລວມ jQuery ທໍາອິດ, ຫຼັງຈາກນັ້ນເປັນຊຸດ Bootstrap JavaScript. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບສິ່ງທີ່ຢູ່ໃນ Bootstrap, ກະລຸນາເບິ່ງ ພາກ ເນື້ອ ໃນຂອງພວກເຮົາ .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ແຍກຕ່າງຫາກ

ຖ້າທ່ານຕັດສິນໃຈໄປກັບການແກ້ໄຂສະຄິບແຍກຕ່າງຫາກ, Popper ຕ້ອງມາກ່ອນ (ຖ້າທ່ານໃຊ້ຄໍາແນະນໍາຫຼື popovers), ແລະຫຼັງຈາກນັ້ນ plugins JavaScript ຂອງພວກເຮົາ.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

ອົງປະກອບ

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

ສະແດງອົງປະກອບທີ່ຕ້ອງການ JavaScript
  • ແຈ້ງເຕືອນສໍາລັບການປິດ
  • ປຸ່ມສຳລັບການສະຫຼັບລັດ ແລະກ່ອງໝາຍ/ການທຳງານວິທະຍຸ
  • Carousel ສໍາລັບທຸກພຶດຕິກໍາ, ການຄວບຄຸມ, ແລະຕົວຊີ້ວັດ slides
  • ຫຍໍ້ລົງເພື່ອສະຫຼັບການເບິ່ງເຫັນເນື້ອຫາ
  • Dropdowns ສໍາ​ລັບ​ການ​ສະ​ແດງ​ແລະ​ຕໍາ​ແຫນ່ງ (ຍັງ​ຕ້ອງ​ການ Popper ​)
  • Modals ສໍາລັບການສະແດງ, ຕໍາແຫນ່ງ, ແລະພຶດຕິກໍາການເລື່ອນ
  • Navbar ສໍາລັບການຂະຫຍາຍ plugin Collapse ຂອງພວກເຮົາເພື່ອປະຕິບັດພຶດຕິກໍາການຕອບສະຫນອງ
  • Scrollspy ສໍາລັບພຶດຕິກໍາການເລື່ອນແລະການປັບປຸງການນໍາທາງ
  • ຄໍາແນະນໍາແລະ popovers ສໍາລັບການສະແດງແລະຕໍາແຫນ່ງ (ຍັງຕ້ອງການ Popper )

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

ໃຫ້ແນ່ໃຈວ່າຫນ້າເວັບຂອງທ່ານຖືກຕັ້ງຄ່າດ້ວຍມາດຕະຖານການອອກແບບແລະການພັດທະນາຫລ້າສຸດ. ນັ້ນຫມາຍຄວາມວ່າການໃຊ້ HTML5 doctype ແລະລວມທັງແທັກ meta viewport ສໍາລັບພຶດຕິກໍາການຕອບສະຫນອງທີ່ເຫມາະສົມ. ເອົາມັນທັງຫມົດເຂົ້າກັນແລະຫນ້າຂອງທ່ານຄວນຈະເປັນແບບນີ້:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

ນັ້ນແມ່ນທັງຫມົດທີ່ທ່ານຕ້ອງການສໍາລັບຄວາມຕ້ອງການຂອງຫນ້າທັງຫມົດ. ເຂົ້າໄປເບິ່ງ ເອກະສານໂຄງຮ່າງ ຫຼື ຕົວຢ່າງທີ່ເປັນທາງການຂອງພວກເຮົາ ເພື່ອເລີ່ມຈັດວາງເນື້ອຫາ ແລະອົງປະກອບຂອງເວັບໄຊຂອງເຈົ້າ.

ທີ່ສໍາຄັນທົ່ວໂລກ

Bootstrap ນຳໃຊ້ຮູບແບບ ແລະ ການຕັ້ງຄ່າທົ່ວໂລກທີ່ສຳຄັນຈຳນວນໜຶ່ງທີ່ເຈົ້າຈະຕ້ອງລະວັງໃນເວລາໃຊ້ມັນ, ເຊິ່ງທັງໝົດນີ້ເກືອບແມ່ນແນໃສ່ການເຮັດໃຫ້ ຮູບແບບ ຂອງຕົວທ່ອງເວັບຂ້າມຜ່ານ ປົກກະຕິ . ໃຫ້ dive ໃນ.

ປະເພດເອກະສານ HTML5

Bootstrap ຕ້ອງການໃຊ້ HTML5 doctype. ຖ້າບໍ່ມີມັນ, ທ່ານຈະເຫັນຄໍເຕົ້າໄຂ່ທີ່ທີ່ບໍ່ສົມບູນແບບທີ່ມ່ວນໆ, ແຕ່ລວມທັງມັນບໍ່ຄວນເຮັດໃຫ້ເກີດການຕົກໃຈຫຼາຍ.

<!doctype html>
<html lang="en">
  ...
</html>

ແທັກ meta ທີ່ຕອບສະ ໜອງ

Bootstrap ແມ່ນການພັດທະນາ ມືຖືທໍາອິດ , ຍຸດທະສາດທີ່ພວກເຮົາເພີ່ມປະສິດທິພາບລະຫັດສໍາລັບອຸປະກອນມືຖືກ່ອນແລະຫຼັງຈາກນັ້ນຂະຫຍາຍອົງປະກອບຕາມຄວາມຈໍາເປັນໂດຍໃຊ້ CSS media queries. ເພື່ອຮັບປະກັນການສະແດງຜົນ ແລະ ການຊູມສຳຜັດທີ່ເໝາະສົມສຳລັບອຸປະກອນທັງໝົດ, ໃຫ້ເພີ່ມແທັກ meta viewport ທີ່ຕອບສະໜອງ ໃຫ້ກັບ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

ທ່ານສາມາດເບິ່ງຕົວຢ່າງຂອງການດໍາເນີນການນີ້ຢູ່ໃນ ແມ່ແບບເລີ່ມຕົ້ນ .

ຂະໜາດກ່ອງ

ສໍາລັບຂະຫນາດທີ່ກົງໄປກົງມາໃນ CSS, ພວກເຮົາປ່ຽນ ຄ່າ ທົ່ວໂລກ box-sizingຈາກ . ນີ້ຮັບປະກັນ ວ່າບໍ່ມີຜົນຕໍ່ຄວາມກວ້າງສຸດທ້າຍຂອງອົງປະກອບ, ແຕ່ມັນສາມາດເຮັດໃຫ້ເກີດບັນຫາກັບຊອບແວພາກສ່ວນທີສາມເຊັ່ນ Google Maps ແລະ Google Custom Search Engine.content-boxborder-boxpadding

ໃນໂອກາດທີ່ຫາຍາກ, ທ່ານຈໍາເປັນຕ້ອງໄດ້ລົບລ້າງມັນ, ໃຊ້ບາງສິ່ງບາງຢ່າງເຊັ່ນ: ຕໍ່ໄປນີ້:

.selector-for-some-widget {
  box-sizing: content-box;
}

ດ້ວຍສະນິບເພັດຂ້າງເທິງ, ອົງປະກອບທີ່ຊ້ອນກັນ - ລວມທັງເນື້ອຫາທີ່ສ້າງຜ່ານ ::beforeແລະ - ::afterທັງຫມົດຈະສືບທອດຕາມທີ່ລະບຸໄວ້ box-sizingສໍາລັບການນັ້ນ .selector-for-some-widget.

ຮຽນ��ຮູ້​ເພີ່ມ​ເຕີມ​ກ່ຽວ​ກັບ ​ຮູບ​ແບບ​ກ່ອງ​ແລະ​ຂະ​ຫນາດ​ຢູ່​ທີ່ CSS Tricks .

ປິດເປີດໃໝ່

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

ຊຸມຊົນ

ຕິດຕາມການພັດທະນາຂອງ Bootstrap ແລະເຂົ້າເຖິງຊຸມຊົນດ້ວຍຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດເຫຼົ່ານີ້.

  • ອ່ານ ແລະສະໝັກໃຊ້ Blog Bootstrap ຢ່າງເປັນທາງການ .
  • ສົນທະນາກັບເພື່ອນ Bootstrappers ໃນ IRC. ໃນ irc.libera.chatເຄື່ອງແມ່ຂ່າຍ, ໃນ #bootstrapຊ່ອງທາງ.
  • ການຊ່ວຍເຫຼືອການຈັດຕັ້ງປະຕິບັດອາດຈະພົບເຫັນຢູ່ທີ່ Stack Overflow (tagged bootstrap-4).
  • ນັກພັດທະນາຄວນໃຊ້ຄໍາສໍາຄັນ bootstrapໃນແພັກເກັດທີ່ດັດແປງຫຼືເພີ່ມການເຮັດວຽກຂອງ Bootstrap ເມື່ອແຈກຢາຍຜ່ານ npm ຫຼືກົນໄກການຈັດສົ່ງທີ່ຄ້າຍຄືກັນສໍາລັບການຄົ້ນພົບສູງສຸດ.

ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕາມ @getbootstrap ໃນ Twitter ສໍາລັບວິດີໂອເພງນິນທາຫລ້າສຸດແລະຫນ້າຫວາດສຽວ.

CSPs ແລະ SVGs ທີ່ຝັງໄວ້

ອົງປະກອບ Bootstrap ຫຼາຍໆອັນປະກອບມີ SVGs ທີ່ຝັງຢູ່ໃນ CSS ຂອງພວກເຮົາເພື່ອຈັດຮູບແບບອົງປະກອບໃຫ້ສອດຄ່ອງ ແລະງ່າຍດາຍໃນທົ່ວຕົວທ່ອງເວັບ ແລະອຸປະກອນ. ສໍາລັບອົງການຈັດຕັ້ງທີ່ມີ ການຕັ້ງຄ່າ CSP ທີ່ເຂັ້ມງວດກວ່າ , ພວກເຮົາໄດ້ບັນທຶກຕົວຢ່າງທັງຫມົດຂອງ SVGs ຂອງພວກເຮົາທີ່ຝັງໄວ້ (ທັງຫມົດທີ່ນໍາໃຊ້ຜ່ານ background-image) ເພື່ອໃຫ້ທ່ານສາມາດທົບທວນຄືນທາງເລືອກຂອງທ່ານຢ່າງລະອຽດ.

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