in English

ເລີ່ມຕົ້ນດ້ວຍ Bootstrap

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

ໃນໜ້ານີ້

ເລີ່ມໄວ

ເລີ່ມຕົ້ນໂດຍການລວມເອົາ CSS ແລະ JavaScript ທີ່ກຽມພ້ອມໃນການຜະລິດຂອງ Bootstrap ຜ່ານ CDN ໂດຍບໍ່ຈໍາເປັນຕ້ອງມີຂັ້ນຕອນການກໍ່ສ້າງໃດໆ. ເບິ່ງມັນຢູ່ໃນການປະຕິບັດດ້ວຍການ ສາທິດ Bootstrap CodePen ນີ້ .

ສ້າງ index.htmlໄຟລ໌ໃຫມ່ໃນຮາກໂຄງການຂອງທ່ານ. ລວມເອົາ <meta name="viewport">ແທັກເຊັ່ນກັນສໍາລັບ ພຶດຕິກໍາການຕອບສະ ຫນອງທີ່ເຫມາະສົມ ໃນອຸປະກອນມືຖື.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

ລວມເອົາ CSS ແລະ JS ຂອງ Bootstrap. ວາງ <link>ແທັກໃນ <head>CSS ຂອງພວກເຮົາ, ແລະ <script>ແທັກສໍາລັບຊຸດ JavaScript ຂອງພວກເຮົາ (ລວມທັງ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງ dropdowns, poppers, ແລະຄໍາແນະນໍາເຄື່ອງມື) ກ່ອນທີ່ຈະປິດ </body>. ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ ການເຊື່ອມຕໍ່ CDN ຂອງພວກເຮົາ .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

ນອກນັ້ນທ່ານຍັງສາມາດປະກອບມີ Popper ແລະ JS ຂອງພວກເຮົາແຍກຕ່າງຫາກ. ຖ້າທ່ານບໍ່ວາງແຜນທີ່ຈະໃຊ້ dropdowns, popovers, ຫຼື tooltips, ຊ່ວຍປະຢັດກິໂລໄບບາງໂດຍບໍ່ລວມ Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

ການເຊື່ອມຕໍ່ CDN

ໃນຖານະເປັນເອກະສານອ້າງອີງ, ນີ້ແມ່ນການເຊື່ອມຕໍ່ CDN ຕົ້ນຕໍຂອງພວກເຮົາ.

ລາຍລະອຽດ	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ຈສ	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

ທ່ານຍັງສາມາດໃຊ້ CDN ເພື່ອດຶງເອົາສິ່ງທີ່ ສ້າງເພີ່ມເຕີມຂອງພວກເຮົາທີ່ມີລາຍຊື່ຢູ່ໃນຫນ້າເນື້ອຫາ .

ຂັ້ນຕອນຕໍ່ໄປ

ອ່ານເລັກນ້ອຍກ່ຽວກັບການ ຕັ້ງຄ່າສະພາບແວດລ້ອມທົ່ວໂລກທີ່ສໍາຄັນ ບາງອັນ ທີ່ Bootstrap ໃຊ້.
ອ່ານກ່ຽວກັບສິ່ງທີ່ລວມຢູ່ໃນ Bootstrap ໃນ ສ່ວນເນື້ອຫາ ຂອງພວກເຮົາ ແລະບັນຊີລາຍຊື່ຂອງ ອົງປະກອບທີ່ຕ້ອງການ JavaScript ຂ້າງລຸ່ມນີ້.
ຕ້ອງການພະລັງງານພຽງເລັກນ້ອຍ? ພິຈາລະນາການກໍ່ສ້າງດ້ວຍ Bootstrap ໂດຍການ ລວມເອົາໄຟລ໌ແຫຼ່ງຜ່ານຕົວຈັດການຊຸດ .
ຊອກຫາການໃຊ້ Bootstrap ເປັນໂມດູນກັບ <script type="module">? ກະລຸນາອ້າງອີງເຖິງການ ໃຊ້ Bootstrap ຂອງພວກເຮົາເປັນສ່ວນໂມດູນ .

ອົງປະກອບ JS

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

ສະແດງອົງປະກອບທີ່ຕ້ອງການ JavaScript

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

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

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">

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

ຂະໜາດກ່ອງ

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

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