รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การจัดการรูปภาพด้วย Bootstrap

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

    การสร้าง Thumbnail บน Bootstrap


    <a href="#" class="thumbnail">
     <img src="xxxxx" />
    </a>
     
    การทำ Responsive ให้กับรูปภาพ
    การทำให้ภาพสามารถปรับเปลี่ยนขนาดได้เองอัตโนมัติตามการเปลี่ยนแปลงของขนาดหน้าจอ สามารถทำได้โดยการใส่คลาส .img-responsive เข้าไป

    การใส่ข้อความอธิบาย (caption) ในแต่ละภาพ

    <a href="#" class="thumbnail">
     <img src="xxxxx" />
    </a>

    <div class="caption">
      <h3>ข้อความอธิบาย</h3>  
    </div>

    การแต่งกรอบรูปภาพ
    มี 3 รูปแบบด้วยกัน คือ .img-rounded, .img-circle และ .img-thumbnail ตัวอย่างการใช้งาน

    โครสร้างของคลาสสำหรับรูปภาพ
    1. <img src="..." class="img-rounded">
    2. <img src="..." class="img-circle">
    3. <img src="..." class="img-thumbnail">
     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com