BLOGINNOVATION

Bootstrap คืออะไร

Bootstrap ช่วยให้เราสามารถเขียนเว็บได้ไวขึ้นจริงหรือ? และทำไมทั่วโลกเค้าถึงนิยมใช้ มันมีข้อดี ข้อเสียอะไรบ้าง เรามาหาคำตอบกันได้ที่นี่..

bootstrap

 

Bootstrap คืออะไร?

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

 

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

สิ่งที่ Bootstrap ให้มา มี 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

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

เตรียมพร้อมก่อนใช้ Bootstrap

ให้เราไป Download Bootstrap มาติดตั้งก่อนครับ เมื่อเราแตกไฟล์ออกมา เราจะได้ 3 folders ดังนี้ครับ

  • cssเก็บ style sheets ของ Bootstrap
  • imgเก็บ sprite image สำหรับ icons ต่างๆ
  • jsเก็บ jQuery plugins ต่างๆ

จากนั้นให้เราสร้างไฟล์ index.html ขึ้นมาครับ แล้วใส่โค้ด html ตามนี้

bootstrap-code1
ให้เราสร้างไฟล์ index.html ขึ้นมาครับ แล้วใส่โค้ด html ตามนี้
bootstrap-code2
เมื่อได้ไฟล์ index.html มาแล้ว ให้เราเพิ่ม style sheets ของ Bootstrap เข้าไปที่ < head> ครับ
bootstrap-code3
ถ้าเราต้องการจะทำ responsive web ให้เราเพิ่ม style sheets ของ Bootstrap สำหรับ responsive เข้าไปอีกตัว แล้วกำหนดค่าของ viewport ตามโค้ดด้านล่างนี้ครับ
bootstrap-code4
เพื่อให้เราสามารถใช้งาน javascript ที่ Bootstrap เตรียมมาได้ ให้เรา Download jQuery มาใส่ไว้ใน folder js ของเรา แล้วใส่โค้ดด้านล่างนี้ก่อนปิด ครับ

 Download jQuery 

 เพียงเท่านี้ เราก็พร้อมที่จะใช้งาน Bootstrap แล้วล่ะครับ

Workshop – Scaffolding ของ Bootstrap

เริ่มด้วยการสร้าง Container

ก่อนอื่นให้เราสร้าง container ขึ้นมาก่อนครับ เจ้า container นี้ จะมีหน้าที่ “wrap(ห่อ)” เนื้อหาของเรา การสร้าง container ของ Bootstrap ให้เราใส่โค้ดแบบนี้ครับ

bootstrap-code5-container
โค้ดสำหรับสร้าง container

bootstrap-code5-container-view

เราก็จะได้ container ที่แสดงอยู่กึ่งกลางหน้าจอมาครับ ซึ่ง container  นี้จะมีความกว้างอยู่ที่ 940px เมื่อได้ container มาแล้ว ทีนี้เราก็มาเริ่มสร้างกล่องเนื้อหาต่างๆ กันต่อเลยครับ

Grid System ของ Bootstrap

ปกติแล้ว grid system ที่ Bootstrap ให้มาจะเป็นแบบ 12 คอลัมน์ ครับ ซึ่งจะใช้ร่วมกับ container ที่เราเพิ่งสร้างขึ้นมานั่นเอง โดยแต่ละคอลัมน์จะมีความกว้างเท่ากันคือ 60px และจะอยู่ห่างกัน 20px จะได้ว่า (60*12) + (20*11) = 940 หรือความกว้างของ container เรานั่นเองครับ

