ການເລີ່ມຕົ້ນ Bootstrap 5

ຫຍັງການອອກແບບ Bootstrap?

  • Bootstrap ແມ່ນຕົວແທນໜ້າໜັງທີ່ບໍ່ມີຄ່າຂື້ນທີ່ຊ່ວຍໃຫ້ພັດທະນາ Web ດ້ວຍຄວາມໄວຫຼາຍຫຼາຍ
  • Bootstrap ລວມມີຕົວແທນອອກແບບຕາມ HTML ແລະ CSS ສຳລັບການຈັດຕັ້ງຄຳຂຽນໂດຍຄຳກຳນົດ HTML, ຟອມ, ກັບຂັ້ນ, ການອົກພາບ, ການນຳທາງ, ການປະກົດກະດີ, ການພາບລຸ່ມພາບ, ແລະ ອື່ນໆອີກ
  • Bootstrap ສະໜອງ JavaScript ສະແມລດອກດ້ວຍຄວາມຫຼາຍຫຼາຍ
  • Bootstrap ສາມາດຊ່ວຍທາງເພີ່ມການອອກແບບທີ່ພັດທະນາຄວາມພິຈາລະນາຢ່າງງ່າຍດາຍ

ຫຍັງການອອກແບບເວັບໄຊທີ່ພັດທະນາຄວາມພິຈາລະນາຈະເປັນ?

ການອອກແບບເວັບໄຊທີ່ພັດທະນາຄວາມພິຈາລະນາທີ່ພິການທັງໝົດຂອງອຸປະກອນທັງໝົດຂອງຄອມພິວເຕີ້ທັງໝົດທີ່ມີການພັດທະນາຄວາມພິຈາລະນາດ້ວຍຄວາມສະບາຍຫຼາຍຫຼາຍຫຼາຍ

Bootstrap 5 ຄວາມຈະເປັນ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Bootstrap ເພດຄັ້ງທໍາອິດຂອງຂ້ອຍ</h1>
</div>


  

    <div class="col-sm-4">
      
列 1：春日

      
胜日寻芳泗水滨，无边光景一时新。

      
等闲识得东风面，万紫千红总是春。

    </div>
    <div class="col-sm-4">
      
列 2：初夏绝句

      
纷纷红紫已成尘，布谷声中夏令新。

      <p>ການຍ່າງຜ່ານຫົນທາງຊາຍທີ່ບໍ່ທັນຈົບ, ການຮູ້ວ່າຂ້ອຍແມ່ນຄົນທີ່ຢູ່ໃນຕະວາຍສະດຸ.</p>
    </div>
    <div class="col-sm-4">
      <h3>ກອງ 3: ທາງຫນັງ</h3>
      <p>ຫົນທາງຫນັງພູກາງຕາຍ, ມີເຮືອນຢູ່ບ່ອນຫອຍແບບປະກາດ.</p>
      <p>ຢູ່ບ່ອນຢຸດລົດຮັກບັນດາຟອງຫົວທີ່ວັນເວລາຄໍາຄືນ, ກ້ອງໄມ້ສີຫວັດຫຼາຍກວ່າຟອງເດືອນກຸມພາ.</p>
    </div>
  </div>
</div>

ທຳການກວດກາຢ່າງສັນຕິພາບ

ລະບົບ Bootstrap

Bootstrap 5 (ປະກາດໃນປີ 2021) ແມ່ນຫົວຂໍ້ຫຼາຍຂອງ Bootstrap (ປະກາດໃນປີ 2013); ນຳໃຊ້ສິ່ງອຸປະກອນໃໝ່, ກົດແບບການສະແດງໄວຫຼາຍຫຼາຍ, ພາຍໃນການຕອບສະໜອງຄວາມຫຼາຍຫຼາຍ.

Bootstrap 5 ສະໜັບສະໜຸນທັງໝົດຈະສັບພະສັດ ແລະພາຍດາວຂອງທັງໝົດຈະສັບພະສັດ, ແຕ່ບໍ່ສະໜັບສະໜຸນ Internet Explorer 11 ແລະຫຼັງນັ້ນ.

ຄວາມແຕກຕ່າງທີ່ຫຼາຍທີ່ກັບ Bootstrap 5 ແມ່ນວ່າ Bootstrap 5 ໄດ້ປ່ຽນໄປໃຊ້ JavaScript Vanilla ທີ່ບໍ່ມີ jQuery.

ຄວາມຄິດ:ທີມຂອງພວກເຂົາຍັງສະໜັບສະໜຸນການສ້ອມແປງຄວາມຜິດພາດຫຼັກ ແລະການປ່ຽນແປງເອກະສານຂອງ Bootstrap 3 ແລະ Bootstrap 4, ທີ່ສາມາດນຳໃຊ້ຢ່າງປອດໄພ. ແຕ່ຈະບໍ່ອອກສະຫຼົກຫົວຂໍ້ໃຫມ່.

