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

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

Bootstrap คืออะไร?
จากที่บอกไปนะครับว่า Bootstrap  มันก็คือ Front-end Framework ตัวหนึ่ง ที่จะช่วยให้การพัฒนาเว็บไซต์ของเรารวดเร็วขึ้น ง่ายขึ้น(ตรงนี้ผมไม่มั่นใจนะครับสำหรับบางคนอาจจะไม่ชอบก็ได้ใครจะรู้เนาะ!!)
และเป็นระบบมากขึ้น ซึ่งคำว่า Bootstrap นี้ในภาษาอังกฤษมันมักจะหมายถึง "สิ่งที่ช่วยทำให้ง่ายขึ้น" หรือ "สิ่งที่ทำได้ด้วยตัวของมันเอง" และแถมด้วย "การเปิดเครื่องด้วยการบรรจุซอฟต์แวร์ระบบ (systems software)" ซึ่งในที่นี้น่าจะหมายความว่า ถ้าเราใช้ Bootstrap แล้ว เราก็ไม่จำเป็นต้องไปหาอะไรมาเพิ่มอีก(หรือมาเพิ่มน้อยกว่าเดิมนั่นเองครับคือไม่มีอะไรสมบูรณ์หรอกใช่ไหม55+ )

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

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