การจะสร้าง layouts ด้วย Bootstrap ให้เราสร้าง html element ที่มี class “row” ขึ้นมาก่อนครับ ทีนี้เราจะสามารถสร้างแต่ละคอลัมน์ขึ้นมาได้ด้วยการใส่ html element ที่มี class “span*” เข้าไปข้างใน โดย * ที่อยู่ข้างหลัง span นั้นจะเป็นตัวเลขที่จะระบุว่าเราต้องการให้คอลัมน์นี้ “กาง” แค่ไหน สมมติว่าเราจะสร้าง layouts แบบ 12 คอลัมน์ ให้เราใส่โค้ดด้านล่างนี้เข้าไปที่ container ของเราครับ

12 คอลัมน์

 bootstrap-code6-12columns

จากโค้ดด้านบน เราใส่ html elements ที่มี class ชื่อ “span1″ รวมทั้งหมด 12 elements ด้วยกัน เมื่อพรีวิวดู เราจะพบว่า container ของเราถูกแบ่งออกเป็นคอลัมน์ต่างๆ ที่มีความกว้างเท่ากันทั้งหมดจำนวน 12 คอลัมน์ ด้วยกัน

2 คอลัมน์

หากเราต้องการแค่ 2 คอลัมน์ โดยเราอยากให้คอลัมน์ทางซ้ายใหญ่กว่าทางขวา เราก็เขียนแบบนี้ได้ครับ

bootstrap-code7-2columns

จะเห็นว่าความกว้างของทั้ง 2 คอลัมน์ นี้จะเป็น 8 + 4 = 12 พอดี สาเหตุที่เราต้องกำหนดความกว้างให้รวมกันเท่ากับ 12 ก็เพราะว่า grid system ของ bootstrap นั้นเป็นแบบ 12 คอลัมน์ ครับ นั่นหมายความว่าทั้ง 2 คอลัมน์นี้จะกางเต็ม container พอดี

3 คอลัมน์

ในทำนองเดียวกัน หากเราต้องการ 3 คอลัมน์ ก็ให้เรากำหนดความกว้างรวมให้ได้เท่ากับ 12 เหมือนเดิม

bootstrap-code8-3columns

Offsetting columns

ในบางครั้ง เราอาจต้องการเพิ่มระยะห่างระหว่างคอลัมน์ เราสามารถทำได้ด้วยการเพิ่ม class ที่ชื่อ “offset*” เข้าไป โดย * นั้นหมายถึงจำนวนของคอลัมน์ที่จะกลายมาเป็นระยะห่าง ลองดูตัวอย่างนี้ครับ

bootstrap-code9-offsettingcolumns

เมื่อพรีวิวดู เราจะพบว่าทั้ง 2 คอลัมน์นี้ยังคงกางเต็ม container อยู่ เนื่องจาก 2 + 4 + 6 = 12 ครับ

Nesting columns

นอกจากนั้น เรายังสามารถสร้างคอลัมน์ซ้อนภายในคอลัมน์ได้อีกด้วยนะครับ ลองดูตัวอย่างนี้

bootstrap-code10-nestingcolumns

จะเห็นว่าเราได้สร้างคอลัมน์ “span2″ กับ “span6″ ซ้อนข้างในคอลัมน์ “span8″ ซึ่งคอลัมน์ที่อยู่ภายในทั้ง 2 คอลัมน์ จะกางเต็มคอลัมน์ข้างนอกพอดีเนื่องจาก 2 + 6 = 8

หากยังมองไม่เห็นภาพเกี่ยวกับการใช้งาน grid system ของ Bootstrap ลองดูภาพนี้ครับ

bootstrap_grid_system

 

Fluid Grid System

Bootstrap ได้เตรียม fluid grid system มาให้เราด้วยครับ วิธีใช้ก็ง่ายๆ คือ ก่อนอื่นเราต้องเปลี่ยน container มาเป็นแบบ fluid ก่อน ด้วยการเปลี่ยน class จาก “container” มาเป็น “container-fluid” แบบนี้ครับ

 

 

 

THANK YOU

ข้อมูลอ้างอิงและภาพประกอบ

SiamHTML

This site uses Akismet to reduce spam. Learn how your comment data is processed.

แชร์เลย