ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

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

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

ໃນໜ້ານີ້

ເລີ່ມໄວ

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


  1. ສ້າງ 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>

  2. ລວມເອົາ 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>

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

ໃນຖານະເປັນເອກະສານອ້າງອີງ, ນີ້ແມ່ນການເຊື່ອມຕໍ່ 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 ເພື່ອດຶງເອົາສິ່ງທີ່ ສ້າງເພີ່ມເຕີມຂອງພວກເຮົາທີ່ມີລາຍຊື່ຢູ່ໃນຫນ້າເນື້ອຫາ .

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

ອົງປະກອບ 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 ສໍາລັບວິດີໂອເພງນິນທາຫລ້າສຸດແລະຫນ້າຫວາດສຽວ.