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...

การสร้าง SSD Storage Pool บน Synology DSM

การสร้าง SSD Storage Pool บน Synology DSM

สำหรับคนที่ใช้ Synology NAS บางรุ่นจะมีช่อง M.2 สำหรับเสียบ NVMe SSD โดยพื้นฐาน Synology บอกว่ามันสำหรับการทำ Cache แต่ถ้าเราต้องการเอามันมาทำเป็น Storage ละ มันจะทำได้มั้ย วันนี้เราจะมาเล่าวิธีการทำกัน...

Multiprogramming, Multiprocessing และ Multithreading

Multiprogramming, Multiprocessing และ Multithreading

หลังจากที่เรามาเล่าเรื่อง malloc() มีคนอยากให้มาเล่าเรื่อง pthread เพื่อให้สามารถยัด Content ที่ละเอียด และเข้าใจง่ายในเวลาที่ไม่นานเกินไป เลยจะมาเล่าพื้นฐานที่สำคัญของคำ 3 คำคือ Multiprogramming, Multitasking, Multiprocessing และ Multithreading...

Synology NAS และ SSD Cache จำเป็นจริง ๆ เหรอ เหมาะกับระบบแบบใด

Synology NAS และ SSD Cache จำเป็นจริง ๆ เหรอ เหมาะกับระบบแบบใด

ใน Synology NAS มีความสามารถนึงที่น่าสนใจคือ การใช้ SSD เป็น Cache สำหรับระบบ ที่ทำให้ Performance ในการอ่านเขียน เร็วขึ้นกว่าเดิมมาก ๆ แน่นอนว่า เราลองละ วันนี้เราจะมาเล่าให้อ่านกันว่า หากใครคิดที่จะทำ มันเหมาะ หรือ ไม่เหมาะกับการใช้งานของเรา...

ฮาวทูย้าย Synology Add-on Package ไปอีก Volume

ฮาวทูย้าย Synology Add-on Package ไปอีก Volume

เรื่องราวเกิดจากการที่เราต้องย้าย Add-on Package ใน DSM และคิดว่าหลาย ๆ คนน่าจะต้องประสบเรื่องราวคล้าย ๆ กัน วันนี้เราจะมาเล่าวิธีการว่า เราทำยังไง เจอปัญหาอะไร และ แก้ปัญหาอย่างไรให้ได้อ่านกัน...