บทที่ 1 พื้นฐาน Bootstrap
เกี่ยวกับ Bootstrap
Bootstrap เป็นเครื่องมือที่ช่วยให้เราสามารถพัฒนาเว็บแอพลิเคชันได้อย่างรวดเร็วและดูสวยงาม UI (User Interface) นั้นถูกออกแบบมาเพื่อให้ทันสมัยตลอดเวลา สามารถนำไปใช้ได้กับเว็บที่ทั่วไป และ เว็บสำหรับมือถือ (โดยใช้ Responsive utilities) ในการเรียนรู้ Bootstrap นั้นง่ายมาก เราไม่จำเป็นต้องเก่ง CSS ก็สามารถสร้างเว็บที่สวยงามได้ ไม่ว่าจะเป็นปุ่ม (Buttons) สีต่างๆ ฟอร์มคอนโทรลต่างๆ, ตาราง, ไอคอน, เมนูบาร์, Dropdown, เมนู, หน้าต่าง Popup (Modal) และ อีกหลายๆ รายการที่พร้อมให้เราเลือกใช้งาน ซึ่งจะได้อธิบายในหัวข้อต่อๆ ไป
ดาวน์โหลดและติดตั้ง
การดาวน์โหลด Bootstrap มาใช้งานนั้นเราสามารถดาวน์โหลดได้จากเว็บไซต์ www.getbootstrap.com หรือที่ดาวน์โหลด Source code ได้ที่ https://github.com/twbs/bootstrap ซึ่งในไฟล์ที่ดาวน์โหลดมาจะมีคู่มือ, ไฟล์ Bootstrap และ ไฟล์ตัวอย่าง หรือใช้ Bower ซึ่งเป็นโปรแกรมช่วยติดตั้งแพกเก็จต่างๆ ที่ต้องการ ไม่ว่าจะเป็น CSS หรือ JavaScript ซึ่งสามารถดาวน์โหลดได้จาก http://bower.io จากนั้นใช้คำสั่ง ดังนี้
1 bower install bootstrap
และสามารถเรียกใช้งานผ่าน CDN (Content Delivery Network) ดังนี้
1 <link rel="stylesheet"
2 href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/
3 css/bootstrap.min.css">
4 <script src="//netdna.bootstrapcdn.com/
5 bootstrap/3.0.0/js/bootstrap.min.js">
6 </script>
โครงสร้างไฟล์
หลังจากที่เราทำการดาวน์โหลดไฟล์มาแล้ว และทำการแตก zip ไฟล์ออกมาจะได้โครงสร้างไฟล์ ดังนี้
รูปที่ 01-01 โครงสร้างไฟล์ของ Bootstrap
ไฟล์ .min นั้นเป็นไฟล์ที่มีการคอมไพล์แล้วทำให้มีขนาดเล็กลงเหมาะสำหรับนำมาใช้งานจริง แต่หากเราต้องการทดสอบโปรแกรมในขณะที่กำลังพัฒนาอยู่นั้นแนะนำให้ใช้ไฟล์ที่ไม่มี .min
เทมเพลตพื้นฐาน
เนื่องจาก Bootstrap นั้นใช้โครงสร้างของเอกสารเป็น HTML5 ซึ่งมีรูปแบบเอกสาร ดังนี้
โครงสร้างเทมเพลต
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bootstrap Template</title>
5 <meta name="viewport"
6 content="width=device-width, initial-scale=1.0">
7 <!-- Bootstrap -->
8 <link href="css/bootstrap.min.css"
9 rel="stylesheet" media=“screen">
10 <script
11 src="//code.jquery.com/jquery.js">
12 </script>
13 <script src=“bootstrap.min.js"></script>
14 <!--[if lt IE 9]>
15 <script src="html5shiv.js"></script>
16 <script src="respond.min.js"></script>
17 <![endif]-->
18 </head>
19 <body>
20 <h1>Content</h1>
21 </body>
22 </html>
เนื่องจาก Bootstrap ใช้ jQuery เป็นไลบาลี่หลักในการทำงาน ดังนั้นเราต้องมีการแทรกไฟล์ของ jQuery เข้าไปด้วย โดยแทรกก่อนไฟล์ bootstrap.js หรือ bootstrap.min.js ซึ่ง jQuery นั้นควรเป็นเวอร์ชัน 1.7 ขึ้นไป
เว็บเบราเซอร์ที่สามารถใช้งานได้
Bootstrap นั้นถูกออกแบบมาเพื่อให้สามารถรองรับการทำงานได้ทุกเบราเซอร์ และสามารถรันได้ทุกระบบไม่ว่าจะเป็น Windows, Linux, Mac, iOS, Android เบราเซอร์ที่รองรับการทำงานของ Bootstrap ได้แก่
- Google Chrome (ทั้งบน Windows, Mac, iOS และ Android)
- Safari (บน Mac และ iOS)
- Internet Explorer (บน Windows และ Windows Phone)
- Opera (บน Windows, Mac)
|
สำหรับ Internet Explorer นั้นควรจะเป็นเวอร์ชัน 9 ขึ้นไป |
การคอมไพล์คู่มือ
เมื่อเราทำการดาวน์โหลดไฟล์ Source code ของ Bootstrap จาก GitHub มาแล้ว เราจะพบว่ามีไฟล์คู่มือมาให้ด้วย แต่จะไม่สามารถใช้งานได้ เราจำเป็นต้องทำการคอมไพล์ก่อนโดยใช้โปรแกรม jekyll ซึ่งเป็นโปรแกรมที่พัฒนาโดยภาษา Ruby เราจึงจำเป็นต้องทำการติดตั้งโปรแกรม Ruby ก่อน โดยทำการดาวน์โหลดไฟล์สำหรับติดตั้งจากเว็บไซต์ http://railsinstaller.org (สำหรับ Windows ถ้าเป็น Mac OS จะมี Ruby ติดตั้งมาให้พร้อมแล้ว) ซึ่งโปรแกรมนี้จะติดตั้งไฟล์ที่จำเป็นสำหรับการใช้งาน Ruby ได้อย่างครบถ้วน ไม่ว่าจะเป็น Ruby, Rails และ Git
หลังจากติดตั้งโปรแกรมนี้แล้ว ให้ทำการติดตั้งโปรแกรม jekyll โดยใช้คำสั่ง ดังนี้ (ทำผ่าน Command line)
1 gem install jekyll
จากนั้นดาวน์โหลดไฟล์ของ Bootstrap โดยการ Clone จาก GitHub โดยใช้คำสั่ง ดังนี้
1 git clone https://github.com/twbs/bootstrap.git
Git จะดาวน์โหลดไฟล์ของ Bootstrap ล่าสุดมาให้ จากนั้นเข้าไปที่โฟลเดอร์ bootstrap แล้วเรียกใช้งานโปรแกรม jekyll ดังนี้
1 cd bootstrap
2 jekyll serve
หลังจากนั้นเปิดโปรแกรมเบราเซอร์แล้วพิมพ์ http://localhost:9001 จะแสดงหน้าเพจคู่มือของ Bootstrap