Pagpasok sa Bootstrap 5

តើជាអ្វីគឺ Bootstrap?

  • Bootstrap គឺជាគំរូរមុនមុខដែលមិនគិតថ្លៃ សំរាប់ការអភិវឌ្ឍគេហទំព័រដែលលឿន និងងាយស្រួល
  • Bootstrap រួមទាំងគំរូរចុងភាគដែលផ្អែកលើ HTML និង CSS សម្រាប់ការរៀបចំ ទំព័រ ប្រលោម ប៊ូតុង តារាង ការនាំទិស ការបើកបរ រូបភាពបណ្ដាញ និងដូចនេះទៀត
  • Bootstrap ផ្តល់អោយនូវ JavaScript ដែលមានលក្ខណៈអនុញ្ញាត
  • Bootstrap អនុញ្ញាតអោយអ្នករចនាគេហទំព័របង្កើតការរចនាដែលអាចវិវត្តក្នុងរបៀបស្វ័យប្រវត្តិ

តើជាអ្វីគឺ ការរចនាគេហទំព័រដែលអាចវិវត្តក្នុងរបៀបស្វ័យប្រវត្តិ?

ការរចនាគេហទំព័រដែលអាចវិវត្តក្នុងរបៀបស្វ័យប្រវត្តិ គឺដើម្បីបង្កើតគេហទំព័រដែលអាចវិវត្តច្រើនប្រភេទឧបករណ៍ ដើម្បីធ្វើអោយមានបទពិសោធន៍ការប្រើប្រាស់ល្អក្នុងគ្រឿងកុំព្យូទ័រស្វ័យប្រវត្តិ ពីកុំព្យូទ័រដៃ ទៅកុំព្យូទ័រតុចំនួនច្រើន。

Bootstrap 5 ការបង្ហាញ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1: Spring</h3>
      <p>Nang araw ng kailan ay pinaghahanap akong bulaklak sa pangalang Xi, ang walang hanggan na liwanag ay naging bagong.</p>
      <p>Malakas ang pangalan ng silakbo ng hangin, ang iba't ibang kulay ng bulaklak ay laging tag-sibol.</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2: Early Summer couplet</h3>
      <p>Ang mga kulay-porke at kulay-ubod ay naging alikabok, ang sikol sa tinig ng magong kawawang-ukit ay nagsimula ang tag-init.</p>
      <p>Wala ng katapusan ang paglalakad sa kahoy at halaman, naiintindihan ko na ako ay tao ng kapayapaan.</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3: The Mountain Trail</h3>
      <p>Malayo ang pagtungo sa malamig na bundok, ang dalisdis ng mga kahoy ay may patak ng ulan, may bahay sa lugar ng mabuti ng ulan.</p>
      <p>Nakaupo akong pumunta sa gabi, ang paa sa kahoy ng gubat ay nagiging kulay-porke, mas mula sa bulaklak sa Pebrero.</p>
    </div>
  </div>
</div>

Try It Yourself

Versyon ng Bootstrap

Ang Bootstrap 5 (naihirang 2021) ay ang pinakabagong bersyon ng Bootstrap (naihirang 2013); gamit ang bagong komponente, mas mabilis na stylesheet, at nagbibigay ng mas mabilis na pagtugon.

Ang Bootstrap 5 ay sumusuporta sa pinakabagong estableng bersyon ng lahat ng pangunahing browser at platform. Subalit hindi sumusuporta sa Internet Explorer 11 at mas maaga sa bersyon.

Ang pangunahing pagkakaiba sa pagitan ng Bootstrap 5 at Bootstrap 3 & 4 ay ang Bootstrap 5 na nagpalit sa Vanilla JavaScript sa pamamagitan ng jQuery.

Komentaryo:Ang pangkat nila ay patuloy na sumuporta sa Bootstrap 3 at Bootstrap 4 sa pamamagitan ng pangunahing pag-aayos ng mga error at pagbabago ng dokumentasyon, kaya ito ay ligtas na magpatuloy gamitin sila. Subalit walang magagawang bagong pagpapakilala sa kanila.

Bakit gamitin ang Bootstrap?

Ang kaibahan ng Bootstrap:

  • Easy to use:Anuman ang pagkakakilala sa HTML at CSS, maaaring magsimulang gamitin ang Bootstrap kaagad.
  • Responsive features:Ang responsive CSS ng Bootstrap ay maaaring ayusin para sa mobile, tablet at desktop
  • Mobile-first approach:Sa Bootstrap, ang mobile-first style ay bahagi ng pangunahing framework
  • Browser compatibility:Yamang magamit ang Bootstrap 5 sa lahat ng makabagong browser (Chrome, Firefox, Edge, Safari at Opera).

Babala:Kung kailangan mong suportahan ang IE11 at mas mababa sa bersyon, dapat gamitin ang BS4 o BS3.

Kung saan makuha ang Bootstrap 5?

May dalawang paraan na magamit ang Bootstrap 5 sa iyong sariling websayt.

Maaari mong:

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

Bootstrap 5 CDN

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

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

MaxCDN:

<!-- 最新编译并压缩的 CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的优势之一：

许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户从中请求文件，它将从最接近他们的服务器提供服务，这也导致更快的加载时间。

JavaScript？

Bootstrap 5 将 JavaScript 用于不同的组件（如模态、工具提示、弹出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，那就不需要它们。

下载 Bootstrap 5

如果您想自己下载并托管 Bootstrap 5，请访问 https://getbootstrap.com/，然后按照那里的说明进行操作。

使用 Bootstrap 5 创建您的第一张网页

1. 添加 HTML5 文档类型

Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 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 仍需一个包含元素来包装站点内容。

May dalawang klase ng container na puwedeng piliin:

  1. .container Ang klase ay nagbibigay ng responsive fixed-width container
  2. .container-fluid Ang klase ay nagbibigay ng buong-lapad na container, na tumataya sa buong lapad ng viewport

Dalawang basic Bootstrap 5 page

Container Example

Ang sumusunod na halimbawa ay nagpapakita ng kodigo ng basic Bootstrap 5 page (may responsive fixed-width container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>My First Bootstrap Page</h1>
  <p>Ang bahaging ito ay nasa .container class.</p>
  <p>.container class ay nagbibigay ng responsive fixed-width container.</p>
</div>
</body>
</html>

Try It Yourself

Container Fluid Example

Ang sumusunod na halimbawa ay nagpapakita ng kodigo ng basic Bootstrap 5 page (may buong-lapad na container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>My First Bootstrap Page</h1>
  <p>Ang bahaging ito ay nasa .container-fluid class.</p>
  <p>.container-fluid class ay nagbibigay ng buong-layong container, na tumataya sa buong lapad ng viewport.</p>
</div>
</body>
</html>

Try It Yourself