ເປັນຫຍັງທ່ານຈະໃຊ້ Bootstrap?

ຄວາມດີຂອງ Bootstrap:

  • ຄວາມສະດວກໃນການໃຊ້:ຜູ້ທີ່ມີຄວາມຮູ້ພື້ນຖານ HTML ແລະ CSS ສາມາດເລີ່ມໃຊ້ Bootstrap ໂດຍທັນທີ.
  • ປະສົມປະສານທີ່ຕອບສະໜອງ:CSS ທີ່ສາມາດຕອບສະໜອງສຳລັບສັບພະສັດ, ລູກອັດສະດຸ ແລະຄອມພິວເຕິກ.
  • ວິທີທີ່ຕັ້ງຢູ່ໃນຫົວໜ້າຫົວອອກສະໜາມສະໜາມຂອງຂັ້ນຕົ້ນ:ໃນ Bootstrap, ຮູບແບບທີ່ຕັ້ງຢູ່ໃນຫົວໜ້າຫົວອອກສະໜາມສະໜາມຂອງຂັ້ນຕົ້ນ.
  • ການສາມາດໃຊ້ຈະສັບພະສັດ:Bootstrap 5 ສາມາດໃຊ້ກັບບັນດາຈະສັບພະສັດທີ່ຫຼາຍຢ່າງຫຼາຍຢູ່ (Chrome, Firefox, Edge, Safari ແລະ Opera).

ເຫັນດີ:ຖ້າທ່ານຕ້ອງການສະໜັບສະໜຸນ IE11 ແລະຫຼັງນັ້ນແລ້ວຈະຕ້ອງໃຊ້ BS4 ຫຼື BS3.

ຈາກບ່ອນໃດທີ່ທ່ານຈະຮັບ Bootstrap 5?

ມີສອງວິທີທີ່ທ່ານສາມາດໃຊ້ Bootstrap 5 ໃນເວັບໄຊຂອງທ່ານ.

ທ່ານສາມາດໃຊ້ຢູ່:

  • 包含来自 CDN 的 Bootstrap 5
  • 从 getbootstrap.com 下载 Bootstrap 5

Bootstrap 5 CDN

如果不想自己下载并托管 Bootstrap 5，则可以从 CDN（内容交付网络）中引用它。

CodeW3C.com 为 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持：

MaxCDN:


<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">

<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

ໜຶ່ງຈາກປະກອບສ່ວນທີ່ມີຄວາມຫນັງຂອງ CDN Bootstrap 5:

ຫຼາຍຜູ້ໃຊ້ໄດ້ດາວໂຫຼດ Bootstrap 5 ຈາກ jsDelivr ເມື່ອພວກເຂົາຢູ່ບ່ອນບານອື່ນໆ. ເພື່ອນັ້ນ, ເວລາທີ່ພວກເຂົາເຂົ້າບ່ອນທ່ານ, ມັນຈະມີການເຊື່ອມໂຫຼດຈາກການກັບຄືນ, ເພື່ອຈະຫຼຸດລົງເວລາການເຊື່ອມໂຫຼດ. ປະກອບສ່ວນສະເພາະທີ່ຈະມີການຮັບຄຳຮ້ອງຈາກຜູ້ໃຊ້, CDN ຈະແຈກສະໜອງບັນດາສິ່ງຂອງພວກເຂົາຈາກທີ່ຫຼາຍຢູ່ທີ່ຫນື່ງໃກ້ກັບພວກເຂົາຫນື່ງ, ເພື່ອຈະມີການເຊື່ອມໂຫຼດທີ່ວ່າຫຼຸດລົງເວລາ.

JavaScript?

Bootstrap 5 ນຳໃຊ້ JavaScript ສຳລັບປະກອບສ່ວນທີ່ຫຼາຍ (ເຊັ່ນ: ມອດ, ຄວາມຊອບຊ້ອນ, ການປະກົດອອກໄພ້, ແລະ ອື່ນໆ). ແຕ່ຖ້າທ່ານພຽງແຕ່ນຳໃຊ້ສ່ວນ CSS ຂອງ Bootstrap, ທ່ານບໍ່ຕ້ອງມີພວກນັ້ນ.

ດາວໂຫຼດ Bootstrap 5

