Tutorial

Twitter Bootstrap Basic - What is Bootstrap? (EP.0)

By Arnon Puitrakul - 15 สิงหาคม 2015

Twitter Bootstrap Basic - What is Bootstrap? (EP.0)

หลังจากที่หายไปจากการเขียน Tutorial มานาน วันนี้กลับมาแล้ว กับหัวข้อที่หลายๆ คน Request เข้ามา ว่าอยากจะสร้างเว็บที่เป็น Responsive ง่ายๆ โดยที่ไม่ต้องเขียน Breakpoint เลยมีคนแนะนำให้เขียน Tutorial ของ Bootstrap ขึ้นมานั่นเอง

Twitter Bootstrap คืออะไร ?

นั่นดิ มันคืออะไร ? เอาจริงๆ ใช้มาตั้งนานก็ยังไม่รู้เลยว่า สรุปแล้ว เราจะให้คำนิยามว่ามันเป็นอะไรดี แต่ถ้าเอาตามที่เจ้าของเขียนไว้ในเว็บว่ามันเป็น HTML, CSS, JS Framework หรือเรียกอีกอย่างว่า Front end Framework

Front end Framework คืออะไร ?

เราจับมันแยกทีล่ะคำเลยดีกว่า ก่อนอื่นคำว่า Front end มันคือส่วนหน้าบ้านของเรา หรือว่า เป็นส่วนที่ User ของเราจะมองเห็นนั่นเอง ส่วนอีกคำ Framework มันเหมือนกับกรอบการทำงาน ถ้าสมมุติว่าเราไม่มี Framework เหมือนเมื่อก่อน พอหลายๆ คนเขียนโปรแกรมด้วยกัน ปัญหาที่จะเกิดขึ้นเลยคือ คนนึงก็เขียนอีกแบบนึง อีกคนก็เขียนอีกแบบนึง ทะเลาะกันตายเลย เพราะฉะนั้น Framework จึงเข้ามาช่วยให้เราทำงานด้วยกันได้ง่ายขึ้น เป็นระบบมากขึ้นโดยการกำหนด ข้อกำหนดต่างๆ เข้าไป

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

หลายอย่างเลยแหละ ตั้งแต่ Grid System, Base Element หรือพวก Style ของ Tag พื้นฐานต่างๆ เช่นพวก Form อะไรแบบนี้, Components ต่างๆ เช่นพวก Navigation, Pagination เป็นต้น และสุดท้ายคือ JS ต่างๆ

มาติดตั้ง Bootstrap กัน

หลังจากที่เรารู้แล้วว่า Boostrap มันคืออะไร แล้วใช้ทำอะไร (ถ้าไม่รู้ก็กลับขึ้นไปอ่านข้างบนใหม่ ไล่แล้วไปชิ้วๆๆ) ถัดมาเราจะมาติดตั้งมันกัน
การใช้งาน Bootstrap นั้นไม่ยากเลย เพราะว่าเราแค่ Import มันเข้ามาในไฟล์หน้าเว็บของเราเพราะฉะนั้น เราสามารถติดตั้งเอาแบบง่ายๆ ได้อยู่ 2 วิธี

  • ติดตั้งปกติ - ให้เราเข้าไปโหลดตัวไฟล์ของ Bootstrap เข้ามาก่อน หลังจากที่เราแตกไฟล์ออกมาแล้ว เราจะได้ 3 Folders ออกมานั่นคือ css , js และก็ font และหลังจากที่เราได้ไฟล์ของ Bootstrap เข้ามาแล้ว เราก็ต้อง Import มันเข้ามาในหน้าเว็บของเรา พร้อมทั้ง Import jquery เข้ามาผ่าน CDN

วิธีนี้เหมาะสำหรับคนที่ต้องการ Custom ตัว Code ของ Bootstrap เพื่อให้มันทำงานได้ตามที่เราต้องการ

  • ผ่าน CDN หรือ Content Delivery Network - วิธีนี้ง่ายมากๆ แต่ Custom อะไรไม่ได้เลย เพราะเราไม่ต้องไปโหลดไฟล์ js และ css ของ Bootstrap ผ่านทาง CDN ได้เลย เพียงแค่เราเอา Code ตรงนี้เข้าไปแปะก็ใช้ได้เลย

สำหรับ EP ก็ขอจบเพียงเท่านี้ กำลังเริ่มสงสัยแล้วว่า Tutorial นี้จะยาวสักกี่ EP ดี ท่าทางจะเยอะ แต่ก็ช่างมันเถอะ EP ต่อไปจะเป็นเรื่องอะไรนั้นรอติดตามอ่านกันได้เลย!! และสำหรับใครที่อ่านมาแล้วยังไม่รู้จัก HTML, CSS และ JS แนะนำให้ไปอ่านล่วงหน้าก่อนมาอ่านพวกนี้นะ ไม่งั้น งง จริงจังมาก

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...