ทำให้ในปัจจุบันสารสนเทศด้านเว็บไซด์ (Web Site) พัฒนาก้าวล้ำไปมากเพื่อรองรับการใช้งานของผู้คนในยุคแห่งเทคโนโลยี
โดยที่อุปกรณ์ที่รองรับเว็บไซด์นั้นมีมากขึ้น หนึ่งในนั้นคือ Smart Phone หรือ Tablet ที่รองรับการใช้งานเว็บไซต์
จึงมีเครื่องมือที่ใช้ในการสร้างเว็บไซต์มากขึ้นเช่นกัน ในบทความนี้จึงขอแนะนำให้รู้จักกับ "ฺฺBoot Strap"
ก่อนอื่นเรามาทำความรู้จักกับ 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
1.ดาวน์โหลด ไฟล์ Bootstrap จาก https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
2.เมื่อโหลดมาแล้วจะได้สามโฟลเดอร์ คือ css ที่เก็บ style sheets ของ Bootstrap , img ที่เก็บ sprite image สำหรับ icons ต่างๆ และ jq ที่เก็บ jQuery plugins ต่างๆ3. ให้เพิ่ม style sheets ของ Bootstrap เข้าไปที่ <head> ครับ
<link href="css/bootstrap.min.css" rel="stylesheet">
4.ถ้าต้องการจะทำ responsive web ให้เพิ่ม style sheets ของ Bootstrap สำหรับ responsive เข้าไปอีกตัว แล้วกำหนดค่าของ viewport ตามโค้ดด้านล่างนี้ครับ
5.เพื่อให้สามารถใช้งาน javascript ที่ Bootstrap เตรียมมาได้ ให้เรา Download jQuery มาใส่ไว้ใน folder js ของเรา แล้วใส่โค้ดด้านล่างนี้ก่อนปิด <body> ครับ
เพียงเท่านี้ก็สามารถสร้างเว็บไซ์ดจาก Bootstrap ได้แล้วครับ