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

     การสร้างโครงสร้างของเว็บเพจบนเว็บไซด์ของเรา หรือบางคนเรียกเรียกว่าการทำแผนที่เว็บไซด์ (Site map) บางคนนั้นถือเป็นเรื่องที่น่าปวดหัวเป็นอย่างมาก แต่สำหรับใน Bootstrap 3 แล้วถือว่าเป็นเรื่องที่ง่ายอย่างมาก เพราะ  Bootstrap ได้มีการสร้างฟังก์ชั้นที่สนับสนุนการสร้างแผนที่เว็บไซด์ โดยการเรียกใช้  Breadcrumb นั้นเอง

Read More

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

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

Read More

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