ຖ້າທ່ານຕ້ອງດາວໂຫຼດ Bootstrap 5 ແລະ ກວມຂຶ້ນໃຫ້ມີການຈັດສາ, ກະຕຸ້ນໃຫ້ເຂົ້າບ່ອນ https://getbootstrap.com/ຫຼັງຈາກນັ້ນ, ກະຕຸ້ນໃຫ້ດຳເນີນຕາມຄຳແນະນຳທີ່ມີຢູ່ທີ່ນັ້ນ.

ການກໍ່ສ້າງເວັບໄຊຄັ້ງທຳອິດຂອງທ່ານດ້ວຍ Bootstrap 5

1. ກວມຂຶ້ນ HTML5 doctype

Bootstrap 5 ນຳໃຊ້ປະກອບສ່ວນ HTML5 doctype ແລະ CSS ປະກອບສ່ວນທີ່ຕ້ອງການ.

ກະຕຸ້ນໃຫ້ບໍ່ເຫຼືອຍັງໃນຕອນກາງຂອງເວັບໄຊ HTML5 doctype, ແລະ ຄວາມພາສາ lang ແລະ ປະກັນຫົວຂໍ້ ແລະ ຄວາມພາສາທີ່ຖືກຕ້ອງ:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 ຄວາມປະສົງ</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 ຕອບສັນຕິພາບສັນຍາວ

ຄວາມຕັ້ງໃຈຂອງການອອກແບບ Bootstrap 5 ແມ່ນການຕອບສະໜອງການເຄື່ອງມືສັນຕິພາບ. ຮູບແບບການເຄື່ອງມືສັນຕິພາບແມ່ນສ່ວນສຳຄັນຂອງການກໍ່ສ້າງຂອງການກັບກັນ.

ເພື່ອຮັບປະກັນການສະແດງທີ່ຖືກຕ້ອງແລະການຫັດສຽງຂ້າງມືຂອງຕົກລົງ, ກະຕຸ້ນໃຫ້ກວມຂຶ້ນຕ່າງກ່ວານີ້. <head> ກວມຂຶ້ນຕ່າງກ່ວານີ້ໃນປະກອບສ່ວນ. <meta> ປະກອບສ່ວນ:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width ໄດ້ກວດກາລະດັບຄວາມກວ້າງຂອງເວັບໄຊເພື່ອຕິດຕາມຄວາມກວ້າງຂອງ screen-width ຂອງອຸປະກອນ (ທີ່ຈະຫຼາຍຢູ່ອຸປະກອນ).

initial-scale=1 ໄດ້ກວດກາລະດັບຂະໜາດການຫັດສຽງຄັ້ງທຳອິດຂອງການເຊື່ອມໂຫຼດບາດບັດ.

3. ຄອນເຕີ້

Bootstrap 5 ຍັງຕ້ອງມີປະກອບສ່ວນທີ່ຈະກວມຂຶ້ນເນື້ອຫຼັກຂອງເວັບໄຊ.

ມີສອງວິນາທິດທີ່ສາມາດເລືອກຢູ່

  1. .container ວິນາທິດສະໜອງບັນນາທິການທີ່ມີວົງວຽນຂັ້ນຕອນ
  2. .container-fluid ວິນາທິດສະໜອງບັນນາທິການກາຍຄວາມພາຍໃນຂອບເຂດທົ່ວທະວີດ

ສອງຄະແນນ Bootstrap 5 ພື້ນຖານ

ຄະແນນ container

ອີກຄະແນນອອກທີ່ສະແດງຄວາມຖືກຕ້ອງຂອງ Bootstrap 5 ທີ່ມີບັນນາທິການທີ່ມີວົງວຽນຂັ້ນຕອນ.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ອົງການ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Bootstrap ເພດຄັ້ງທໍາອິດຂອງຂ້ອຍ</h1>
  <p>ສ່ວນນີ້ຢູ່ໃນ .container.</p>
  <p>.container ສະໜອງບັນນາທິການທີ່ມີວົງວຽນຂັ້ນຕອນ.</p>
</div>
</body>
</html>

ທຳການກວດກາຢ່າງສັນຕິພາບ

ຄະແນນ Container Fluid

ອີກຄະແນນອອກທີ່ສະແດງຄວາມຖືກຕ້ອງຂອງ Bootstrap 5 ທີ່ມີບັນນາທິການກາຍຄວາມພາຍໃນຂອບເຂດທົ່ວທະວີດ.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ອົງການ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Bootstrap ເພດຄັ້ງທໍາອິດຂອງຂ້ອຍ</h1>
  <p>ສ່ວນນີ້ຢູ່ໃນ .container-fluid.</p>
  <p>.container-fluid ສະໜອງບັນນາທິການກາຍຄວາມພາຍໃນຂອບເຂດທົ່ວທະວີດ.</p>
</div>
</body>
</html>

ທຳການກວດກາຢ່າງສັນຕິພາບ