วันเสาร์ที่ 21 มิถุนายน พ.ศ. 2557

[SMF] How to SMF Responsive ตอนที่ 1 Bootstrap

อย่างที่ได้เกริ่นนำเมื่อบทความที่แล้วว่า ผมจะใช้  Bootstrap Framework  มาพัฒนา SMF  ให้เป็น Responsive ติดปีกให้บอร์ดธรรมดากลายเป็นบอร์ดที่สามารถพกพาไปได้บนมือถือ


ผมจะไม่ขอพูดถึง Bootstrap เพราะมีการเขียนไว้ค่อนข้างเยอะมากแล้ว แนะนำสำหรับท่านต้องการความรู้เกี่ยวกับ Bootstrap ให้คลิกเข้าไปอ่านที่นี่ได้เลย  http://www.siamhtml.com/bootstrap- คืออะไร-สอนวิธีใช้

หลังจากท่านดาวน์โหลด Bootstrap มาเรียบร้อยแล้ว ทีนี้มาเริ่มเข้าสู่กระบวนการติดปีกให้บอร์ดกันได้เลย

ขั้นตอนที่ 1 กรณีท่านยังไม่มีบอร์ด smf เลย ก็ให้ติดตั้ง หรือท่านที่มีบอร์ดเก่าอยู่แล้ว มีข้อมูลอยู่แล้ว ก็ไม่มีปัญหา การพัฒนาธีม จะไม่กระทบกับข้อมูลหลักแต่อย่างใดครับ

ขั้นตอนที่ 2  สร้างธีม smf ขึ้นมาใหม่เลย

ตามภาพ หลังจากคลิกสร้างธีม เราจะได้ธีมใหม่ ชื่อว่า Bootsrap คลิกย้อนกลับ และเลือกธีมที่พึ่งสร้างใหม่นั้นใช้งาน (อ่านวิธีการสร้างธีมใหม่โดยละเอียด คลิกที่นี่)

ในโฟลเดอร์ \Themes\  จะมีโฟลเดอร์สำหรับธีมใหม่ คือ Bootstrap

ขั้นตอนที่ 3 ไปเลือกเอาธีมของ Bootsrap มาใช้งาน ผมเลือกธีมชื่อ  Jumbotron มาใช้งาน


ธีมที่จินตนาการไว้คร่าวๆ  คือ
- แทบเมนูด้านบนเป็น  Nav Fixed  สีดำ
- มีฟอร์มสำหรับล็อกอิน
- หลังจากล็อกอินแล้วฟอร์มจะหายไป เป็นเมนูของบอร์ดแทน

ให้ก็อปปี้ Bootsrap  Framework มาไว้ในโฟลเดอร์ธีม  SMF\Themes\Bootsrap\ 

ถึงตอนนี้ เราได้เตรียมพร้อมข้อมูลในฝั่งของ SMF  และ Bootsrap ไว้เรียบร้อยแล้ว ในบทต่อไปจะได้เข้าสู่ขบวนการปรับเปลี่ยนโครงสร้าง  SMF  ให้เป็น Bootsrap .

สรุป
ถึงตอนนี้มีสิ่งที่ท่านต้องรู้ ดังนี้
1. Responsive  คืออะไร?
2. Bootsrap Framework  คืออะไร?
3. การติดตั้งธีม SMF  ใหม่  ทำอย่างไร?

ถ้าท่านเข้าใจทั้ง 3 ข้อนี้ดีแล้ว จึงค่อยปฏิบัติตามบทที่ 2 ต่อไป
หากว่ายังไม่เข้าใจ อ่านใหม่ อ่านซ้ำ หรือหาความรู้เพิ่่มเติมอีกหน่อยครับ 



ไม่มีความคิดเห็น:

แสดงความคิดเห็น