Bootstrap Chapter 3: การสร้าง List Group

     List group เป็นส่วนประกอบที่สำคัญที่เราพบกันบ่อยในเว็บไซด์ โดยส่วนใหญ่เราจะใช้ List group กับพวกเมนูต่างๆ หรือข้อความที่แสดงในลักษณะที่เป็นแถวยาวๆ (คล้ายกับข่าวที่ฟีดบนทวิตเตอร์) ซึ่ง List group ที่ Bootstrap สร้างไว้ให้นั้นมีลูกเล่นที่หลากหลายไว้ให้เราได้ใช้งาน เช่น การแสดงข้อความลักษณะการแจ้งเตือนต่อจากเมนู (คล้ายกับการแสดงจำนวนตัวเลขของจดหมายที่ยังไม้ได้อ่านบนอีเมลล์)

Read More

Bootstrap Chapter 3: การสร้าง Thumbnails

     ปกติถ้าเราต้องการย่อขนาดของรูป (Thumbnail) ที่เรานำเสนอบนเว็บไซด์ให้เข้ากับตำแหน่งที่เราเตรียมไว้ เราต้องกำหนดขนาดพิกเซลให้กับขนาดของรูป หรือเราจำเป็นที่ต้องเปลี่ยนแปลง (re-size) ขนาดรูปภาพด้วยโปรแกรมต่าง เพื่อให้มีขนาดพอดีกับตำแหน่งที่เราได้จัดเตรียมไว้  แต่ถ้าเราใช้ Bootstrap การย่อขนาดของรูปให้มีความเหมาะสมกับขนาดที่เราได้จัดเตรียมไว้ก็จะมีความง่ายมากยิ่งขึ้น นอกจากนี้ Bootstrap ยังตกแต่งรูปที่ถูกย่อขนาดให้มีความสวยงาม ด้วยการใส่กรอบรูป และใส่เอฟเฟกต์โดยการเปลี่ยนสีกรอบเป็นสีน้ำเงิน เมื่อรูปภาพนั้นถูกนั้นเมาส์ไปชี้

Read More

Bootstrap Chapter 3: การสร้าง Media Object

   
     Media Object เป็นส่วนประกอบที่สำคัญอีกส่วนหนึ่งบนเว็บไซด์ที่มีลักษณะคล้ายคลึงกับกล่องข้อความ ซึ่ง Media Object ได้ถูกนำไปประยุกต์ใช้อย่างแพร่หลาย เช่น การแสดงรูปภาพและเนื้อหาของข่าว หรือการแสดงข้อความในส่วนของคอมเม้นต์บนเว็บบอร์ดต่างๆ เป็นต้น โดยปกติกว่าที่เราจะสร้างกล่องข้อความที่มีทั้งเนื้อหาและรูปภาพได้อย่างสวยงามนั้นอาจต้องใช้เวลานาน แต่เมื่อเราใช้ฟิวเจอร์ของ Bootstrap นั้นจะช่วยให้เราประหยัดเวลาในการพัฒนาเว็บไซด์ไปได้มาก

Read More