Twitter Bootstrap คืออะไร

หลายๆ คน คงเคยได้ยินมาว่า Bootstrap ช่วยให้เราเขียนเว็บได้ไวขึ้นใช่มั้ยครับ บางคนอาจจะเคยลองใช้มาบ้างแล้ว แต่ถ้าใครยังไม่เคย และอยากลองใช้ดูบ้าง วันนี้เราจะมาพูดถึงเจ้า front-end framework ตัวนี้กันครับ ทำไมทั่วโลกเค้าถึงนิยมใช้ มันมีข้อดี ข้อเสียอะไรบ้าง เรามาทำความรู้จักไปพร้อมๆ กันเลยครับ

รู้จักกับ Front-end Framework

ก่อนอื่นต้องเข้าใจก่อนครับ ว่า Bootstrap นี้มันคือ Front-end Framework ตัวหนึ่ง คำว่า front-end หมายถึง ส่วนที่แสดงผลให้ Users ทั่วไปเห็น พูดง่ายๆ ก็คือหน้าเว็บไซต์ของเรานั่นเอง ส่วนคำว่า framework นั้นจะหมายถึง สิ่งที่เข้ามาช่วยกำหนดกรอบของการทำงานให้เป็นไปในทางเดียวกันครับ ในสมัยก่อน เรายังไม่มี framework ปัญหาที่เราพบเป็นประจำในการทำงานร่วมกันก็คือ ต่างคนต่างทำ คนหนึ่งเขียนแบบหนึ่ง ส่วนอีกคนก็เขียนอีกแบบหนึ่ง พอใครจะมาแก้งานต่อ หรือพัฒนาต่อ ก็จะไม่เข้าใจกัน เพราะไม่ได้มีการกำหนดข้อตกลงกันไว้ล่วงหน้า ทำให้เสียเวลาโดยใช่เหตุ framework จะเข้ามาแก้ปัญหาตรงนี้ครับ โดยมันจะเป็นตัวกำหนดให้สมาชิกในทีมเข้าใจตรงกัน ปฏิบัติไปในแนวทางเดียวกัน สมมติ ว่าโจทย์ของเราคือการสร้างกล่องสี่เหลี่ยมสีน้ำเงินขึ้นมาสักกล่องหนึ่ง ถ้าเราใช้ framework แล้วล่ะก็ พนักงานแต่ละคนจะใช้วิธีเดียวกันในการสร้างกล่องนี้ขึ้นมา แม้ว่าพวกเค้าจะไม่ได้คุยกันเลยก็ตาม และพนักงานคนอื่นๆ ที่ไม่เคยทราบโจทย์มาก่อน ก็จะสามารถรู้ได้ทันทีว่าโค้ดที่พวกเค้าเขียนขึ้นมามันคือการสร้างกล่องสีน้ำเงิน

Bootstrap คืออะไร?

อย่างที่บอกไปนะครับว่า Bootstrap มันก็คือ Front-end Framework ตัวหนึ่ง ที่จะช่วยให้การพัฒนาเว็บไซต์ของเราเร็วขึ้น ง่ายขึ้น และเป็นระบบมากขึ้น ซึ่งคำว่า Bootstrap นี้ในภาษาอังกฤษมันมักจะหมายถึง “สิ่งที่ช่วยทำให้ง่ายขึ้น” หรือ “สิ่งที่ทำได้ด้วยตัวของมันเอง” ซึ่งในที่นี้น่าจะหมายความว่า ถ้าเราใช้ Bootstrap แล้ว เราก็ไม่จำเป็นต้องไปหาอะไรมาเพิ่มอีก

Bootstrap ให้อะไรมาบ้าง?

ให้เราเข้าไป Download Bootstrap มาก่อนครับ สำหรับสิ่งที่ Bootstrap 2.3.2 ให้มา มี 4 อย่าง ดังนี้

• Scaffoldinggrid system จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid
• Base CSSstyle sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images
• Componentsstyle sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination
• JavaScriptjQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip

ในการใช้ Bootstrap เราจะต้องสร้าง layouts โดยใช้ grid system ของ bootstrap ขึ้นมาก่อน เราอยากได้กี่คอลัมน์ แต่ละคอลัมน์มีความกว้างแค่ไหน ข้างในคอลัมน์มีกล่องอะไรบ้าง ให้เราสร้างขึ้นมาครับ เมื่อเราได้โครงของหน้าเว็บมาแล้ว ทีนี้ก็เหลือแค่หยิบของที่ Bootstrap เตรียมไว้มาใส่ตามกล่องที่เราได้สร้างไว้ก่อนหน้านี้เท่านั้นเอง ฟังดูไม่ยากเลยใช่มั้ยล่ะครับ

สร้าง layouts ขึ้นมาก่อน ด้วย grid system แบบ 12 คอลัมน์

style sheets สำหรับ table ที่ bootstrap เตรียมมาให้

style sheets สำหรับ from ที่ bootstrap เตรียมมาให้

style sheets สำหรับ navigation ที่ bootstrap เตรียมมาให้

jQuery plugin สำหรับ modal ที่ bootstrap เตรียมมาให้

แล้วอย่างนี้ เว็บที่ใช้ Bootstrap ก็หน้าตาเหมือนกันหมดน่ะสิ?

ด้วยเหตุผลที่ Bootstrap เตรียมอะไรมาให้เราเยอะมาก เรียกได้ว่าเราแทบจะไม่ต้องไปหาอะไรมาลงเพิ่มเติมแล้ว ทำให้หลายๆ คนนำ Bootstrap ไปใช้โดยแทบจะไม่ได้เขียนโค้ดขึ้นมาเองเลย หลายๆ เว็บไซต์ หากเราใช้ Bootstrap มาพอสมควร เราจะสามารถดูออกได้ทันทีเลยว่าเค้าใช้ Bootstrap เขียนแน่ๆ ด้วยเหตุนี้เอง จึงมีบางคนค่อนข้างจะต่อต้านการใช้ Bootstrap เนื่องจากมันจะทำให้เว็บไซต์หน้าตาออกมาเหมือนๆ กันหมด

อย่าให้ Bootstrap มาปิดกั้นความคิดสร้างสรรค์ของเราครับ เวลาเราใช้ Bootstrap อย่าลืมใส่ความเป็นตัวเองเข้าไปในงานของเราด้วย ให้เราสร้างไฟล์ “theme.css” แล้วเพิ่มเข้าไปต่อท้าย style sheets ของ Bootstrap เวลาเราต้องการจะปรับแต่งการแสดงผลของ Bootstrap ให้เราเขียนไว้ในนี้ครับ ไฟล์นี้เอง ที่จะช่วยให้เว็บของเรา มีหน้าตาเป็นเอกลักษณ์ไม่ซ้ำใคร ผมเชื่อว่าหากเราใช้ Bootstrap ให้ถูกทางแล้วล่ะก็ สิ่งที่เราได้ออกแบบไว้จะยังคงถูกถ่ายทอดออกมาได้อย่างครบถ้วน และยังใช้เวลาน้อยลงอีกด้วย เพื่อนๆ ลองนำไปประยุกต์ใช้ดูนะครับ