Bootstrap 3 ตอนที่ 5: Responsive เป็นเรื่องกล้วยๆ ด้วยทฤษฎี Grid system

เรื่อง Grid ถือเป็นเรื่องสำคัญมากของ Responsive ถ้าใครไม่เข้าใจแบบลึกซึ้งแล้วละก็ เตรียมพับเสื่อกลับบ้านได้เลย และไม่ใช่แต่ Bootstrap เท่านั้นไม่ว่า Framework ของค่ายไหนๆก็มี Grid System เช่นกัน นั่นไง…เห็นไม๊ละครับว่ามันสำคัญ

ในบทนี้ผมจึงสอนคอนเซปการทำงาน Grid ในเบื้องต้นให้เข้าใจพื้นฐาน ที่มาที่ไปของมัน และจากนั้นจึงจับรวมกลุ่มตามขนาดที่ต้องการ และสุดท้ายการวางซ้อน Grid

 

ผู้ที่สนใจ คอร์สเรียน DVD “ทำเว็บ Responsive ด้วย Bootstrap3 แบบมืออาชีพ” เนื้อหาอัดแน่น เต็มๆ
ดูรายละเอียด สั่งซื้อได้ที่นี่

Bootstrap 3 ตอนที่ 4: เปลี่ยนโลกที่ทุกคนมองข้าม Mobile first

สิ่งที่มาพร้อมกับการทำเว็บไซต์แบบ Responsive คือ Concept การทำ Mobile first ซึ่งเป็นส่วนสำคัญอย่างยิ่งกับการทำเว็บรองรับกับผู้ใช้ในยุคปัจจุบันและอนาคต แต่มีคนจำนวนน้อยมากที่จะเข้าใจเรื่องนี้อย่างแท้จริง จึงทำให้คนที่พยายามจะทำเว็บไซต์ Responsive ยังไม่ตอบสนองผู้ใช้งานได้อย่างเต็มประสิทธิภภาพ

ในบทนี้ผมจึงเล่าถึงสาเหตุที่คนทำเว็บยังติดภาพการทำเว็บรูปแบบเดิมๆ พร้อมทั้งยกตัวอย่างแนวคิดใหม่ ที่ประสบความสำเร็จ ให้ท่านผู้เรียนได้ปรับเปลี่ยนแนวคิด และเริ่มแนวคิดใหม่ได้อย่างถูกต้อง

 

 

Bootstrap 3 ตอนที่ 3: ห่อหุ้มเลย์เอาท์ไม่ให้กระจุยด้วย Container

Bootstrap ช่างรู้ใจได้เตรียมกล่องสำหรับควบคุมคอมเทนท์ในเว็บไซต์ (Container) ให้เราไว้ 2 แบบด้วยกัน คือ แบบความกว้างจำกัด (Fix width) และ แบบไม่จำกัดความกว้าง (Full width) ให้เราได้เลือกใช้ตามแต่สถานะการณ์ สำหรับบทนี้ผมสอนการใช้ไว้ทั้งสองแบบ แต่จะเจาะลึกไปทาง Fix width container มากหน่อย เพราะได้ใช้บ่อยกว่า

 

Bootstrap 3 ตอนที่ 2: เริ่มใช้งาน การ Install frame work

การจะใช้เขียนคำสั่ง ใช้งาน Framework Bootstrap ได้ เราก็จำเป็นต้องเริ่มต้นจากการ ลิงค์ไฟล์ต่างๆของ Bootstrap เข้ากับไฟล์ HTML ของเราให้เรียบร้อย กำหนดค่า HTML 5 และกำหนด meta View port ให้แสดงผลได้ถูกต้องบนอุปกรณ์มือถือ และสุดท้ายไปลืมทดสอบว่าเราได้ใช้คำสั่ง Bootstrap ได้แล้วจริงๆ

Bootstrap 3 ตอนที่ 1: Intro Bootstrap ช่วยให้การทำ Responsive เป็นเรื่องง่ายๆ

ก่อนจะเริ่มสอนการใช้งาน Bootstrap ทำเว็บกันจริงๆจัง ผมขอเกริ่นถึงที่มาที่ไปของการทำ Responsive และ Bootstrap ใครที่รู้จักมันผิวเผินจะได้มองภาพออกนะครับ

Responsive คืออะไร? ใครยังไม่เข้าใจจะได้เข้าใจการแปลงร่าง ไม่ใช่แต่ Transformer ที่แปลงร่างได้ เว็บไซต์ของเราก็สามารถทำให้แปลงร่างได้

Bootstrap คืออะไร?  นั่นสิแล้ว Bootstrap มันมาเกี่ยวอะไรกับ Responsive มันทำให้ชีวิตการเขียนโค๊ดเว็บไซต์ของคุณมีความสุขขนาดไหน มีค่ายอื่นอีกไม๊ แล้วทำไมต้องเลือกใช้มัน

Bootstrap ทำได้ทุกอย่างหรือไม่? ใช้งาน Bootstrap เป็นแล้วจะสามารถทำเว็บที่เป็น Responsive ได้ทุกอย่างหรือไม่ อะไรที่คุณต้องรู้เพิ่มเติม

Learn like pro หัวสมองของคุณมีค่า และก็มีหน่วยความจำกัดเหมือนคอมพิวเตอร์นั่นแหล่ะ มาหัดเรียนรู้กันแบบมืออาชีพเถอะ