โดย tai14 » 23/08/2018 1:53 pm
ในการสร้างหน้า
เว็บไซต์ต่าง ทุกเว็บไซต์นอกจากเนื้อหาข้อมูลของเว็บไซต์แล้ว จะต้องมี
การใส่รูปภาพเป็นซึ่งเป็นองค์ประกอบที่สำคัญในหน้าเว็บเพื่อเพิ่มความน่าสนใจและสื่อความหมายได้ชัดเจนมากกว่าการใส่ข้อความเพียงอย่างเดียว การใส่รูปภาพในหน้าเว็บสามารถใส่ได้หลายรูปทรง โดยจะนำเอา
Bootstrap มาใช้ในการช่วยเปลี่ยนรูปทรงของรูปภาพ สามารถทำได้ดังนี้
1.copy ภาพที่ต้องการใช้จากโฟลเดอร์
- 180823130452-Z224.jpg (28 KiB) Viewed 4774 times
2.วางภาพลงในโฟลเดอร์ img
- 180823131541-6134.jpg (14.3 KiB) Viewed 4774 times
จะได้ไฟล์มาอยู่ในโฟลเดอร์ img
- 180823131519-dDU4.jpg (14.54 KiB) Viewed 4774 times
3.ใส่ภาพที่มีรูปทรงต้นฉบับเดิม ให้ลากไฟล์ภาพมาใส่ภายในโค้ดส่วนของ <body>
- 180823131447-BWHQ.jpg (13.9 KiB) Viewed 4774 times
4.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมและขอบมนให้ใส่โค้ดด้านล่างนี้
โค้ด: เลือกทั้งหมด
<img src="img/f.jpg" class="img-rounded" alt=""/>
- 180823130543-536M.jpg (19.61 KiB) Viewed 4774 times
5.ใส่ภาพที่มีรูปทรงวงรีให้ใส่โค้ดด้านล่างนี้
โค้ด: เลือกทั้งหมด
<img src="img/f.jpg" class="img-circle" alt=""/>
- 180823130514-4Cx7.jpg (21.27 KiB) Viewed 4774 times
ุ6.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมแต่มีขอบสีขาวคล้ายภาพโพลารอยด์ให้ใส่โค้ดด้านล่างนี้
โค้ด: เลือกทั้งหมด
<img src="img/f.jpg" class="img-polaroid" alt=""/>
- 180823131616-b614.jpg (14.4 KiB) Viewed 4774 times
ในการสร้างหน้า[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2443-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%881-%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-html-%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2.html]เว็บไซต์[/url]ต่าง ทุกเว็บไซต์นอกจากเนื้อหาข้อมูลของเว็บไซต์แล้ว จะต้องมี[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2454-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-11-html-images.html]การใส่รูปภาพ[/url]เป็นซึ่งเป็นองค์ประกอบที่สำคัญในหน้าเว็บเพื่อเพิ่มความน่าสนใจและสื่อความหมายได้ชัดเจนมากกว่าการใส่ข้อความเพียงอย่างเดียว การใส่รูปภาพในหน้าเว็บสามารถใส่ได้หลายรูปทรง โดยจะนำเอา [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/4884-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B8%A2%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%83%E0%B8%99-bootstrap-%E0%B8%9A%E0%B8%B9%E0%B8%98%E0%B8%AA%E0%B9%81%E0%B8%97%E0%B8%A3%E0%B9%87%E0%B8%9B.html]Bootstrap[/url] มาใช้ในการช่วยเปลี่ยนรูปทรงของรูปภาพ สามารถทำได้ดังนี้
1.copy ภาพที่ต้องการใช้จากโฟลเดอร์
[attachment=6]180823130452-Z224.jpg[/attachment]
2.วางภาพลงในโฟลเดอร์ img
[attachment=5]180823130514-4Cx7.jpg[/attachment]
จะได้ไฟล์มาอยู่ในโฟลเดอร์ img
[attachment=4]180823130543-536M.jpg[/attachment]
3.ใส่ภาพที่มีรูปทรงต้นฉบับเดิม ให้ลากไฟล์ภาพมาใส่ภายในโค้ดส่วนของ <body>
[code] <img src="img/f.jpg" alt=""/>[/code]
[attachment=3]180823131447-BWHQ.jpg[/attachment]
4.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมและขอบมนให้ใส่โค้ดด้านล่างนี้
[code]<img src="img/f.jpg" class="img-rounded" alt=""/>[/code]
[attachment=2]180823131519-dDU4.jpg[/attachment]
5.ใส่ภาพที่มีรูปทรงวงรีให้ใส่โค้ดด้านล่างนี้
[code]<img src="img/f.jpg" class="img-circle" alt=""/>[/code]
[attachment=1]180823131541-6134.jpg[/attachment]
ุ6.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมแต่มีขอบสีขาวคล้ายภาพโพลารอยด์ให้ใส่โค้ดด้านล่างนี้
[code]<img src="img/f.jpg" class="img-polaroid" alt=""/>[/code]
[attachment=0]180823131616-b614.jpg[/attachment]