สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา Web Application ” โดยจะมาทำความรู้จักกับ Bootstrap กันให้มากขึ้น ซึ่ง Bootstrap จัดเป็น Front-end Framework ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน อาจจะเป็นเพราะว่า Bootstrap มีแนวทางในการพัฒนาในแบบ Responsive Web Design ก็เป็นได้ (บทความ แนวทางการพัฒนาเว็บแบบ Responsive Web Design)
แนวคิดของ Bootstrap จะให้ความสำคัญกับการออกแบบการแสดงผลในอุปกรณ์ขนาดเล็กก่อน (Mobile First Approach) กล่าวคือ การสร้างเว็บไซต์ 1 หน้าสำหรับ Content ชุดเดียวกัน เราต้องออกแบบการแสดงผลให้ครอบคลุมหน้าจออย่างน้อย 3 ขนาดทั้ง Mobile device, Table และ Notebook จริงๆ แล้วการจะออกแบบโดยเริ่มต้นที่หน้าจอขนาดใหญ่ หรือเล็กก่อนก็สามารถทำได้ทั้งนั้น แต่การเริ่มต้นจากหน้าจอขนาดเล็กจะทำให้เราได้โฟกัสใน Content ที่สำคัญๆ ก่อน เพื่อให้ User ได้รับข้อมูลหลักที่เว็บไซต์ต้องการนำเสนอ และค่อยๆ ออกแบบโดยเพิ่มรายละเอียดที่สำคัญรองลงมาในหน้าจอขนาดใหญ่ขึ้นตามลำดับ
ใน Bootstrap เวอชั่น 3 นั้นได้เพิ่มคุณสมบัติการเป็น Responsive มาในตัวแล้ว การนำมาใช้งานจึงไม่ต้อง Include ไฟล์คุณสมบัตินี้เพิ่มเหมือนในเวอร์ชั่นก่อนหน้า
การดาวน์โหลด Bootstrap
สามารถดาวโหลดได้ที่ www.getbootstrap.com
โครงสร้างไดเร็กทอรี่
หลังจากดาวน์โหลดไฟล์มาแล้ว ให้ทำการแตกไฟล์ .zip จะพบว่ามีโครงสร้างไฟล์ดังนี้
css
เป็นโฟลเดอร์สำหรับเก็บไฟล์ CSS ที่ใช้กำหนด Layout และ Theme ของหน้าเว็บ สังเกตว่าในโฟลเดอร์นี้จะมีไฟล์ .min ซึ่งเป็นไฟล์ CSS ที่ผ่านการคอมไพล์แล้วทำให้มีขนาดเล็กลง
js
เป็นโฟลเดอร์สำหรับเก็บไฟล์ JavaScript เพิ่มลูกเล่นให้กับเว็บ
fonts
เป็นโฟลเดอร์สำหรับเก็บฟอนต์ต่างๆ ที่ใช้ในการแสดงผลข้อความบนหน้าเว็บ
สิ่งที่ Bootstrap เตรียมไว้ให้
Grid system
ระบบ Grid จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid
Base CSS
style sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images
Components
style sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination
JavaScript
jQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip
เทมเพลตพื้นฐาน
Bootstrap ใช้โครงสร้างเอกสารเป็น HTML5 ซึ่งมีเทมเพลตพื้นฐานดังรูป
ตัวอย่างการนำไปใช้งานที่เห็นได้ชัด และหลายๆ ท่านในชุมชน PSU SysAdmin เองคงจะคุ้นเคยกันดี เช่น
– Joomla เวอร์ชั่น 3 ที่นำ Bootstrap ไปใช้ เพื่อให้เว็บไซต์มีคุณสมบัติของ Responsive Design ตอบสนองการแสดงผลบนอุปกรณ์ที่มีขนาดต่างๆ กันได้เป็นอย่างดี
– WordPress ก็สามารถสร้าง Theme ด้วย Bootstrap ได้เหมือนกัน (http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial)
– นอกจากนี้ท่านยังสามารถดูตัวอย่างเว็บไซต์อื่นๆ ที่ทางผู้พัฒนา Bootstrap ได้รวบรวมไว้ได้ที่ http://expo.getbootstrap.com/