Bootstrap คือ เฟรมเวิร์ค Front-end ที่ทำให้นักพัฒนาเว็บเพจสามารถสร้างเว็บเพจได้รวดเร็วและง่ายมากยิ่งขึ้น ซึ่ง Bootstrap นั้นได้สร้าง Plugin สำหรับเร็จรูปให้กับนักพัฒนาได้หลายอย่างเช่น เมนูบาร์ พาเนลในรูปแบบต่างๆ ข้อความเตือนในรูปแบบต่างๆ เป็นต้น ดังนั้นนักพัฒนาจึงไม่จำเป็นที่ต้องมาเสียเวลาเขียนโค้ด HTML เองขึ้นมา นอกจากนี้ Bootstrap ยังรองรับการแสดงผลในอุปกรณ์ที่หลากหลาย เช่น บนมือถือ บนแท็บแล็ต และบนคอมพิวเตอร์ ดังนั้นนักพัฒนาจึงไม่จำเป็นที่ต้องเสียเวลาพัฒนาเว็บหลายเวอร์ชั่น เพื่อให้เว็บของเราสามารถแสดงผลบนอุปกรณ์เหล่านั้น
ขั้นตอนการติดตั้ง Bootstrap เวอร์ชั่น 3 นั้นง่ายมาก ซึ่งมีรายละเอียดดังต่อไปนี้
ขั้นตอนที่ 1. ไปที่เว็บไซด์ http://getbootstrap.com/ เพื่อดาวน์โหลด Bootstrap มาติดตั้ง แล้วเลือก "Download Bootstrap" ดังแสดงในรูปที่ 1 และ 2 ตามลำดับ
รูปที่ 1
รูปที่ 2
ขั้นตอนที่ 2. เมื่อเราดาวน์โหลด Bootstrap มาเสร็จเรียบร้อยแล้ว ขั้นตอนต่อมาให้แตก zip ไฟล์ ซึ่งแสดงดังรูปที่ 3
รูปที่ 3
จากรูปที่ 3 เมื่อเราแตกซิปไฟล์ เราจะได้โฟลเดอร์ "bootstrap-3.2.0-dist" ซึ่งภายในจะประกอบด้วย 3 โฟลเดอร์ย่อย คือ โฟลเดอร์ "css", โฟลเดอร์ "fonts" และ โฟลเดอร์ "js" ดังรูปที่ 4
รูปที่ 4
ขั้นตอนที่ 3. ให้เรา copy 3 โฟลเดอร์ ข้างต้นไปยังโฟลเดอร์ของโปรเจคของเรา และถัดมาให้เราเปิด text editor (ซึ่งของผมใช้โปรแกรมที่ชื่อ Aptana Studio) เพื่อสร้างไฟล์ index.html ขึ้นมา และให้เราพิมพ์โค้ดลงไปดังนี้
<!DOCTYPE html> <html lang="en"> <head> <title>My First Boostrap Application</title> </head> <body> </body> </html>
ซึ่งถ้าเราสร้างไฟล์ index.html ภายในโปรเจคของเราจะประกอบด้วยไฟล์และโฟลเดอร์ ดังรูปที่ 5
รูปที่ 5
ขั้นตอนที่ 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 เวอร์ชั่น 1.x (ในบล๊อกของผมใช้เวอร์ชั่น 1.11.1) ซึ่งดาวน์โหลดไปเก็บไว้ในโฟลดเดอร์ "js" ดังรูปที่ 6
รูปที่ 6
ขั้นตอนที่ 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 v3 มีการเรียกใช้แท็ก 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" ทั้งหมด ดังรูปที่ 7
รูปที่ 7
Reference
- Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.
ขอบคุณค่ะ
ตอบลบขอบคุณคัรบผม
ตอบลบไม่เห็นขึ้น200 ทั้งหมดครับ แต่ใช้ได้
ตอบลบI got this website from my friend who told me about this website and at the moment this time I am browsing this site and reading very informative content at this place.
ตอบลบI know this site provides quality depending articles or reviews and other material, is there any other web site which offers these kinds of information in quality?
ตอบลบ