Bootstrap 3: การสร้าง Navs

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

Read More

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

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

     พาเนล (Panel) บน Bootstrap เป็นส่วนที่ใช้แสดงผลข้อความหรือรูปภาพในกล่องข้อความ ที่มีลักษณะเป็นสี่เหลี่ยม โดยขั้นตอนการสร้างพาเนลมีขั้นตอนที่ง่ายมากดังต่อไปนี้

Read More

Bootstrap Chapter 2 Grid System บน Bootstrap ตอน การจัดเรียงลำดับคอลัมน์

     ในบทเรียนก่อนหน้านี้เราได้เรียนรู้วิธีการจัดการ Grid System บน Bootstrap 3 ไปแล้วพอสมควร ได้วันนี้เราจะมาทำความรู้จักกับอีกหนึ่งฟังก์ชั่นพื้นฐานของ Grid System นั้นคือการจัดเรียงลำดับคอลัมน์ โดยการจัดเรียงคอลัมน์บน Grid System นั้นก็เหมือนการจัดเยื้องซ้าย หรือเยื้องขวาบน MS Word นั้นเอง ซึ่งจะช่วยให้การจัดวางเนื้อหาบนเว็บไซด์นั้นมีความสวยงามมากยิ่งขึ้น

Read More

Bootstrap Chapter 2: Grid System บน Bootstrap ตอน การสร้างบล๊อกด้วย Grid System

     หลังจากได้เรียนนรู้วิธีสร้าง Grid System โดยใช้ Bootstrap เรียบร้อยแล้ว วันนี้เราจะมาลองสร้างบล๊อกแบบง่ายๆ ที่รองรับการแสดงผลบนคอมพิวเตอร์ แท๊บแล๊ตและมือถือ โดยรูปแบบของบล๊อกที่เราจะพัฒนาเพื่อรองรับการแสดงผลบนอุปกรณ์ดังกล่าวแสดงในรูปที่ 1, 2และ 3 ตามลำดับ

Read More