HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap เริ่มต้น ใช้งาน

❮ ก่อนหน้า ถัดไป ❯

Bootstrap คืออะไร?

  • Bootstrap เป็นเฟรมเวิร์กส่วนหน้าฟรีสำหรับการพัฒนาเว็บที่เร็วและง่ายขึ้น
  • Bootstrap ประกอบด้วยเทมเพลตการออกแบบที่ใช้ HTML และ CSS สำหรับการพิมพ์ แบบฟอร์ม ปุ่ม ตาราง การนำทาง โมดอล ภาพหมุนและอื่น ๆ อีกมากมาย รวมถึงปลั๊กอิน JavaScript ที่เป็นตัวเลือก
  • Bootstrap ยังช่วยให้คุณสร้างการออกแบบที่ตอบสนองได้อย่างง่ายดาย

Responsive Web Design คืออะไร?

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์นั้นเกี่ยวกับการสร้างเว็บไซต์ที่ปรับตัวเองให้ดูดีโดยอัตโนมัติบนทุกอุปกรณ์ ตั้งแต่โทรศัพท์ขนาดเล็กไปจนถึงเดสก์ท็อปขนาดใหญ่

ตัวอย่าง Bootstrap

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

ประวัติ Bootstrap

Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ที่ Twitter และเผยแพร่เป็นผลิตภัณฑ์โอเพ่นซอร์สในเดือนสิงหาคม 2011 บน GitHub

ในเดือนมิถุนายน 2014 Bootstrap เป็นโครงการอันดับ 1 บน GitHub!

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

ข้อดีของ Bootstrap:

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

Bootstrap รุ่น

บทช่วยสอนนี้เป็นไปตามBootstrap 3ซึ่งเปิดตัวในปี 2013 อย่างไรก็ตาม เรายังครอบคลุมถึงเวอร์ชันที่ใหม่กว่าด้วย Bootstrap 4 (เปิดตัว 2018)และBootstrap 5 (เปิดตัวในปี 2021 )

Bootstrap 5 เป็น Bootstrapเวอร์ชันล่าสุด; ด้วยส่วนประกอบใหม่ สไตล์ชีตที่เร็วขึ้น การตอบสนองที่มากขึ้น ฯลฯ รองรับเบราว์เซอร์และแพลตฟอร์มหลักทั้งหมดรุ่นล่าสุดที่เสถียร อย่างไรก็ตาม ไม่รองรับ Internet Explorer 11 ขึ้นไป

ความแตกต่างที่สำคัญระหว่าง Bootstrap 5 และ Bootstrap 3 & 4 คือ Bootstrap 5 ได้เปลี่ยนเป็นJavaScriptแทนjQuery

หมายเหตุ: Bootstrap 3และ Bootstrap 4 ยังคงได้รับการสนับสนุนโดยทีมสำหรับการแก้ไขจุดบกพร่องที่สำคัญและการเปลี่ยนแปลงเอกสาร และการใช้งานต่อไปได้อย่างปลอดภัยอย่างสมบูรณ์ อย่างไรก็ตาม ฟีเจอร์ใหม่จะไม่ถูกเพิ่มเข้าไป

จะหา Bootstrap ได้ที่ไหน?

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

คุณสามารถ:

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

กำลังดาวน์โหลด Bootstrap

หากคุณต้องการดาวน์โหลดและโฮสต์ Bootstrap ด้วยตนเอง ให้ไปที่ getbootstrap.comและทำตามคำแนะนำที่นั่น

Bootstrap CDN

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

MaxCDN ให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap คุณต้องรวม jQuery ด้วย:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

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

jQuery
Bootstrap ใช้ jQuery สำหรับปลั๊กอิน JavaScript (เช่น โมดอล คำแนะนำเครื่องมือ ฯลฯ) อย่างไรก็ตาม หากคุณเพียงแค่ใช้ส่วน CSS ของ Bootstrap คุณไม่จำเป็นต้องมี jQuery

สร้างหน้าเว็บแรกด้วย Bootstrap

1. เพิ่ม HTML5 doctype

Bootstrap ใช้องค์ประกอบ HTML และคุณสมบัติ CSS ที่ต้องใช้ประเภทเอกสาร HTML5

รวมประเภทเอกสาร HTML5 ไว้ที่จุดเริ่มต้นของหน้าเสมอ พร้อมกับแอตทริบิวต์ lang และชุดอักขระที่ถูกต้อง:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 เป็นมือถืออันดับแรก

Bootstrap 3 ได้รับการออกแบบให้ตอบสนองต่ออุปกรณ์มือถือ สไตล์เน้นอุปกรณ์พกพาเป็นส่วนหนึ่งของเฟรมเวิร์กหลัก

เพื่อให้แน่ใจว่ามีการเรนเดอร์ที่เหมาะสมและการซูมแบบสัมผัส ให้เพิ่ม<meta>แท็กต่อไปนี้ภายใน <head>องค์ประกอบ:

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

ส่วนwidth=device-widthกำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)

ส่วนนี้initial-scale=1กำหนดระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บเป็นครั้งแรก

3. ตู้คอนเทนเนอร์

Bootstrap ยังต้องการองค์ประกอบที่มีเพื่อห่อเนื้อหาของไซต์

มีคอนเทนเนอร์สองคลาสให้เลือก:

  1. คลาส.containerจัดเตรียมคอนเทนเนอร์ความกว้างคงที่ที่ ตอบสนอง
  2. คลาส.container-fluidจัดเตรียมคอนเทนเนอร์แบบเต็มความกว้างครอบคลุมความกว้างทั้งหมดของ viewport
.คอนเทนเนอร์
.container-ของเหลว

สองหน้า Bootstrap พื้นฐาน

ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับเพจ Bootstrap พื้นฐาน (พร้อมคอนเทนเนอร์ความกว้างคงที่ที่ตอบสนอง):

ตัวอย่าง

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับเพจ Bootstrap พื้นฐาน (พร้อมคอนเทนเนอร์แบบเต็มความกว้าง):

ตัวอย่าง

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ ก่อนหน้า ถัดไป ❯