เกี่ยวกับ Bootstrap
Bootstrap เป็น Front-end Framework ที่ช่วยให้เราสามารถสร้างเว็บแอพลิเคชันได้อย่างรวดเร็ว และ สวยงาม ตัว Bootstrap เองมีทั้ง CSS Component และ JavaScript Plugin ให้เราได้เรียกใช้งานได้อย่างหลากหลาย ตัว Bootstrap ถูกออกแบบมาให้รองรับการทำงานแบบ Responsive Web ซึ่งทำให้เราเขียนเว็บแค่ครั้งเดียวสามารถนำไปรันผ่านเบราเซอร์ได้ทั้งบน มือถือ แท็บเล็ต และพีซีทั่วไป โดยที่ไม่ต้องเขียนใหม่
Bootstrap ถูกพัฒนาขึ้นด้วยกลุ่มนักพัฒนาจากทั่วทุกหนแห่งในโลก มีการอัปเดทอยู่ตลอดเวลา เพื่อรองรับการทำงานได้อย่างทันสมัย และ การแก้ไขปัญหาต่างๆ หรือ Bug ก็ทำได้เร็ว ดังนั้น ผู้เขียนเอง จึงได้เลือกที่จะใช้ Bootstrap ในการนำมาช่วยพัฒนาโปรเจค ทั้งเว็บแอพลิเคชัน App บนมือถือ
Bootstrap เป็นเครื่องมือที่ช่วยให้เราสามารถพัฒนาเว็บแอพลิเคชันได้อย่างรวดเร็วและดูสวยงาม UI (User Interface) นั้นถูกออกแบบมาเพื่อให้ทันสมัยตลอดเวลา สามารถนำไปใช้ได้กับเว็บที่ทั่วไป และ เว็บสำหรับมือถือ (โดยใช้ Responsive utilities) ในการเรียนรู้ Bootstrap นั้นง่ายมาก เราไม่จำเป็นต้องเก่ง CSS ก็สามารถสร้างเว็บที่สวยงามได้ ไม่ว่าจะเป็นปุ่ม (Buttons) สีต่างๆ ฟอร์มคอนโทรลต่างๆ, ตาราง, ไอคอน, เมนูบาร์, Dropdown, เมนู, หน้าต่าง Popup (Modal) และ อีกหลายๆ รายการที่พร้อมให้เราเลือกใช้งาน ซึ่งจะได้อธิบายในหัวข้อต่อๆ ไป
ขั้นตอนการติดตั้ง Bootstrap นั้นง่ายมาก ซึ่งมีรายละเอียดดังต่อไปนี้
ขั้นตอนที่ 1.
- ไปที่เว็บไซด์ http://getbootstrap.com/ เพื่อดาวน์โหลด Bootstrap มาติดตั้ง แล้วเลือก "Download Bootstrap"
ขั้นตอนที่ 2.
- เมื่อเราดาวน์โหลด Bootstrap มาเสร็จเรียบร้อยแล้ว ขั้นตอนต่อมาให้แตก zip ไฟล์ เมื่อเราแตกซิปไฟล์ เราจะได้โฟลเดอร์ "bootstrap-3.2.0-dist" ซึ่งภายในจะประกอบด้วย 3 โฟลเดอร์ย่อย คือ โฟลเดอร์ "css", โฟลเดอร์ "fonts" และ โฟลเดอร์ "js"
ขั้นตอนที่ 3.
- ให้เรา copy 3 โฟลเดอร์ ข้างต้นไปยังโฟลเดอร์ของโปรเจคของเรา และถัดมาให้เราเปิด text editor เพื่อสร้างไฟล์ index.html ขึ้นมา และให้เราพิมพ์โค้ดลงไปดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Boostrap Application</title>
</head>
<body>
</body>
</html>
ขั้นตอนที่ 4.
- ไฟล์ index.html จะต้อง include ไฟล์ "bootstrap.css" ซึ่งอยู่ในโฟลเดอร์ css โดยใส่ภายในแท็ก <head></head> แต่อยู่ก่อนแท็ก <tittle>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
แต่ถ้าเราเข้าไปในโฟลเดอร์ css เราจะเห็นไฟล์ที่ชื่อว่า "bootstrap.min.css" หลายคนอาจสงสัยว่าแล้วมันต่างจากไฟล์ "bootstrap.css" ยังไง ?? คำตอบก็คือ "bootstrap.min.css" จะไม่มีช่องว่างและการขึ้นบรรทัดใหม่ หรือการคอมเมนท์ในไฟล์ css เพื่อทำให้ "bootstrap.min.css" นั้นมีน้ำหนักที่เบากว่าไฟล์ "bootstrap.css"
ขั้นตอนที่ 5.
- ดาวน์โหลด Jquery ซึ่งดาวน์โหลดไปเก็บไว้ในโฟลดเดอร์ "js"
ขั้นตอนที่ 6.
- ที่ไฟล์ index.html เราจะต้อง include ไฟล์ Jquery.js และ Boostrap.js โดยต้องอยู่ภายในแท็ก <body></body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
เหตุผลที่เราจะต้อง include ไฟล์ Jquery.js และ Boostrap.js ไว้ในแท็ก <body></body> เนื่องจากเพื่อลดระยะเวลาการโหลดหน้าเพจของเรา
ขั้นตอนที่ 7.
- ต้องกำหนดภาษาในแท็ก <meta> เพื่อให้เว็บเพจของเราสามารถแสดงผลได้อย่างถูกต้อง
<meta charset="UTF-8" />
นอกจากนี้เพื่อป้องกัน IE แสดงผลแบบ compatible mode เราจะต้องกำหนดแท็ก <meta> เพิ่มเติม เพื่อเป็นการบอก browser IE ให้ใช้ engine เวอร์ชั่นล่าสุดในการแสดงผลเว็บเพจของเรา
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
ถัดมาเพื่อให้เว็บเพจของเราสามารถแสดงผลได้อย่างเหมาะสมไม่ว่าจะอยู่บน แท็บแล็ต มือถือ หรือเครื่องคอมพิวเตอร์ ดังนั้นเราจึงต้องใส่แท็ก <meta> เพิ่มดังนี้
<meta name="viewport" content="width=device-width, initial-scale=1" />
ขั้นตอนที่ 8.
- เป็นขั้นตอนสุดท้าย เนื่องจาก bootstrap มีการเรียกใช้แท็ก HTML 5 และ CSS3 เป็นจำนวนมาก ดังนั้นเพื่อให้ IE8 สามารถทำงานได้อย่างถูกต้องเราจึงมีการแทรกไฟล์ JavaScript ดังต่อไปนี้ลงไป
<!--[if lt IE 9] >
<script scr="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script scr="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif] -->
ดังนั้นโค้ดในไฟล์ index.html ของเราควรมีหน้าตาคล้ายกับโค้ดตัวอย่างด้านล่างนะครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My First Boostrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9] >
<script scr="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script scr="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif] -->
</head>
<body>
<h1> Hello API In Depth</h1>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
และเพื่อเป็นการทดสอบว่าเราสามารถ include ไฟล์ JavaScript และ ไฟล์ CSS ได้อย่างถูกต้อง ให้เราเปิด บราวเซอร์ Google Chrome ขึ้นมา แล้วลองเรียกไฟล์ index.html ที่เราสร้างขึ้น หลังจากนั้นให้กด "F12" เพื่อเปิด Inspect Element ขึ้นมา ไปที่แท็บ "Network" ไฟล์ต่างๆที่เรา include นั้น status ต้องเป็น "200" ทั้งหมด
รับทําเว็บไซต์ 
แลกลิงค์ 
