bootstrap บูทแสป คืออะไร
bootstrap (บูทแสป) คือกลุ่มโค้ดที่รวมชุดคำสั่งของ HTML (เอชที่เอ็มแอล), CSS (ซีเอสเอส) และ Javascript (จาวาสคิป) ไว้ด้วยกัน ที่พัฒนาขึ้นมาเพื่อกำหนดกรอบหรือรูปแบบของการพัฒนาเว็บไซต์ ซึ่งจะทำให้การพัฒนาเว็บไซต์ทำได้มากขึ้นและใช้งานได้ง่ายและสะดวกรวดเร็วยิ่งขึ้น รวมถึงการรองรับ Smart Device (สมาทดีไว) หรือ Mobile Frist (โมบาย เฟิร์ส )
bootstrap (บูทแสป) เป็น Framework (เฟรมเวิร์ค) ตัวหนึ่ง ใช้สำหรับพัฒนาเว็บไซต์ส่วนของการแสดงผล ที่ถูกพันาขึ้นโดย Mark Otto (มาร์ค อ็อตโต) และ Jacob Thorn (จาค็อบ ธอร์น) ทีมพัฒนาของ Twitter (ทวิตเตอร์) และ Bootstrap Framework (บูทแสป เฟรมเวิร์ค) นี้ยังมีการเปิดให้ใช้งานแบบ Open Source (โอเพ้นซอส) ที่นักพัฒนาสามารถนำไปใช้งานพัฒนาเว็บไซต์ได้ฟรี http://getbootstrap.com/ สามารถโหลดมาใช้งานได้
การติดตั้งและการใช้งาน bootstrap 5 (แบบ CDN)
- แบบ CDN (การใช้งานแบบเชื่อมต่อ Internet)
- แบบ Internal (การใช้งานแบบไม่เชื่อมต่อ Internet)
เข้าเว็บไซต์ www.getbootstrap.com
ให้ Import ไฟล์ CSS และ JS เข้ามาทำงาน ทำการ copy มาไว้ในส่วนของ head
ทำการทดสอบการทำงานของ boostrap โดยพิมพ์ code
<p class="text-warning bg-success">Hello World!</p>
ถ้าแสดงผลดังภาพ แสดงว่า boostrap ได้ติดตั้งพร้อมใช้งานแล้ว
การใช้ Google Font ให้กับ boostrap 5
นักเรียนสามารถเข้าเลือกชนิดของ Font ได้ที่ https://fonts.google.com หรือ Google font Thai ที่ https://fonts.google.com/?subset=thai
โดยใช Link CSS และ Style ต่อไปนี้ไปวางไว้ในส่วนของ Head (ในตัวอย่างใช้รูปแบบ Kanit)
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<style>
body {
font-family: 'Kanit';
}
</style>
<html lang="en">
<head>
<title>Google Font Thai</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<style>
body {
font-family: 'Kanit';
}
</style>
</head>
<body>
<div class="container mt-3">
<h1>สวัสดี</h1>
<p>Google Font Thai รูปแบบ font ที่ใช้คือ Kanit</p>
</div>
</body>
</html>
|
ผลลัพธ์
