บทความ
Bootstrap CSS framework คืออะไร? ใช้งานยังไง?
Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงามและได้รับความนิยมได้อย่างรวดเร็วและง่ายดาย โดย Bootstrap มีคลาส CSS และ JavaScript ที่ถูกออกแบบมาเพื่อช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่ตอบสนองได้ (responsive) และมีความสามารถในการปรับแต่งรูปแบบต่าง ๆ ได้ง่ายดาย
การใช้ Bootstrap นั้นมีขั้นตอนง่าย ๆ ดังนี้
-
ดาวน์โหลด Bootstrap จากเว็บไซต์ https://getbootstrap.com/
-
เพิ่ม CSS และ JavaScript ของ Bootstrap ลงในหน้า HTML โดยใช้ tag
<link>และ<script>ตามลำดับดังนี้
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Page</title>
<!-- ส่วนของ CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- ส่วนของ JavaScript ที่ใช้กับ jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- ส่วนของ JavaScript ที่ใช้กับ Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- ส่วนของ JavaScript ที่ใช้กับ Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- ตรงนี้คือส่วนของเนื้อหาบนหน้าเว็บไซต์ -->
</body>
</html>
-
เริ่มใช้งาน Bootstrap โดยใช้คลาสที่เตรียมไว้ให้ ดังนี้
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My Bootstrap Page</h1>
<p>This is some text.</p>
<button type="button" class="btn btn-primary">Click me</button>
</div>
</body>
</html>
ในตัวอย่างนี้ เราใช้คลาส .container เพื่อกำหนดขนาดของเนื้อหาบนหน้าเว็บไซต์ และใช้คลาส .btn และ .btn-primary เพื่อกำหนดรูปแบบของปุ่ม
Bootstrap ยังมีคลาสอื่น ๆ ที่ใช้งานได้ง่าย ๆ เช่น .row สำหรับกำหนดแถว และ .col-* สำหรับกำหนดคอลัมน์ โดย * จะเป็นตัวเลขที่ระบุขนาดของคอลัมน์
สรุปคือ Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงาม
หนังสือพัฒนาตัวเอง
จุดเริ่มต้นที่ชัดเจน
เพิ่มลงตะกร้า
