รับทําเว็บไซต์ รับทํา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