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>หน้า Bootstrap แรกของฉัน</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>คอลัมน์ 1: ฤดูใบไม้ผลิ</h3>
      <p>วันดีที่หาหญ้าหลายหลายสีและหลายหลายเทา สามารถรู้แล้วว่ามีทางแห่งประชาชนสงบ</p>
      <p>สง่างามรู้หน้าแสงลมในฤดูใบไม้ผลิ หลายหลายสีและหลายหลายเทาจะมีใจแต่ในฤดูใบไม้ผลิ</p>
    </div>
    <div class="col-sm-4">
      <h3>คอลัมน์ 2: โจทย์ที่บอกในฤดูร้อน</h3>
      <p>วันอาทิตย์ดี หากลักษณะหญ้าและดอกไม้ที่มีหลายหลายสีและหลายหลายเทา ทั้งหมดมีใจแต่ในเดือนมีนาคม</p>
      <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 3 & 4 คือ Bootstrap 5 ได้เปลี่ยนไปใช้ Vanilla JavaScript แทน jQuery

หมายเหตุ:ทีมของเขายังสนับสนุนการซ่อมปัญหาหลักและการเปลี่ยนแปลงเอกสารของ Bootstrap 3 และ Bootstrap 4 อยู่ ซึ่งหมายความว่าการใช้งานนั้นทันที แต่จะไม่มีการเพิ่มคุณสมบัติใหม่เข้าไป

ทำไมต้องใช้ Bootstrap?

ข้อยูที่มีของ Bootstrap:

  • ง่ายต่อการใช้:ใครก็ตามที่มีความเข้าใจพื้นฐานของ HTML และ CSS สามารถเริ่มใช้ Bootstrap ทันที
  • คุณสมบัติที่สามารถปรับเปลี่ยนได้:Bootstrap มี CSS ที่สามารถปรับเปลี่ยนได้เพื่อมือถือ, ตัวเล็กและเดสก์ทอป
  • วิธีเดี่ยวยาวมาตรฐาน:ใน Bootstrap มาตรฐานของการทำงานเดี่ยวยาวเป็นส่วนหนึ่งของเครื่องมือโครงสร้าง
  • ความสามารถในการใช้บราวเซอร์:Bootstrap 5 สามารถทำงานได้กับทุกเครื่องนอกเหนือจากบราวเซอร์สมัยใหม่ (Chrome, Firefox, Edge, Safari และ Opera)

สัญญาณ:ถ้าคุณต้องการสนับสนุน IE11 และตัวรุ่นต่ำกว่านั้น คุณจะต้องใช้ BS4 หรือ BS3

จากที่ไหนเรียกมา Bootstrap 5?

มีสองวิธีที่คุณสามารถใช้ Bootstrap 5 บนเว็บไซต์ของคุณ

คุณสามารถทำได้:

  • รวม Bootstrap 5 จาก CDN
  • ดาวน์โหลด Bootstrap 5 จาก getbootstrap.com

Bootstrap 5 CDN

ถ้าคุณไม่ต้องการดาวน์โหลดและเก็บ Bootstrap 5 ด้วยตัวเอง คุณสามารถอ้างอิงมันจาก CDN (Content Delivery Network)

CodeW3C.com ให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap

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 คือ

หลายๆ ผู้ใช้ได้ดาวน์โหลด Bootstrap 5 จาก jsDelivr ระหว่างการเข้าถึงเว็บไซต์อื่น โดยทำให้มันโหลดเร็วขึ้นเมื่อเข้าถึงเว็บไซต์ของคุณ มันจะโหลดจากคลังจำแห่งเครื่องมือของพวกเขา ซึ่งทำให้มันโหลดเร็วขึ้นด้วย นอกจากนี้ ส่วนใหญ่ของ CDN จะให้บริการจากเซิร์ฟเวอร์ที่ใกล้ที่สุดของผู้ใช้ เช่นนั้น ทำให้มันโหลดเร็วขึ้น

JavaScript?

Bootstrap 5 ใช้ JavaScript สำหรับองค์ประกอบต่างๆ (เช่น modal, tooltip, popup และอื่น ๆ) แต่ถ้าคุณใช้ส่วนประกอบ CSS ของ Bootstrap แค่เท่านั้น คุณจะไม่จำเป็นต้องใช้เขา

ดาวน์โหลด Bootstrap 5

ถ้าคุณต้องการดาวน์โหลดและเก็บ Bootstrap 5 ด้วยตัวเอง โปรดเข้าถึง https://getbootstrap.com/จากนั้น โปรดตามคำแนะนำที่นั้น

สร้างหน้าเว็บแรกของคุณด้วย Bootstrap 5

1. เพิ่ม HTML5 รูปแบบเอกสาร

Bootstrap 5 ใช้ตัวย่อ HTML และคุณสมบัติ CSS ที่ต้องการ HTML5 doctype

โปรดเสริม 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>

ลองเองด้วยตัวเอง