ทำความรู้จักกับ Bootstrap

สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา 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 จะพบว่ามีโครงสร้างไฟล์ดังนี้

file_structure

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 ซึ่งมีเทมเพลตพื้นฐานดังรูป

basic template

ตัวอย่างการนำไปใช้งานที่เห็นได้ชัด และหลายๆ ท่านในชุมชน PSU SysAdmin เองคงจะคุ้นเคยกันดี เช่น

– Joomla เวอร์ชั่น 3 ที่นำ Bootstrap ไปใช้ เพื่อให้เว็บไซต์มีคุณสมบัติของ Responsive Design ตอบสนองการแสดงผลบนอุปกรณ์ที่มีขนาดต่างๆ กันได้เป็นอย่างดี

– WordPress ก็สามารถสร้าง Theme ด้วย Bootstrap ได้เหมือนกัน (http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial)

– นอกจากนี้ท่านยังสามารถดูตัวอย่างเว็บไซต์อื่นๆ ที่ทางผู้พัฒนา Bootstrap ได้รวบรวมไว้ได้ที่ http://expo.getbootstrap.com/

 

 

 

Leave a Reply